92 frontend refinements, clickable logo

frontend/src/view/AdditionalModules.vue

@@ -85,13 +85,13 @@ function unselectModule(event: DataTableRowUnselectEvent) {
 </script>
 
 <template>
-  <div class="flex flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
+  <div class="flex flex-column align-items-center w-full">
+    <div class="flex align-items-center justify-content-center m-2">
       <h3>
         {{ $t("additionalModules.subTitle") }}
       </h3>
     </div>
-    <div class="card flex align-items-center justify-content-center m-2">
+    <div class="m-2 lg:w-10 w-full">
       <DynamicDialog />
       <DataTable
         v-model:filters="filters"
@@ -116,7 +116,6 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         :show-gridlines="true"
         :striped-rows="true"
         :select-all="false"
-        class="w-10"
         @row-select="selectModule"
         @row-unselect="unselectModule"
       >
@@ -184,13 +183,14 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         </template>
       </DataTable>
     </div>
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
+    <div class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10">
       <Button 
         :disabled="store.isEmpty()"
         @click="nextStep()"
-      >{{
-        $t("additionalModules.nextStep")
-      }}</Button>
+        class="md:col-4 justify-content-center mb-3 align-self-end"
+        icon="pi pi-arrow-right"
+        :label="$t('additionalModules.nextStep')"
+      />
     </div>
   </div>
 </template>

frontend/src/view/CourseSelection.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import { computed, ComputedRef, Ref, ref, watch } from "vue";
+import {
+  fetchCourse,
+  fetchModulesByCourseAndSemester,
+} from "../api/fetchCourse";
+import ModuleSelection from "../components/ModuleSelection.vue";
+import { Module } from "../model/module.ts";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });
+
+const courses = async () => {
+  return await fetchCourse();
+};
+
+const selectedCourse: Ref<{ name: string }> = ref({ name: "" });
+const countries: Ref<{ name: string }[]> = ref([]);
+const semesters: ComputedRef<{ name: string; value: string }[]> = computed(
+  () => [
+    { name: t("courseSelection.winterSemester"), value: "ws" },
+    { name: t("courseSelection.summerSemester"), value: "ss" },
+  ],
+);
+
+const selectedSemester: Ref<{ name: string; value: string }> = ref(
+  semesters.value[0],
+);
+
+//if semesters get changed, refresh the selected semester ref with a watcher
+watch(
+  semesters,
+  (newValue: { name: string; value: string }[]) =>
+    (selectedSemester.value =
+      newValue[selectedSemester.value.value === "ws" ? 0 : 1]),
+);
+
+courses().then(
+  (data) =>
+    (countries.value = data.map((course) => {
+      return { name: course };
+    })),
+);
+
+const modules: Ref<Module[]> = ref([]);
+
+async function getModules() {
+  modules.value = await fetchModulesByCourseAndSemester(
+    selectedCourse.value.name,
+    selectedSemester.value.value,
+  );
+}
+</script>
+
+<template>
+  <div 
+    class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0"
+    :class="{'md:mt-8': modules.length === 0}"
+  >
+    <div class="flex align-items-center justify-content-center gap-2 mx-2">
+      <h3 class="text-4xl">
+        {{ $t("courseSelection.headline") }}
+      </h3>
+      <i
+        class="pi pi-calendar"
+        style="font-size: 2rem"
+      ></i>
+    </div>
+    <div
+      class="flex justify-content-center"
+    >
+      <h5 class="text-2xl m-2">{{ $t("courseSelection.subTitle") }}</h5>
+    </div>
+    <div
+      class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8"
+    >
+      <Dropdown
+        v-model="selectedCourse"
+        :options="countries"
+        class="flex-1 m-0"
+        filter
+        option-label="name"
+        :placeholder="$t('courseSelection.courseDropDown')"
+        :empty-message="$t('courseSelection.noCoursesAvailable')"
+        :auto-filter-focus="true"
+        @change="getModules()"
+      ></Dropdown>
+      <Dropdown
+        v-model="selectedSemester"
+        :options="semesters"
+        class="flex-1 m-0"
+        option-label="name"
+        :placeholder="$t('courseSelection.semesterDropDown')"
+        @change="getModules()"
+      ></Dropdown>
+    </div>
+    <ModuleSelection
+      :modules="modules"
+      class="lg:w-8"
+    />
+  </div>
+</template>

frontend/src/view/EditCalendarView.vue

@@ -66,36 +66,39 @@ function loadCalendar(): void {
 </script>
 
 <template>
-  <div class="flex flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem mt-2">
+  <div class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out md:mt-8">
+    <div class="flex align-items-center justify-content-center gap-2 mx-2">
       <h3 class="text-4xl">
         {{ $t("editCalendarView.headline") }}
-        <i
-          class="pi pi-pencil vertical-align-baseline ml-2"
-          style="font-size: 2rem"
-        ></i>
       </h3>
+      <i
+        class="pi pi-pencil"
+        style="font-size: 2rem"
+      ></i>
     </div>
     <div
-      class="flex align-items-center justify-content-center h-4rem border-round"
+      class="flex justify-content-center"
     >
-      <p class="text-2xl">{{ $t("editCalendarView.subTitle") }}</p>
+      <p class="text-2xl m-2">{{ $t("editCalendarView.subTitle") }}</p>
     </div>
     <div
-      class="flex align-items-center justify-content-center border-round m-2"
+      class="flex align-items-center justify-content-center m-4 w-full lg:w-8"
     >
       <InputText
         v-model="token"
         type="text"
+        class="w-full"
         autofocus
         @keyup.enter="loadCalendar"
       />
     </div>
     <div
-      class="flex align-items-center justify-content-center border-round m-2"
+      class="flex align-items-center justify-content-end m-2 w-full lg:w-8"
     >
       <Button
         :label="$t('editCalendarView.loadCalendar')"
+        icon="pi pi-arrow-down"
+        class="col-12 md:col-4 mb-3 align-self-end"
         @click="loadCalendar"
       />
     </div>