fixed merge issue with main

frontend/src/components/RoomOccupation.vue

@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import {computed, ref, Ref, watch} from "vue";
+import {CalendarOptions, EventInput} from "@fullcalendar/core";
+import {fetchEventsByRoomAndDuration} from "../api/fetchRoom.ts";
+
+const props = defineProps({
+  room: {
+    type: String,
+    required: true,
+  },
+});
+
+type CalenderEvent = {
+  id: number;
+  start: string;
+  end: string;
+};
+
+const currentDateFrom: Ref<string> = ref("");
+const currentDateTo: Ref<string> = ref("");
+const occupations: Ref<CalenderEvent[]> = ref([]);
+
+const selectedRoom = computed(() => props.room);
+
+watch(selectedRoom, (_newValue: string) => {
+  getOccupation();
+});
+
+const fullCalendar = ref<InstanceType<typeof FullCalendar>>()
+
+async function getOccupation() {
+  if (selectedRoom.value === "") {
+    return;
+  }
+  const events = await fetchEventsByRoomAndDuration(
+      selectedRoom.value,
+      currentDateFrom.value,
+      currentDateTo.value
+  );
+  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')
+    };
+  });
+
+  let calendar = fullCalendar.value?.getApi()
+  calendar?.refetchEvents()
+}
+
+
+  const calendarOptions: CalendarOptions = {
+    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: {
+        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]
+      },
+    },
+    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"/>
+</template>