feat:#60 format, lint and fix build

2025-07-16 17:48:51 +02:00 · 2023-11-16 23:45:45 +01:00
parent 9f937afe94
commit e9db7cb4b0
24 changed files with 307 additions and 271 deletions
--- a/backend/backend.iml
+++ b/backend/backend.iml
@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <module type="WEB_MODULE" version="4">
-  <component name="Go" enabled="true" />
  <component name="NewModuleRootManager" inherit-compiler-output="true">
    <exclude-output />
    <content url="file://$MODULE_DIR$" />
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -4,9 +4,8 @@ import { RouterView } from "vue-router";
 </script>

 <template>
-<MenuBar />
-<RouterView />
-
+  <MenuBar />
+  <RouterView />
 </template>

 <style scoped></style>
--- a/frontend/src/components/CalendarLink.vue
+++ b/frontend/src/components/CalendarLink.vue
@ -4,19 +4,20 @@ import { useToast } from "primevue/usetoast";
 import { onMounted } from "vue";
 import router from "../router";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useI18n({ useScope: "global" });

 const toast = useToast();

 const domain = window.location.hostname;

-const getLink = () => "https://" + domain + "/api/feed?token=" + tokenStore().token;
+const getLink = () =>
+  "https://" + domain + "/api/feed?token=" + tokenStore().token;

 const show = () => {
  toast.add({
    severity: "info",
-    summary: t('calendarLink.copyToastSummary'),
-    detail: t('calendarLink.copyToastNotification'),
+    summary: t("calendarLink.copyToastSummary"),
+    detail: t("calendarLink.copyToastNotification"),
    life: 3000,
  });
 };
@ -33,46 +34,48 @@ function rerouteIfTokenIsEmpty() {

 function copyToClipboard() {
  // Copy the text inside the text field
-  navigator.clipboard.writeText(getLink()).then(
-    show,
-    (err) => {
-      console.error("Could not copy text: ", err);
-      toast.add({
-        severity: "error",
-        summary: t('calendarLink.copyToastError'),
-        detail: t('calendarLink.copyToastErrorDetail'),
-        life: 3000,
-      });
-    },
-  );
+  navigator.clipboard.writeText(getLink()).then(show, (err) => {
+    console.error("Could not copy text: ", err);
+    toast.add({
+      severity: "error",
+      summary: t("calendarLink.copyToastError"),
+      detail: t("calendarLink.copyToastErrorDetail"),
+      life: 3000,
+    });
+  });
 }

 const forwardToGoogle = () => {
-  window.open("https://calendar.google.com/calendar/u/0/r?cid=" + encodeURI(getLink().replace("https://", "http://")));
+  window.open(
+    "https://calendar.google.com/calendar/u/0/r?cid=" +
+      encodeURI(getLink().replace("https://", "http://")),
+  );
 };

 const forwardToMicrosoft = () => {
-  window.open("https://outlook.live.com/owa?path=/calendar/action/compose&rru=addsubscription&name=HTWK%20Kalender&url=" + encodeURI(getLink()));
+  window.open(
+    "https://outlook.live.com/owa?path=/calendar/action/compose&rru=addsubscription&name=HTWK%20Kalender&url=" +
+      encodeURI(getLink()),
+  );
 };

 const actions = [
  {
-    label: t('calendarLink.copyToClipboard'),
+    label: t("calendarLink.copyToClipboard"),
    icon: "pi pi-copy",
    command: copyToClipboard,
  },
  {
-    label: t('calendarLink.toGoogleCalendar'),
+    label: t("calendarLink.toGoogleCalendar"),
    icon: "pi pi-google",
    command: forwardToGoogle,
  },
  {
-    label: t('calendarLink.toMicrosoftCalendar'),
+    label: t("calendarLink.toMicrosoftCalendar"),
    icon: "pi pi-microsoft",
    command: forwardToMicrosoft,
  },
 ];
-
 </script>

 <template>
--- a/frontend/src/components/CourseSelection.vue
+++ b/frontend/src/components/CourseSelection.vue
@ -27,8 +27,11 @@ const selectedSemester: Ref<{ name: string; value: string }> = ref(
 );

 //if semesters get changed, refresh the selected semester ref with a watcher
-watch(semesters,(newValue: { name: string; value: string }[]) =>
-    (selectedSemester.value = newValue[selectedSemester.value.value === "ws" ? 0 : 1]),
+watch(
+  semesters,
+  (newValue: { name: string; value: string }[]) =>
+    (selectedSemester.value =
+      newValue[selectedSemester.value.value === "ws" ? 0 : 1]),
 );

 courses().then(
@ -52,7 +55,7 @@ async function getModules() {
  <div class="flex flex-column">
    <div class="flex align-items-center justify-content-center h-4rem m-2">
      <h3 class="text-4xl">
-        {{$t("courseSelection.headline")}}
+        {{ $t("courseSelection.headline") }}
        <i
          class="pi pi-calendar vertical-align-baseline"
          style="font-size: 2rem"
@ -75,8 +78,8 @@ async function getModules() {
        option-label="name"
        :placeholder="$t('courseSelection.courseDropDown')"
        :empty-message="$t('courseSelection.noCoursesAvailable')"
+        :auto-filter-focus="true"
        @change="getModules()"
-        :autoFilterFocus="true"
      ></Dropdown>
      <Dropdown
        v-model="selectedSemester"
@ -98,4 +101,4 @@ async function getModules() {
      </div>
    </div>
  </div>
-</template>
+</template>
--- a/frontend/src/components/LocaleSwitcher.vue
+++ b/frontend/src/components/LocaleSwitcher.vue
@ -2,11 +2,11 @@
 import { computed } from "vue";
 import localeStore from "../store/localeStore.ts";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useI18n({ useScope: "global" });

 const countries = computed(() => [
-  { name: t('english'), code: "en", icon: "🇬🇧" },
-  { name: t('german'), code: "de", icon: "🇩🇪" },
+  { name: t("english"), code: "en", icon: "🇬🇧" },
+  { name: t("german"), code: "de", icon: "🇩🇪" },
 ]);

 function displayIcon(code: string) {
@ -23,12 +23,12 @@ function updateLocale(locale: string) {
 </script>
 <template>
  <Dropdown
-    :options="$i18n.availableLocales"
    v-model="$i18n.locale"
-    @change="updateLocale($event.data)"
+    :options="$i18n.availableLocales"
    option-label="name"
    placeholder="Select a Language"
    class="w-full md:w-14rem"
+    @change="updateLocale($event.data)"
  >
    <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";
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useI18n({ useScope: "global" });

 const items = computed(() => [
  {
@ -36,23 +36,29 @@ const items = computed(() => [
    route: `privacy-policy`,
  },
 ]);
-
 </script>

 <template>
  <Menubar :model="items" class="menubar justify-content-between">
-    <template #start class="mr-2">
-        <img
-          width="35" height="40"
-          src="../../public/htwk.svg"
-          alt="Logo"
-          class="h-10 w-10 mr-6"
-          style="margin-left: 1rem"
-        />
+    <template #start>
+      <img
+        width="35"
+        height="40"
+        src="../../public/htwk.svg"
+        alt="Logo"
+        class="h-10 w-10 mr-6"
+        style="margin-left: 1rem"
+      />
    </template>
    <template #item="{ item }">
      <router-link v-slot="{ navigate }" :to="item.route" custom>
-        <Button :label='String(item.label)' :icon="item.icon" severity="secondary" @click="navigate" text />
+        <Button
+          :label="String(item.label)"
+          :icon="item.icon"
+          severity="secondary"
+          text
+          @click="navigate"
+        />
      </router-link>
    </template>
    <template #end>
@ -66,4 +72,4 @@ const items = computed(() => [
  background-color: transparent;
  border: none;
 }
-</style>
+</style>
--- a/frontend/src/components/ModuleInformation.vue
+++ b/frontend/src/components/ModuleInformation.vue
@ -12,13 +12,13 @@ const module = dialogRef.value.data.module as Module;
    <h2>{{ module.name }}</h2>
    <table>
      <tr>
-        <td>{{$t('moduleInformation.course')}}: {{ module.course }}</td>
+        <td>{{ $t("moduleInformation.course") }}: {{ module.course }}</td>
      </tr>
      <tr>
-        <td>{{$t('moduleInformation.person')}}: {{ module.prof }}</td>
+        <td>{{ $t("moduleInformation.person") }}: {{ module.prof }}</td>
      </tr>
      <tr>
-        <td>{{$t('moduleInformation.semester')}}: {{ module.semester }}</td>
+        <td>{{ $t("moduleInformation.semester") }}: {{ module.semester }}</td>
      </tr>
      <tr>
        <td>
--- a/frontend/src/components/ModuleSelection.vue
+++ b/frontend/src/components/ModuleSelection.vue
@ -72,7 +72,10 @@ function nextStep() {
        <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 }}</h3>
+              <h3>
+                {{ $t("moduleSelection.modules") }} -
+                {{ selectedModules.length }}
+              </h3>
            </div>
            <div class="flex align-items-center justify-content-center">
              <ToggleButton
@ -89,7 +92,7 @@ function nextStep() {
        </template>
        <template #empty>
          <p class="p-4 text-2xl font-bold text-900 empty-message">
-            {{$t("moduleSelection.noModulesAvailable")}}
+            {{ $t("moduleSelection.noModulesAvailable") }}
          </p>
        </template>
        <template #list="slotProps">
@ -132,4 +135,4 @@ function nextStep() {
    width: 50rem;
  }
 }
-</style>
+</style>
--- a/frontend/src/components/ModuleTemplateDialog.vue
+++ b/frontend/src/components/ModuleTemplateDialog.vue
@ -1,22 +1,30 @@
 <script setup lang="ts">
 import { computed, Ref, ref } from "vue";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useI18n({ useScope: "global" });

 const helpVisible: Ref<boolean> = ref(false);

 const placeholders = computed(() => [
  {
    placeholder: "%t",
-    description: t('moduleTemplateDialog.eventTyp'),
-    examples: "V = "+t('moduleTemplateDialog.lecture')+
-      ", S = "+t('moduleTemplateDialog.seminar')+
-      ", P = "+t('moduleTemplateDialog.exam'),
+    description: t("moduleTemplateDialog.eventTyp"),
+    examples:
+      "V = " +
+      t("moduleTemplateDialog.lecture") +
+      ", S = " +
+      t("moduleTemplateDialog.seminar") +
+      ", P = " +
+      t("moduleTemplateDialog.exam"),
  },
  {
    placeholder: "%p",
-    description: t('moduleTemplateDialog.mandatory'),
-    examples: "w = "+t('moduleTemplateDialog.optional')+", p = "+t('moduleTemplateDialog.mandatory'),
+    description: t("moduleTemplateDialog.mandatory"),
+    examples:
+      "w = " +
+      t("moduleTemplateDialog.optional") +
+      ", p = " +
+      t("moduleTemplateDialog.mandatory"),
  },
 ]);
 </script>
@ -32,18 +40,30 @@ const placeholders = computed(() => [
    aria-label="Help"
    @click="helpVisible = true"
  />
-  <Dialog v-model:visible="helpVisible" :header="$t('moduleTemplateDialog.moduleConfiguration')">
+  <Dialog
+    v-model:visible="helpVisible"
+    :header="$t('moduleTemplateDialog.moduleConfiguration')"
+  >
    <p>
-      {{ t('moduleTemplateDialog.explanationOne')}}
+      {{ t("moduleTemplateDialog.explanationOne") }}
    </p>
-    <p>{{ t('moduleTemplateDialog.tableDescription')}}</p>
+    <p>{{ t("moduleTemplateDialog.tableDescription") }}</p>
    <DataTable :value="placeholders">
-      <Column field="placeholder" :header="$t('moduleTemplateDialog.placeholder')"></Column>
-      <Column field="description" :header="$t('moduleTemplateDialog.description')"></Column>
-      <Column field="examples" :header="$t('moduleTemplateDialog.examples')"></Column>
+      <Column
+        field="placeholder"
+        :header="$t('moduleTemplateDialog.placeholder')"
+      ></Column>
+      <Column
+        field="description"
+        :header="$t('moduleTemplateDialog.description')"
+      ></Column>
+      <Column
+        field="examples"
+        :header="$t('moduleTemplateDialog.examples')"
+      ></Column>
    </DataTable>
    <p>
-      {{ t('moduleTemplateDialog.explanationTwo')}}
+      {{ t("moduleTemplateDialog.explanationTwo") }}
    </p>
  </Dialog>
 </template>
--- a/frontend/src/components/RenameModules.vue
+++ b/frontend/src/components/RenameModules.vue
@ -7,8 +7,7 @@ import { computed, ref } from "vue";
 import ModuleTemplateDialog from "./ModuleTemplateDialog.vue";
 import { onlyWhitespace } from "../helpers/strings.ts";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n({ useScope: 'global' })
-
+const { t } = useI18n({ useScope: "global" });

 const tableData = ref(
  moduleStore().modules.map((module) => {
@ -20,9 +19,9 @@ const tableData = ref(
 );

 const columns = computed(() => [
-  { field: "Course", header: t('moduleInformation.course') },
-  { field: "Module", header: t('moduleInformation.module') },
-  { field: "Reminder", header: t('renameModules.reminder') },
+  { field: "Course", header: t("moduleInformation.course") },
+  { field: "Module", header: t("moduleInformation.module") },
+  { field: "Reminder", header: t("renameModules.reminder") },
 ]);

 async function finalStep() {
@ -35,7 +34,7 @@ async function finalStep() {
 <template>
  <div class="flex flex-column">
    <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <h3>{{$t('renameModules.subTitle')}}</h3>
+      <h3>{{ $t("renameModules.subTitle") }}</h3>
      <ModuleTemplateDialog />
    </div>
    <div class="card flex align-items-center justify-content-center m-2">
@ -47,7 +46,7 @@ async function finalStep() {
      >
        <template #header>
          <div class="flex align-items-center justify-content-end">
-            {{$t('renameModules.enableAllNotifications')}}
+            {{ $t("renameModules.enableAllNotifications") }}
            <InputSwitch
              class="mx-4"
              :model-value="
@ -73,9 +72,9 @@ async function finalStep() {
          <template #body="{ data, field }">
            <template v-if="field === 'Module'">
              {{
-                onlyWhitespace(data[field].userDefinedName) ?
-                  data[field].name :
-                  data[field].userDefinedName
+                onlyWhitespace(data[field].userDefinedName)
+                  ? data[field].name
+                  : data[field].userDefinedName
              }}
            </template>
            <template v-else-if="field === 'Reminder'">
@ -120,7 +119,7 @@ async function finalStep() {
    </div>

    <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="finalStep()">{{$t('renameModules.nextStep')}}</Button>
+      <Button @click="finalStep()">{{ $t("renameModules.nextStep") }}</Button>
    </div>
  </div>
 </template>
--- a/frontend/src/components/RoomOccupation.vue
+++ b/frontend/src/components/RoomOccupation.vue
@ -7,7 +7,7 @@ import { computed, ComputedRef, ref, Ref, watch } from "vue";
 import { CalendarOptions, EventInput } from "@fullcalendar/core";
 import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useI18n({ useScope: "global" });

 const props = defineProps({
  room: {
@ -57,90 +57,91 @@ async function getOccupation() {

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

-
-const calendarOptions: ComputedRef<CalendarOptions> = computed(() =>
-  {
-    return {
-  locales: allLocales,
-  locale: t('languageCode'),
-  plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
-  initialView: "week",
-  dayHeaderFormat: { weekday: "short", omitCommas: true },
-  slotDuration: "00:15:00",
-  eventTimeFormat: {
-    hour: "2-digit",
-    minute: "2-digit",
-    hour12: false,
-  },
-  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(() => {
+  return {
+    locales: allLocales,
+    locale: t("languageCode"),
+    plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
+    initialView: "week",
+    dayHeaderFormat: { weekday: "short", omitCommas: true },
+    slotDuration: "00:15:00",
+    eventTimeFormat: {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
    },
-    Day: {
-      type: "timeGrid",
-      slotLabelFormat: {
-        hour: "numeric",
-        minute: "2-digit",
-        omitZeroMinute: false,
-        meridiem: false,
-        hour12: false,
+    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],
+      },
+      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],
      },
-      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, failureCallback: any) {
-    if (occupations.value.length === 0) {
-      failureCallback(new Error("no events"));
-    } else {
-      successCallback(
-        occupations.value.map((event) => {
-          return {
-            id: event.id.toString(),
-            start: event.start,
-            end: event.end,
-          } as EventInput;
-        }),
+    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, failureCallback: any) {
+      if (occupations.value.length === 0) {
+        failureCallback(new Error("no events"));
+      } else {
+        successCallback(
+          occupations.value.map((event) => {
+            return {
+              id: event.id.toString(),
+              start: event.start,
+              end: event.end,
+            } as EventInput;
+          }),
+        );
+      }
+    },
+  };
+});
 </script>
 <template>
-  <FullCalendar ref="fullCalendar" :options="calendarOptions"/>
+  <FullCalendar ref="fullCalendar" :options="calendarOptions" />
 </template>
--- a/frontend/src/components/editCalendar/EditAdditionalModules.vue
+++ b/frontend/src/components/editCalendar/EditAdditionalModules.vue
@ -91,9 +91,9 @@ function selectChange() {
        class="custom-multiselect"
        filter
        placeholder="Select additional modules"
+        :auto-filter-focus="true"
        @change="selectChange()"
        @selectall-change="onSelectAllChange($event)"
-        :autoFilterFocus="true"
      >
        <template #option="slotProps">
          <div class="flex justify-content-between w-full">
--- a/frontend/src/components/editCalendar/EditModules.vue
+++ b/frontend/src/components/editCalendar/EditModules.vue
@ -90,10 +90,10 @@ async function finalStep() {
          <!-- Text Body -->
          <template #body="{ data, field }">
            <template v-if="field === 'Module'">
-              {{ 
-                onlyWhitespace(data[field].userDefinedName) ?
-                  data[field].name :
-                  data[field].userDefinedName 
+              {{
+                onlyWhitespace(data[field].userDefinedName)
+                  ? data[field].name
+                  : data[field].userDefinedName
              }}
            </template>
            <template v-else-if="field === 'Reminder'">
--- a/frontend/src/i18n/index.ts
+++ b/frontend/src/i18n/index.ts
@ -1,14 +1,14 @@
 import { createI18n } from "vue-i18n";
-import en from './translations/en.json'
-import de from './translations/de.json'
+import en from "./translations/en.json";
+import de from "./translations/de.json";
 import localeStore from "../store/localeStore.ts";

-export const supportedLocales= {
-  'en': { name: 'English'},
-  'de': { name: 'Deutsch'},
-}
+export const supportedLocales = {
+  en: { name: "English" },
+  de: { name: "Deutsch" },
+};
 // Private instance of VueI18n object
-let _i18n: any
+let _i18n: any;
 // Initializer
 function setup() {
  _i18n = createI18n({
@ -17,30 +17,30 @@ function setup() {
    fallbackLocale: "en",
    messages: {
      en,
-      de
+      de,
    },
-  })
-  return _i18n
+  });
+  return _i18n;
 }

 // Sets the active locale.
-function setLocale(newLocale : any) {
-  _i18n.global.locale = newLocale
-  setDocumentAttributesFor(newLocale)
+function setLocale(newLocale: any) {
+  _i18n.global.locale = newLocale;
+  setDocumentAttributesFor(newLocale);
 }

 function setDocumentAttributesFor(locale: any) {
-  const htmlElement = document.querySelector('html')
+  const htmlElement = document.querySelector("html");

-  htmlElement?.setAttribute('lang', locale)
+  htmlElement?.setAttribute("lang", locale);
 }

 // Public interface
 export default {
  // Expose the VueI18n instance via a getter
  get vueI18n() {
-    return _i18n
+    return _i18n;
  },
  setup,
  setLocale,
-}
+};
--- a/frontend/src/i18n/messages.ts
+++ b/frontend/src/i18n/messages.ts
@ -1,5 +1,5 @@
 export default {
-  en : {
+  en: {
    createCalendar: "Create Calendar",
    editCalendar: "Edit Calendar",
    roomFinder: "Room Finder",
@ -7,12 +7,12 @@ export default {
    imprint: "Imprint",
    privacy: "Privacy Policy",
  },
-  de : {
+  de: {
    createCalendar: "Kalender erstellen",
    editCalendar: "Kalender bearbeiten",
    roomFinder: "Raumfinder",
    faq: "FAQ",
    imprint: "Impressum",
-    privacy: "Datenschutz"
-  }
-}
+    privacy: "Datenschutz",
+  },
+};
--- a/frontend/src/i18n/translations/de.json
+++ b/frontend/src/i18n/translations/de.json
@ -23,7 +23,7 @@
    "dropDownSelect": "Bitte wähle einen Raum aus",
    "noRoomsAvailable": "Keine Räume verfügbar"
  },
-  "moduleSelection":{
+  "moduleSelection": {
    "nextStep": "Weiter",
    "selectAll": "Alle anwählen",
    "deselectAll": "Alle abwählen",
@ -57,7 +57,7 @@
    "subTitle": "Konfigurieren Sie die ausgewählten Module nach Ihren Wünschen.",
    "nextStep": "Weiter"
  },
-  "moduleTemplateDialog":{
+  "moduleTemplateDialog": {
    "explanationOne": "Hier können Module nach Wunsch umbenannt werden. Welche dann als Anzeigename im Kalender dargestellt werden.",
    "explanationTwo": "Zusätzlich können Sie Benachrichtigungen für jedes Modul einschalten, damit für jeden Termin 15 Minuten vor Beginn einen Erinnerung geschalten wird.",
    "tableDescription": "Sie können die folgenden Platzhalter in Ihren Modulnamen verwenden:",
@ -81,4 +81,4 @@
    "toGoogleCalendar": "Google Kalender",
    "toMicrosoftCalendar": "Microsoft Kalender"
  }
-}
+}
--- a/frontend/src/i18n/translations/en.json
+++ b/frontend/src/i18n/translations/en.json
@ -23,7 +23,7 @@
    "dropDownSelect": "Please select a room",
    "noRoomsAvailable": "No rooms listed"
  },
-  "moduleSelection":{
+  "moduleSelection": {
    "nextStep": "next step",
    "selectAll": "select all",
    "deselectAll": "deselect all",
@ -57,7 +57,7 @@
    "subTitle": "Configure your selected Modules to your liking.",
    "nextStep": "next step"
  },
-  "moduleTemplateDialog":{
+  "moduleTemplateDialog": {
    "explanationOne": "Here you can rename your modules to your liking. This will be the name of the event in your calendar.",
    "explanationTwo": "Additionally, you can toggle notifications for each module. If you do so, you will be notified 15 minutes before the event starts.",
    "tableDescription": "You can use the following placeholders in your module names:",
@ -81,4 +81,4 @@
    "toGoogleCalendar": "to Google Calendar",
    "toMicrosoftCalendar": "to Microsoft Calendar"
  }
-}
+}
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@ -15,72 +15,72 @@ import i18n from "../i18n";
 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
-        {
-          path: "/",
-          name: "course-selection",
-          component: CourseSelection,
-        },
-        {
-          path: "/rooms",
-          name: "room-finder",
-          component: RoomFinder,
-        },
-        {
-          path: "/faq",
-          name: "faq",
-          component: Faq,
-        },
-        {
-          path: "/additional-modules",
-          name: "additional-modules",
-          component: AdditionalModules,
-        },
-        {
-          path: "/edit-additional-modules",
-          name: "edit-additional-modules",
-          component: EditAdditionalModules,
-        },
-        {
-          path: "/edit-calendar",
-          name: "edit-calendar",
-          component: EditModules,
-        },
-        {
-          path: "/calendar-link",
-          name: "calendar-link",
-          component: CalendarLink,
-        },
-        {
-          path: "/edit",
-          name: "edit",
-          component: EditCalendarView,
-        },
-        {
-          path: "/privacy-policy",
-          name: "privacy-policy",
-          component: PrivacyPolicy,
-        },
-        {
-          path: "/imprint",
-          name: "imprint",
-          component: Imprint,
-        },
-        {
-          path: "/rename-modules",
-          name: "rename-modules",
-          component: RenameModules,
-        }
+    {
+      path: "/",
+      name: "course-selection",
+      component: CourseSelection,
+    },
+    {
+      path: "/rooms",
+      name: "room-finder",
+      component: RoomFinder,
+    },
+    {
+      path: "/faq",
+      name: "faq",
+      component: Faq,
+    },
+    {
+      path: "/additional-modules",
+      name: "additional-modules",
+      component: AdditionalModules,
+    },
+    {
+      path: "/edit-additional-modules",
+      name: "edit-additional-modules",
+      component: EditAdditionalModules,
+    },
+    {
+      path: "/edit-calendar",
+      name: "edit-calendar",
+      component: EditModules,
+    },
+    {
+      path: "/calendar-link",
+      name: "calendar-link",
+      component: CalendarLink,
+    },
+    {
+      path: "/edit",
+      name: "edit",
+      component: EditCalendarView,
+    },
+    {
+      path: "/privacy-policy",
+      name: "privacy-policy",
+      component: PrivacyPolicy,
+    },
+    {
+      path: "/imprint",
+      name: "imprint",
+      component: Imprint,
+    },
+    {
+      path: "/rename-modules",
+      name: "rename-modules",
+      component: RenameModules,
+    },
  ],
 });

 router.beforeEach(async (to, from) => {
-  const newLocale = to.params.locale
-  const prevLocale = from.params.locale
+  const newLocale = to.params.locale;
+  const prevLocale = from.params.locale;
  // If the locale hasn't changed, do nothing
  if (newLocale === prevLocale) {
-    return
+    return;
  }
-  i18n.setLocale(newLocale)
-})
+  i18n.setLocale(newLocale);
+});

 export default router;
--- a/frontend/src/store/localeStore.ts
+++ b/frontend/src/store/localeStore.ts
@ -1,10 +1,10 @@
 import { defineStore } from "pinia";
-import { useLocalStorage } from "@vueuse/core"
+import { useLocalStorage } from "@vueuse/core";

 const localeStore = defineStore("localeStore", {
  state: () => {
    return {
-      locale: useLocalStorage('locale', "en"), //useLocalStorage takes in a key of 'count' and default value of 0
+      locale: useLocalStorage("locale", "en"), //useLocalStorage takes in a key of 'count' and default value of 0
    };
  },
  actions: {
--- a/frontend/src/view/AdditionalModules.vue
+++ b/frontend/src/view/AdditionalModules.vue
@ -91,10 +91,10 @@ function selectChange() {
        class="custom-multiselect"
        filter
        :placeholder="$t('additionalModules.dropDown')"
+        :auto-filter-focus="true"
+        :show-toggle-all="false"
        @change="selectChange()"
        @selectall-change="onSelectAllChange($event)"
-        :autoFilterFocus="true"
-        :showToggleAll="false"
      >
        <template #option="slotProps">
          <div class="flex justify-content-between w-full">
@ -119,15 +119,17 @@ function selectChange() {
        <template #footer>
          <div class="py-2 px-3">
            <b>{{ selectedModules ? selectedModules.length : 0 }}</b>
-            {{$t("additionalModules.dropDownFooterItem")}}
+            {{ $t("additionalModules.dropDownFooterItem") }}
            {{ (selectedModules ? selectedModules.length : 0) > 1 ? "s" : "" }}
-            {{$t("additionalModules.dropDownFooterSelected")}}
+            {{ $t("additionalModules.dropDownFooterSelected") }}
          </div>
        </template>
      </MultiSelect>
    </div>
    <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="nextStep()">{{$t("additionalModules.nextStep")}}</Button>
+      <Button @click="nextStep()">{{
+        $t("additionalModules.nextStep")
+      }}</Button>
    </div>
  </div>
 </template>
@ -140,4 +142,4 @@ function selectChange() {
 :deep(.custom-multiselect li) {
  height: unset;
 }
-</style>
+</style>
--- a/frontend/src/view/EditCalendarView.vue
+++ b/frontend/src/view/EditCalendarView.vue
@ -7,7 +7,7 @@ import router from "../router";
 import tokenStore from "../store/tokenStore";
 import { useToast } from "primevue/usetoast";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useI18n({ useScope: "global" });

 const toast = useToast();

@ -62,7 +62,7 @@ function loadCalendar(): void {
  <div class="flex flex-column">
    <div class="flex align-items-center justify-content-center h-4rem mt-2">
      <h3 class="text-4xl">
-        {{$t("editCalendarView.headline")}}
+        {{ $t("editCalendarView.headline") }}
        <i
          class="pi pi-pencil vertical-align-baseline ml-2"
          style="font-size: 2rem"
@ -72,7 +72,7 @@ function loadCalendar(): void {
    <div
      class="flex align-items-center justify-content-center h-4rem border-round"
    >
-      <p class="text-2xl">{{$t("editCalendarView.subTitle")}}</p>
+      <p class="text-2xl">{{ $t("editCalendarView.subTitle") }}</p>
    </div>
    <div
      class="flex align-items-center justify-content-center border-round m-2"
--- a/frontend/src/view/ImprintPage.vue
+++ b/frontend/src/view/ImprintPage.vue
@ -10,7 +10,8 @@

      <h2>Kontakt</h2>
      <p>
-        Per Email: <a href="mailto:support@htwkalender.de">support@htwkalender.de</a>
+        Per Email:
+        <a href="mailto:support@htwkalender.de">support@htwkalender.de</a>
      </p>

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

 const rooms = async () => {
  return await fetchRoom();
@ -21,7 +21,7 @@ rooms().then(
 <template>
  <div class="flex flex-column">
    <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <h3 class="text-4xl">{{$t('roomFinderPage.headline')}}</h3>
+      <h3 class="text-4xl">{{ $t("roomFinderPage.headline") }}</h3>
      <i
        class="pi pi-search vertical-align-baseline ml-3"
        style="font-size: 2rem"
@ -30,7 +30,7 @@ rooms().then(
    <div
      class="flex align-items-center justify-content-center h-4rem border-round m-2"
    >
-      <h5 class="text-2xl">{{$t('roomFinderPage.detail')}}</h5>
+      <h5 class="text-2xl">{{ $t("roomFinderPage.detail") }}</h5>
    </div>
    <div
      class="flex align-items-center justify-content-center border-round m-2"
@ -43,7 +43,7 @@ rooms().then(
        option-label="name"
        :placeholder="$t('roomFinderPage.dropDownSelect')"
        :empty-message="$t('roomFinderPage.noRoomsAvailable')"
-        :autoFilterFocus="true"
+        :auto-filter-focus="true"
      />
    </div>
    <div class="m-6">
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@ -7,8 +7,8 @@ export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
  },
  server: {
    host: true,