fixed frontend (format, lint, build)

.idea/workspace.xml

@@ -6,6 +6,46 @@
   <component name="ChangeListManager">
     <list default="true" id="81c34cb9-5538-45c5-b693-4f8a6bed15c4" name="Changes" comment="added missing idea files">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/.eslintrc.cjs" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/.eslintrc.cjs" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/.prettierrc.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/.prettierrc.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/README.md" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/index.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/App.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/App.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/api/createFeed.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/api/createFeed.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/api/fetchCourse.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/api/fetchCourse.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/api/fetchModule.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/api/fetchModule.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/api/fetchRoom.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/api/fetchRoom.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/api/loadCalendar.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/api/loadCalendar.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/AdditionalModules.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/AdditionalModules.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/CalendarLink.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/CalendarLink.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/CourseSelection.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/CourseSelection.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/FaqPage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/FaqPage.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/ImprintPage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/ImprintPage.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/MenuBar.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/MenuBar.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/ModuleInformation.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/ModuleInformation.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/ModuleSelection.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/ModuleSelection.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/ModuleTemplateDialog.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/ModuleTemplateDialog.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/PrivacyPolicy.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/PrivacyPolicy.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/RenameModules.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/RenameModules.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/RoomFinder.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/RoomFinder.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/RoomOccupation.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/RoomOccupation.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/editCalendar/EditAdditionalModules.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/editCalendar/EditAdditionalModules.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/editCalendar/EditModules.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/editCalendar/EditModules.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/main.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/main.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/model/calendar.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/model/calendar.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/model/event.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/model/event.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/model/module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/model/module.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/router/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/store/moduleStore.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/store/moduleStore.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/store/tokenStore.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/store/tokenStore.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/style.css" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/style.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/view/editCalendarView.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/view/editCalendarView.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/vite-env.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/vite-env.d.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/tsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/tsconfig.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/tsconfig.node.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/tsconfig.node.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/vite.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/vite.config.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -69,7 +109,7 @@
     "RunOnceActivity.go.migrated.go.modules.settings": "true",
     "RunOnceActivity.go.modules.automatic.dependencies.download": "true",
     "WebServerToolWindowFactoryState": "false",
-    "git-widget-placeholder": "10-roomfinder",
+    "git-widget-placeholder": "main",
     "go.import.settings.migrated": "true",
     "ignore.virus.scanning.warn.message": "true",
     "jdk.selected.JAVA_MODULE": "20",
@@ -79,7 +119,7 @@
     "node.js.selected.package.eslint": "(autodetect)",
     "node.js.selected.package.tslint": "(autodetect)",
     "nodejs_package_manager_path": "npm",
-    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\masterelmar\\GolandProjects\\htwk-planner\\frontend\\node_modules\\prettier",
+    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\masterelmar\\project\\htwkalender\\frontend\\node_modules\\prettier",
     "project.structure.last.edited": "Modules",
     "project.structure.proportion": "0.0",
     "project.structure.side.proportion": "0.42068964",
@@ -138,6 +178,8 @@
       <workItem from="1697823365338" duration="611000" />
       <workItem from="1697823990507" duration="315000" />
       <workItem from="1698862050509" duration="64000" />
+      <workItem from="1698873056958" duration="5000" />
+      <workItem from="1698873376316" duration="726000" />
     </task>
     <servers />
   </component>
@@ -149,7 +191,19 @@
       <map>
         <entry key="MAIN">
           <value>
-            <State />
+            <State>
+              <option name="FILTERS">
+                <map>
+                  <entry key="branch">
+                    <value>
+                      <list>
+                        <option value="main" />
+                      </list>
+                    </value>
+                  </entry>
+                </map>
+              </option>
+            </State>
           </value>
         </entry>
       </map>

frontend/src/api/fetchCourse.ts

@@ -33,6 +33,7 @@ export async function fetchModulesByCourseAndSemester(
             module.name,
             module.prof,
             semester,
+            false,
             module.events,
           ),
         ),
@@ -57,6 +58,7 @@ export async function fetchAllModules(): Promise<Module[]> {
             module.name,
             module.prof,
             module.semester,
+            false,
             module.events,
           ),
         );

frontend/src/api/fetchModule.ts

@@ -22,6 +22,7 @@ export async function fetchModule(module: Module): Promise<Module> {
           module.name,
           module.prof,
           module.semester,
+          false,
           module.events,
         ),
     );

frontend/src/api/fetchRoom.ts

@@ -1,4 +1,4 @@
-import {Event} from "../model/event.ts";
+import { Event } from "../model/event.ts";
 
 export async function fetchRoom(): Promise<string[]> {
   const rooms: string[] = [];
@@ -13,24 +13,26 @@ export async function fetchRoom(): Promise<string[]> {
 }
 
 export async function fetchEventsByRoomAndDuration(
-    room: string,
+  room: string,
-    from_date: string,
+  from_date: string,
-    to_date: string,
+  to_date: string,
 ): Promise<Event[]> {
-    const events: Event[] = [];
+  const events: Event[] = [];
-    await fetch("/api/schedule?room=" + room + "&from=" + from_date + "&to=" + to_date)
+  await fetch(
-        .then((response) => {
+    "/api/schedule?room=" + room + "&from=" + from_date + "&to=" + to_date,
-            console.log(response);
+  )
-            return response.json();
+    .then((response) => {
-        })
+      console.log(response);
-        .then((eventsResponse) => {
+      return response.json();
-            console.log("Response:", eventsResponse);
+    })
-            eventsResponse.forEach((event: Event) =>
+    .then((eventsResponse) => {
-                events.push(event));
+      console.log("Response:", eventsResponse);
-        }).catch((error) => {
+      eventsResponse.forEach((event: Event) => events.push(event));
-            console.log("Error fetching events: ", error);
+    })
-            return null;
+    .catch((error) => {
-        })
+      console.log("Error fetching events: ", error);
-    console.log("occupations: ", events);
+      return null;
-    return events;
+    });
-}
+  console.log("occupations: ", events);
+  return events;
+}

frontend/src/components/ModuleTemplateDialog.vue

@@ -4,13 +4,21 @@ import { Ref, ref } from "vue";
 const helpVisible: Ref<boolean> = ref(false);
 
 const placeholders = ref([
-  { placeholder: "%t", description: "Event Type", examples: "V = Vorlesung, S = Seminar, P = Praktikum/Prüfung" },
+  {
-  { placeholder: "%p", description: "Mandatory", examples: "w = optional, p = mandatory" },
+    placeholder: "%t",
+    description: "Event Type",
+    examples: "V = Vorlesung, S = Seminar, P = Praktikum/Prüfung",
+  },
+  {
+    placeholder: "%p",
+    description: "Mandatory",
+    examples: "w = optional, p = mandatory",
+  },
 ]);
 </script>
 
 <template>
-  <Button 
+  <Button
     icon="pi pi-info"
     class="m-2 small-button"
     severity="help"
@@ -18,36 +26,30 @@ const placeholders = ref([
     outlined
     size="large"
     aria-label="Help"
-    @click="helpVisible = true" />
+    @click="helpVisible = true"
-  <Dialog
+  />
-    v-model:visible="helpVisible"
+  <Dialog v-model:visible="helpVisible" header="Module configuration">
-    header="Module configuration" 
-  >
     <p>
-      Here you can rename your modules to your liking. This will be the name
+      Here you can rename your modules to your liking. This will be the name of
-      of the event in your calendar.
+      the event in your calendar.
     </p>
-    <p>
+    <p>You can use the following placeholders in your module names:</p>
-      You can use the following placeholders in your module names:
+    <DataTable :value="placeholders">
-    </p>
-    <DataTable
-      :value="placeholders"
-    > 
       <Column field="placeholder" header="Placeholder"></Column>
       <Column field="description" header="Description"></Column>
       <Column field="examples" header="Examples"></Column>
     </DataTable>
     <p>
-      Additionally, you can toggle notifications for each module.
+      Additionally, you can toggle notifications for each module. If you do so,
-      If you do so, you will be notified 15 minutes before the event starts.
+      you will be notified 15 minutes before the event starts.
     </p>
   </Dialog>
 </template>
 
 <style scoped>
-  .small-button.p-button {
+.small-button.p-button {
-    width: 2rem;
+  width: 2rem;
-    height: 2rem;
+  height: 2rem;
-    padding: 0;
+  padding: 0;
-  }
+}
 </style>

frontend/src/components/RenameModules.vue

@@ -18,7 +18,7 @@ const tableData = ref(
 const columns = ref([
   { field: "Course", header: "Course" },
   { field: "Module", header: "Module" },
-  { field: "Reminder", header: "Reminder"}
+  { field: "Reminder", header: "Reminder" },
 ]);
 
 async function finalStep() {
@@ -43,11 +43,18 @@ async function finalStep() {
       >
         <template #header>
           <div class="flex align-items-center justify-content-end">
-            Enable all notifications: 
+            Enable all notifications:
             <InputSwitch
               class="mx-4"
-              :model-value="tableData.reduce((acc, curr) => acc && curr.Module.reminder, true)"
+              :model-value="
-              @update:model-value="tableData.forEach((module) => module.Module.reminder = $event)"
+                tableData.reduce(
+                  (acc, curr) => acc && curr.Module.reminder,
+                  true,
+                )
+              "
+              @update:model-value="
+                tableData.forEach((module) => (module.Module.reminder = $event))
+              "
             />
           </div>
         </template>
@@ -63,15 +70,15 @@ async function finalStep() {
             <template v-if="field === 'Module'">
               {{ data[field].userDefinedName }}
             </template>
-            <template v-else-if="field === 'Reminder'" class="align-content-center">
+            <template v-else-if="field === 'Reminder'">
-              <Button 
+              <Button
                 :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
                 :severity="data.Module.reminder ? 'warning' : 'secondary'"
                 rounded
                 outlined
                 class="small-button"
-                @click = "data.Module.reminder = !data.Module.reminder"
+                @click="data.Module.reminder = !data.Module.reminder"
-                ></Button>
+              ></Button>
             </template>
             <template v-else>
               {{ data[field] }}
@@ -91,14 +98,14 @@ async function finalStep() {
                 v-model="data.Module.reminder" 
                 class="align-self-center"
               />-->
-              <Button 
+              <Button
                 :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
                 :severity="data.Module.reminder ? 'warning' : 'secondary'"
                 rounded
                 outlined
                 class="small-button"
-                @click = "data.Module.reminder = !data.Module.reminder"
+                @click="data.Module.reminder = !data.Module.reminder"
-                ></Button>
+              ></Button>
             </template>
             <template v-else>
               <div>{{ data[field] }}</div>
@@ -115,9 +122,9 @@ async function finalStep() {
 </template>
 
 <style scoped>
-  .small-button.p-button {
+.small-button.p-button {
-    width: 2rem;
+  width: 2rem;
-    height: 2rem;
+  height: 2rem;
-    padding: 0;
+  padding: 0;
-  }
+}
 </style>

frontend/src/components/RoomFinder.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-
+import { Ref, ref } from "vue";
-import {Ref, ref} from "vue";
+import { fetchRoom } from "../api/fetchRoom.ts";
-import {fetchRoom} from "../api/fetchRoom.ts";
 import RoomOccupation from "./RoomOccupation.vue";
 
 const rooms = async () => {
@@ -9,13 +8,13 @@ const rooms = async () => {
 };
 
 const roomsList: Ref<{ name: string }[]> = ref([]);
-const selectedRoom: Ref<{ name: string }> = ref({name: ""});
+const selectedRoom: Ref<{ name: string }> = ref({ name: "" });
 
 rooms().then(
-    (data) =>
+  (data) =>
-        (roomsList.value = data.map((room) => {
+    (roomsList.value = data.map((room) => {
-          return {name: room};
+      return { name: room };
-        })),
+    })),
 );
 </script>
 
@@ -25,26 +24,24 @@ rooms().then(
       <h3 class="text-4xl">Raumfinder</h3>
     </div>
     <div
-        class="flex align-items-center justify-content-center h-4rem border-round m-2"
+      class="flex align-items-center justify-content-center h-4rem border-round m-2"
     >
       <h5 class="text-2xl">Please select a room</h5>
     </div>
     <div
-        class="flex align-items-center justify-content-center border-round m-2"
+      class="flex align-items-center justify-content-center border-round m-2"
     >
       <Dropdown
-          v-model="selectedRoom"
+        v-model="selectedRoom"
-          :options="roomsList"
+        :options="roomsList"
-          class="w-full md:w-25rem mx-2"
+        class="w-full md:w-25rem mx-2"
-          filter
+        filter
-          option-label="name"
+        option-label="name"
-          placeholder="Select a Room"
+        placeholder="Select a Room"
       />
     </div>
-    <div
+    <div class="m-6">
-        class="m-6"
+      <RoomOccupation :room="selectedRoom.name" />
-    >
-    <RoomOccupation :room="selectedRoom.name"/>
     </div>
   </div>
 </template>

frontend/src/components/RoomOccupation.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import FullCalendar from '@fullcalendar/vue3'
+import FullCalendar from "@fullcalendar/vue3";
-import dayGridPlugin from '@fullcalendar/daygrid'
+import dayGridPlugin from "@fullcalendar/daygrid";
-import interactionPlugin from '@fullcalendar/interaction'
+import interactionPlugin from "@fullcalendar/interaction";
-import timeGridPlugin from '@fullcalendar/timegrid'
+import timeGridPlugin from "@fullcalendar/timegrid";
-import {computed, ref, Ref, watch} from "vue";
+import { computed, ref, Ref, watch } from "vue";
-import {CalendarOptions, EventInput} from "@fullcalendar/core";
+import { CalendarOptions, EventInput } from "@fullcalendar/core";
-import {fetchEventsByRoomAndDuration} from "../api/fetchRoom.ts";
+import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
 
 const props = defineProps({
   room: {
@@ -26,114 +26,112 @@ const occupations: Ref<CalenderEvent[]> = ref([]);
 
 const selectedRoom = computed(() => props.room);
 
-watch(selectedRoom, (_newValue: string) => {
+watch(selectedRoom, () => {
   getOccupation();
 });
 
-const fullCalendar = ref<InstanceType<typeof FullCalendar>>()
+const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
 
 async function getOccupation() {
   if (selectedRoom.value === "") {
     return;
   }
   const events = await fetchEventsByRoomAndDuration(
-      selectedRoom.value,
+    selectedRoom.value,
-      currentDateFrom.value,
+    currentDateFrom.value,
-      currentDateTo.value
+    currentDateTo.value,
   );
   occupations.value = events.map((event, index) => {
     return {
       id: index,
-      start: event.start.replace(/\s\+\d{4}\s\w+$/, '').replace(' ', 'T'),
+      start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
-      end: event.end.replace(/\s\+\d{4}\s\w+$/, '').replace(' ', 'T')
+      end: event.end.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
     };
   });
 
-  let calendar = fullCalendar.value?.getApi()
+  const calendar = fullCalendar.value?.getApi();
-  calendar?.refetchEvents()
+  calendar?.refetchEvents();
 }
 
-
+const calendarOptions: CalendarOptions = {
-  const calendarOptions: CalendarOptions = {
+  plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
-    plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
+  initialView: "week",
-    initialView: 'week',
+  dayHeaderFormat: { weekday: "short", omitCommas: true },
-    dayHeaderFormat: {weekday: 'short', omitCommas: true},
+  slotDuration: "00:15:00",
-    slotDuration: "00:15:00",
+  eventTimeFormat: {
-    eventTimeFormat: {
+    hour: "2-digit",
-      hour: "2-digit",
+    minute: "2-digit",
-      minute: "2-digit",
+    hour12: false,
-      hour12: false
+  },
-    },
+  views: {
-    views: {
+    week: {
-      week: {
+      type: "timeGrid",
-        type: 'timeGrid',
+      slotLabelFormat: {
-        slotLabelFormat: {
+        hour: "numeric",
-          hour: 'numeric',
+        minute: "2-digit",
-          minute: '2-digit',
+        omitZeroMinute: false,
-          omitZeroMinute: false,
+        meridiem: false,
-          meridiem: false,
+        hour12: 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: {
+      dateAlignment: "week",
-        type: 'timeGrid',
+      titleFormat: { month: "short", day: "numeric" },
-        slotLabelFormat: {
+      slotMinTime: "06:00:00",
-          hour: 'numeric',
+      slotMaxTime: "22:00:00",
-          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'
-    },
 
-    datesSet: function (dateInfo) {
+      duration: { days: 7 },
-      const view = dateInfo.view;
+      firstDay: 1,
-      const offset = (new Date()).getTimezoneOffset();
+      allDaySlot: false,
-      const startDate = new Date(view.activeStart.getTime() - (offset*60*1000));
+      hiddenDays: [0],
-      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, successCallback, failureCallback) {
+    Day: {
-      if (occupations.value.length === 0){
+      type: "timeGrid",
-        failureCallback(new Error("no events"))
+      slotLabelFormat: {
-      }else{
+        hour: "numeric",
-        successCallback(
+        minute: "2-digit",
-            occupations.value.map((event) => {
+        omitZeroMinute: false,
-              return {
+        meridiem: false,
-                id: event.id.toString(),
+        hour12: false,
-                start: event.start,
+      },
-                end: event.end,
+      titleFormat: { month: "short", day: "numeric" },
-              } as EventInput;
+      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",
+  },
+
+  datesSet: function (dateInfo) {
+    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, successCallback, failureCallback) {
+    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>
+</template>

frontend/src/components/editCalendar/EditAdditionalModules.vue

@@ -37,23 +37,22 @@ const ModuleInformation = defineAsyncComponent(
 );
 
 async function showInfo(module: Module) {
-  await fetchModule(module).then((data) => {
+  await fetchModule(module).then((data: Module) => {
-    module.value = data;
+    dialog.open(ModuleInformation, {
-  });
+      props: {
-  dialog.open(ModuleInformation, {
+        style: {
-    props: {
+          width: "50vw",
-      style: {
+        },
-        width: "50vw",
+        breakpoints: {
+          "960px": "75vw",
+          "640px": "90vw",
+        },
+        modal: true,
       },
-      breakpoints: {
+      data: {
-        "960px": "75vw",
+        module: data,
-        "640px": "90vw",
       },
-      modal: true,
+    });
-    },
-    data: {
-      module: module,
-    },
   });
 }
 

frontend/src/components/editCalendar/EditModules.vue

@@ -20,7 +20,7 @@ const tableData = computed(() =>
 const columns = ref([
   { field: "Course", header: "Course" },
   { field: "Module", header: "Module" },
-  { field: "Reminder", header: "Reminder"}
+  { field: "Reminder", header: "Reminder" },
 ]);
 
 const fetchedModules = async () => {
@@ -64,11 +64,18 @@ async function finalStep() {
       >
         <template #header>
           <div class="flex align-items-center justify-content-end">
-            Enable all notifications: 
+            Enable all notifications:
             <InputSwitch
               class="mx-4"
-              :model-value="tableData.reduce((acc, curr) => acc && curr.Module.reminder, true)"
+              :model-value="
-              @update:model-value="tableData.forEach((module) => module.Module.reminder = $event)"
+                tableData.reduce(
+                  (acc, curr) => acc && curr.Module.reminder,
+                  true,
+                )
+              "
+              @update:model-value="
+                tableData.forEach((module) => (module.Module.reminder = $event))
+              "
             />
           </div>
         </template>
@@ -84,15 +91,15 @@ async function finalStep() {
             <template v-if="field === 'Module'">
               {{ data[field].userDefinedName }}
             </template>
-            <template v-else-if="field === 'Reminder'" class="align-content-center">
+            <template v-else-if="field === 'Reminder'">
-              <Button 
+              <Button
                 :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
                 :severity="data.Module.reminder ? 'warning' : 'secondary'"
                 rounded
                 outlined
                 class="small-button"
-                @click = "data.Module.reminder = !data.Module.reminder"
+                @click="data.Module.reminder = !data.Module.reminder"
-                ></Button>
+              ></Button>
             </template>
             <template v-else>
               {{ data[field] }}
@@ -108,14 +115,14 @@ async function finalStep() {
               />
             </template>
             <template v-else-if="field === 'Reminder'">
-              <Button 
+              <Button
                 :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
                 :severity="data.Module.reminder ? 'warning' : 'secondary'"
                 rounded
                 outlined
                 class="small-button"
-                @click = "data.Module.reminder = !data.Module.reminder"
+                @click="data.Module.reminder = !data.Module.reminder"
-                ></Button>
+              ></Button>
             </template>
           </template>
         </Column>
@@ -143,9 +150,9 @@ async function finalStep() {
 </template>
 
 <style scoped>
-  .small-button.p-button {
+.small-button.p-button {
-    width: 2rem;
+  width: 2rem;
-    height: 2rem;
+  height: 2rem;
-    padding: 0;
+  padding: 0;
-  }
+}
 </style>