From 3819b03065c588037ddfb9f207ff7df87187ec77 Mon Sep 17 00:00:00 2001
From: survellow <59056368+survellow@users.noreply.github.com>
Date: Mon, 6 Nov 2023 16:16:05 +0100
Subject: [PATCH 01/10] 15 demo of global dialog with reactive state

---
 frontend/src/App.vue                          |  2 +
 frontend/src/components/AdditionalModules.vue |  1 +
 frontend/src/components/CalendarPreview.vue   | 86 +++++++++++++++++++
 frontend/src/components/ModuleSelection.vue   | 14 +--
 .../src/components/ModuleTemplateDialog.vue   |  6 +-
 frontend/src/components/RenameModules.vue     | 10 +--
 .../components/editCalendar/EditModules.vue   | 10 +--
 frontend/src/main.ts                          |  2 +
 frontend/src/model/module.ts                  |  2 +-
 frontend/src/store/moduleStore.ts             | 21 ++++-
 frontend/src/style.css                        |  7 ++
 11 files changed, 130 insertions(+), 31 deletions(-)
 create mode 100644 frontend/src/components/CalendarPreview.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1b80337..7a564bb 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import MenuBar from "./components/MenuBar.vue";
+import CalendarPreview from "./components/CalendarPreview.vue";
 </script>
 
 <template>
   <MenuBar />
   <router-view></router-view>
+  <CalendarPreview />
 </template>
 
 <style scoped></style>
diff --git a/frontend/src/components/AdditionalModules.vue b/frontend/src/components/AdditionalModules.vue
index 868fdf4..3f2e786 100644
--- a/frontend/src/components/AdditionalModules.vue
+++ b/frontend/src/components/AdditionalModules.vue
@@ -111,6 +111,7 @@ function selectChange() {
                 rounded
                 outlined
                 aria-label="Information"
+                class="small-button"
                 @click.stop="showInfo(slotProps.option)"
               ></Button>
               <DynamicDialog />
diff --git a/frontend/src/components/CalendarPreview.vue b/frontend/src/components/CalendarPreview.vue
new file mode 100644
index 0000000..b940042
--- /dev/null
+++ b/frontend/src/components/CalendarPreview.vue
@@ -0,0 +1,86 @@
+
+<script lang="ts" setup>
+import { Ref, computed, ref } from "vue";
+import moduleStore from "../store/moduleStore";
+
+const dialogVisible: Ref<boolean> = ref(false);
+const mobilePage = ref(true);
+
+const store = moduleStore();
+const tableData = computed(() =>
+  store.getAllModules().map((module) => {
+    return {
+      Course: module.course,
+      Module: module.userDefinedName
+    };
+  }),
+);
+
+const previewOn: Ref<boolean> = computed(() => {
+  return moduleStore().modules.size > 0;
+})
+
+const columns = ref([
+  { field: "Course", header: "Course" },
+  { field: "Module", header: "Module" },
+]);
+
+const updateMobile = () => {
+  mobilePage.value = window.innerWidth <= 992;
+};
+
+updateMobile();
+
+window.addEventListener("resize", updateMobile);
+</script>
+
+<template>
+  <Dialog
+    id="calendar-dialog"
+    ref="calendar"
+    :visible="dialogVisible && previewOn"
+    @update:visible="dialogVisible = $event"
+    :maximizable=!mobilePage
+    :draggable=false
+    header="Kalendervorschau"
+    class="w-full lg:w-30rem lg:h-auto m-0 lg:m-2"
+    position="bottomright"
+    >
+    Hier könnte Ihre Werbung stehen!
+
+    <DataTable
+      :value="tableData"
+      edit-mode="cell"
+      table-class="editable-cells-table"
+      responsive-layout="scroll"
+    >
+      <Column
+        v-for="column in columns"
+        :key="column.field"
+        :field="column.field"
+        :header="column.header"
+        :row-editor="false"
+      >
+        <template #body="{ data, field }">
+          {{ data[field] }}
+        </template>
+      </Column>
+
+    </DataTable>
+  </Dialog>
+  <SpeedDial
+    :style="{ position: 'fixed', bottom: '2rem', right: '2rem' }"
+    v-if="previewOn && !dialogVisible"
+    >
+    <template #button>
+      <Button
+        icon="pi pi-calendar"
+        label="Preview"
+        class="p-button-rounded p-button-primary"
+        @click="dialogVisible = true"
+        />
+    </template>
+  </SpeedDial>
+</template>
+
+<style scoped></style>
diff --git a/frontend/src/components/ModuleSelection.vue b/frontend/src/components/ModuleSelection.vue
index b7981b5..7ddb751 100644
--- a/frontend/src/components/ModuleSelection.vue
+++ b/frontend/src/components/ModuleSelection.vue
@@ -4,6 +4,7 @@ import { Module } from "../model/module.ts";
 import moduleStore from "../store/moduleStore";
 import router from "../router";
 
+const store = moduleStore();
 const props = defineProps({
   modules: {
     type: Array as PropType<Module[]>,
@@ -18,9 +19,7 @@ const modulesWithSelection: Ref<ModuleWithSelection[]> = ref(
   props.modules.map((propModule) => {
     return {
       module: propModule,
-      selected: moduleStore().modules.some((module: Module) =>
-        module.isEqual ? module.isEqual(propModule) : false,
-      ),
+      selected: store.hasModule(propModule)
     };
   }),
 );
@@ -48,11 +47,12 @@ watch(currentModules, (newValue: Module[]) => {
   });
 });
 
-function nextStep() {
-  selectedModules.value.forEach((module: Module) => {
-    moduleStore().addModule(module);
-  });
+// TODO: Refactor and directly use store hashmap
+watch(selectedModules, (newValue: Module[]) => {
+  store.overwriteModules(newValue);
+});
 
+function nextStep() {
   router.push("/additional-modules");
 }
 </script>
diff --git a/frontend/src/components/ModuleTemplateDialog.vue b/frontend/src/components/ModuleTemplateDialog.vue
index e583492..9769c2d 100644
--- a/frontend/src/components/ModuleTemplateDialog.vue
+++ b/frontend/src/components/ModuleTemplateDialog.vue
@@ -47,9 +47,5 @@ const placeholders = ref([
 </template>
 
 <style scoped>
-.small-button.p-button {
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-}
+
 </style>
diff --git a/frontend/src/components/RenameModules.vue b/frontend/src/components/RenameModules.vue
index 3350100..34d3ec7 100644
--- a/frontend/src/components/RenameModules.vue
+++ b/frontend/src/components/RenameModules.vue
@@ -6,8 +6,9 @@ import tokenStore from "../store/tokenStore.ts";
 import { ref } from "vue";
 import ModuleTemplateDialog from "./ModuleTemplateDialog.vue";
 
+const store = moduleStore();
 const tableData = ref(
-  moduleStore().modules.map((module) => {
+  store.getAllModules().map((module) => {
     return {
       Course: module.course,
       Module: module,
@@ -22,7 +23,7 @@ const columns = ref([
 ]);
 
 async function finalStep() {
-  const token: string = await createIndividualFeed(moduleStore().modules);
+  const token: string = await createIndividualFeed(store.getAllModules());
   tokenStore().setToken(token);
   await router.push("/calendar-link");
 }
@@ -122,9 +123,4 @@ async function finalStep() {
 </template>
 
 <style scoped>
-.small-button.p-button {
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-}
 </style>
diff --git a/frontend/src/components/editCalendar/EditModules.vue b/frontend/src/components/editCalendar/EditModules.vue
index a767e51..c079cce 100644
--- a/frontend/src/components/editCalendar/EditModules.vue
+++ b/frontend/src/components/editCalendar/EditModules.vue
@@ -8,8 +8,9 @@ import tokenStore from "../../store/tokenStore";
 import router from "../../router";
 import ModuleTemplateDialog from "../ModuleTemplateDialog.vue";
 
+const store = moduleStore();
 const tableData = computed(() =>
-  moduleStore().modules.map((module: Module) => {
+  store.getAllModules().map((module: Module) => {
     return {
       Course: module.course,
       Module: module,
@@ -42,7 +43,7 @@ fetchedModules().then(
 );
 
 async function finalStep() {
-  await saveIndividualFeed(tokenStore().token, moduleStore().modules);
+  await saveIndividualFeed(tokenStore().token, store.getAllModules());
   await router.push("/calendar-link");
 }
 </script>
@@ -150,9 +151,4 @@ async function finalStep() {
 </template>
 
 <style scoped>
-.small-button.p-button {
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-}
 </style>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index ead29f3..3c2c61f 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -15,6 +15,7 @@ import "primevue/resources/themes/viva-dark/theme.css";
 import "primeicons/primeicons.css";
 import "primeflex/primeflex.css";
 import router from "./router";
+import SpeedDial from "primevue/speeddial";
 import TabView from "primevue/tabview";
 import TabPanel from "primevue/tabpanel";
 import Tag from "primevue/tag";
@@ -47,6 +48,7 @@ app.component("InputSwitch", InputSwitch);
 app.component("Card", Card);
 app.component("DataView", DataView);
 app.component("ToggleButton", ToggleButton);
+app.component("SpeedDial", SpeedDial);
 app.component("TabView", TabView);
 app.component("TabPanel", TabPanel);
 app.component("MultiSelect", MultiSelect);
diff --git a/frontend/src/model/module.ts b/frontend/src/model/module.ts
index 01f277d..e08c18b 100644
--- a/frontend/src/model/module.ts
+++ b/frontend/src/model/module.ts
@@ -12,7 +12,7 @@ export class Module {
     public events: Event[] = [],
   ) {}
 
-  isEqual(module: Module): Boolean {
+  isEqual(module: Module): boolean {
     return this.name === module.name && this.course === module.course;
   }
 }
diff --git a/frontend/src/store/moduleStore.ts b/frontend/src/store/moduleStore.ts
index 27f6a2b..0324000 100644
--- a/frontend/src/store/moduleStore.ts
+++ b/frontend/src/store/moduleStore.ts
@@ -3,17 +3,30 @@ import { defineStore } from "pinia";
 
 const moduleStore = defineStore("moduleStore", {
   state: () => ({
-    modules: [] as Module[],
+    modules: new Map<string, Module>(),
   }),
   actions: {
     addModule(module: Module) {
-      this.modules.push(module);
+      this.modules.set(module.uuid, module);
     },
     removeModule(module: Module) {
-      this.modules.splice(this.modules.indexOf(module), 1);
+      this.modules.delete(module.uuid);
+    },
+    hasModule(module: Module): boolean {
+      return this.modules.has(module.uuid) &&
+        (this.modules.get(module.uuid)?.isEqual(module) ?? false);
     },
     removeAllModules() {
-      this.modules = [];
+      this.modules.clear();
+    },
+    overwriteModules(modules: Module[]) {
+      this.modules.clear();
+      modules.forEach((module) => {
+        this.modules.set(module.uuid, module);
+      });
+    },
+    getAllModules(): Module[] {
+      return Array.from(this.modules.values());
     },
   },
 });
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 4d2c94a..99b676e 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,3 +1,10 @@
 body {
   font-family: var(--font-family);
 }
+
+.small-button.p-button.p-button-icon-only,
+.small-button.p-button.p-button-icon-only.p-button-rounded {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+}

From bcd1dd714d31e027f07e2a026f7b358390f3458c Mon Sep 17 00:00:00 2001
From: survellow <59056368+survellow@users.noreply.github.com>
Date: Mon, 20 Nov 2023 02:24:22 +0100
Subject: [PATCH 02/10] 15 refactor additional modules to table

---
 backend/Dockerfile                            |   2 +-
 backend/go.mod                                |   2 +-
 frontend/src/components/AdditionalModules.vue | 158 ++++++++++++++++--
 frontend/src/store/moduleStore.ts             |   3 +
 4 files changed, 151 insertions(+), 14 deletions(-)

diff --git a/backend/Dockerfile b/backend/Dockerfile
index 67a9d42..655af93 100644
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -1,4 +1,4 @@
-FROM golang:1.21.3-alpine
+FROM golang:1.21-alpine
 
 # Set the Current Working Directory inside the container
 WORKDIR /app
diff --git a/backend/go.mod b/backend/go.mod
index 660cc3d..3a2ca8b 100644
--- a/backend/go.mod
+++ b/backend/go.mod
@@ -1,6 +1,6 @@
 module htwkalender
 
-go 1.21.3
+go 1.21
 
 require (
 	github.com/google/uuid v1.3.1
diff --git a/frontend/src/components/AdditionalModules.vue b/frontend/src/components/AdditionalModules.vue
index 3f2e786..bf08122 100644
--- a/frontend/src/components/AdditionalModules.vue
+++ b/frontend/src/components/AdditionalModules.vue
@@ -3,7 +3,7 @@ import { defineAsyncComponent, ref, Ref } from "vue";
 import { Module } from "../model/module.ts";
 import { fetchAllModules } from "../api/fetchCourse.ts";
 import moduleStore from "../store/moduleStore.ts";
-import { MultiSelectAllChangeEvent } from "primevue/multiselect";
+import { FilterMatchMode } from "primevue/api";
 
 import { useDialog } from "primevue/usedialog";
 const dialog = useDialog();
@@ -15,9 +15,25 @@ const fetchedModules = async () => {
   return await fetchAllModules();
 };
 
+const store = moduleStore();
 const modules: Ref<Module[]> = ref([]);
+const filters = ref({
+  course: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
+  name: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
+  prof: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  }
+});
 
-const selectedModules: Ref<Module[]> = ref([] as Module[]);
+//const selectedModules: Ref<Module[]> = ref([] as Module[]);
+//const additionalModules: Ref<Map<string, Module>> = ref(new Map());
 
 fetchedModules().then(
   (data) =>
@@ -27,9 +43,9 @@ fetchedModules().then(
 );
 
 async function nextStep() {
-  selectedModules.value.forEach((module: Module) => {
-    moduleStore().addModule(module);
-  });
+  //selectedModules.value.forEach((module: Module) => {
+  //  moduleStore().addModule(module);
+  //});
 
   await router.push("/rename-modules");
 }
@@ -59,20 +75,42 @@ async function showInfo(module: Module) {
   });
 }
 
+/*
 const display = (module: Module) => module.name + " (" + module.course + ")";
 
 const selectAll = ref(false);
 
 const onSelectAllChange = (event: MultiSelectAllChangeEvent) => {
-  selectedModules.value = event.checked
-    ? modules.value.map((module: Module) => module)
-    : [];
+  if (event.checked) {
+    additionalModules.value = new Map(
+      modules.value
+        .filter((module: Module) => !store.hasModule(module))
+        .map((module: Module) => [module.uuid, module]),
+    );
+    store.overwriteModules(modules.value);
+  } else {
+    store.overwriteModules(
+      store.getAllModules().filter(
+        (module: Module) => !additionalModules.value.has(module.uuid)
+      )
+    );
+    additionalModules.value.clear();
+  }
+
   selectAll.value = event.checked;
 };
 
-function selectChange() {
-  selectAll.value = selectedModules.value.length === modules.value.length;
+function selectChange(event : MultiSelectChangeEvent) {
+  let wasSelected: boolean = additionalModules.value.has(event.value.uuid);
+
+  if (event.originalEvent.target.) {
+    additionalModules.value.set(event.value.uuid, event.value);
+  } else {
+    additionalModules.value.delete(event.value.uuid);
+  }
+  selectAll.value = store.countModules() === modules.value.length;
 }
+*/
 </script>
 
 <template>
@@ -84,8 +122,103 @@ function selectChange() {
       </h3>
     </div>
     <div class="card flex align-items-center justify-content-center m-2">
+      <DynamicDialog />
+      <DataTable
+        v-model:filters="filters"
+        :value="modules"
+        data-key="uuid"
+        paginator
+        :rows="10"
+        :rows-per-page-options="[5, 10, 20, 50]"
+        paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"
+        current-page-report-template="{first} to {last} of {totalRecords}"
+        filter-display="row"
+        :loading="!modules.length"
+        loading-icon="pi pi-spinner"
+        :show-gridlines="true"
+        :striped-rows="true"
+        class="w-10"
+        >
+        
+        <Column
+          selection-mode="multiple"
+          >
+        </Column>
+
+        <Column
+          field="course"
+          header="Course"
+          :show-clear-button="false"
+          :show-filter-menu="false"
+          >
+          <template #filter="{ filterModel, filterCallback }">
+            <InputText
+              v-model="filterModel.value"
+              type="text"
+              class="p-column-filter max-w-10rem"
+              @input="filterCallback()"
+            />
+          </template>
+        </Column>
+        <Column
+          field="name"
+          header="Name"
+          :show-clear-button="false"
+          :show-filter-menu="false"
+          >
+          <template #filter="{ filterModel, filterCallback }">
+            <InputText
+              v-model="filterModel.value"
+              type="text"
+              class="p-column-filter"
+              @input="filterCallback()"
+            />
+          </template>
+        </Column>
+        <Column
+          field="prof"
+          header="Professor"
+          :show-clear-button="false"
+          :show-filter-menu="false"
+          >
+          <template #filter="{ filterModel, filterCallback }">
+            <InputText
+              v-model="filterModel.value"
+              type="text"
+              class="p-column-filter"
+              @input="filterCallback()"
+            />
+          </template>
+        </Column>
+        <Column header="Info">
+          <template #body="slotProps">
+            <Button
+              icon="pi pi-info"
+              severity="secondary"
+              rounded
+              outlined
+              aria-label="Information"
+              class="small-button"
+              @click.stop="showInfo(slotProps.data)"
+            ></Button>
+          </template>
+        
+        </Column>
+        <template #footer>
+          <div class="py-2 px-3">
+            <b>{{ store ? store.countModules() : 0 }}</b>
+            item{{
+              (store ? store.countModules() : 0) !== 1 ? "s" : ""
+            }}
+            selected.
+          </div>
+        </template>
+      </DataTable>
+
+      <!--
       <MultiSelect
-        v-model="selectedModules"
+        :model-value="store.getAllModules()"
+        @update:model-value="store.overwriteModules($event.value)"
         :max-selected-labels="1"
         :option-label="display"
         :options="modules"
@@ -94,7 +227,7 @@ function selectChange() {
         class="custom-multiselect"
         filter
         placeholder="Select additional modules"
-        @change="selectChange()"
+        @change="selectChange($event)"
         @selectall-change="onSelectAllChange($event)"
       >
         <template #option="slotProps">
@@ -128,6 +261,7 @@ function selectChange() {
           </div>
         </template>
       </MultiSelect>
+    -->
     </div>
     <div class="flex align-items-center justify-content-center h-4rem m-2">
       <Button @click="nextStep()">Next Step</Button>
diff --git a/frontend/src/store/moduleStore.ts b/frontend/src/store/moduleStore.ts
index 0324000..70a037d 100644
--- a/frontend/src/store/moduleStore.ts
+++ b/frontend/src/store/moduleStore.ts
@@ -25,6 +25,9 @@ const moduleStore = defineStore("moduleStore", {
         this.modules.set(module.uuid, module);
       });
     },
+    countModules(): number {
+      return this.modules.size;
+    },
     getAllModules(): Module[] {
       return Array.from(this.modules.values());
     },

From ab25df81c187823401f321ba331582bbd03796a8 Mon Sep 17 00:00:00 2001
From: masterelmar <18119527+masterElmar@users.noreply.github.com>
Date: Mon, 20 Nov 2023 11:50:46 +0100
Subject: [PATCH 03/10] fix:#15 linted format and typ fix

---
 frontend/src/components/CalendarPreview.vue   |  20 +-
 frontend/src/components/FaqPage.vue           | 211 ++++++++++++------
 frontend/src/components/ModuleInformation.vue |  37 ++-
 frontend/src/components/ModuleSelection.vue   |   2 +-
 .../src/components/ModuleTemplateDialog.vue   |   4 +-
 frontend/src/components/RenameModules.vue     |   3 +-
 .../components/editCalendar/EditModules.vue   |   3 +-
 frontend/src/i18n/translations/de.json        |  14 +-
 frontend/src/store/moduleStore.ts             |   6 +-
 frontend/src/view/AdditionalModules.vue       |  36 +--
 frontend/src/view/EditCalendarView.vue        |  16 +-
 frontend/src/view/ImprintPage.vue             |   2 +-
 frontend/src/view/PrivacyPolicy.vue           |   2 +-
 13 files changed, 219 insertions(+), 137 deletions(-)

diff --git a/frontend/src/components/CalendarPreview.vue b/frontend/src/components/CalendarPreview.vue
index b940042..a01afe7 100644
--- a/frontend/src/components/CalendarPreview.vue
+++ b/frontend/src/components/CalendarPreview.vue
@@ -1,4 +1,3 @@
-
 <script lang="ts" setup>
 import { Ref, computed, ref } from "vue";
 import moduleStore from "../store/moduleStore";
@@ -11,14 +10,14 @@ const tableData = computed(() =>
   store.getAllModules().map((module) => {
     return {
       Course: module.course,
-      Module: module.userDefinedName
+      Module: module.userDefinedName,
     };
   }),
 );
 
 const previewOn: Ref<boolean> = computed(() => {
   return moduleStore().modules.size > 0;
-})
+});
 
 const columns = ref([
   { field: "Course", header: "Course" },
@@ -39,13 +38,13 @@ window.addEventListener("resize", updateMobile);
     id="calendar-dialog"
     ref="calendar"
     :visible="dialogVisible && previewOn"
-    @update:visible="dialogVisible = $event"
-    :maximizable=!mobilePage
-    :draggable=false
+    :maximizable="!mobilePage"
+    :draggable="false"
     header="Kalendervorschau"
     class="w-full lg:w-30rem lg:h-auto m-0 lg:m-2"
     position="bottomright"
-    >
+    @update:visible="dialogVisible = $event"
+  >
     Hier könnte Ihre Werbung stehen!
 
     <DataTable
@@ -65,20 +64,19 @@ window.addEventListener("resize", updateMobile);
           {{ data[field] }}
         </template>
       </Column>
-
     </DataTable>
   </Dialog>
   <SpeedDial
-    :style="{ position: 'fixed', bottom: '2rem', right: '2rem' }"
     v-if="previewOn && !dialogVisible"
-    >
+    :style="{ position: 'fixed', bottom: '2rem', right: '2rem' }"
+  >
     <template #button>
       <Button
         icon="pi pi-calendar"
         label="Preview"
         class="p-button-rounded p-button-primary"
         @click="dialogVisible = true"
-        />
+      />
     </template>
   </SpeedDial>
 </template>
diff --git a/frontend/src/components/FaqPage.vue b/frontend/src/components/FaqPage.vue
index cdb8efa..9296436 100644
--- a/frontend/src/components/FaqPage.vue
+++ b/frontend/src/components/FaqPage.vue
@@ -1,141 +1,216 @@
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>
 
 <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">
-      <h1>{{$t('faqView.headline')}}</h1>
+      <h1>{{ $t("faqView.headline") }}</h1>
     </div>
 
     <div class="flex flex-column col-7">
       <div class="grid my-2">
         <div class="col">
-          {{$t('faqView.firstQuestion')}}
+          {{ $t("faqView.firstQuestion") }}
         </div>
         <div class="col">
-          {{$t('faqView.firstAnswer')}}
+          {{ $t("faqView.firstAnswer") }}
         </div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{$t('faqView.secondQuestion')}}</div>
+        <div class="col">{{ $t("faqView.secondQuestion") }}</div>
         <div class="col">
-          {{$t('faqView.secondAnswer')}}
+          {{ $t("faqView.secondAnswer") }}
         </div>
       </div>
 
       <div class="grid my-2">
-        <div class="col">{{$t('faqView.thirdQuestion')}}</div>
+        <div class="col">{{ $t("faqView.thirdQuestion") }}</div>
         <div class="col">
           <Accordion>
             <AccordionTab :header="$t('faqView.thirdAnswer.tabTitle')">
               <ol>
-                <li>{{$t('faqView.thirdAnswer.google.first')}}</li>
+                <li>{{ $t("faqView.thirdAnswer.google.first") }}</li>
                 <li>
-                  {{$t('faqView.thirdAnswer.google.second')}}
+                  {{ $t("faqView.thirdAnswer.google.second") }}
                 </li>
                 <li>
-                  {{$t('faqView.thirdAnswer.google.third')}}
+                  {{ $t("faqView.thirdAnswer.google.third") }}
                 </li>
               </ol>
             </AccordionTab>
-            <AccordionTab :header="$t('faqView.thirdAnswer.microsoft_outlook.title')">
-              <p>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.title')}}</p>
+            <AccordionTab
+              :header="$t('faqView.thirdAnswer.microsoft_outlook.title')"
+            >
+              <p>
+                {{
+                  $t("faqView.thirdAnswer.microsoft_outlook.outlook_2010.title")
+                }}
+              </p>
 
               <ol>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.first')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.second')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.third')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.fourth')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.fifth')}}</li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2010.first",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2010.second",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2010.third",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2010.fourth",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2010.fifth",
+                    )
+                  }}
+                </li>
               </ol>
 
-              <p>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.title')}}</p>
+              <p>
+                {{
+                  $t("faqView.thirdAnswer.microsoft_outlook.outlook_2007.title")
+                }}
+              </p>
 
               <ol>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.first')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.second')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.third')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.fourth')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.fifth')}}</li>
-                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.sixth')}}</li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.first",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.second",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.third",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.fourth",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.fifth",
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "faqView.thirdAnswer.microsoft_outlook.outlook_2007.sixth",
+                    )
+                  }}
+                </li>
               </ol>
             </AccordionTab>
             <AccordionTab :header="$t('faqView.thirdAnswer.apple_osx.title')">
               <ol>
-                <li>{{$t('faqView.thirdAnswer.apple_osx.first')}}</li>
-                <li>{{$t('faqView.thirdAnswer.apple_osx.second')}}</li>
-                <li>{{$t('faqView.thirdAnswer.apple_osx.third')}}</li>
-                <li>{{$t('faqView.thirdAnswer.apple_osx.fourth')}}</li>
+                <li>{{ $t("faqView.thirdAnswer.apple_osx.first") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.apple_osx.second") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.apple_osx.third") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.apple_osx.fourth") }}</li>
               </ol>
             </AccordionTab>
             <AccordionTab :header="$t('faqView.thirdAnswer.thunderbird.title')">
               <ol>
-                <li>{{ $t('faqView.thirdAnswer.thunderbird.one') }}</li>
-                <li>{{ $t('faqView.thirdAnswer.thunderbird.two') }}</li>
-                <li>{{ $t('faqView.thirdAnswer.thunderbird.three') }}</li>
-                <li>{{ $t('faqView.thirdAnswer.thunderbird.four') }} </li>
-                <li>{{ $t('faqView.thirdAnswer.thunderbird.five') }}</li>
-                <li>{{ $t('faqView.thirdAnswer.thunderbird.six') }}</li>
-                <li>{{ $t('faqView.thirdAnswer.thunderbird.seven') }}</li>
+                <li>{{ $t("faqView.thirdAnswer.thunderbird.one") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.thunderbird.two") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.thunderbird.three") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.thunderbird.four") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.thunderbird.five") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.thunderbird.six") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.thunderbird.seven") }}</li>
               </ol>
             </AccordionTab>
             <AccordionTab :header="$t('faqView.thirdAnswer.iphone.title')">
-              <p>{{$t('faqView.thirdAnswer.iphone.description')}}</p>
+              <p>{{ $t("faqView.thirdAnswer.iphone.description") }}</p>
 
               <ol>
-                <li>{{$t('faqView.thirdAnswer.iphone.one')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.two')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.three')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.four')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.five')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.six')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.seven')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.eight')}}</li>
-                <li>{{$t('faqView.thirdAnswer.iphone.nine')}}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.one") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.two") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.three") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.four") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.five") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.six") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.seven") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.eight") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.iphone.nine") }}</li>
               </ol>
             </AccordionTab>
             <AccordionTab header="Android">
-              <p>{{$t('faqView.thirdAnswer.android.description')}}</p>
+              <p>{{ $t("faqView.thirdAnswer.android.description") }}</p>
             </AccordionTab>
             <AccordionTab header="Windows Phone">
-              <p>{{$t('faqView.thirdAnswer.windows_phone.description')}}</p>
+              <p>{{ $t("faqView.thirdAnswer.windows_phone.description") }}</p>
               <ol>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.one')}}</li>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.two')}}</li>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.three')}}</li>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.four')}}</li>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.five')}}</li>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.six')}}</li>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.seven')}}</li>
-                <li>{{$t('faqView.thirdAnswer.windows_phone.eight')}}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.one") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.two") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.three") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.four") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.five") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.six") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.seven") }}</li>
+                <li>{{ $t("faqView.thirdAnswer.windows_phone.eight") }}</li>
               </ol>
             </AccordionTab>
           </Accordion>
         </div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{$t('faqView.fourthQuestion')}}</div>
-        <div class="col">{{$t('faqView.fourthAnswer')}}</div>
+        <div class="col">{{ $t("faqView.fourthQuestion") }}</div>
+        <div class="col">{{ $t("faqView.fourthAnswer") }}</div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{$t('faqView.fifthQuestion')}}</div>
-        <div class="col">{{$t('faqView.fifthAnswer')}}</div>
+        <div class="col">{{ $t("faqView.fifthQuestion") }}</div>
+        <div class="col">{{ $t("faqView.fifthAnswer") }}</div>
       </div>
       <div class="grid my-2">
-        <div class="col my-2">{{$t('faqView.sixthQuestion')}}</div>
-        <div class="col">{{$t('faqView.sixthAnswer')}}</div>
+        <div class="col my-2">{{ $t("faqView.sixthQuestion") }}</div>
+        <div class="col">{{ $t("faqView.sixthAnswer") }}</div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{$t('faqView.seventhQuestion')}}</div>
-        <div class="col">{{$t('faqView.seventhAnswer')}}</div>
+        <div class="col">{{ $t("faqView.seventhQuestion") }}</div>
+        <div class="col">{{ $t("faqView.seventhAnswer") }}</div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{$t('faqView.eighthQuestion')}}</div>
-        <div class="col">{{$t('faqView.eighthAnswer')}}</div>
+        <div class="col">{{ $t("faqView.eighthQuestion") }}</div>
+        <div class="col">{{ $t("faqView.eighthAnswer") }}</div>
       </div>
       <p>
-        {{$t('faqView.notFound')}}<br />
-        <a href="/imprint">{{$t('faqView.contact')}}</a>
+        {{ $t("faqView.notFound") }}<br />
+        <a href="/imprint">{{ $t("faqView.contact") }}</a>
       </p>
     </div>
   </div>
diff --git a/frontend/src/components/ModuleInformation.vue b/frontend/src/components/ModuleInformation.vue
index 893a917..902e6ec 100644
--- a/frontend/src/components/ModuleInformation.vue
+++ b/frontend/src/components/ModuleInformation.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import {inject} from "vue";
-import {Module} from "../model/module.ts";
-import {Event} from "../model/event.ts";
+import { inject } from "vue";
+import { Module } from "../model/module.ts";
+import { Event } from "../model/event.ts";
 import moment from "moment-timezone";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -14,10 +14,10 @@ function formatTimestamp(timestampString: string): string {
   const timestamp = moment(timestampString);
 
   // Die Zeitzone auf "Europe/Berlin" setzen
-  const berlinTime = timestamp.tz('Europe/Berlin');
+  const berlinTime = timestamp.tz("Europe/Berlin");
 
   // Das gewünschte Format für die Ausgabe festlegen
-  return berlinTime.format('DD.MM.YYYY HH:mm');
+  return berlinTime.format("DD.MM.YYYY HH:mm");
 }
 
 function sortModuleEventsByStart(events: Event[]) {
@@ -43,8 +43,14 @@ function sortModuleEventsByStart(events: Event[]) {
       <tr>
         <td>
           <div class="card">
-            <DataTable :value="sortModuleEventsByStart(module.events)" table-style="min-width: 50rem">
-              <Column field="day" :header="$t('moduleInformation.day')"></Column>
+            <DataTable
+              :value="sortModuleEventsByStart(module.events)"
+              table-style="min-width: 50rem"
+            >
+              <Column
+                field="day"
+                :header="$t('moduleInformation.day')"
+              ></Column>
               <Column field="start" :header="$t('moduleInformation.start')">
                 <template #body="slotProps">
                   {{ formatTimestamp(slotProps.data.start) }}
@@ -52,12 +58,21 @@ function sortModuleEventsByStart(events: Event[]) {
               </Column>
               <Column field="end" :header="$t('moduleInformation.end')">
                 <template #body="slotProps">
-                  {{formatTimestamp( slotProps.data.end) }}
+                  {{ formatTimestamp(slotProps.data.end) }}
                 </template>
               </Column>
-              <Column field="rooms" :header="$t('moduleInformation.room')"></Column>
-              <Column field="eventType" :header="$t('moduleInformation.type')"></Column>
-              <Column field="week" :header="$t('moduleInformation.week')"></Column>
+              <Column
+                field="rooms"
+                :header="$t('moduleInformation.room')"
+              ></Column>
+              <Column
+                field="eventType"
+                :header="$t('moduleInformation.type')"
+              ></Column>
+              <Column
+                field="week"
+                :header="$t('moduleInformation.week')"
+              ></Column>
             </DataTable>
           </div>
         </td>
diff --git a/frontend/src/components/ModuleSelection.vue b/frontend/src/components/ModuleSelection.vue
index 650e908..a956802 100644
--- a/frontend/src/components/ModuleSelection.vue
+++ b/frontend/src/components/ModuleSelection.vue
@@ -19,7 +19,7 @@ const modulesWithSelection: Ref<ModuleWithSelection[]> = ref(
   props.modules.map((propModule) => {
     return {
       module: propModule,
-      selected: store.hasModule(propModule)
+      selected: store.hasModule(propModule),
     };
   }),
 );
diff --git a/frontend/src/components/ModuleTemplateDialog.vue b/frontend/src/components/ModuleTemplateDialog.vue
index 4b7eb61..631dafe 100644
--- a/frontend/src/components/ModuleTemplateDialog.vue
+++ b/frontend/src/components/ModuleTemplateDialog.vue
@@ -68,6 +68,4 @@ const placeholders = computed(() => [
   </Dialog>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/frontend/src/components/RenameModules.vue b/frontend/src/components/RenameModules.vue
index d900abf..21220fd 100644
--- a/frontend/src/components/RenameModules.vue
+++ b/frontend/src/components/RenameModules.vue
@@ -125,5 +125,4 @@ async function finalStep() {
   </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/frontend/src/components/editCalendar/EditModules.vue b/frontend/src/components/editCalendar/EditModules.vue
index 7852657..7210e3f 100644
--- a/frontend/src/components/editCalendar/EditModules.vue
+++ b/frontend/src/components/editCalendar/EditModules.vue
@@ -158,5 +158,4 @@ async function finalStep() {
   </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/frontend/src/i18n/translations/de.json b/frontend/src/i18n/translations/de.json
index 4dd8efa..403cf13 100644
--- a/frontend/src/i18n/translations/de.json
+++ b/frontend/src/i18n/translations/de.json
@@ -132,13 +132,13 @@
       },
       "thunderbird": {
         "title": "Thunderbird",
-        "one" : "Erstelle deinen Kalender und kopiere den Link.",
-        "two" : "Im Menü “Termine und Aufgaben” den Punkt “Kalender” wählen. ",
-        "three" : "Links siehst du die Kalenderübersicht. In diesem Bereich über die rechte Maustaste klicken und im darauf erscheinenden Kontextmenü “Neuer Kalender” anklicken.",
-        "four" : "Du hast die Wahl zwischen “Auf meinem Computer” und “Im Netzwerk”. Bitte letzteres wählen und “Fortsetzen” klicken.",
-        "five" : "Im folgenden Fenster lässt du das “Format” wie es ist (“iCalender”).",
-        "six" : "Unter \"Adresse\" den kopierten Kalenderlink einfügen.",
-        "seven" : "Anschließend kannst du noch einen Namen vergeben und weitere Einstellungen nach Belieben vornehmen."
+        "one": "Erstelle deinen Kalender und kopiere den Link.",
+        "two": "Im Menü “Termine und Aufgaben” den Punkt “Kalender” wählen. ",
+        "three": "Links siehst du die Kalenderübersicht. In diesem Bereich über die rechte Maustaste klicken und im darauf erscheinenden Kontextmenü “Neuer Kalender” anklicken.",
+        "four": "Du hast die Wahl zwischen “Auf meinem Computer” und “Im Netzwerk”. Bitte letzteres wählen und “Fortsetzen” klicken.",
+        "five": "Im folgenden Fenster lässt du das “Format” wie es ist (“iCalender”).",
+        "six": "Unter \"Adresse\" den kopierten Kalenderlink einfügen.",
+        "seven": "Anschließend kannst du noch einen Namen vergeben und weitere Einstellungen nach Belieben vornehmen."
       },
       "iphone": {
         "title": "iPhone",
diff --git a/frontend/src/store/moduleStore.ts b/frontend/src/store/moduleStore.ts
index 70a037d..b1a3605 100644
--- a/frontend/src/store/moduleStore.ts
+++ b/frontend/src/store/moduleStore.ts
@@ -13,8 +13,10 @@ const moduleStore = defineStore("moduleStore", {
       this.modules.delete(module.uuid);
     },
     hasModule(module: Module): boolean {
-      return this.modules.has(module.uuid) &&
-        (this.modules.get(module.uuid)?.isEqual(module) ?? false);
+      return (
+        this.modules.has(module.uuid) &&
+        (this.modules.get(module.uuid)?.isEqual(module) ?? false)
+      );
     },
     removeAllModules() {
       this.modules.clear();
diff --git a/frontend/src/view/AdditionalModules.vue b/frontend/src/view/AdditionalModules.vue
index f5569c7..725aaf9 100644
--- a/frontend/src/view/AdditionalModules.vue
+++ b/frontend/src/view/AdditionalModules.vue
@@ -1,18 +1,14 @@
 <script lang="ts" setup>
-import {defineAsyncComponent, ref, Ref} from "vue";
-import {Module} from "../model/module.ts";
-import {fetchAllModules} from "../api/fetchCourse.ts";
+import { defineAsyncComponent, ref, Ref } from "vue";
+import { Module } from "../model/module.ts";
+import { fetchAllModules } from "../api/fetchCourse.ts";
 import moduleStore from "../store/moduleStore.ts";
-import {MultiSelectAllChangeEvent} from "primevue/multiselect";
 import { FilterMatchMode } from "primevue/api";
 import { useDialog } from "primevue/usedialog";
 import router from "../router";
-import {fetchModule} from "../api/fetchModule.ts";
-import {useDialog} from "primevue/usedialog";
-import {useI18n} from "vue-i18n";
+import { fetchModule } from "../api/fetchModule.ts";
 
 const dialog = useDialog();
-const { t } = useI18n({ useScope: "global" });
 
 const fetchedModules = async () => {
   return await fetchAllModules();
@@ -32,7 +28,7 @@ const filters = ref({
   prof: {
     value: null,
     matchMode: FilterMatchMode.CONTAINS,
-  }
+  },
 });
 
 //const selectedModules: Ref<Module[]> = ref([] as Module[]);
@@ -148,19 +144,15 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
         :show-gridlines="true"
         :striped-rows="true"
         class="w-10"
-        >
-
-        <Column
-          selection-mode="multiple"
-          >
-        </Column>
+      >
+        <Column selection-mode="multiple"> </Column>
 
         <Column
           field="course"
           header="Course"
           :show-clear-button="false"
           :show-filter-menu="false"
-          >
+        >
           <template #filter="{ filterModel, filterCallback }">
             <InputText
               v-model="filterModel.value"
@@ -175,7 +167,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
           header="Name"
           :show-clear-button="false"
           :show-filter-menu="false"
-          >
+        >
           <template #filter="{ filterModel, filterCallback }">
             <InputText
               v-model="filterModel.value"
@@ -190,7 +182,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
           header="Professor"
           :show-clear-button="false"
           :show-filter-menu="false"
-          >
+        >
           <template #filter="{ filterModel, filterCallback }">
             <InputText
               v-model="filterModel.value"
@@ -212,14 +204,11 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
               @click.stop="showInfo(slotProps.data)"
             ></Button>
           </template>
-
         </Column>
         <template #footer>
           <div class="py-2 px-3">
             <b>{{ store ? store.countModules() : 0 }}</b>
-            item{{
-              (store ? store.countModules() : 0) !== 1 ? "s" : ""
-            }}
+            item{{ (store ? store.countModules() : 0) !== 1 ? "s" : "" }}
             selected.
           </div>
         </template>
@@ -274,8 +263,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
           </div>
         </template>
       </MultiSelect>
-    -->
-    </div>
+    --></div>
     <div class="flex align-items-center justify-content-center h-4rem m-2">
       <Button @click="nextStep()">{{
         $t("additionalModules.nextStep")
diff --git a/frontend/src/view/EditCalendarView.vue b/frontend/src/view/EditCalendarView.vue
index e0fa2dc..5999c10 100644
--- a/frontend/src/view/EditCalendarView.vue
+++ b/frontend/src/view/EditCalendarView.vue
@@ -12,7 +12,7 @@ const { t } = useI18n({ useScope: "global" });
 const toast = useToast();
 
 const token: Ref<string> = ref("");
-const modules: Ref<Module[]> = ref(moduleStore().modules);
+const modules: Ref<Map<string, Module>> = ref(moduleStore().modules);
 
 function extractToken(token: string): string {
   const tokenRegex = /^[a-z0-9]{15}$/;
@@ -50,7 +50,7 @@ function loadCalendar(): void {
     data.forEach((module) => {
       moduleStore().addModule(module);
     });
-    modules.value = data;
+    modules.value = moduleStore().modules;
   });
 
   router.push("/edit-additional-modules");
@@ -77,12 +77,20 @@ function loadCalendar(): void {
     <div
       class="flex align-items-center justify-content-center border-round m-2"
     >
-      <InputText v-model="token" type="text" autofocus @keyup.enter="loadCalendar" />
+      <InputText
+        v-model="token"
+        type="text"
+        autofocus
+        @keyup.enter="loadCalendar"
+      />
     </div>
     <div
       class="flex align-items-center justify-content-center border-round m-2"
     >
-      <Button :label="$t('editCalendarView.loadCalendar')" @click="loadCalendar" />
+      <Button
+        :label="$t('editCalendarView.loadCalendar')"
+        @click="loadCalendar"
+      />
     </div>
   </div>
 </template>
diff --git a/frontend/src/view/ImprintPage.vue b/frontend/src/view/ImprintPage.vue
index 0d6c69b..cb4297b 100644
--- a/frontend/src/view/ImprintPage.vue
+++ b/frontend/src/view/ImprintPage.vue
@@ -3,7 +3,7 @@
 <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">
-      <h3 class="text-4xl">{{$t("imprint")}}</h3>
+      <h3 class="text-4xl">{{ $t("imprint") }}</h3>
     </div>
     <div class="flex flex-column col-7">
       <p>nach dem Telemediengesetz (TMG) der Bundesrepublik Deutschland.</p>
diff --git a/frontend/src/view/PrivacyPolicy.vue b/frontend/src/view/PrivacyPolicy.vue
index 0d44f8c..3f00f32 100644
--- a/frontend/src/view/PrivacyPolicy.vue
+++ b/frontend/src/view/PrivacyPolicy.vue
@@ -3,7 +3,7 @@
 <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">
-      <h3 class="text-4xl">{{$t("privacy")}}</h3>
+      <h3 class="text-4xl">{{ $t("privacy") }}</h3>
     </div>
     <div class="flex flex-column col-7">
       <h1>Datenschutzerklärung</h1>

From d41e6f4a3c56fa712d1a9e1b54b1d3ff2746763d Mon Sep 17 00:00:00 2001
From: masterElmar <18119527+masterElmar@users.noreply.github.com>
Date: Wed, 29 Nov 2023 01:51:20 +0100
Subject: [PATCH 04/10] feat:#15 added selection in datatable to store and
 removed selectAll

---
 frontend/src/App.vue                        |  15 +-
 frontend/src/components/CalendarPreview.vue |   2 -
 frontend/src/components/ModuleSelection.vue |   2 +
 frontend/src/main.ts                        |   2 +
 frontend/src/store/moduleStore.ts           |   3 +
 frontend/src/view/AdditionalModules.vue     | 150 +++++---------------
 6 files changed, 56 insertions(+), 118 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 4562c96..b220877 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,13 +1,24 @@
 <script lang="ts" setup>
 import MenuBar from "./components/MenuBar.vue";
-import { RouterView } from "vue-router";
+import {RouteRecordName, RouterView} from "vue-router";
 import CalendarPreview from "./components/CalendarPreview.vue";
+import moduleStore from "@/store/moduleStore.ts";
+
+const disabledPages = ["room-finder", "faq", "imprint", "privacy-policy", "edit"];
+
+const store = moduleStore();
+
+const isDisabled = (routeName: RouteRecordName | null | undefined) => {
+  return !disabledPages.includes(routeName as string) && store.modules.size > 0
+};
+
 </script>
 
 <template>
   <MenuBar />
   <RouterView />
-  <CalendarPreview />
+  <!-- show CalendarPreview but only on specific router views -->
+  <CalendarPreview v-if="isDisabled($route.name)"/>
 </template>
 
 <style scoped></style>
diff --git a/frontend/src/components/CalendarPreview.vue b/frontend/src/components/CalendarPreview.vue
index a01afe7..eb0a671 100644
--- a/frontend/src/components/CalendarPreview.vue
+++ b/frontend/src/components/CalendarPreview.vue
@@ -45,8 +45,6 @@ window.addEventListener("resize", updateMobile);
     position="bottomright"
     @update:visible="dialogVisible = $event"
   >
-    Hier könnte Ihre Werbung stehen!
-
     <DataTable
       :value="tableData"
       edit-mode="cell"
diff --git a/frontend/src/components/ModuleSelection.vue b/frontend/src/components/ModuleSelection.vue
index a956802..36cad04 100644
--- a/frontend/src/components/ModuleSelection.vue
+++ b/frontend/src/components/ModuleSelection.vue
@@ -12,6 +12,8 @@ const props = defineProps({
   },
 });
 
+store.modules.clear();
+
 type ModuleWithSelection = { module: Module; selected: boolean };
 
 // array of modules with boolean if selected with getter and setter
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 48d5974..c2b5e96 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -31,6 +31,7 @@ import Column from "primevue/column";
 import DynamicDialog from "primevue/dynamicdialog";
 import DialogService from "primevue/dialogservice";
 import ProgressSpinner from "primevue/progressspinner";
+import Checkbox from "primevue/checkbox";
 import i18n from "./i18n";
 
 const app = createApp(App);
@@ -65,4 +66,5 @@ app.component("DataTable", DataTable);
 app.component("Column", Column);
 app.component("DynamicDialog", DynamicDialog);
 app.component("ProgressSpinner", ProgressSpinner);
+app.component("Checkbox", Checkbox);
 app.mount("#app");
diff --git a/frontend/src/store/moduleStore.ts b/frontend/src/store/moduleStore.ts
index b1a3605..2d08725 100644
--- a/frontend/src/store/moduleStore.ts
+++ b/frontend/src/store/moduleStore.ts
@@ -33,6 +33,9 @@ const moduleStore = defineStore("moduleStore", {
     getAllModules(): Module[] {
       return Array.from(this.modules.values());
     },
+    containsModule(module: Module): boolean {
+        return this.modules.has(module.uuid);
+    }
   },
 });
 
diff --git a/frontend/src/view/AdditionalModules.vue b/frontend/src/view/AdditionalModules.vue
index c8af3ab..0b7f243 100644
--- a/frontend/src/view/AdditionalModules.vue
+++ b/frontend/src/view/AdditionalModules.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { defineAsyncComponent, ref, Ref } from "vue";
+import { defineAsyncComponent, ref, Ref, watch} from "vue";
 import { Module } from "../model/module.ts";
 import { fetchAllModules } from "../api/fetchCourse.ts";
 import moduleStore from "../store/moduleStore.ts";
@@ -17,6 +17,11 @@ const fetchedModules = async () => {
 };
 
 const store = moduleStore();
+
+const selectedModules: Ref<Module[]> = ref(
+   store.getAllModules()
+);
+
 const modules: Ref<Module[]> = ref([]);
 const filters = ref({
   course: {
@@ -41,13 +46,29 @@ fetchedModules().then(
     (modules.value = data.map((module: Module) => {
       return module;
     })),
-);
+).finally(() => {
+  // init selected modules from store with fetched modules and set selected modules
+  selectedModules.value = store.getAllModules().filter((module: Module) => {
+    return modules.value.some((m: Module) => m.uuid === module.uuid);
+  });
+});
+
+watch(selectedModules, () => {
+  //add missing modules to store
+  selectedModules.value.forEach((module: Module) => {
+    if (!store.getAllModules().some((m: Module) => m.uuid === module.uuid)) {
+      store.addModule(module);
+    }
+  });
+  //remove modules from store that are not selected anymore
+  store.getAllModules().forEach((module: Module) => {
+    if (!selectedModules.value.some((m: Module) => m.uuid === module.uuid)) {
+      store.removeModule(module);
+    }
+  });
+});
 
 async function nextStep() {
-  //selectedModules.value.forEach((module: Module) => {
-  //  moduleStore().addModule(module);
-  //});
-
   await router.push("/rename-modules");
 }
 
@@ -75,59 +96,6 @@ async function showInfo(module: Module) {
     },
   });
 }
-
-/*
-const display = (module: Module) => module.name + " (" + module.course + ")";
-
-const selectAll = ref(false);
-
-const onSelectAllChange = (event: MultiSelectAllChangeEvent) => {
-  if (event.checked) {
-    additionalModules.value = new Map(
-      modules.value
-        .filter((module: Module) => !store.hasModule(module))
-        .map((module: Module) => [module.uuid, module]),
-    );
-    store.overwriteModules(modules.value);
-  } else {
-    store.overwriteModules(
-      store.getAllModules().filter(
-        (module: Module) => !additionalModules.value.has(module.uuid)
-      )
-    );
-    additionalModules.value.clear();
-  }
-
-  selectAll.value = event.checked;
-};
-
-function selectChange(event : MultiSelectChangeEvent) {
-  let wasSelected: boolean = additionalModules.value.has(event.value.uuid);
-
-  if (event.originalEvent.target.) {
-    additionalModules.value.set(event.value.uuid, event.value);
-  } else {
-    additionalModules.value.delete(event.value.uuid);
-  }
-  selectAll.value = store.countModules() === modules.value.length;
-}
-
-function itemsLabel(selectedModules: Module[]): string {
-  return (selectedModules ? selectedModules.length : 0) != 1
-    ? t("additionalModules.modules")
-    : t("additionalModules.module");
-}
-
-function itemsLabelWithNumber(selectedModules: Module[]): string {
-  return (
-    selectedModules.length.toString() +
-    " " +
-    itemsLabel(selectedModules) +
-    " " +
-    t("additionalModules.dropDownFooterSelected")
-  );
-}
-*/
 </script>
 
 <template>
@@ -141,6 +109,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
       <DynamicDialog />
       <DataTable
         v-model:filters="filters"
+        v-model:selection="selectedModules"
         :value="modules"
         data-key="uuid"
         paginator
@@ -153,9 +122,11 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
         loading-icon="pi pi-spinner"
         :show-gridlines="true"
         :striped-rows="true"
+        :select-all="false"
         class="w-10"
       >
-        <Column selection-mode="multiple"> </Column>
+        <Column selection-mode="multiple">
+        </Column>
 
         <Column
           field="course"
@@ -223,60 +194,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
           </div>
         </template>
       </DataTable>
-
-      <!--
-      <MultiSelect
-        :model-value="store.getAllModules()"
-        @update:model-value="store.overwriteModules($event.value)"
-        :max-selected-labels="1"
-        :option-label="display"
-        :options="modules"
-        :select-all="selectAll"
-        :virtual-scroller-options="{ itemSize: 70 }"
-        class="custom-multiselect"
-        filter
-        :placeholder="$t('additionalModules.dropDown')"
-        :auto-filter-focus="true"
-        :show-toggle-all="false"
-        :selected-items-label="itemsLabelWithNumber(selectedModules)"
-        @change="selectChange()"
-        placeholder="Select additional modules"
-        @change="selectChange($event)"
-        @selectall-change="onSelectAllChange($event)"
-      >
-        <template #option="slotProps">
-          <div class="flex justify-content-between w-full">
-            <div class="flex align-items-center justify-content-center">
-              <p class="text-1xl white-space-normal p-mb-0">
-                {{ display(slotProps.option) }}
-              </p>
-            </div>
-            <div class="flex align-items-center justify-content-center ml-2">
-              <Button
-                class="small-button"
-                icon="pi pi-info"
-                severity="secondary"
-                rounded
-                outlined
-                aria-label="Information"
-                class="small-button"
-                @click.stop="showInfo(slotProps.option)"
-              ></Button>
-              <DynamicDialog />
-            </div>
-          </div>
-        </template>
-        <template #footer>
-          <div class="py-2 px-3">
-            <b>{{ selectedModules ? selectedModules.length : 0 }}</b>
-            item{{
-              (selectedModules ? selectedModules.length : 0) > 1 ? "s" : ""
-            }}
-            selected.
-          </div>
-        </template>
-      </MultiSelect>
-    --></div>
+    </div>
     <div class="flex align-items-center justify-content-center h-4rem m-2">
       <Button @click="nextStep()">{{
         $t("additionalModules.nextStep")
@@ -299,4 +217,8 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
   height: 2rem;
   padding: 0;
 }
+
+:deep(.p-filter-column .p-checkbox .p-component) {
+  display: none !important;
+}
 </style>

From 1f41abff8b1fd28dd2c56759b68f7f9ae1a20577 Mon Sep 17 00:00:00 2001
From: survellow <59056368+survellow@users.noreply.github.com>
Date: Wed, 29 Nov 2023 12:00:22 +0100
Subject: [PATCH 05/10] 15 refactor module selection to use store

---
 frontend/src/components/ModuleSelection.vue | 79 ++++++++-------------
 frontend/src/store/moduleStore.ts           |  3 +
 frontend/src/view/AdditionalModules.vue     | 52 +++++---------
 3 files changed, 52 insertions(+), 82 deletions(-)

diff --git a/frontend/src/components/ModuleSelection.vue b/frontend/src/components/ModuleSelection.vue
index 36cad04..7c6f1f8 100644
--- a/frontend/src/components/ModuleSelection.vue
+++ b/frontend/src/components/ModuleSelection.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ComputedRef, PropType, Ref, ref, watch } from "vue";
+import { computed, ComputedRef, PropType } from "vue";
 import { Module } from "../model/module.ts";
 import moduleStore from "../store/moduleStore";
 import router from "../router";
@@ -12,47 +12,29 @@ const props = defineProps({
   },
 });
 
+const modules : ComputedRef<Module[]> = computed(() => props.modules);
+
 store.modules.clear();
 
-type ModuleWithSelection = { module: Module; selected: boolean };
+const allSelected : ComputedRef<boolean> = 
+  computed(() => props.modules.every((module) => store.hasModule(module)));
 
-// array of modules with boolean if selected with getter and setter
-const modulesWithSelection: Ref<ModuleWithSelection[]> = ref(
-  props.modules.map((propModule) => {
-    return {
-      module: propModule,
-      selected: store.hasModule(propModule),
-    };
-  }),
-);
-
-const selectedModules: ComputedRef<Module[]> = computed(() =>
-  modulesWithSelection.value
-    .filter((module) => module.selected)
-    .map((module) => module.module),
-);
-
-const currentModules = computed(() => props.modules);
-
-function selectAllModules(selection: boolean) {
+function toggleAllModules(){
+  if (allSelected.value) {
+    store.removeAllModules();
+  } else {
+    store.overwriteModules(props.modules);
+  }
   console.debug(props.modules);
-  modulesWithSelection.value.forEach((module) => {
-    module.selected = selection;
-  });
 }
 
-const allSelected: Ref<boolean> = ref(true);
-
-watch(currentModules, (newValue: Module[]) => {
-  modulesWithSelection.value = newValue.map((module) => {
-    return { module: module, selected: false };
-  });
-});
-
-// TODO: Refactor and directly use store hashmap
-watch(selectedModules, (newValue: Module[]) => {
-  store.overwriteModules(newValue);
-});
+function toggleModule(module: Module) {
+  if (store.hasModule(module)) {
+    store.removeModule(module);
+  } else {
+    store.addModule(module);
+  }
+}
 
 function nextStep() {
   router.push("/additional-modules");
@@ -63,31 +45,29 @@ function nextStep() {
   <div class="flex flex-column card-container mx-8 mt-2">
     <div class="flex align-items-center justify-content-center mb-3">
       <Button
-        :disabled="selectedModules.length < 1"
+        :disabled="store.isEmpty()"
         class="col-4 justify-content-center"
         @click="nextStep()"
         >{{ $t("moduleSelection.nextStep") }}
       </Button>
     </div>
     <div class="flex align-items-center justify-content-center">
-      <DataView :value="modulesWithSelection" data-key="module">
+      <DataView :value="modules" data-key="uuid">
         <template #header>
           <div class="flex justify-content-between flex-wrap">
             <div class="flex align-items-center justify-content-center">
               <h3>
                 {{ $t("moduleSelection.modules") }} -
-                {{ selectedModules.length }}
+                {{ store.countModules() }}
               </h3>
             </div>
             <div class="flex align-items-center justify-content-center">
-              <ToggleButton
-                v-model="allSelected"
-                class="w-12rem"
-                off-icon="pi pi-times"
-                :off-label="$t('moduleSelection.deselectAll')"
-                on-icon="pi pi-check"
-                :on-label="$t('moduleSelection.selectAll')"
-                @click="selectAllModules(!allSelected)"
+              {{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}
+              <InputSwitch
+                class="mx-4"
+                :disabled="modules.length === 0"
+                :model-value="allSelected"
+                @update:model-value="toggleAllModules()"
               />
             </div>
           </div>
@@ -108,18 +88,19 @@ function nextStep() {
                 <div
                   class="flex flex-column align-items-center justify-content-center sm:align-items-start gap-3"
                 >
-                  <p class="text-lg">{{ slotProps.data.module.name }}</p>
+                  <p class="text-lg">{{ slotProps.data.name }}</p>
                 </div>
                 <div
                   class="flex sm:flex-column justify-content-center sm:align-items-end gap-3 sm:gap-2"
                 >
                   <ToggleButton
-                    v-model="modulesWithSelection[slotProps.index].selected"
                     class="w-9rem"
                     off-icon="pi pi-times"
                     :off-label="$t('moduleSelection.unselected')"
                     on-icon="pi pi-check"
                     :on-label="$t('moduleSelection.selected')"
+                    :model-value="store.hasModule(slotProps.data)"
+                    @update:model-value="toggleModule(slotProps.data)"
                   />
                 </div>
               </div>
diff --git a/frontend/src/store/moduleStore.ts b/frontend/src/store/moduleStore.ts
index 2d08725..281135c 100644
--- a/frontend/src/store/moduleStore.ts
+++ b/frontend/src/store/moduleStore.ts
@@ -27,6 +27,9 @@ const moduleStore = defineStore("moduleStore", {
         this.modules.set(module.uuid, module);
       });
     },
+    isEmpty(): boolean {
+      return this.modules.size === 0;
+    },
     countModules(): number {
       return this.modules.size;
     },
diff --git a/frontend/src/view/AdditionalModules.vue b/frontend/src/view/AdditionalModules.vue
index 0b7f243..4b0b1d6 100644
--- a/frontend/src/view/AdditionalModules.vue
+++ b/frontend/src/view/AdditionalModules.vue
@@ -1,16 +1,15 @@
 <script lang="ts" setup>
-import { defineAsyncComponent, ref, Ref, watch} from "vue";
+import { defineAsyncComponent, ref, Ref} from "vue";
 import { Module } from "../model/module.ts";
 import { fetchAllModules } from "../api/fetchCourse.ts";
 import moduleStore from "../store/moduleStore.ts";
 import { FilterMatchMode } from "primevue/api";
+import { DataTableRowSelectEvent, DataTableRowUnselectEvent } from "primevue/datatable";
 import { useDialog } from "primevue/usedialog";
 import router from "../router";
 import { fetchModule } from "../api/fetchModule.ts";
-import { useI18n } from "vue-i18n";
 
 const dialog = useDialog();
-const { t } = useI18n({ useScope: "global" });
 
 const fetchedModules = async () => {
   return await fetchAllModules();
@@ -18,10 +17,6 @@ const fetchedModules = async () => {
 
 const store = moduleStore();
 
-const selectedModules: Ref<Module[]> = ref(
-   store.getAllModules()
-);
-
 const modules: Ref<Module[]> = ref([]);
 const filters = ref({
   course: {
@@ -38,35 +33,12 @@ const filters = ref({
   },
 });
 
-//const selectedModules: Ref<Module[]> = ref([] as Module[]);
-//const additionalModules: Ref<Map<string, Module>> = ref(new Map());
-
 fetchedModules().then(
   (data) =>
     (modules.value = data.map((module: Module) => {
       return module;
     })),
-).finally(() => {
-  // init selected modules from store with fetched modules and set selected modules
-  selectedModules.value = store.getAllModules().filter((module: Module) => {
-    return modules.value.some((m: Module) => m.uuid === module.uuid);
-  });
-});
-
-watch(selectedModules, () => {
-  //add missing modules to store
-  selectedModules.value.forEach((module: Module) => {
-    if (!store.getAllModules().some((m: Module) => m.uuid === module.uuid)) {
-      store.addModule(module);
-    }
-  });
-  //remove modules from store that are not selected anymore
-  store.getAllModules().forEach((module: Module) => {
-    if (!selectedModules.value.some((m: Module) => m.uuid === module.uuid)) {
-      store.removeModule(module);
-    }
-  });
-});
+);
 
 async function nextStep() {
   await router.push("/rename-modules");
@@ -96,6 +68,15 @@ async function showInfo(module: Module) {
     },
   });
 }
+
+function selectModule(event: DataTableRowSelectEvent) {
+  store.addModule(event.data);
+}
+
+function unselectModule(event: DataTableRowUnselectEvent) {
+  store.removeModule(event.data);
+}
+
 </script>
 
 <template>
@@ -109,7 +90,7 @@ async function showInfo(module: Module) {
       <DynamicDialog />
       <DataTable
         v-model:filters="filters"
-        v-model:selection="selectedModules"
+        :selection="store.getAllModules()"
         :value="modules"
         data-key="uuid"
         paginator
@@ -124,6 +105,8 @@ async function showInfo(module: Module) {
         :striped-rows="true"
         :select-all="false"
         class="w-10"
+        @row-select="selectModule"
+        @row-unselect="unselectModule"
       >
         <Column selection-mode="multiple">
         </Column>
@@ -196,7 +179,10 @@ async function showInfo(module: Module) {
       </DataTable>
     </div>
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="nextStep()">{{
+      <Button 
+        :disabled="store.isEmpty()"
+        @click="nextStep()"
+      >{{
         $t("additionalModules.nextStep")
       }}</Button>
     </div>

From 70a86bc5ca83220ab761ac9939099af854484525 Mon Sep 17 00:00:00 2001
From: survellow <59056368+survellow@users.noreply.github.com>
Date: Thu, 30 Nov 2023 17:32:57 +0100
Subject: [PATCH 06/10] 15 localization with translation strings

---
 frontend/src/components/CalendarPreview.vue | 12 ++++----
 frontend/src/i18n/translations/de.json      | 21 ++++++++++++--
 frontend/src/i18n/translations/en.json      | 21 ++++++++++++--
 frontend/src/view/AdditionalModules.vue     | 32 +++++++++++++++------
 4 files changed, 66 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/CalendarPreview.vue b/frontend/src/components/CalendarPreview.vue
index eb0a671..c9da149 100644
--- a/frontend/src/components/CalendarPreview.vue
+++ b/frontend/src/components/CalendarPreview.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import { Ref, computed, ref } from "vue";
 import moduleStore from "../store/moduleStore";
+import { useI18n } from "vue-i18n";
 
 const dialogVisible: Ref<boolean> = ref(false);
 const mobilePage = ref(true);
+const { t } = useI18n({ useScope: "global" });
 
 const store = moduleStore();
 const tableData = computed(() =>
@@ -19,9 +21,9 @@ const previewOn: Ref<boolean> = computed(() => {
   return moduleStore().modules.size > 0;
 });
 
-const columns = ref([
-  { field: "Course", header: "Course" },
-  { field: "Module", header: "Module" },
+const columns = computed(() => [
+  { field: "Course", header: t("calendarPreview.course") },
+  { field: "Module", header: t("calendarPreview.module") },
 ]);
 
 const updateMobile = () => {
@@ -40,7 +42,7 @@ window.addEventListener("resize", updateMobile);
     :visible="dialogVisible && previewOn"
     :maximizable="!mobilePage"
     :draggable="false"
-    header="Kalendervorschau"
+    :header="$t('calendarPreview.preview-long')"
     class="w-full lg:w-30rem lg:h-auto m-0 lg:m-2"
     position="bottomright"
     @update:visible="dialogVisible = $event"
@@ -71,7 +73,7 @@ window.addEventListener("resize", updateMobile);
     <template #button>
       <Button
         icon="pi pi-calendar"
-        label="Preview"
+        :label="$t('calendarPreview.preview')"
         class="p-button-rounded p-button-primary"
         @click="dialogVisible = true"
       />
diff --git a/frontend/src/i18n/translations/de.json b/frontend/src/i18n/translations/de.json
index d059bce..bd84f6e 100644
--- a/frontend/src/i18n/translations/de.json
+++ b/frontend/src/i18n/translations/de.json
@@ -38,7 +38,7 @@
     "semester": "Semester",
     "module": "Modul",
     "day": "Tag",
-    "start": "Begin",
+    "start": "Anfang",
     "end": "Ende",
     "room": "Raum",
     "type": "Art",
@@ -57,8 +57,17 @@
     "dropDown": "Wähle weitere Module aus",
     "module": "Modul",
     "modules": "Module",
-    "dropDownFooterSelected": "ausgewählt",
-    "nextStep": "Weiter"
+    "footerModulesSelected": "{count} Modul ausgewählt | {count} Module ausgewählt",
+    "nextStep": "Weiter",
+    "professor": "Dozent",
+    "course": "Seminargruppe",
+    "info": "Info",
+    "info-long": "Information",
+    "paginator": {
+      "from": "",
+      "to": " bis ", 
+      "of": " von insgesamt "
+    }
   },
   "renameModules": {
     "reminder": "Erinnerung",
@@ -90,6 +99,12 @@
     "toGoogleCalendar": "Google Kalender",
     "toMicrosoftCalendar": "Microsoft Kalender"
   },
+  "calendarPreview": {
+    "preview": "Vorschau",
+    "preview-long": "Kalendervorschau",
+    "module": "Modul",
+    "course": "Seminargruppe"
+  },
   "faqView": {
     "headline": "Fragen und Antworten",
     "firstQuestion": "Wie funktioniert das Kalender erstellen mit dem HTWKalender?",
diff --git a/frontend/src/i18n/translations/en.json b/frontend/src/i18n/translations/en.json
index cf7d08a..2e76316 100644
--- a/frontend/src/i18n/translations/en.json
+++ b/frontend/src/i18n/translations/en.json
@@ -53,12 +53,21 @@
     "noCalendarFound": "no calendar found"
   },
   "additionalModules": {
-    "subTitle": "Select additional Modules that are not listed in the regular semester for your Course",
+    "subTitle": "Select additional modules that are not listed in the regular semester for your course",
     "dropDown": "Select additional modules",
     "module": "module",
     "modules": "modules",
-    "dropDownFooterSelected": "selected",
-    "nextStep": "next step"
+    "footerModulesSelected": "{count} module selected | {count} modules selected",
+    "nextStep": "next step",
+    "professor": "professor",
+    "course": "course",
+    "info": "info",
+    "info-long": "information",
+    "paginator": {
+      "from": "",
+      "to": " to ", 
+      "of": " of "
+    }
   },
   "renameModules": {
     "reminder": "reminder",
@@ -90,6 +99,12 @@
     "toGoogleCalendar": "to Google Calendar",
     "toMicrosoftCalendar": "to Microsoft Calendar"
   },
+  "calendarPreview": {
+    "preview": "preview",
+    "preview-long": "calendar preview",
+    "module": "module",
+    "course": "course"
+  },
   "faqView": {
     "headline": "faq",
     "firstQuestion": "How does calendar creation work with HTWKalender?",
diff --git a/frontend/src/view/AdditionalModules.vue b/frontend/src/view/AdditionalModules.vue
index 4b0b1d6..1cd7ff8 100644
--- a/frontend/src/view/AdditionalModules.vue
+++ b/frontend/src/view/AdditionalModules.vue
@@ -8,14 +8,19 @@ import { DataTableRowSelectEvent, DataTableRowUnselectEvent } from "primevue/dat
 import { useDialog } from "primevue/usedialog";
 import router from "../router";
 import { fetchModule } from "../api/fetchModule.ts";
+import { useI18n } from "vue-i18n";
 
 const dialog = useDialog();
+const { t } = useI18n({ useScope: "global" });
 
 const fetchedModules = async () => {
   return await fetchAllModules();
 };
 
 const store = moduleStore();
+if (store.isEmpty()) {
+  router.replace("/");
+}
 
 const modules: Ref<Module[]> = ref([]);
 const filters = ref({
@@ -97,7 +102,14 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         :rows="10"
         :rows-per-page-options="[5, 10, 20, 50]"
         paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"
-        current-page-report-template="{first} to {last} of {totalRecords}"
+        :current-page-report-template="
+          $t('additionalModules.paginator.from') +
+          '{first}' + 
+          $t('additionalModules.paginator.to') + 
+          '{last}' + 
+          $t('additionalModules.paginator.of') + 
+          '{totalRecords}'
+        "
         filter-display="row"
         :loading="!modules.length"
         loading-icon="pi pi-spinner"
@@ -113,7 +125,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
 
         <Column
           field="course"
-          header="Course"
+          :header="$t('additionalModules.course')"
           :show-clear-button="false"
           :show-filter-menu="false"
         >
@@ -128,7 +140,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         </Column>
         <Column
           field="name"
-          header="Name"
+          :header="$t('additionalModules.module')"
           :show-clear-button="false"
           :show-filter-menu="false"
         >
@@ -143,7 +155,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         </Column>
         <Column
           field="prof"
-          header="Professor"
+          :header="$t('additionalModules.professor')"
           :show-clear-button="false"
           :show-filter-menu="false"
         >
@@ -156,14 +168,16 @@ function unselectModule(event: DataTableRowUnselectEvent) {
             />
           </template>
         </Column>
-        <Column header="Info">
+        <Column 
+          :header="$t('additionalModules.info')"
+        >
           <template #body="slotProps">
             <Button
               icon="pi pi-info"
               severity="secondary"
               rounded
               outlined
-              aria-label="Information"
+              :aria-label="$t('additionalModules.info-long')"
               class="small-button"
               @click.stop="showInfo(slotProps.data)"
             ></Button>
@@ -171,9 +185,9 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         </Column>
         <template #footer>
           <div class="py-2 px-3">
-            <b>{{ store ? store.countModules() : 0 }}</b>
-            item{{ (store ? store.countModules() : 0) !== 1 ? "s" : "" }}
-            selected.
+            {{ 
+              t('additionalModules.footerModulesSelected', { count: store?.countModules() ?? 0 })
+            }} 
           </div>
         </template>
       </DataTable>

From 1c7aa23433cf0389eec2a526f1bf78120ff72dfc Mon Sep 17 00:00:00 2001
From: masterElmar <18119527+masterElmar@users.noreply.github.com>
Date: Thu, 30 Nov 2023 18:29:10 +0100
Subject: [PATCH 07/10] bug:#15 lower Timeout for http request

---
 backend/service/fetch/fetchSeminarEventService.go | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/backend/service/fetch/fetchSeminarEventService.go b/backend/service/fetch/fetchSeminarEventService.go
index bf18258..7311329 100644
--- a/backend/service/fetch/fetchSeminarEventService.go
+++ b/backend/service/fetch/fetchSeminarEventService.go
@@ -309,8 +309,12 @@ func toUtf8(iso88591Buf []byte) string {
 func getPlanHTML(semester string, matrikel string) (string, error) {
 	url := "https://stundenplan.htwk-leipzig.de/" + string(semester) + "/Berichte/Text-Listen;Studenten-Sets;name;" + matrikel + "?template=sws_semgrp&weeks=1-65"
 
+	client := http.Client{
+		Timeout: 5 * time.Second,
+	}
+
 	// Send GET request
-	response, err := http.Get(url)
+	response, err := client.Get(url)
 	if err != nil {
 		fmt.Printf("Error occurred while making the request: %s\n", err.Error())
 		return "", err

From de43d929d7f849748c0f3fe8356b66ea1181985a Mon Sep 17 00:00:00 2001
From: masterElmar <18119527+masterElmar@users.noreply.github.com>
Date: Thu, 30 Nov 2023 18:43:36 +0100
Subject: [PATCH 08/10] fix:#15 added time rule for fetching ws and ss

---
 .../service/fetch/fetchSeminarEventService.go | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/backend/service/fetch/fetchSeminarEventService.go b/backend/service/fetch/fetchSeminarEventService.go
index 7311329..f20851f 100644
--- a/backend/service/fetch/fetchSeminarEventService.go
+++ b/backend/service/fetch/fetchSeminarEventService.go
@@ -64,16 +64,20 @@ func GetSeminarGroupsEventsFromHTML(seminarGroupsLabel []string) []model.Seminar
 	var seminarGroups []model.SeminarGroup
 	for _, seminarGroupLabel := range seminarGroupsLabel {
 
-		result, getError := getPlanHTML("ss", seminarGroupLabel)
-		if getError == nil {
-			seminarGroup := parseSeminarGroup(result)
-			seminarGroups = append(seminarGroups, seminarGroup)
+		if (time.Now().Month() >= 3) && (time.Now().Month() <= 10) {
+			result, getError := getPlanHTML("ss", seminarGroupLabel)
+			if getError == nil {
+				seminarGroup := parseSeminarGroup(result)
+				seminarGroups = append(seminarGroups, seminarGroup)
+			}
 		}
 
-		result, getError = getPlanHTML("ws", seminarGroupLabel)
-		if getError == nil {
-			seminarGroup := parseSeminarGroup(result)
-			seminarGroups = append(seminarGroups, seminarGroup)
+		if (time.Now().Month() >= 9) || (time.Now().Month() <= 4) {
+			result, getError := getPlanHTML("ws", seminarGroupLabel)
+			if getError == nil {
+				seminarGroup := parseSeminarGroup(result)
+				seminarGroups = append(seminarGroups, seminarGroup)
+			}
 		}
 	}
 	return seminarGroups

From 0e8ed89a1bf8e8a468b39428b1b1bad02337ca98 Mon Sep 17 00:00:00 2001
From: masterElmar <18119527+masterElmar@users.noreply.github.com>
Date: Thu, 30 Nov 2023 18:51:15 +0100
Subject: [PATCH 09/10] fix:#15 removed prof search

---
 frontend/src/view/AdditionalModules.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/frontend/src/view/AdditionalModules.vue b/frontend/src/view/AdditionalModules.vue
index 1cd7ff8..f4f4ed1 100644
--- a/frontend/src/view/AdditionalModules.vue
+++ b/frontend/src/view/AdditionalModules.vue
@@ -159,14 +159,6 @@ function unselectModule(event: DataTableRowUnselectEvent) {
           :show-clear-button="false"
           :show-filter-menu="false"
         >
-          <template #filter="{ filterModel, filterCallback }">
-            <InputText
-              v-model="filterModel.value"
-              type="text"
-              class="p-column-filter"
-              @input="filterCallback()"
-            />
-          </template>
         </Column>
         <Column 
           :header="$t('additionalModules.info')"

From 3de7bdaabef672790a3b50365d13328df513752a Mon Sep 17 00:00:00 2001
From: masterElmar <18119527+masterElmar@users.noreply.github.com>
Date: Thu, 30 Nov 2023 18:55:11 +0100
Subject: [PATCH 10/10] fix:#15 fixed wrong path

---
 frontend/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b220877..6d84655 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -2,7 +2,7 @@
 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 moduleStore from "./store/moduleStore.ts";
 
 const disabledPages = ["room-finder", "faq", "imprint", "privacy-policy", "edit"];