Merge pull request #105 from HTWK-Leipzig/92-frontend-changes

92 frontend changes

frontend/src/App.vue

@@ -3,15 +3,25 @@ import MenuBar from "./components/MenuBar.vue";
 import {RouteRecordName, RouterView} from "vue-router";
 import CalendarPreview from "./components/CalendarPreview.vue";
 import moduleStore from "./store/moduleStore.ts";
+import { provide, ref } from "vue";
 
 const disabledPages = ["room-finder", "faq", "imprint", "privacy-policy", "edit", "edit-calendar"];
 
 const store = moduleStore();
+const mobilePage = ref(true);
+provide("mobilePage", mobilePage);
 
 const isDisabled = (routeName: RouteRecordName | null | undefined) => {
   return !disabledPages.includes(routeName as string) && store.modules.size > 0
 };
 
+const updateMobile = () => {
+  mobilePage.value = window.innerWidth <= 992;
+};
+
+updateMobile();
+
+window.addEventListener("resize", updateMobile);
 </script>
 
 <template>

frontend/src/components/CalendarLink.vue

@@ -80,9 +80,9 @@ const actions = computed(() => [
 
 <template>
 
-  <div class="flex flex-column">
+  <div class="flex flex-column mt-8">
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
+    <div class="flex align-items-center justify-content-center m-2">
-      <h2>
+      <h2 class="text-base md:text-2xl">
         {{ getLink() }}
       </h2>
     </div>

frontend/src/components/CalendarPreview.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { Ref, computed, ref } from "vue";
+import { Ref, computed, inject, ref } from "vue";
 import moduleStore from "../store/moduleStore";
 import { useI18n } from "vue-i18n";
 
 const dialogVisible: Ref<boolean> = ref(false);
-const mobilePage = ref(true);
+const mobilePage = inject("mobilePage") as Ref<boolean>;
 const { t } = useI18n({ useScope: "global" });
 
 const store = moduleStore();
@@ -26,13 +26,6 @@ const columns = computed(() => [
   { field: "Module", header: t("calendarPreview.module") },
 ]);
 
-const updateMobile = () => {
-  mobilePage.value = window.innerWidth <= 992;
-};
-
-updateMobile();
-
-window.addEventListener("resize", updateMobile);
 </script>
 
 <template>
@@ -77,6 +70,7 @@ window.addEventListener("resize", updateMobile);
         icon="pi pi-calendar"
         :label="$t('calendarPreview.preview')"
         class="p-button-rounded p-button-primary"
+        raised
         @click="dialogVisible = true"
       />
     </template>

frontend/src/components/FaqPage.vue

@@ -2,7 +2,7 @@
 
 <template>
   <div class="flex align-items-center justify-content-center flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
+    <div class="flex align-items-center justify-content-center m-2">
       <h1>{{ $t("faqView.headline") }}</h1>
     </div>
 
@@ -216,4 +216,13 @@
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.grid > .col {
+  flex-basis: 15rem;
+}
+
+.grid > .col:first-child {
+  font-weight: bold;
+}
+
+</style>

frontend/src/components/ModuleInformation.vue

@@ -1,12 +1,16 @@
 <script lang="ts" setup>
-import { inject } from "vue";
+import { Ref, inject } from "vue";
 import { Module } from "../model/module.ts";
 import { Event } from "../model/event.ts";
 import moment from "moment-timezone";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n({ useScope: "global" });
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const dialogRef = inject("dialogRef") as any;
 const module = dialogRef.value.data.module as Module;
+const mobilePage = inject("mobilePage") as Ref<boolean>;
 
 // formats 2023-10-26 11:45:00.000Z to DD-MM-YYYY HH:MM
 function formatTimestamp(timestampString: string): string {
@@ -25,6 +29,12 @@ function sortModuleEventsByStart(events: Event[]) {
     return a.start.localeCompare(b.start);
   });
 }
+
+function formatWeekday(weekday: string) {
+  const template = "moduleInformation.weekday." + weekday;
+  const translation = t(template);
+  return translation !== template ? translation : weekday;
+}
 </script>
 
 <template>
@@ -44,8 +54,10 @@ function sortModuleEventsByStart(events: Event[]) {
         <td>
           <div class="card">
             <DataTable
+              v-if="!mobilePage"
               :value="sortModuleEventsByStart(module.events)"
               table-style="min-width: 50rem"
+              :size="mobilePage ? 'small' : 'large'"
             >
               <Column
                 field="day"
@@ -74,6 +86,56 @@ function sortModuleEventsByStart(events: Event[]) {
                 :header="$t('moduleInformation.week')"
               ></Column>
             </DataTable>
+            <DataView
+              v-else
+              :value="sortModuleEventsByStart(module.events)"
+              :data-key="module.name"
+              layout="grid"
+              >
+              <template #grid="slotProps">
+                <div class="col-12 sm:col-6 p-1">
+                  <Card class="border-2 surface-border border-round surface-card">
+                    <template #title>
+                      <Badge 
+                        :value="slotProps.data.eventType"
+                        :severity="slotProps.data.eventType === 'V' ? 'success' : 'warning'"
+                        class="flex-shrink-0 flex-grow-0"
+                      />
+                    </template>
+                    <template #content>
+                      <div class="flex flex-row gap-4 flex-wrap">
+                        <div class="flex flex-column">
+                          <div class="mr-2">{{ formatWeekday(slotProps.data.day) }}</div>
+                          <div class="mr-2">{{ $t("moduleInformation.nthWeek", {count: slotProps.data.week}) }}</div>
+                        </div>
+                        <div class="flex flex-column">
+                          <table>
+                            <tr>
+                              <td class="mr-2">
+                                <b>{{ $t("moduleInformation.start") }}:</b>
+                              </td>
+                              <td>{{ formatTimestamp(slotProps.data.start) }}</td>
+                            </tr>
+                            <tr>
+                              <td class="mr-2">
+                                <b>{{ $t("moduleInformation.end") }}:</b>
+                              </td>
+                              <td>{{ formatTimestamp(slotProps.data.end) }}</td>
+                            </tr>
+                            <tr>
+                              <td class="mr-2">
+                                <b>{{ $t("moduleInformation.room") }}:</b>
+                              </td>
+                              <td>{{ slotProps.data.rooms }}</td>
+                            </tr>
+                          </table>
+                        </div>
+                      </div>
+                    </template>
+                  </Card>
+                </div>
+              </template>
+            </DataView>
           </div>
         </td>
       </tr>

frontend/src/components/ModuleSelection.vue

@@ -10,9 +10,14 @@ const props = defineProps({
     type: Array as PropType<Module[]>,
     required: true,
   },
+  selectedCourse: {
+    type: String as PropType<string>,
+    required: true,
+  },
 });
 
 const modules : ComputedRef<Module[]> = computed(() => props.modules);
+const selectedCourse : ComputedRef<string> = computed(() => props.selectedCourse);
 
 store.modules.clear();
 
@@ -54,22 +59,22 @@ function nextStep() {
       :value="modules"
       data-key="uuid"
       :class="
-        [modules.length === 0? 
+        [selectedCourse === ''? 
           ['opacity-0', 'pointer-events-none'] : 
           ['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
         ,
         'w-full']"
       >
       <template #header>
-        <div class="flex justify-content-between align-items-center flex-wrap">
+        <div class="flex justify-content-between align-items-center flex-wrap md:mx-4">
             <h3>
               {{ $t("moduleSelection.modules") }} -
               {{ store.countModules() }}
             </h3>
-          <div class="flex flex-1 align-items-center justify-content-end white-space-nowrap">
+          <div class="flex align-items-center justify-content-end white-space-nowrap">
-            {{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}
+            <p>{{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}</p>
             <InputSwitch
-              class="mx-4"
+              class="mx-2"
               :disabled="modules.length === 0"
               :model-value="allSelected"
               @update:model-value="toggleAllModules()"
@@ -84,7 +89,7 @@ function nextStep() {
       </template>
       <template #list="slotProps">
         <div class="col-12">
-          <div class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2">
+          <div class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2 md:mx-4">
             <p class="text-lg flex-1 align-self-stretch">{{ slotProps.data.name }}</p>
             <ToggleButton
               class="w-9rem align-self-end my-2"

frontend/src/components/ModuleTemplateDialog.vue

@@ -32,7 +32,7 @@ const placeholders = computed(() => [
 <template>
   <Button
     icon="pi pi-info"
-    class="m-2 small-button"
+    class="m-2 small-button flex-shrink-0"
     severity="help"
     rounded
     outlined
@@ -42,6 +42,7 @@ const placeholders = computed(() => [
   />
   <Dialog
     v-model:visible="helpVisible"
+    class="w-full md:w-auto"
     :header="$t('moduleTemplateDialog.moduleConfiguration')"
   >
     <p>

frontend/src/components/RenameModules.vue

@@ -3,7 +3,7 @@ import moduleStore from "../store/moduleStore.ts";
 import { createIndividualFeed } from "../api/createFeed.ts";
 import router from "../router";
 import tokenStore from "../store/tokenStore.ts";
-import { computed, ref } from "vue";
+import { Ref, computed, inject, ref } from "vue";
 import ModuleTemplateDialog from "./ModuleTemplateDialog.vue";
 import { onlyWhitespace } from "../helpers/strings.ts";
 import { useI18n } from "vue-i18n";
@@ -18,6 +18,7 @@ const tableData = ref(
     };
   }),
 );
+const mobilePage = inject("mobilePage") as Ref<boolean>;
 
 const columns = computed(() => [
   { field: "Course", header: t("moduleInformation.course") },
@@ -33,23 +34,25 @@ async function finalStep() {
 </script>
 
 <template>
-  <div class="flex flex-column">
+  <div class="flex flex-column align-items-center mb-7">
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
+    <div class="flex align-items-center justify-content-center m-2 gap-2">
       <h3>{{ $t("renameModules.subTitle") }}</h3>
-      <ModuleTemplateDialog />
+      <ModuleTemplateDialog class=""/>
     </div>
-    <div class="card flex align-items-center justify-content-center m-2">
+    <div class="w-full lg:w-8 flex flex-column">
+      <div class="card flex align-items-center justify-content-center my-2">
         <DataTable
           :value="tableData"
           edit-mode="cell"
           table-class="editable-cells-table"
           responsive-layout="scroll"
+          :size="mobilePage ? 'small' : 'large'"
+          class="w-full"
         >
           <template #header>
-          <div class="flex align-items-center justify-content-end">
+            <div class="flex align-items-center justify-content-end flex-wrap gap-2 px-2">
               {{ $t("renameModules.enableAllNotifications") }}
               <InputSwitch
-              class="mx-4"
                 :model-value="
                   tableData.reduce(
                     (acc, curr) => acc && curr.Module.reminder,
@@ -80,7 +83,7 @@ async function finalStep() {
               </template>
               <template v-else-if="field === 'Reminder'">
                 <Button
-                :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
+                  icon="pi pi-bell"
                   :severity="data.Module.reminder ? 'warning' : 'secondary'"
                   rounded
                   outlined
@@ -103,7 +106,7 @@ async function finalStep() {
               </template>
               <template v-else-if="field === 'Reminder'">
                 <Button
-                :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
+                  icon="pi pi-bell"
                   :severity="data.Module.reminder ? 'warning' : 'secondary'"
                   rounded
                   outlined
@@ -119,8 +122,13 @@ async function finalStep() {
         </DataTable>
       </div>
 
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
+      <Button
-      <Button @click="finalStep()">{{ $t("renameModules.nextStep") }}</Button>
+        :disabled="store.isEmpty()"
+        class="col-12 md:col-4 mb-3 align-self-end"
+        @click="finalStep()"
+        icon="pi pi-save"
+        :label="$t('renameModules.nextStep')"
+      />
     </div>  
   </div>
 </template>

frontend/src/components/editCalendar/EditModules.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, Ref, ref } from "vue";
+import { computed, inject, Ref, ref } from "vue";
 import { Module } from "../../model/module.ts";
 import moduleStore from "../../store/moduleStore";
 import { fetchAllModules } from "../../api/fetchCourse.ts";
@@ -25,6 +25,7 @@ const tableData = computed(() =>
     };
   }),
 );
+const mobilePage = inject("mobilePage") as Ref<boolean>;
 
 const columns = computed(() => [
   { field: "Course", header: t("moduleInformation.course") },
@@ -82,20 +83,22 @@ async function deleteFeed() {
 </script>
 
 <template>
-  <div class="flex flex-column card-container lg:mx-8 mt-2">
+  <div class="flex flex-column align-items-center mb-7">
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
+    <div class="flex align-items-center justify-content-center m-2 gap-2">
       <h3>{{ $t("renameModules.subTitle") }}</h3>
       <ModuleTemplateDialog />
     </div>
+    <div class="w-full lg:w-8 flex flex-column">
       <div
-      class="card flex align-items-center justify-content-center border-round m-2"
+        class="card flex align-items-center justify-content-center my-2"
       >
         <DataTable
           :value="tableData"
           edit-mode="cell"
           table-class="editable-cells-table"
           responsive-layout="scroll"
-        class="w-full lg:w-8"
+          :size="mobilePage ? 'small' : 'large'"
+          class="w-full"
         >
           <template #header>
             <div class="flex align-items-center justify-content-end">
@@ -132,7 +135,7 @@ async function deleteFeed() {
               </template>
               <template v-else-if="field === 'Reminder'">
                 <Button
-                :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
+                  icon="pi pi-bell"
                   :severity="data.Module.reminder ? 'warning' : 'secondary'"
                   rounded
                   outlined
@@ -155,7 +158,7 @@ async function deleteFeed() {
               </template>
               <template v-else-if="field === 'Reminder'">
                 <Button
-                :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
+                  icon="pi pi-bell"
                   :severity="data.Module.reminder ? 'warning' : 'secondary'"
                   rounded
                   outlined
@@ -193,6 +196,7 @@ async function deleteFeed() {
         </DataTable>
       </div>
     </div>
+  </div>
   <div class="card flex justify-content-center">
     <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
       <template #header>

frontend/src/i18n/translations/de.json

@@ -44,13 +44,23 @@
     "end": "Ende",
     "room": "Raum",
     "type": "Art",
-    "week": "Woche"
+    "week": "Woche",
+    "nthWeek": "{count}. Woche",
+    "weekday": {
+      "Montag": "Montag",
+      "Dienstag": "Dienstag",
+      "Mittwoch": "Mittwoch",
+      "Donnerstag": "Donnerstag",
+      "Freitag": "Freitag",
+      "Samstag": "Samstag",
+      "Sonntag": "Sonntag"
+    }
   },
   "editCalendarView": {
     "error": "Fehler",
     "invalidToken": "Ungültiger Token",
     "headline": "Bearbeite deinen HTWKalender",
-    "subTitle": "Füge deinen Link oder Token ein um den Kalender zu bearbeiten",
+    "subTitle": "Füge deinen Link oder Token ein, um den Kalender zu bearbeiten.",
     "loadCalendar": "Kalender laden",
     "noCalendarFound": "Keinen Kalender gefunden",
     "save": "Speichern",

frontend/src/i18n/translations/en.json

@@ -44,7 +44,17 @@
     "end": "end",
     "room": "room",
     "type": "type",
-    "week": "week"
+    "week": "week",
+    "nthWeek": "week {count}",
+    "weekday": {
+      "Montag": "monday",
+      "Dienstag": "tuesday",
+      "Mittwoch": "wednesday",
+      "Donnerstag": "thursday",
+      "Freitag": "friday",
+      "Samstag": "saturday",
+      "Sonntag": "sunday"
+    }
   },
   "editCalendarView": {
     "error": "error",

frontend/src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import "./style.css";
 import App from "./App.vue";
 import PrimeVue from "primevue/config";
+import Badge from "primevue/badge";
 import Button from "primevue/button";
 import Dropdown from "primevue/dropdown";
 import Menu from "primevue/menu";
@@ -43,6 +44,7 @@ app.use(pinia);
 app.use(DialogService);
 i18n.setup();
 app.use(i18n.vueI18n);
+app.component("Badge", Badge);
 app.component("Button", Button);
 app.component("Menu", Menu);
 app.component("Menubar", Menubar);

frontend/src/view/AdditionalModules.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { defineAsyncComponent, ref, Ref} from "vue";
+import { defineAsyncComponent, inject, ref, Ref} from "vue";
 import { Module } from "../model/module.ts";
 import { fetchAllModules } from "../api/fetchCourse.ts";
 import moduleStore from "../store/moduleStore.ts";
@@ -22,6 +22,7 @@ if (store.isEmpty()) {
   router.replace("/");
 }
 
+const mobilePage = inject("mobilePage") as Ref<boolean>;
 const modules: Ref<Module[]> = ref([]);
 const filters = ref({
   course: {
@@ -58,13 +59,14 @@ async function showInfo(module: Module) {
     module = data;
   });
   dialog.open(ModuleInformation, {
+    class: "w-full m-0",
     props: {
         style: {
-        width: "50vw",
+          width: "80vw",
         },
         breakpoints: {
-        "960px": "75vw",
+          "992px": "100vw",
-        "640px": "90vw",
+          "640px": "100vw",
         },
         modal: true,
       },
@@ -85,7 +87,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
 </script>
 
 <template>
-  <div class="flex flex-column align-items-center w-full">
+  <div class="flex flex-column align-items-center w-full mb-7">
     <div class="flex align-items-center justify-content-center m-2">
       <h3>
         {{ $t("additionalModules.subTitle") }}
@@ -94,6 +96,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
     <div class="m-2 lg:w-10 w-full">
       <DynamicDialog />
       <DataTable
+        id="dt-responsive-table"
         v-model:filters="filters"
         :selection="store.getAllModules()"
         :value="modules"
@@ -116,6 +119,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         :show-gridlines="true"
         :striped-rows="true"
         :select-all="false"
+        :size="mobilePage ? 'small' : 'large'"
         @row-select="selectModule"
         @row-unselect="unselectModule"
       >
@@ -187,7 +191,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
       <Button 
         :disabled="store.isEmpty()"
         @click="nextStep()"
-        class="md:col-4 justify-content-center mb-3 align-self-end"
+        class="col-12 md:col-4 mb-3 align-self-end"
         icon="pi pi-arrow-right"
         :label="$t('additionalModules.nextStep')"
       />

frontend/src/view/CourseSelection.vue

@@ -54,7 +54,7 @@ async function getModules() {
 <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}"
+    :class="{'md:mt-8': selectedCourse.name === ''}"
   >
     <div class="flex align-items-center justify-content-center gap-2 mx-2">
       <h3 class="text-4xl">
@@ -95,6 +95,7 @@ async function getModules() {
     </div>
     <ModuleSelection
       :modules="modules"
+      :selected-course="selectedCourse.name"
       class="lg:w-8"
     />
   </div>

frontend/src/view/EditCalendarView.vue

@@ -66,7 +66,7 @@ function loadCalendar(): void {
 </script>
 
 <template>
-  <div class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out md:mt-8">
+  <div class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out md:mt-8 mb-7">
     <div class="flex align-items-center justify-content-center gap-2 mx-2">
       <h3 class="text-4xl">
         {{ $t("editCalendarView.headline") }}

frontend/src/view/ImprintPage.vue

@@ -2,8 +2,8 @@
 
 <template>
   <div class="flex align-items-center justify-content-center flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem mt-2">
+    <div class="flex align-items-center justify-content-center mt-2">
-      <h3 class="text-4xl">{{ $t("imprint") }}</h3>
+      <h1>{{ $t("imprint") }}</h1>
     </div>
     <div class="flex flex-column md:col-7">
       <p>nach dem Telemediengesetz (TMG) der Bundesrepublik Deutschland.</p>

frontend/src/view/PrivacyPolicy.vue

@@ -2,8 +2,8 @@
 
 <template>
   <div class="flex align-items-center justify-content-center flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem mt-2">
+    <div class="flex align-items-center justify-content-center mt-2">
-      <h3 class="text-4xl">{{ $t("privacy") }}</h3>
+      <h1>{{ $t("privacy") }}</h1>
     </div>
     <div class="flex flex-column md:col-7">
       <h1>Datenschutzerklärung</h1>

frontend/src/view/RoomFinder.vue

@@ -19,26 +19,31 @@ rooms().then(
 </script>
 
 <template>
-  <div class="flex flex-column">
+  <div 
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
+    class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0"
-      <h3 class="text-4xl">{{ $t("roomFinderPage.headline") }}</h3>
+    :class="{'md:mt-8': selectedRoom.name === ''}"
+  >
+    <div class="flex align-items-center justify-content-center gap-2 mx-2">
+      <h3 class="text-4xl">
+        {{ $t("roomFinderPage.headline") }}
+      </h3>
       <i
-        class="pi pi-search vertical-align-baseline ml-3"
+        class="pi pi-search"
         style="font-size: 2rem"
       ></i>
     </div>
     <div
-      class="flex align-items-center justify-content-center h-4rem border-round m-2"
+      class="flex justify-content-center"
     >
-      <h5 class="text-2xl">{{ $t("roomFinderPage.detail") }}</h5>
+      <h5 class="text-2xl m-2">{{ $t("roomFinderPage.detail") }}</h5>
     </div>
     <div
-      class="flex align-items-center justify-content-center border-round m-2"
+      class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8"
     >
       <Dropdown
         v-model="selectedRoom"
         :options="roomsList"
-        class="w-full md:w-25rem mx-2"
+        class="flex-1 m-0"
         filter
         option-label="name"
         :placeholder="$t('roomFinderPage.dropDownSelect')"
@@ -46,8 +51,17 @@ rooms().then(
         :auto-filter-focus="true"
       />
     </div>
-    <div class="m-6">
+    <div 
-      <RoomOccupation :room="selectedRoom.name" />
+      :class="
+        [selectedRoom.name === ''? 
+          ['opacity-0', 'pointer-events-none'] : 
+          ['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
+        ,
+        'w-full', 'lg:w-8']"
+      >
+      <RoomOccupation
+        :room="selectedRoom.name"
+      />
     </div>
   </div>
 </template>