Merge branch 'main' into 150-fix-error-response

# Conflicts: # backend/service/addSchedule.go # backend/service/fetch/v2/fetcher.go # frontend/package-lock.json
2025-08-07 04:09:15 +02:00 · 2024-01-21 17:59:08 +01:00
parent 031fa717d7 42151a187c
commit 25d2a5ae31
58 changed files with 6719 additions and 3348 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,7 +3,11 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/htwk.svg" />
-    <link id="theme-link" rel="stylesheet" href="themes/lara-light-blue/theme.css">
+    <link
+      id="theme-link"
+      rel="stylesheet"
+      href="themes/lara-light-blue/theme.css"
+    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTWKalender</title>
  </head>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,36 +8,40 @@
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
-    "format": "prettier .  --write"
+    "lint-no-fix": "eslint --ext .js,.vue --ignore-path .gitignore src",
+    "format": "prettier .  --write",
+    "test": "vitest"
  },
  "dependencies": {
-    "@fullcalendar/core": "^6.1.9",
-    "@fullcalendar/daygrid": "^6.1.9",
-    "@fullcalendar/interaction": "^6.1.9",
-    "@fullcalendar/timegrid": "^6.1.9",
-    "@fullcalendar/vue3": "^6.1.9",
-    "@vueuse/core": "^10.6.1",
-    "pinia": "^2.1.6",
+    "@fullcalendar/core": "^6.1.10",
+    "@fullcalendar/daygrid": "^6.1.10",
+    "@fullcalendar/interaction": "^6.1.10",
+    "@fullcalendar/timegrid": "^6.1.10",
+    "@fullcalendar/vue3": "^6.1.10",
+    "@vueuse/core": "^10.7.1",
+    "pinia": "^2.1.7",
    "primeflex": "^3.3.1",
    "primeicons": "^6.0.1",
-    "primevue": "^3.32.2",
-    "vue": "^3.3.4",
-    "vue-i18n": "^9.4.1",
-    "vue-router": "^4.2.4"
+    "primevue": "^3.46.0",
+    "source-sans-pro": "^3.6.0",
+    "vue": "^3.4.11",
+    "vue-i18n": "^9.9.0",
+    "vue-router": "^4.2.5"
  },
  "devDependencies": {
-    "@types/node": "^20.5.9",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@types/node": "^20.11.0",
+    "@vitejs/plugin-vue": "^5.0.3",
    "@vue/eslint-config-typescript": "^12.0.0",
-    "eslint": "^8.48.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "moment-timezone": "^0.5.43",
-    "prettier": "3.0.2",
-    "sass": "^1.69.5",
-    "sass-loader": "^13.3.2",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.12",
-    "vue-tsc": "^1.8.5"
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-vue": "^9.20.0",
+    "moment-timezone": "^0.5.44",
+    "prettier": "3.2.1",
+    "sass": "^1.69.7",
+    "sass-loader": "^13.3.3",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vitest": "^1.2.0",
+    "vue-tsc": "^1.8.27"
  }
 }
--- a/frontend/public/themes/lara-dark-blue/theme.css
+++ b/frontend/public/themes/lara-dark-blue/theme.css
--- a/frontend/public/themes/lara-light-blue/theme.css
+++ b/frontend/public/themes/lara-light-blue/theme.css
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,18 +1,25 @@
 <script lang="ts" setup>
 import MenuBar from "./components/MenuBar.vue";
-import {RouteRecordName, RouterView} from "vue-router";
+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 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
+  return !disabledPages.includes(routeName as string) && store.modules.size > 0;
 };

 const updateMobile = () => {
@@ -26,10 +33,31 @@ window.addEventListener("resize", updateMobile);

 <template>
  <MenuBar />
-  <RouterView />
+  <RouterView v-slot="{ Component, route }">
+    <transition name="scale" mode="out-in">
+      <div :key="route.name ?? ''" class="origin-near-top">
+        <component :is="Component" />
+      </div>
+    </transition>
+  </RouterView>
  <!-- show CalendarPreview but only on specific router views -->
-  <CalendarPreview v-if="isDisabled($route.name)"/>
+  <CalendarPreview v-if="isDisabled($route.name)" />
  <Toast />
 </template>

-<style scoped></style>
+<style scoped>
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.2s ease;
+}
+
+.scale-enter-from,
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.origin-near-top {
+  transform-origin: center 33vh;
+}
+</style>
--- a/frontend/src/api/createFeed.ts
+++ b/frontend/src/api/createFeed.ts
@@ -19,6 +19,23 @@ export async function createIndividualFeed(modules: Module[]): Promise<string> {
  return token;
 }

+interface FeedResponse {
+  modules: FeedModule[];
+  collectionId: string;
+  collectionName: string;
+  id: string;
+  retrieved: string;
+  updated: string;
+}
+
+interface FeedModule {
+  course: string;
+  name: string;
+  reminder: boolean;
+  userDefinedName: string;
+  uuid: string;
+}
+
 export async function saveIndividualFeed(
  token: string,
  modules: Module[],
@@ -30,11 +47,14 @@ export async function saveIndividualFeed(
    },
    body: '{"modules":' + JSON.stringify(modules) + "}",
  })
-    .then((response) => {
-      return response.json();
+    .then(async (response) => {
+      // parse response.json to FeedResponse
+      const feedResponse: FeedResponse = await response.json();
+      return feedResponse;
    })
-    .then((response) => {
-      token = response;
+    .then((response: FeedResponse) => {
+      console.debug("response", response);
+      token = response.id;
    });
  return token;
 }
@@ -42,14 +62,15 @@ export async function saveIndividualFeed(
 export async function deleteIndividualFeed(token: string): Promise<void> {
  await fetch("/api/feed?token=" + token, {
    method: "DELETE",
-  }).then ((response) => {
-    if (response.ok) {
+  })
+    .then((response) => {
+      if (response.ok) {
        return Promise.resolve(response);
-    } else {
-      return Promise.reject(response);
-    }
-  }).catch((error) => {
-    return Promise.reject(error);
-  });
-
+      } else {
+        return Promise.reject(response);
+      }
+    })
+    .catch((error) => {
+      return Promise.reject(error);
+    });
 }
--- a/frontend/src/api/fetchCourse.ts
+++ b/frontend/src/api/fetchCourse.ts
@@ -36,6 +36,7 @@ export async function fetchModulesByCourseAndSemester(
            module.uuid,
            module.name,
            course,
+            module.eventType,
            module.name,
            module.prof,
            semester,
@@ -61,6 +62,7 @@ export async function fetchAllModules(): Promise<Module[]> {
            module.uuid,
            module.name,
            module.course,
+            module.eventType,
            module.name,
            module.prof,
            module.semester,
--- a/frontend/src/api/fetchModule.ts
+++ b/frontend/src/api/fetchModule.ts
@@ -14,6 +14,7 @@ export async function fetchModule(module: Module): Promise<Module> {
          module.uuid,
          module.name,
          module.course,
+          module.eventType,
          module.name,
          module.prof,
          module.semester,
--- a/frontend/src/components/AdditionalModuleTable.vue
+++ b/frontend/src/components/AdditionalModuleTable.vue
@@ -0,0 +1,244 @@
+<script lang="ts" setup>
+import { defineAsyncComponent, inject, onMounted, 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 store = moduleStore();
+if (store.isEmpty()) {
+  router.replace("/");
+}
+
+const mobilePage = inject("mobilePage") as Ref<boolean>;
+const filters = ref({
+  course: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
+  name: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
+  eventType: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
+  prof: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
+});
+
+const loadedModules: Ref<Module[]> = ref(new Array(10));
+
+const loadingData = ref(true);
+
+onMounted(() => {
+  fetchAllModules()
+    .then(
+      (data) =>
+        (loadedModules.value = data.map((module: Module) => {
+          return module;
+        })),
+    )
+    .finally(() => {
+      loadingData.value = false;
+    });
+});
+
+const ModuleInformation = defineAsyncComponent(
+  () => import("./ModuleInformation.vue"),
+);
+
+async function showInfo(module: Module) {
+  await fetchModule(module).then((data) => {
+    module = data;
+  });
+  dialog.open(ModuleInformation, {
+    class: "w-full m-0",
+    props: {
+      style: {
+        width: "80vw",
+      },
+      breakpoints: {
+        "992px": "100vw",
+        "640px": "100vw",
+      },
+      modal: true,
+    },
+    data: {
+      module: module,
+    },
+  });
+}
+
+function selectModule(event: DataTableRowSelectEvent) {
+  store.addModule(event.data);
+}
+
+function unselectModule(event: DataTableRowUnselectEvent) {
+  store.removeModule(event.data);
+}
+</script>
+
+<template>
+  <div class="m-2 lg:w-10 w-full">
+    <DynamicDialog />
+    <DataTable
+      id="dt-responsive-table"
+      v-model:filters="filters"
+      :selection="store.getAllModules()"
+      :value="loadedModules"
+      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="
+        $t('additionalModules.paginator.from') +
+        '{first}' +
+        $t('additionalModules.paginator.to') +
+        '{last}' +
+        $t('additionalModules.paginator.of') +
+        '{totalRecords}'
+      "
+      filter-display="row"
+      :show-gridlines="true"
+      :striped-rows="true"
+      :select-all="false"
+      :size="mobilePage ? 'small' : 'large'"
+      @row-select="selectModule"
+      @row-unselect="unselectModule"
+    >
+      <Column selection-mode="multiple">
+        <template v-if="loadingData" #body>
+          <Skeleton></Skeleton>
+        </template>
+      </Column>
+
+      <Column
+        field="course"
+        :header="$t('additionalModules.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>
+        <template v-if="loadingData" #body>
+          <Skeleton></Skeleton>
+        </template>
+      </Column>
+      <Column
+        field="name"
+        :header="$t('additionalModules.module')"
+        :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>
+        <template v-if="loadingData" #body>
+          <Skeleton></Skeleton>
+        </template>
+      </Column>
+      <Column
+        field="eventType"
+        :header="$t('additionalModules.eventType')"
+        :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>
+        <template v-if="loadingData" #body>
+          <Skeleton></Skeleton>
+        </template>
+      </Column>
+      <Column
+        field="prof"
+        :header="$t('additionalModules.professor')"
+        :show-clear-button="false"
+        :show-filter-menu="false"
+      >
+        <template v-if="loadingData" #body>
+          <Skeleton></Skeleton>
+        </template>
+      </Column>
+      <Column :header="$t('additionalModules.info')">
+        <template #body="slotProps">
+          <div v-if="loadingData">
+            <Skeleton></Skeleton>
+          </div>
+          <div v-else>
+            <Button
+              icon="pi pi-info"
+              severity="secondary"
+              rounded
+              outlined
+              :aria-label="$t('additionalModules.info-long')"
+              class="small-button"
+              @click.stop="showInfo(slotProps.data)"
+            ></Button>
+          </div>
+        </template>
+      </Column>
+      <template #footer>
+        <div class="py-2 px-3">
+          {{
+            t("additionalModules.footerModulesSelected", {
+              count: store?.countModules() ?? 0,
+            })
+          }}
+        </div>
+      </template>
+    </DataTable>
+  </div>
+</template>
+
+<style scoped>
+:deep(.custom-multiselect) {
+  width: 50rem;
+}
+
+:deep(.custom-multiselect li) {
+  height: unset;
+}
+
+.small-button.p-button {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+}
+
+:deep(.p-filter-column .p-checkbox .p-component) {
+  display: none !important;
+}
+</style>
--- a/frontend/src/components/CalendarLink.vue
+++ b/frontend/src/components/CalendarLink.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import tokenStore from "../store/tokenStore.ts";
 import { useToast } from "primevue/usetoast";
-import {computed, onMounted} from "vue";
+import { computed, onMounted } from "vue";
 import router from "../router";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n({ useScope: "global" });
@@ -79,7 +79,6 @@ const actions = computed(() => [
 </script>

 <template>
-
  <div class="flex flex-column mt-8">
    <div class="flex align-items-center justify-content-center m-2">
      <h2 class="text-base md:text-2xl">
--- a/frontend/src/components/CalendarPreview.vue
+++ b/frontend/src/components/CalendarPreview.vue
@@ -25,7 +25,6 @@ const columns = computed(() => [
  { field: "Course", header: t("calendarPreview.course") },
  { field: "Module", header: t("calendarPreview.module") },
 ]);
-
 </script>

 <template>
--- a/frontend/src/components/DarkModeSwitcher.vue
+++ b/frontend/src/components/DarkModeSwitcher.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { ref } from "vue";
-import { usePrimeVue } from 'primevue/config';
+import { usePrimeVue } from "primevue/config";

 const PrimeVue = usePrimeVue();

 const isDark = ref(true);
-const darkTheme = ref('lara-dark-blue'),
-  lightTheme = ref('lara-light-blue');
+const darkTheme = ref("lara-dark-blue"),
+  lightTheme = ref("lara-light-blue");

 function toggleTheme() {
  isDark.value = !isDark.value;
@@ -17,29 +17,32 @@ function setTheme(shouldBeDark: boolean) {
  isDark.value = shouldBeDark;
  const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
    oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
-  PrimeVue.changeTheme(oldTheme, newTheme, 'theme-link', () => {});
+  PrimeVue.changeTheme(oldTheme, newTheme, "theme-link", () => {});
 }

 // set theme matching browser preference
-setTheme(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+setTheme(
+  window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches,
+);

-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-   setTheme(e.matches); 
-});
+window
+  .matchMedia("(prefers-color-scheme: dark)")
+  .addEventListener("change", (e) => {
+    setTheme(e.matches);
+  });
 </script>

 <template>
-
-<Button
-  size="small"
-  class="p-button-rounded w-full md:w-auto"
-  id="dark-mode-switcher"
-  style="margin-right: 1rem"
-  :severity="isDark ? 'warning' : 'info'"
-  @click="toggleTheme"
+  <Button
+    id="dark-mode-switcher"
+    size="small"
+    class="p-button-rounded w-full md:w-auto"
+    style="margin-right: 1rem"
+    :severity="isDark ? 'warning' : 'info'"
+    @click="toggleTheme"
  >
-  <i class="pi pi-sun" v-if="isDark"></i>
-  <i class="pi pi-moon" v-else></i>
-</Button>
-
+    <i v-if="isDark" class="pi pi-sun"></i>
+    <i v-else class="pi pi-moon"></i>
+  </Button>
 </template>
--- a/frontend/src/components/FaqPage.vue
+++ b/frontend/src/components/FaqPage.vue
@@ -224,5 +224,4 @@
 .grid > .col:first-child {
  font-weight: bold;
 }
-
 </style>
--- a/frontend/src/components/LocaleSwitcher.vue
+++ b/frontend/src/components/LocaleSwitcher.vue
@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import localeStore from "../store/localeStore.ts";
 import { useI18n } from "vue-i18n";
+import { DropdownChangeEvent } from "primevue/dropdown";
 const { t } = useI18n({ useScope: "global" });

 const countries = computed(() => [
@@ -17,8 +18,8 @@ function displayCountry(code: string) {
  return countries.value.find((country) => country.code === code)?.name;
 }

-function updateLocale(locale: string) {
-  localeStore().setLocale(locale);
+function updateLocale(dropdownChangeEvent: DropdownChangeEvent) {
+  localeStore().setLocale(dropdownChangeEvent.value);
 }
 </script>
 <template>
@@ -28,7 +29,7 @@ function updateLocale(locale: string) {
    option-label="name"
    placeholder="Select a Language"
    class="w-full md:w-14rem"
-    @change="updateLocale($event.data)"
+    @change="updateLocale($event)"
  >
    <template #value="slotProps">
      <div v-if="slotProps.value" class="flex align-items-center">
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -2,7 +2,7 @@
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import LocaleSwitcher from "./LocaleSwitcher.vue";
-import DarkModeSwitcher from "./DarkModeSwitcher.vue"
+import DarkModeSwitcher from "./DarkModeSwitcher.vue";
 const { t } = useI18n({ useScope: "global" });

 const items = computed(() => [
@@ -19,22 +19,22 @@ const items = computed(() => [
  {
    label: t("roomFinder"),
    icon: "pi pi-fw pi-calendar",
-    route: `rooms`,
+    route: "/rooms",
  },
  {
    label: t("faq"),
    icon: "pi pi-fw pi-book",
-    route: `faq`,
+    route: "/faq",
  },
  {
    label: t("imprint"),
    icon: "pi pi-fw pi-id-card",
-    route: `imprint`,
+    route: "/imprint",
  },
  {
    label: t("privacy"),
    icon: "pi pi-fw pi-exclamation-triangle",
-    route: `privacy-policy`,
+    route: "/privacy-policy",
  },
 ]);
 </script>
@@ -43,16 +43,10 @@ const items = computed(() => [
  <Menubar :model="items" class="menubar justify-content-between flex-wrap">
    <template #start>
      <router-link v-slot="{ navigate }" :to="`/`" custom>
-        <Button 
-          severity="secondary"
-          text
-          class="p-0 mx-2"
-          @click="navigate"
-        >
+        <Button severity="secondary" text class="p-0 mx-2" @click="navigate">
          <img
            width="50"
            height="50"
-            class="w-full"
            src="../../public/htwk.svg"
            alt="Logo"
          />
@@ -65,12 +59,13 @@ const items = computed(() => [
          :label="String(item.label)"
          :icon="item.icon"
          text
-          @click="navigate"
          severity="secondary"
+          :class="item.route === $route.path ? 'active' : ''"
+          @click="navigate"
        />
      </router-link>
    </template>
-    <template #end class="align-items-stretch">
+    <template #end>
      <div class="flex align-items-stretch justify-content-center">
        <DarkModeSwitcher></DarkModeSwitcher>
        <LocaleSwitcher></LocaleSwitcher>
@@ -84,4 +79,17 @@ const items = computed(() => [
  background-color: transparent;
  border: none;
 }
+
+:deep(.p-button .p-button-label::after) {
+  content: "";
+  display: block;
+  width: 0;
+  height: 2px;
+  background: var(--primary-color);
+  transition: width 0.3s;
+}
+
+:deep(.p-button.active .p-button-label::after) {
+  width: 100%;
+}
 </style>
--- a/frontend/src/components/ModuleInformation.vue
+++ b/frontend/src/components/ModuleInformation.vue
@@ -91,22 +91,36 @@ function formatWeekday(weekday: string) {
              :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">
+                <div
+                  v-for="(item, index) in slotProps.items"
+                  :key="index"
+                  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'"
+                      <Badge
+                        :value="item.eventType"
+                        :severity="
+                          item.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 class="mr-2">{{ formatWeekday(item.day) }}</div>
+                          <div class="mr-2">
+                            {{
+                              $t("moduleInformation.nthWeek", {
+                                count: item.week,
+                              })
+                            }}
+                          </div>
                        </div>
                        <div class="flex flex-column">
                          <table>
@@ -114,19 +128,19 @@ function formatWeekday(weekday: string) {
                              <td class="mr-2">
                                <b>{{ $t("moduleInformation.start") }}:</b>
                              </td>
-                              <td>{{ formatTimestamp(slotProps.data.start) }}</td>
+                              <td>{{ formatTimestamp(item.start) }}</td>
                            </tr>
                            <tr>
                              <td class="mr-2">
                                <b>{{ $t("moduleInformation.end") }}:</b>
                              </td>
-                              <td>{{ formatTimestamp(slotProps.data.end) }}</td>
+                              <td>{{ formatTimestamp(item.end) }}</td>
                            </tr>
                            <tr>
                              <td class="mr-2">
                                <b>{{ $t("moduleInformation.room") }}:</b>
                              </td>
-                              <td>{{ slotProps.data.rooms }}</td>
+                              <td>{{ item.rooms }}</td>
                            </tr>
                          </table>
                        </div>
--- a/frontend/src/components/ModuleSelection.vue
+++ b/frontend/src/components/ModuleSelection.vue
@@ -2,7 +2,6 @@
 import { computed, ComputedRef, PropType } from "vue";
 import { Module } from "../model/module.ts";
 import moduleStore from "../store/moduleStore";
-import router from "../router";

 const store = moduleStore();
 const props = defineProps({
@@ -16,21 +15,23 @@ const props = defineProps({
  },
 });

-const modules : ComputedRef<Module[]> = computed(() => props.modules);
-const selectedCourse : ComputedRef<string> = computed(() => props.selectedCourse);
+const modules: ComputedRef<Module[]> = computed(() => props.modules);
+const selectedCourse: ComputedRef<string> = computed(
+  () => props.selectedCourse,
+);

 store.modules.clear();

-const allSelected : ComputedRef<boolean> = 
-  computed(() => props.modules.every((module) => store.hasModule(module)));
+const allSelected: ComputedRef<boolean> = computed(() =>
+  props.modules.every((module) => store.hasModule(module)),
+);

-function toggleAllModules(){
+function toggleAllModules() {
  if (allSelected.value) {
    store.removeAllModules();
  } else {
    store.overwriteModules(props.modules);
  }
-  console.debug(props.modules);
 }

 function toggleModule(module: Module) {
@@ -40,39 +41,43 @@ function toggleModule(module: Module) {
    store.addModule(module);
  }
 }
-
-function nextStep() {
-  router.push("/additional-modules");
-}
 </script>

 <template>
-  <div class="flex flex-column mx-8 mt-2 w-full">
-    <Button
-      :disabled="store.isEmpty()"
-      class="col-12 md:col-4 mb-3 align-self-end"
-      @click="nextStep()"
-      icon="pi pi-arrow-right"
-      :label="$t('moduleSelection.nextStep')"
-    />
-    <DataView 
+  <div class="flex flex-column w-full">
+    <DataView
      :value="modules"
      data-key="uuid"
-      :class="
-        [selectedCourse === ''? 
-          ['opacity-0', 'pointer-events-none'] : 
-          ['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
-        ,
-        'w-full']"
-      >
+      :class="[
+        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 md:mx-4">
-            <h3>
-              {{ $t("moduleSelection.modules") }} -
-              {{ store.countModules() }}
-            </h3>
-          <div class="flex align-items-center justify-content-end white-space-nowrap">
-            <p>{{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}</p>
+        <div
+          class="flex justify-content-between align-items-center flex-wrap md:mx-4"
+        >
+          <h3>
+            {{ $t("moduleSelection.modules") }} -
+            {{ store.countModules() }}
+          </h3>
+          <div
+            class="flex align-items-center justify-content-end white-space-nowrap"
+          >
+            <p>
+              {{
+                allSelected
+                  ? $t("moduleSelection.deselectAll")
+                  : $t("moduleSelection.selectAll")
+              }}
+            </p>
            <InputSwitch
              class="mx-2"
              :disabled="modules.length === 0"
@@ -88,18 +93,29 @@ function nextStep() {
        </p>
      </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 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"
-              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 class="grid grid-nogutter">
+          <div
+            v-for="(item, index) in slotProps.items"
+            :key="index"
+            class="col-12"
+          >
+            <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">{{ item.name }}</p>
+              <Button
+                class="w-9rem align-self-end my-2"
+                :icon="store.hasModule(item) ? 'pi pi-times' : 'pi pi-plus'"
+                :label="
+                  store.hasModule(item)
+                    ? $t('moduleSelection.selected')
+                    : $t('moduleSelection.unselected')
+                "
+                outlined
+                :severity="store.hasModule(item) ? '' : 'secondary'"
+                @click="toggleModule(item)"
+              />
+            </div>
          </div>
        </div>
      </template>
--- a/frontend/src/components/RenameModules.vue
+++ b/frontend/src/components/RenameModules.vue
@@ -3,21 +3,28 @@ import moduleStore from "../store/moduleStore.ts";
 import { createIndividualFeed } from "../api/createFeed.ts";
 import router from "../router";
 import tokenStore from "../store/tokenStore.ts";
-import { Ref, computed, inject, ref } from "vue";
+import { Ref, computed, inject, ref, onMounted } from "vue";
 import ModuleTemplateDialog from "./ModuleTemplateDialog.vue";
 import { onlyWhitespace } from "../helpers/strings.ts";
 import { useI18n } from "vue-i18n";
+import { Module } from "@/model/module.ts";
 const { t } = useI18n({ useScope: "global" });

 const store = moduleStore();
-const tableData = ref(
-  store.getAllModules().map((module) => {
-    return {
-      Course: module.course,
-      Module: module,
-    };
-  }),
+const tableData: Ref<{ Course: string; Module: Module }[]> = ref([
+  { Course: "", Module: {} as Module },
+]);
+
+onMounted(
+  () =>
+    (tableData.value = store.getAllModules().map((module) => {
+      return {
+        Course: module.course,
+        Module: module,
+      };
+    })),
 );
+
 const mobilePage = inject("mobilePage") as Ref<boolean>;

 const columns = computed(() => [
@@ -37,7 +44,7 @@ async function finalStep() {
  <div class="flex flex-column align-items-center mb-7">
    <div class="flex align-items-center justify-content-center m-2 gap-2">
      <h3>{{ $t("renameModules.subTitle") }}</h3>
-      <ModuleTemplateDialog class=""/>
+      <ModuleTemplateDialog />
    </div>
    <div class="w-full lg:w-8 flex flex-column">
      <div class="card flex align-items-center justify-content-center my-2">
@@ -50,7 +57,9 @@ async function finalStep() {
          class="w-full"
        >
          <template #header>
-            <div class="flex align-items-center justify-content-end flex-wrap gap-2 px-2">
+            <div
+              class="flex align-items-center justify-content-end flex-wrap gap-2 px-2"
+            >
              {{ $t("renameModules.enableAllNotifications") }}
              <InputSwitch
                :model-value="
@@ -60,17 +69,19 @@ async function finalStep() {
                  )
                "
                @update:model-value="
-                  tableData.forEach((module) => (module.Module.reminder = $event))
+                  tableData.forEach(
+                    (module) => (module.Module.reminder = $event),
+                  )
                "
              />
            </div>
          </template>
          <Column
-            v-for="col of columns"
-            :key="col.field"
-            :field="col.field"
-            :header="col.header"
-            :class="col.field === 'Reminder' ? 'text-center' : ''"
+            v-for="(item, index) in columns"
+            :key="index"
+            :field="item.field"
+            :header="item.header"
+            :class="item.field === 'Reminder' ? 'text-center' : ''"
          >
            <!-- Text Body -->
            <template #body="{ data, field }">
@@ -125,11 +136,11 @@ async function finalStep() {
      <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')"
+        @click="finalStep()"
      />
-    </div>  
+    </div>
  </div>
 </template>

--- a/frontend/src/components/RoomOccupation.vue
+++ b/frontend/src/components/RoomOccupation.vue
@@ -4,7 +4,7 @@ import dayGridPlugin from "@fullcalendar/daygrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import { computed, ComputedRef, inject, ref, Ref, watch } from "vue";
-import { CalendarOptions, EventInput } from "@fullcalendar/core";
+import { CalendarOptions, DatesSetArg, EventInput } from "@fullcalendar/core";
 import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n({ useScope: "global" });
@@ -46,111 +46,113 @@ async function getOccupation() {
    currentDateFrom.value,
    currentDateTo.value,
  )
-  .then((events) => {
-    occupations.value = events.map((event, index) => {
-      return {
-        id: index,
-        start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
-        end: event.end.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
-        showFree: event.free
-      };
-    });
+    .then((events) => {
+      occupations.value = events.map((event, index) => {
+        return {
+          id: index,
+          start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
+          end: event.end.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
+          showFree: event.free,
+        };
+      });

-    const calendar = fullCalendar.value?.getApi();
-    calendar?.refetchEvents();
-  })
-  .catch((error) => {
-    console.log(error);
-  });
+      const calendar = fullCalendar.value?.getApi();
+      calendar?.refetchEvents();
+    })
+    .catch((error) => {
+      console.log(error);
+    });
 }

 import allLocales from "@fullcalendar/core/locales-all";

-const calendarOptions: ComputedRef<CalendarOptions> = computed(() => 
-  ({
-    locales: allLocales,
-    locale: t("languageCode"),
-    plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
-    // local debugging of mobilePage variable in object creation on ternary expression
-    initialView: mobilePage.value ? "Day" : "week",
-    dayHeaderFormat: { weekday: "short", omitCommas: true },
-    slotDuration: "00:15:00",
-    eventTimeFormat: {
-      hour: "2-digit",
-      minute: "2-digit",
-      hour12: false,
-    },
-    height: "auto",
-    views: {
-      week: {
-        description: "Wochenansicht",
-        type: "timeGrid",
-        slotLabelFormat: {
-          hour: "numeric",
-          minute: "2-digit",
-          omitZeroMinute: false,
-          meridiem: false,
-          hour12: false,
-        },
-        dateAlignment: "week",
-        titleFormat: { month: "short", day: "numeric" },
-        slotMinTime: "06:00:00",
-        slotMaxTime: "22:00:00",
-        duration: { days: 7 },
-        firstDay: 1,
-        allDaySlot: false,
-        hiddenDays: [0],
+const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
+  locales: allLocales,
+  locale: t("languageCode"),
+  plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
+  // local debugging of mobilePage variable in object creation on ternary expression
+  initialView: mobilePage.value ? "Day" : "week",
+  dayHeaderFormat: { weekday: "short", omitCommas: true },
+  slotDuration: "00:15:00",
+  eventTimeFormat: {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  },
+  height: "auto",
+  views: {
+    week: {
+      type: "timeGrid",
+      slotLabelFormat: {
+        hour: "numeric",
+        minute: "2-digit",
+        omitZeroMinute: false,
+        meridiem: false,
+        hour12: false,
      },
-      Day: {
-        type: "timeGrid",
-        slotLabelFormat: {
-          hour: "numeric",
-          minute: "2-digit",
-          omitZeroMinute: false,
-          meridiem: false,
-          hour12: false,
-        },
-        titleFormat: { month: "short", day: "numeric" },
-        slotMinTime: "06:00:00",
-        slotMaxTime: "22:00:00",
-        duration: { days: 1 },
-        allDaySlot: false,
-        hiddenDays: [0],
+      dateAlignment: "week",
+      titleFormat: { month: "short", day: "numeric" },
+      slotMinTime: "06:00:00",
+      slotMaxTime: "22:00:00",
+      duration: { days: 7 },
+      firstDay: 1,
+      allDaySlot: false,
+      hiddenDays: [0],
+    },
+    Day: {
+      type: "timeGrid",
+      slotLabelFormat: {
+        hour: "numeric",
+        minute: "2-digit",
+        omitZeroMinute: false,
+        meridiem: false,
+        hour12: false,
      },
+      titleFormat: { month: "short", day: "numeric" },
+      slotMinTime: "06:00:00",
+      slotMaxTime: "22:00:00",
+      duration: { days: 1 },
+      allDaySlot: false,
+      hiddenDays: [0],
    },
-    headerToolbar: {
-      end: "prev,next today",
-      center: "title",
-      start: "week,Day",
-    },
+  },
+  headerToolbar: {
+    end: "prev,next today",
+    center: "title",
+    start: "week,Day",
+  },

-    datesSet: function (dateInfo: any) {
-      const view = dateInfo.view;
-      const offset = new Date().getTimezoneOffset();
-      const startDate = new Date(
-        view.activeStart.getTime() - offset * 60 * 1000,
-      );
-      const endDate = new Date(view.activeEnd.getTime() - offset * 60 * 1000);
-      currentDateFrom.value = startDate.toISOString().split("T")[0];
-      currentDateTo.value = endDate.toISOString().split("T")[0];
-      getOccupation();
-    },
-    events: function (_info: any, successCallback: any, _: any) {
-      successCallback(
-        occupations.value.map((event) => {
-          return {
-            id: event.id.toString(),
-            start: event.start,
-            end: event.end,
-            color: event.showFree ? "var(--green-800)" : "var(--primary-color)",
-            textColor: event.showFree ? "var(--green-50)" : "var(--primary-color-text)",
-            title: event.showFree ? t("roomFinderPage.available") : t("roomFinderPage.occupied"),
-          } as EventInput;
-        }),
-      );
-    },
-  })
-);
+  datesSet: function (dateInfo: DatesSetArg) {
+    const view = dateInfo.view;
+    const offset = new Date().getTimezoneOffset();
+    const startDate = new Date(view.activeStart.getTime() - offset * 60 * 1000);
+    const endDate = new Date(view.activeEnd.getTime() - offset * 60 * 1000);
+    currentDateFrom.value = startDate.toISOString().split("T")[0];
+    currentDateTo.value = endDate.toISOString().split("T")[0];
+    getOccupation();
+  },
+  events: function (
+    _info: unknown,
+    successCallback: (events: EventInput[]) => void,
+  ) {
+    successCallback(
+      occupations.value.map((event) => {
+        return {
+          id: event.id.toString(),
+          start: event.start,
+          end: event.end,
+          color: event.showFree ? "var(--green-800)" : "var(--primary-color)",
+          textColor: event.showFree
+            ? "var(--green-50)"
+            : "var(--primary-color-text)",
+          title: event.showFree
+            ? t("roomFinderPage.available")
+            : t("roomFinderPage.occupied"),
+        } as EventInput;
+      }),
+    );
+  },
+}));
 </script>
 <template>
  <FullCalendar ref="fullCalendar" :options="calendarOptions" />
--- a/frontend/src/components/editCalendar/EditAdditionalModules.vue
+++ b/frontend/src/components/editCalendar/EditAdditionalModules.vue
@@ -1,152 +0,0 @@
-<script lang="ts" setup>
-import { defineAsyncComponent, ref, Ref } from "vue";
-import { Module } from "../../model/module.ts";
-import { fetchAllModules } from "../../api/fetchCourse.ts";
-import moduleStore from "../../store/moduleStore";
-import { MultiSelectAllChangeEvent } from "primevue/multiselect";
-import router from "../../router";
-import { fetchModule } from "../../api/fetchModule.ts";
-import { useDialog } from "primevue/usedialog";
-import { useI18n } from "vue-i18n";
-
-const dialog = useDialog();
-const { t } = useI18n({ useScope: "global" });
-
-const fetchedModules = async () => {
-  return await fetchAllModules();
-};
-
-const modules: Ref<Module[]> = ref([]);
-
-const selectedModules: Ref<Module[]> = ref([] as Module[]);
-
-fetchedModules().then(
-  (data) =>
-    (modules.value = data.map((module: Module) => {
-      return module;
-    })),
-);
-
-async function nextStep() {
-  selectedModules.value.forEach((module: Module) => {
-    moduleStore().addModule(module);
-  });
-
-  await router.push("/edit-calendar");
-}
-
-const ModuleInformation = defineAsyncComponent(
-  () => import("../ModuleInformation.vue"),
-);
-
-async function showInfo(module: Module) {
-  await fetchModule(module).then((data: Module) => {
-    dialog.open(ModuleInformation, {
-      props: {
-        style: {
-          width: "50vw",
-        },
-        breakpoints: {
-          "960px": "75vw",
-          "640px": "90vw",
-        },
-        modal: true,
-      },
-      data: {
-        module: data,
-      },
-    });
-  });
-}
-
-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)
-    : [];
-  selectAll.value = event.checked;
-};
-
-function selectChange() {
-  selectAll.value = selectedModules.value.length === modules.value.length;
-}
-</script>
-
-<template>
-  <div class="flex flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <h3>
-        {{ $t("additionalModules.subTitle") }}
-      </h3>
-    </div>
-    <div class="card flex align-items-center justify-content-center m-2">
-      <MultiSelect
-        v-model="selectedModules"
-        :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="$t('additionalModules.footerModulesSelected', { count: selectedModules.length ?? 0 })"
-        @change="selectChange()"
-        @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"
-                @click.stop="showInfo(slotProps.option)"
-              ></Button>
-              <DynamicDialog />
-            </div>
-          </div>
-        </template>
-        <template #footer>
-          <div class="py-2 px-3">
-            {{ t('additionalModules.footerModulesSelected', { count: selectedModules.length ?? 0 }) }}
-          </div>
-        </template>
-      </MultiSelect>
-    </div>
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="nextStep()">{{
-        $t("additionalModules.nextStep")
-      }}</Button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-:deep(.custom-multiselect) {
-  width: 50rem;
-}
-
-:deep(.custom-multiselect li) {
-  height: unset;
-}
-
-.small-button.p-button {
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-}
-</style>
--- a/frontend/src/helpers/strings.test.ts
+++ b/frontend/src/helpers/strings.test.ts
@@ -0,0 +1,14 @@
+import { expect, test } from "vitest";
+import { onlyWhitespace } from "@/helpers/strings.ts";
+
+test("contains No whitespace", () => {
+  expect(onlyWhitespace("awdawdawd")).toBe(false);
+});
+
+test("contains whitespace", () => {
+  expect(onlyWhitespace("aw daw dawd")).toBe(false);
+});
+
+test("contains only whitespace", () => {
+  expect(onlyWhitespace("  ")).toBe(true);
+});
--- a/frontend/src/i18n/translations/de.json
+++ b/frontend/src/i18n/translations/de.json
@@ -13,6 +13,7 @@
    "winterSemester": "Wintersemester",
    "summerSemester": "Sommersemester",
    "subTitle": "Bitte wähle eine Gruppe und das Semester aus.",
+    "nextStep": "Weiter",
    "courseDropDown": "Gruppe",
    "noCoursesAvailable": "Keine Gruppen verfügbar",
    "semesterDropDown": "Semester"
@@ -26,7 +27,6 @@
    "occupied": "belegt"
  },
  "moduleSelection": {
-    "nextStep": "Weiter",
    "selectAll": "Alle anwählen",
    "deselectAll": "Alle abwählen",
    "selected": "angewählt",
@@ -91,9 +91,10 @@
    "info-long": "Information",
    "paginator": {
      "from": "",
-      "to": " bis ", 
+      "to": " bis ",
      "of": " von insgesamt "
-    }
+    },
+    "eventType": "Ereignistyp"
  },
  "renameModules": {
    "reminder": "Erinnerung",
--- a/frontend/src/i18n/translations/en.json
+++ b/frontend/src/i18n/translations/en.json
@@ -13,6 +13,7 @@
    "winterSemester": "winter semester",
    "summerSemester": "summer semester",
    "subTitle": "please select a course and semester",
+    "nextStep": "next step",
    "courseDropDown": "please select a course",
    "noCoursesAvailable": "no courses listed",
    "semesterDropDown": "please select a semester"
@@ -26,7 +27,6 @@
    "occupied": "occupied"
  },
  "moduleSelection": {
-    "nextStep": "next step",
    "selectAll": "select all",
    "deselectAll": "deselect all",
    "selected": "selected",
@@ -91,9 +91,10 @@
    "info-long": "information",
    "paginator": {
      "from": "",
-      "to": " to ", 
+      "to": " to ",
      "of": " of "
-    }
+    },
+    "eventType": "event type"
  },
  "renameModules": {
    "reminder": "reminder",
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,3 +1,5 @@
+import "source-sans-pro/source-sans-pro.css";
+
 import { createApp } from "vue";
 import "./style.css";
 import App from "./App.vue";
@@ -32,6 +34,7 @@ import DynamicDialog from "primevue/dynamicdialog";
 import DialogService from "primevue/dialogservice";
 import ProgressSpinner from "primevue/progressspinner";
 import Checkbox from "primevue/checkbox";
+import Skeleton from "primevue/skeleton";
 import i18n from "./i18n";

 const app = createApp(App);
@@ -68,5 +71,6 @@ app.component("Column", Column);
 app.component("DynamicDialog", DynamicDialog);
 app.component("ProgressSpinner", ProgressSpinner);
 app.component("Checkbox", Checkbox);
+app.component("Skeleton", Skeleton);

 app.mount("#app");
--- a/frontend/src/model/event.ts
+++ b/frontend/src/model/event.ts
@@ -22,6 +22,6 @@ export class AnonymizedEventDTO {
    public start: string,
    public end: string,
    public rooms: string,
-    public free: boolean
+    public free: boolean,
  ) {}
 }
--- a/frontend/src/model/module.ts
+++ b/frontend/src/model/module.ts
@@ -5,6 +5,7 @@ export class Module {
    public uuid: string,
    public name: string,
    public course: string,
+    public eventType: string,
    public userDefinedName: string,
    public prof: string,
    public semester: string,
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -8,8 +8,9 @@ const PrivacyPolicy = () => import("../view/PrivacyPolicy.vue");
 const RenameModules = () => import("../components/RenameModules.vue");
 const RoomFinder = () => import("../view/RoomFinder.vue");
 const EditCalendarView = () => import("../view/EditCalendarView.vue");
-const EditAdditionalModules = () => import("../components/editCalendar/EditAdditionalModules.vue");
-const EditModules = () => import("../components/editCalendar/EditModules.vue");
+const EditAdditionalModules = () =>
+  import("../view/editCalendar/EditAdditionalModules.vue");
+const EditModules = () => import("../view/editCalendar/EditModules.vue");
 const CourseSelection = () => import("../view/CourseSelection.vue");

 import i18n from "../i18n";
--- a/frontend/src/store/moduleStore.ts
+++ b/frontend/src/store/moduleStore.ts
@@ -37,8 +37,8 @@ const moduleStore = defineStore("moduleStore", {
      return Array.from(this.modules.values());
    },
    containsModule(module: Module): boolean {
-        return this.modules.has(module.uuid);
-    }
+      return this.modules.has(module.uuid);
+    },
  },
 });

--- a/frontend/src/view/AdditionalModules.vue
+++ b/frontend/src/view/AdditionalModules.vue
@@ -1,89 +1,13 @@
 <script lang="ts" setup>
-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";
-import { FilterMatchMode } from "primevue/api";
-import { DataTableRowSelectEvent, DataTableRowUnselectEvent } from "primevue/datatable";
-import { useDialog } from "primevue/usedialog";
+import moduleStore from "../store/moduleStore";
 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();
-};
+import AdditionalModuleTable from "../components/AdditionalModuleTable.vue";

 const store = moduleStore();
-if (store.isEmpty()) {
-  router.replace("/");
-}
-
-const mobilePage = inject("mobilePage") as Ref<boolean>;
-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,
-  },
-});
-
-fetchedModules().then(
-  (data) =>
-    (modules.value = data.map((module: Module) => {
-      return module;
-    })),
-);

 async function nextStep() {
  await router.push("/rename-modules");
 }
-
-const ModuleInformation = defineAsyncComponent(
-  () => import("../components/ModuleInformation.vue"),
-);
-
-async function showInfo(module: Module) {
-  await fetchModule(module).then((data) => {
-    module = data;
-  });
-  dialog.open(ModuleInformation, {
-    class: "w-full m-0",
-    props: {
-        style: {
-          width: "80vw",
-        },
-        breakpoints: {
-          "992px": "100vw",
-          "640px": "100vw",
-        },
-        modal: true,
-      },
-    data: {
-      module: module,
-    },
-  });
-}
-
-function selectModule(event: DataTableRowSelectEvent) {
-  store.addModule(event.data);
-}
-
-function unselectModule(event: DataTableRowUnselectEvent) {
-  store.removeModule(event.data);
-}
-
 </script>

 <template>
@@ -93,128 +17,17 @@ function unselectModule(event: DataTableRowUnselectEvent) {
        {{ $t("additionalModules.subTitle") }}
      </h3>
    </div>
-    <div class="m-2 lg:w-10 w-full">
-      <DynamicDialog />
-      <DataTable
-        id="dt-responsive-table"
-        v-model:filters="filters"
-        :selection="store.getAllModules()"
-        :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="
-          $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"
-        :show-gridlines="true"
-        :striped-rows="true"
-        :select-all="false"
-        :size="mobilePage ? 'small' : 'large'"
-        @row-select="selectModule"
-        @row-unselect="unselectModule"
-      >
-        <Column selection-mode="multiple">
-        </Column>
-
-        <Column
-          field="course"
-          :header="$t('additionalModules.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="$t('additionalModules.module')"
-          :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="$t('additionalModules.professor')"
-          :show-clear-button="false"
-          :show-filter-menu="false"
-        >
-        </Column>
-        <Column 
-          :header="$t('additionalModules.info')"
-        >
-          <template #body="slotProps">
-            <Button
-              icon="pi pi-info"
-              severity="secondary"
-              rounded
-              outlined
-              :aria-label="$t('additionalModules.info-long')"
-              class="small-button"
-              @click.stop="showInfo(slotProps.data)"
-            ></Button>
-          </template>
-        </Column>
-        <template #footer>
-          <div class="py-2 px-3">
-            {{ 
-              t('additionalModules.footerModulesSelected', { count: store?.countModules() ?? 0 })
-            }} 
-          </div>
-        </template>
-      </DataTable>
-    </div>
-    <div class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10">
-      <Button 
+    <AdditionalModuleTable />
+    <div
+      class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"
+    >
+      <Button
        :disabled="store.isEmpty()"
-        @click="nextStep()"
        class="col-12 md:col-4 mb-3 align-self-end"
        icon="pi pi-arrow-right"
        :label="$t('additionalModules.nextStep')"
+        @click="nextStep()"
      />
    </div>
  </div>
 </template>
-
-<style scoped>
-:deep(.custom-multiselect) {
-  width: 50rem;
-}
-
-:deep(.custom-multiselect li) {
-  height: unset;
-}
-
-.small-button.p-button {
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-}
-
-:deep(.p-filter-column .p-checkbox .p-component) {
-  display: none !important;
-}
-</style>
--- a/frontend/src/view/CourseSelection.vue
+++ b/frontend/src/view/CourseSelection.vue
@@ -4,9 +4,14 @@ import {
  fetchCourse,
  fetchModulesByCourseAndSemester,
 } from "../api/fetchCourse";
+import DynamicPage from "./DynamicPage.vue";
 import ModuleSelection from "../components/ModuleSelection.vue";
 import { Module } from "../model/module.ts";
 import { useI18n } from "vue-i18n";
+import moduleStore from "../store/moduleStore";
+import router from "../router";
+
+const store = moduleStore();
 const { t } = useI18n({ useScope: "global" });

 const courses = async () => {
@@ -52,31 +57,23 @@ async function getModules() {
 </script>

 <template>
-  <div 
-    class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0"
-    :class="{'md:mt-8': selectedCourse.name === ''}"
+  <DynamicPage
+    :hide-content="selectedCourse.name === ''"
+    :headline="$t('courseSelection.headline')"
+    :sub-title="$t('courseSelection.subTitle')"
+    icon="pi pi-calendar"
+    :button="{
+      label: $t('courseSelection.nextStep'),
+      icon: 'pi pi-arrow-right',
+      disabled: store.isEmpty(),
+      onClick: () => router.push('/additional-modules'),
+    }"
  >
-    <div class="flex align-items-center justify-content-center gap-2 mx-2">
-      <h3 class="text-4xl">
-        {{ $t("courseSelection.headline") }}
-      </h3>
-      <i
-        class="pi pi-calendar"
-        style="font-size: 2rem"
-      ></i>
-    </div>
-    <div
-      class="flex justify-content-center"
-    >
-      <h5 class="text-2xl m-2">{{ $t("courseSelection.subTitle") }}</h5>
-    </div>
-    <div
-      class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8"
-    >
+    <template #selection="{ flexSpecs }">
      <Dropdown
        v-model="selectedCourse"
        :options="countries"
-        class="flex-1 m-0"
+        :class="flexSpecs"
        filter
        option-label="name"
        :placeholder="$t('courseSelection.courseDropDown')"
@@ -87,16 +84,17 @@ async function getModules() {
      <Dropdown
        v-model="selectedSemester"
        :options="semesters"
-        class="flex-1 m-0"
+        :class="flexSpecs"
        option-label="name"
        :placeholder="$t('courseSelection.semesterDropDown')"
        @change="getModules()"
      ></Dropdown>
-    </div>
-    <ModuleSelection
-      :modules="modules"
-      :selected-course="selectedCourse.name"
-      class="lg:w-8"
-    />
-  </div>
+    </template>
+    <template #content>
+      <ModuleSelection
+        :modules="modules"
+        :selected-course="selectedCourse.name"
+      />
+    </template>
+  </DynamicPage>
 </template>
--- a/frontend/src/view/DynamicPage.vue
+++ b/frontend/src/view/DynamicPage.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { computed, useSlots } from "vue";
+
+defineProps<{
+  hideContent: boolean;
+  headline: string;
+  subTitle?: string;
+  icon?: string;
+  button?: {
+    label: string;
+    icon: string;
+    disabled: boolean;
+    onClick: () => void;
+  };
+}>();
+
+const slots = useSlots();
+const hasSlot = (name: string) => {
+  return !!slots[name];
+};
+const hasContent = computed(() => {
+  return hasSlot("content");
+});
+</script>
+
+<template>
+  <div class="flex flex-column align-items-center mt-0">
+    <div
+      class="flex align-items-center justify-content-center gap-3 mx-2 mb-4 transition-rolldown"
+      :class="{ 'md:mt-8': hideContent }"
+    >
+      <h3 class="text-4xl">
+        {{ headline }}
+      </h3>
+      <i v-if="icon" :class="icon" style="font-size: 2rem"></i>
+    </div>
+    <div v-if="subTitle" class="flex justify-content-center">
+      <h5 class="text-2xl m-2">{{ subTitle }}</h5>
+    </div>
+    <div class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8">
+      <slot name="selection" flex-specs="flex-1 m-0"></slot>
+    </div>
+    <div
+      v-if="button"
+      class="flex flex-wrap m-0 mb-3 gap-2 w-full lg:w-8 align-items-center justify-content-end"
+    >
+      <Button
+        :disabled="button.disabled"
+        class="col-12 md:col-4"
+        :icon="button.icon"
+        :label="button.label"
+        @click="button.onClick()"
+      />
+    </div>
+    <div
+      v-if="hasContent"
+      :class="[
+        hideContent
+          ? ['opacity-0', 'pointer-events-none', 'h-1rem', 'overflow-hidden']
+          : [
+              'opacity-100',
+              'transition-all',
+              'transition-duration-500',
+              'transition-ease-in-out',
+            ],
+        'w-full',
+        'lg:w-8',
+      ]"
+    >
+      <slot name="content"></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.transition-rolldown {
+  transition: margin-top 0.5s ease-in-out;
+}
+</style>
--- a/frontend/src/view/EditCalendarView.vue
+++ b/frontend/src/view/EditCalendarView.vue
@@ -7,6 +7,7 @@ import router from "../router";
 import tokenStore from "../store/tokenStore";
 import { useToast } from "primevue/usetoast";
 import { useI18n } from "vue-i18n";
+import DynamicPage from "./DynamicPage.vue";
 const { t } = useI18n({ useScope: "global" });

 const toast = useToast();
@@ -14,10 +15,14 @@ const toast = useToast();
 const token: Ref<string> = ref("");
 const modules: Ref<Map<string, Module>> = ref(moduleStore().modules);

-function extractToken(token: string): string {
-  const tokenRegex = /^[a-z0-9]{15}$/;
-  const tokenUriRegex = /[?&]token=([a-z0-9]{15})(?:&|$)/;
+const tokenRegex = /^[a-z0-9]{15}$/;
+const tokenUriRegex = /[?&]token=([a-z0-9]{15})(?:&|$)/;

+const isToken = (token: string): boolean => {
+  return tokenRegex.test(token) || tokenUriRegex.test(token);
+};
+
+function extractToken(token: string): string {
  if (tokenRegex.test(token)) {
    return token;
  }
@@ -66,43 +71,28 @@ 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 mb-7">
-    <div class="flex align-items-center justify-content-center gap-2 mx-2">
-      <h3 class="text-4xl">
-        {{ $t("editCalendarView.headline") }}
-      </h3>
-      <i
-        class="pi pi-pencil"
-        style="font-size: 2rem"
-      ></i>
-    </div>
-    <div
-      class="flex justify-content-center"
-    >
-      <p class="text-2xl m-2">{{ $t("editCalendarView.subTitle") }}</p>
-    </div>
-    <div
-      class="flex align-items-center justify-content-center m-4 w-full lg:w-8"
-    >
+  <DynamicPage
+    hide-content
+    :headline="$t('editCalendarView.headline')"
+    :sub-title="$t('editCalendarView.subTitle')"
+    icon="pi pi-pencil"
+    :button="{
+      label: $t('editCalendarView.loadCalendar'),
+      icon: 'pi pi-arrow-down',
+      disabled: !isToken(token),
+      onClick: loadCalendar,
+    }"
+  >
+    <template #selection="{ flexSpecs }">
      <InputText
        v-model="token"
        type="text"
-        class="w-full"
+        :class="flexSpecs"
        autofocus
        @keyup.enter="loadCalendar"
      />
-    </div>
-    <div
-      class="flex align-items-center justify-content-end m-2 w-full lg:w-8"
-    >
-      <Button
-        :label="$t('editCalendarView.loadCalendar')"
-        icon="pi pi-arrow-down"
-        class="col-12 md:col-4 mb-3 align-self-end"
-        @click="loadCalendar"
-      />
-    </div>
-  </div>
+    </template>
+  </DynamicPage>
 </template>

 <style scoped></style>
--- a/frontend/src/view/RoomFinder.vue
+++ b/frontend/src/view/RoomFinder.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { Ref, ref } from "vue";
 import { fetchRoom } from "../api/fetchRoom.ts";
+import DynamicPage from "./DynamicPage.vue";
 import RoomOccupation from "../components/RoomOccupation.vue";

 const rooms = async () => {
@@ -19,27 +20,13 @@ rooms().then(
 </script>

 <template>
-  <div 
-    class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0"
-    :class="{'md:mt-8': selectedRoom.name === ''}"
+  <DynamicPage
+    :hide-content="selectedRoom.name === ''"
+    :headline="$t('roomFinderPage.headline')"
+    :sub-title="$t('roomFinderPage.detail')"
+    icon="pi pi-search"
  >
-    <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"
-        style="font-size: 2rem"
-      ></i>
-    </div>
-    <div
-      class="flex justify-content-center"
-    >
-      <h5 class="text-2xl m-2">{{ $t("roomFinderPage.detail") }}</h5>
-    </div>
-    <div
-      class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8"
-    >
+    <template #selection>
      <Dropdown
        v-model="selectedRoom"
        :options="roomsList"
@@ -50,18 +37,9 @@ rooms().then(
        :empty-message="$t('roomFinderPage.noRoomsAvailable')"
        :auto-filter-focus="true"
      />
-    </div>
-    <div 
-      :class="
-        [selectedRoom.name === ''? 
-          ['opacity-0', 'pointer-events-none', 'h-1rem', 'overflow-hidden'] : 
-          ['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
-        ,
-        'w-full', 'lg:w-8']"
-      >
-      <RoomOccupation
-        :room="selectedRoom.name"
-      />
-    </div>
-  </div>
+    </template>
+    <template #content>
+      <RoomOccupation :room="selectedRoom.name" />
+    </template>
+  </DynamicPage>
 </template>
--- a/frontend/src/view/editCalendar/EditAdditionalModules.vue
+++ b/frontend/src/view/editCalendar/EditAdditionalModules.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { defineAsyncComponent } from "vue";
+import moduleStore from "../../store/moduleStore";
+import router from "../../router";
+
+const store = moduleStore();
+const AdditionalModuleTable = defineAsyncComponent(
+  () => import("../../components/AdditionalModuleTable.vue"),
+);
+
+async function nextStep() {
+  await router.push("/edit-calendar");
+}
+</script>
+
+<template>
+  <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") }}
+      </h3>
+    </div>
+    <AdditionalModuleTable />
+    <div
+      class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"
+    >
+      <Button
+        :disabled="store.isEmpty()"
+        class="col-12 md:col-4 mb-3 align-self-end"
+        icon="pi pi-arrow-right"
+        :label="$t('additionalModules.nextStep')"
+        @click="nextStep()"
+      />
+    </div>
+  </div>
+</template>
--- a/frontend/src/components/editCalendar/EditModules.vue
+++ b/frontend/src/components/editCalendar/EditModules.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { computed, inject, Ref, ref } from "vue";
-import { Module } from "../../model/module.ts";
+import { Module } from "@/model/module.ts";
 import moduleStore from "../../store/moduleStore";
-import { fetchAllModules } from "../../api/fetchCourse.ts";
-import {deleteIndividualFeed, saveIndividualFeed} from "../../api/createFeed.ts";
+import { fetchAllModules } from "@/api/fetchCourse.ts";
+import { deleteIndividualFeed, saveIndividualFeed } from "@/api/createFeed.ts";
 import tokenStore from "../../store/tokenStore";
-import router from "../../router";
-import ModuleTemplateDialog from "../ModuleTemplateDialog.vue";
-import { onlyWhitespace } from "../../helpers/strings.ts";
+import router from "@/router";
+import ModuleTemplateDialog from "../../components/ModuleTemplateDialog.vue";
+import { onlyWhitespace } from "@/helpers/strings.ts";
 import { useI18n } from "vue-i18n";
 import { useToast } from "primevue/usetoast";
 const { t } = useI18n({ useScope: "global" });
@@ -15,6 +15,13 @@ const { t } = useI18n({ useScope: "global" });
 const toast = useToast();
 const visible = ref(false);

+defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+
 const store = moduleStore();

 const tableData = computed(() =>
@@ -61,25 +68,23 @@ async function deleteFeed() {
    () => {
      toast.add({
        severity: "success",
-        summary: t('editCalendarView.toast.success'),
-        detail: t('editCalendarView.toast.successDetail'),
+        summary: t("editCalendarView.toast.success"),
+        detail: t("editCalendarView.toast.successDetail"),
        life: 3000,
      });
      visible.value = false;
      router.push("/");
-
    },
    () => {
      toast.add({
        severity: "error",
-        summary: t('editCalendarView.toast.error'),
-        detail: t('editCalendarView.toast.errorDetail'),
+        summary: t("editCalendarView.toast.error"),
+        detail: t("editCalendarView.toast.errorDetail"),
        life: 3000,
      });
    },
  );
 }
-
 </script>

 <template>
@@ -89,9 +94,7 @@ async function deleteFeed() {
      <ModuleTemplateDialog />
    </div>
    <div class="w-full lg:w-8 flex flex-column">
-      <div
-        class="card flex align-items-center justify-content-center my-2"
-      >
+      <div class="card flex align-items-center justify-content-center my-2">
        <DataTable
          :value="tableData"
          edit-mode="cell"
@@ -112,7 +115,9 @@ async function deleteFeed() {
                  )
                "
                @update:model-value="
-                  tableData.forEach((module) => (module.Module.reminder = $event))
+                  tableData.forEach(
+                    (module) => (module.Module.reminder = $event),
+                  )
                "
              />
            </div>
@@ -171,7 +176,7 @@ async function deleteFeed() {
              </template>
            </template>
          </Column>
-          <Column>
+          <Column field="module">
            <template #body="{ data }">
              <Button
                icon="pi pi-trash"
@@ -186,11 +191,32 @@ async function deleteFeed() {
          </Column>
          <template #footer>
            <div
-                class="flex flex-column sm:flex-row flex-wrap justify-content-between gap-2 w-full"
+              class="flex flex-column sm:flex-row flex-wrap justify-content-between gap-2 w-full"
            >
-              <Button type="button" severity="danger" outlined @click="visible = true" icon="pi pi-trash" :label="$t('editCalendarView.delete')"/>
-              <Button type="button" severity="info" outlined @click="router.push('edit-additional-modules')" icon="pi pi-plus" :label="$t('editCalendarView.addModules')"/>
-              <Button type="button" severity="success" outlined @click="finalStep()" icon="pi pi-save" :label="$t('editCalendarView.save')"/>
+              <Button
+                type="button"
+                severity="danger"
+                outlined
+                icon="pi pi-trash"
+                :label="$t('editCalendarView.delete')"
+                @click="visible = true"
+              />
+              <Button
+                type="button"
+                severity="info"
+                outlined
+                icon="pi pi-plus"
+                :label="$t('editCalendarView.addModules')"
+                @click="router.push('edit-additional-modules')"
+              />
+              <Button
+                type="button"
+                severity="success"
+                outlined
+                icon="pi pi-save"
+                :label="$t('editCalendarView.save')"
+                @click="finalStep()"
+              />
            </div>
          </template>
        </DataTable>
@@ -198,15 +224,31 @@ async function deleteFeed() {
    </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' }">
+    <Dialog
+      v-model:visible="visible"
+      modal
+      header="Header"
+      :style="{ width: '50rem' }"
+      :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
+    >
      <template #header>
-        <div class="inline-flex align-items-center justify-content-center gap-2">
-          <span class="font-bold white-space-nowrap">{{ $t('editCalendarView.dialog.headline') }}</span>
+        <div
+          class="inline-flex align-items-center justify-content-center gap-2"
+        >
+          <span class="font-bold white-space-nowrap">{{
+            $t("editCalendarView.dialog.headline")
+          }}</span>
        </div>
      </template>
-      <p class="m-0">{{ $t('editCalendarView.dialog.subTitle') }}</p>
+      <p class="m-0">{{ $t("editCalendarView.dialog.subTitle") }}</p>
      <template #footer>
-        <Button :label="$t('editCalendarView.dialog.delete')" severity="danger" icon="pi pi-trash" @click="deleteFeed()" autofocus />
+        <Button
+          :label="$t('editCalendarView.dialog.delete')"
+          severity="danger"
+          icon="pi pi-trash"
+          autofocus
+          @click="deleteFeed()"
+        />
      </template>
    </Dialog>
  </div>
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -18,10 +18,10 @@
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "paths": {
-    "@/*": ["./src/*"]
+    "allowSyntheticDefaultImports": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [