fix:#3 linted formatted

frontend/public/primevue-sass-theme/themes/lara/lara-dark/yellow/theme.scss

@@ -478,11 +478,12 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;
   }
 }
 
-.fc-event-selected::after, .fc-event:focus::after {
+.fc-event-selected::after,
+.fc-event:focus::after {
   background: var(--fc-event-selected-overlay-color);
   inset: -1px;
   content: "";
   position: absolute;
   z-index: 1;
   border-radius: 5px;
-}
+}

frontend/public/primevue-sass-theme/themes/lara/lara-light/green/theme.scss

@@ -488,11 +488,12 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;
   }
 }
 
-.fc-event-selected::after, .fc-event:focus::after {
+.fc-event-selected::after,
+.fc-event:focus::after {
   background: var(--fc-event-selected-overlay-color);
   inset: -1px;
   content: "";
   position: absolute;
   z-index: 1;
   border-radius: 5px;
-}
+}

frontend/src/App.vue

@@ -37,7 +37,7 @@ const disabledPages = [
   "edit-calendar",
   "rooms",
   "free-rooms",
-  "room-schedule"
+  "room-schedule",
 ];
 
 const store = moduleStore();
@@ -59,13 +59,18 @@ const settings = settingsStore;
 const emit = defineEmits(["dark-mode-toggled"]);
 
 onMounted(() => {
-// set theme matching browser preference
+  // set theme matching browser preference
-  settings().setDarkMode(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches)
+  settings().setDarkMode(
+    window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches,
+  );
   setTheme(settings, primeVue, emit);
-  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+  window
-    settings().setDarkMode(e.matches)
+    .matchMedia("(prefers-color-scheme: dark)")
-    setTheme(settings, primeVue, emit);
+    .addEventListener("change", (e) => {
-  });
+      settings().setDarkMode(e.matches);
+      setTheme(settings, primeVue, emit);
+    });
 });
 </script>
 

frontend/src/api/fetchRoomOccupancy.ts

@@ -16,13 +16,32 @@
 
 import { BSON } from "bson";
 import { RoomOccupancyList } from "@/model/roomOccupancyList.ts";
-import { Duration, NormalizedInterval, add, addDays, addMinutes, addMonths, clamp, differenceInMinutes, eachDayOfInterval, endOfDay, interval, isAfter, isBefore, isEqual, max, min, startOfDay, subDays } from "date-fns";
+import {
+  Duration,
+  NormalizedInterval,
+  add,
+  addDays,
+  addMinutes,
+  addMonths,
+  clamp,
+  differenceInMinutes,
+  eachDayOfInterval,
+  endOfDay,
+  interval,
+  isAfter,
+  isBefore,
+  isEqual,
+  max,
+  min,
+  startOfDay,
+  subDays,
+} from "date-fns";
 import { formatYearMonthDay } from "@/helpers/dates";
 
 const END_OF_SUMMER_SEMESTER = "0930";
 const END_OF_WINTER_SEMESTER = "0331";
 
-/** 
+/**
  * check if date is in winter semester before summer semester
  * @param date - The date to check
  * @returns boolean - true if date is in winter semester
@@ -32,7 +51,7 @@ export function isBeforeSummer(date: Date): boolean {
   return formattedDate <= END_OF_WINTER_SEMESTER;
 }
 
-/** 
+/**
  * check if date is in winter semester after summer semester
  * @param date - The date to check
  * @returns boolean - true if date is in winter semester
@@ -49,7 +68,7 @@ export function isAfterSummer(date: Date): boolean {
  */
 export function getSemesterStart(date: Date): Date {
   if (isBeforeSummer(date)) {
-    return new Date(date.getFullYear()-1, 9, 1);
+    return new Date(date.getFullYear() - 1, 9, 1);
   } else if (isAfterSummer(date)) {
     return new Date(date.getFullYear(), 9, 1);
   } else {
@@ -66,7 +85,7 @@ export function getSemesterStart(date: Date): Date {
 
 export async function fetchRoomOccupancy(
   from_date?: string,
-  to_date?: string
+  to_date?: string,
 ): Promise<RoomOccupancyList> {
   if (from_date == undefined) {
     let new_from_date = getSemesterStart(new Date());

frontend/src/components/CalendarViewer.vue

@@ -71,7 +71,6 @@ const toggle = (info: EventClickArg) => {
   }
 };
 
-
 const selectedToken = computed(() => {
   return props.token;
 });
@@ -79,7 +78,7 @@ const selectedToken = computed(() => {
 const mobilePage = inject("mobilePage") as Ref<boolean>;
 const date: Ref<Date> = ref(new Date());
 
-const { data: calendar} = useQuery({
+const { data: calendar } = useQuery({
   queryKey: ["userCalendar", selectedToken],
   queryFn: () => fetchICalendarEvents(selectedToken.value),
   select: (data) => {
@@ -89,7 +88,7 @@ const { data: calendar} = useQuery({
   refetchOnWindowFocus: "always",
   refetchOnReconnect: "always",
   networkMode: "offlineFirst",
-  enabled: () => tokenStore().token !== ""
+  enabled: () => tokenStore().token !== "",
 });
 
 const queryClient = useQueryClient();
@@ -97,13 +96,13 @@ const queryClient = useQueryClient();
 const invalidateAndRefetchCalendar = () => {
   console.debug("invalidateAndRefetchCalendar", selectedToken);
   const queryKey = ["userCalendar", selectedToken];
-  queryClient.invalidateQueries({queryKey: queryKey}).then(() => {
+  queryClient.invalidateQueries({ queryKey: queryKey }).then(() => {
-    queryClient.refetchQueries({queryKey: queryKey});
+    queryClient.refetchQueries({ queryKey: queryKey });
   });
 };
 
 defineExpose({
-  invalidateAndRefetchCalendar
+  invalidateAndRefetchCalendar,
 });
 
 const events = computed(() => {

frontend/src/components/DarkModeSwitcher.vue

@@ -29,7 +29,6 @@ const emit = defineEmits(["dark-mode-toggled"]);
 const store = settingsStore;
 
 const isDark = computed(() => store().isDark);
-
 </script>
 
 <template>

frontend/src/components/DefaultPageSwitcher.vue

@@ -20,10 +20,15 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import { computed, ComputedRef, ref } from "vue";
 import settingsStore from "../store/settingsStore.ts";
 
-const pageOptions: ComputedRef<(string | {
+const pageOptions: ComputedRef<
-  label: string;
+  (
-  value: string;
+    | string
-})[]> = computed(() => [...settingsStore().getDefaultPageOptions()]);
+    | {
+        label: string;
+        value: string;
+      }
+  )[]
+> = computed(() => [...settingsStore().getDefaultPageOptions()]);
 
 const selectedPage = ref(settingsStore().defaultPage);
 

frontend/src/components/MenuBar.vue

@@ -21,8 +21,6 @@ import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n({ useScope: "global" });
 
-
-
 const items = computed(() => [
   {
     label: t("calendar"),
@@ -133,7 +131,15 @@ const items = computed(() => [
       <div class="flex align-items-stretch justify-content-center">
         <!-- Settings Button with Gear Icon -->
         <router-link v-slot="{ navigate }" :to="`/settings`" custom>
-          <Button icon="pi pi-cog" severity="secondary" rounded text size="large" aria-label="Settings" @click="navigate" />
+          <Button
+            icon="pi pi-cog"
+            severity="secondary"
+            rounded
+            text
+            size="large"
+            aria-label="Settings"
+            @click="navigate"
+          />
         </router-link>
       </div>
     </template>

frontend/src/components/RoomOccupationOffline.vue

@@ -92,9 +92,8 @@ function transformData(data: RoomOccupancyList) {
 }
 
 const { data: occupancy } = useQuery({
-  queryKey: ["roomOccupancy"],//, selectedRoom, currentDateFrom, currentDateTo],
+  queryKey: ["roomOccupancy"], //, selectedRoom, currentDateFrom, currentDateTo],
-  queryFn: () =>
+  queryFn: () => fetchRoomOccupancy(),
-    fetchRoomOccupancy(),
   staleTime: 12 * 3600000, // 12 hours
 });
 
@@ -192,9 +191,7 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
           color: event.event.free
             ? "var(--htwk-gruen-500)"
             : "var(--htwk-grau-60-500)",
-          textColor: event.event.free
+          textColor: event.event.free ? "var(--green-50)" : "white",
-              ? "var(--green-50)"
-              : "white",
           title: event.event.stub
             ? t("roomFinderPage.stub")
             : event.event.free

frontend/src/helpers/ical.ts

@@ -41,10 +41,13 @@ export function parseICalData(
     const jCalData = ICAL.parse(icalData);
     const comp = new ICAL.Component(jCalData);
     const vEvents = comp.getAllSubcomponents("vevent");
-    const events: CalendarComponent[] = vEvents.map((vevent: CalendarComponent) => {
+    const events: CalendarComponent[] = vEvents.map(
-      return new ICAL.Event(vevent);
+      (vevent: CalendarComponent) => {
-    });
+        return new ICAL.Event(vevent);
-    const colorDistinctionEvents: ColorDistinctionEvent[] = extractedColorizedEvents(events);
+      },
+    );
+    const colorDistinctionEvents: ColorDistinctionEvent[] =
+      extractedColorizedEvents(events);
 
     return vEvents.map((vevent: CalendarComponent) => {
       const event = new ICAL.Event(vevent);

frontend/src/helpers/theme.ts

@@ -20,27 +20,27 @@ import { EmitFn } from "primevue/ts-helpers";
 import settingsStore from "@/store/settingsStore.ts";
 
 const darkTheme = ref("lara-dark-blue"),
-    lightTheme = ref("lara-light-blue");
+  lightTheme = ref("lara-light-blue");
 
 export type SettingsStore = typeof settingsStore;
 
 export function toggleTheme(
-    store: SettingsStore,
+  store: SettingsStore,
-    primeVue: { changeTheme: PrimeVueChangeTheme },
+  primeVue: { changeTheme: PrimeVueChangeTheme },
-    emit: EmitFn<"dark-mode-toggled"[]>,
+  emit: EmitFn<"dark-mode-toggled"[]>,
 ): void {
-    store().setDarkMode(!store().isDark);
+  store().setDarkMode(!store().isDark);
-    setTheme(store, primeVue, emit);
+  setTheme(store, primeVue, emit);
 }
 
 export function setTheme(
-    store: SettingsStore,
+  store: SettingsStore,
-    { changeTheme }: { changeTheme: PrimeVueChangeTheme },
+  { changeTheme }: { changeTheme: PrimeVueChangeTheme },
-    emit: EmitFn<"dark-mode-toggled"[]>
+  emit: EmitFn<"dark-mode-toggled"[]>,
 ) {
-    const isDark = ref(store().isDark);
+  const isDark = ref(store().isDark);
-    const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
+  const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
-        oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
+    oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
-    changeTheme(oldTheme, newTheme, "theme-link", () => { });
+  changeTheme(oldTheme, newTheme, "theme-link", () => {});
-    emit("dark-mode-toggled", isDark.value);
+  emit("dark-mode-toggled", isDark.value);
-}
+}

frontend/src/main.ts

@@ -70,10 +70,10 @@ app.use(VueQueryPlugin, {
   queryClientConfig: {
     defaultOptions: {
       queries: {
-        refetchOnWindowFocus: false
+        refetchOnWindowFocus: false,
-      }
+      },
-    }
+    },
-  }
+  },
 });
 
 app.use(PrimeVue);

frontend/src/model/roomOccupancyList.ts

@@ -93,16 +93,22 @@ export class RoomOccupancyList {
     const roomOccupancy = this.rooms.find((r) => r.name === room);
 
     // Get start and end of decoded time range (within encoded list and requested range)
-    let decodeInterval = interval(clamp(from, this.getOccupancyInterval()), clamp(to, this.getOccupancyInterval()));
+    let decodeInterval = interval(
+      clamp(from, this.getOccupancyInterval()),
+      clamp(to, this.getOccupancyInterval()),
+    );
 
     // if the room is not in the list or the time range is empty, return stub events
-    if (roomOccupancy === undefined || isEqual(decodeInterval.start, decodeInterval.end)) {
+    if (
+      roomOccupancy === undefined ||
+      isEqual(decodeInterval.start, decodeInterval.end)
+    ) {
       return RoomOccupancyList.generateStubEvents(room, from, to);
     }
 
     const occupancyList = [];
 
-    let {decodeSliceStart, decodeSlice} = this.sliceOccupancy(
+    let { decodeSliceStart, decodeSlice } = this.sliceOccupancy(
       decodeInterval,
       roomOccupancy.occupancy.buffer,
     );

frontend/src/router/index.ts

@@ -35,7 +35,6 @@ const NotFound = () => import("../view/NotFound.vue");
 import i18n from "../i18n";
 import settingsStore from "@/store/settingsStore.ts";
 
-
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [

frontend/src/store/settingsStore.ts

@@ -23,7 +23,10 @@ const settingsStore = defineStore("settingsStore", {
     return {
       locale: useLocalStorage("locale", "en"), //useLocalStorage takes in a key of 'count' and default value of 0
       isDark: true,
-      defaultPage: useLocalStorage("defaultPage",  {label: "Home", value: "/home"}),
+      defaultPage: useLocalStorage("defaultPage", {
+        label: "Home",
+        value: "/home",
+      }),
     };
   },
   actions: {
@@ -36,10 +39,7 @@ const settingsStore = defineStore("settingsStore", {
     getDarkMode(): boolean {
       return this.isDark;
     },
-    setDefaultPage(page: {
+    setDefaultPage(page: { label: string; value: string }) {
-      label: string;
-      value: string;
-    }) {
       this.defaultPage = page;
     },
     getDefaultPageOptions(): {
@@ -58,12 +58,12 @@ const settingsStore = defineStore("settingsStore", {
               label: route.name,
               value: route.path,
             });
-            }
           }
-        });
+        }
-        return options;
+      });
+      return options;
     },
   },
 });
 
-export default settingsStore;
+export default settingsStore;

frontend/src/view/NotFound.vue

@@ -11,6 +11,4 @@ import DynamicPage from "@/view/DynamicPage.vue";
   </DynamicPage>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

frontend/src/view/SettingsView.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
 import { ref } from "vue";
 import DarkModeSwitcher from "@/components/DarkModeSwitcher.vue";
@@ -14,7 +13,6 @@ function handleDarkModeToggled(isDarkVar: boolean) {
   // Assuming the root component has an isDark ref
   isDark.value = isDarkVar;
 }
-
 </script>
 
 <template>
@@ -34,7 +32,7 @@ function handleDarkModeToggled(isDarkVar: boolean) {
       <slot flex-specs="flex-1 m-0" name="selection"></slot>
     </div>
     <div
-class="opacity-100 transition-all transition-duration-500 transition-ease-in-out w-full lg:w-8"
+      class="opacity-100 transition-all transition-duration-500 transition-ease-in-out w-full lg:w-8"
     >
       <div class="flex flex-column justify-content-center">
         <div class="grid my-2">
@@ -68,11 +66,9 @@ class="opacity-100 transition-all transition-duration-500 transition-ease-in-out
   </div>
 </template>
 <style scoped>
-
 .col {
   display: flex;
   justify-content: center;
   align-items: center;
 }
-
+</style>
-</style>

frontend/src/view/UserCalendar.vue

@@ -42,12 +42,12 @@ function loadCalendar() {
 
   calendarViewerRef.value?.invalidateAndRefetchCalendar();
 
-toast.add({
+  toast.add({
-  severity: "success",
+    severity: "success",
-  summary: t("editCalendarView.toast.success"),
+    summary: t("editCalendarView.toast.success"),
-  detail: t("editCalendarView.toast.successDetailLoad"),
+    detail: t("editCalendarView.toast.successDetailLoad"),
-  life: 3000,
+    life: 3000,
-});
+  });
 }
 
 onMounted(() => {
@@ -77,7 +77,7 @@ onMounted(() => {
       ></Button>
     </template>
     <template #content>
-      <CalendarViewer :token="tokenStore().token" ref="calendarViewerRef" />
+      <CalendarViewer ref="calendarViewerRef" :token="tokenStore().token" />
     </template>
   </DynamicPage>
 </template>

frontend/vite.config.ts

@@ -40,18 +40,18 @@ export default defineConfig({
         start_url: "/",
         id: "de.htwk-leipzig.htwkalender",
         screenshots: [
-            {
+          {
-                src: "/1280x720.png",
+            src: "/1280x720.png",
-                sizes: "1280x720",
+            sizes: "1280x720",
-                form_factor: "wide",
+            form_factor: "wide",
-                type: "image/png",
+            type: "image/png",
-            },
+          },
-            {
+          {
-                src: "/390x844.png",
+            src: "/390x844.png",
-                sizes: "1170x2532",
+            sizes: "1170x2532",
-                form_factor: "narrow",
+            form_factor: "narrow",
-                type: "image/png",
+            type: "image/png",
-            },
+          },
         ],
         icons: [
           {
@@ -86,11 +86,11 @@ export default defineConfig({
         cleanupOutdatedCaches: true,
         runtimeCaching: [
           {
-            urlPattern: ({ url }) => url.pathname.startsWith('/api/feed'),
+            urlPattern: ({ url }) => url.pathname.startsWith("/api/feed"),
-            method: 'GET',
+            method: "GET",
-            handler: 'NetworkFirst',
+            handler: "NetworkFirst",
             options: {
-              cacheName: 'calendar-feed-cache',
+              cacheName: "calendar-feed-cache",
               expiration: {
                 maxAgeSeconds: 12 * 60 * 60, // 12 hours
               },