[#10] Add page to check for room availability

frontend/src/components/RoomOccupation.vue

@@ -5,6 +5,7 @@ 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: {
@@ -25,9 +26,8 @@ const occupations: Ref<CalenderEvent[]> = ref([]);
 
 const selectedRoom = computed(() => props.room);
 
-watch(selectedRoom, (newValue: string) => {
+watch(selectedRoom, (_newValue: string) => {
   getOccupation();
-  console.log("change room: " + newValue);
 });
 
 const fullCalendar = ref<InstanceType<typeof FullCalendar>>()
@@ -36,87 +36,34 @@ async function getOccupation() {
   if (selectedRoom.value === "") {
     return;
   }
-  console.log("fetching events", selectedRoom.value, currentDateFrom.value, currentDateTo.value);
-  /*occupations.value = await fetchEventsByRoomAndDuration(
+  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')
+    };
+  });
 
-
-  /*
-  const events: Ref<{ id: number; start: string, end: string }[]> = ref(
-      props.occupations?.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()
-  console.log("events: ", calendar?.getEvents())
-
 }
 
-function getEvents(){
-  const mock = [
-    {
-      "id": 0,
-      "start": "2023-10-16T09:30:00",
-      "end": "2023-10-16T11:00:00"
-    },
-    {
-      "id": 1,
-      "start": "2023-10-16T11:15:00",
-      "end": "2023-10-16T12:45:00"
-    },
-    {
-      "id": 2,
-      "start": "2023-10-17T13:45:00",
-      "end": "2023-10-17T15:15:00"
-    },
-    {
-      "id": 3,
-      "start": "2023-10-16T07:30:00",
-      "end": "2023-10-16T9:00:00"
-    },
-    {
-      "id": 4,
-      "start": "2023-10-20T15:30:00",
-      "end": "2023-10-20T17:00:00"
-    },
-    {
-      "id": 5,
-      "start": "2023-10-16T17:15:00",
-      "end": "2023-10-16T18:45:00"
-    }]
-  console.log(currentDateFrom.value, currentDateTo.value)
-  const events = mock.map((event) => {
-    const randomInt = Math.floor(Math.random() * 2);
-    if (randomInt)
-      return {
-        id: event.id,
-        start: currentDateFrom.value + event.start.substring(10, event.start.length),
-        end: currentDateFrom.value + event.end.substring(10, event.end.length),
-      };
-    else
-      return {
-        id: event.id,
-        start: currentDateTo.value + event.start.substring(10, event.start.length),
-        end: currentDateTo.value + event.end.substring(10, event.end.length),
-      };
-  });
-  console.log("generated events: ", events)
-  return events;
-}
 
   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',
@@ -124,7 +71,8 @@ function getEvents(){
           hour: 'numeric',
           minute: '2-digit',
           omitZeroMinute: false,
-          meridiem: false
+          meridiem: false,
+          hour12: false
         },
         dateAlignment: "week",
         titleFormat: {month: 'short', day: 'numeric'},
@@ -142,7 +90,8 @@ function getEvents(){
           hour: 'numeric',
           minute: '2-digit',
           omitZeroMinute: false,
-          meridiem: false
+          meridiem: false,
+          hour12: false
         },
         titleFormat: {month: 'short', day: 'numeric'},
         slotMinTime: "06:00:00",
@@ -157,28 +106,30 @@ function getEvents(){
       center: 'title',
       start: 'week,Day'
     },
+
     datesSet: function (dateInfo) {
       const view = dateInfo.view;
-      const startDate = view.activeStart;
-      const endDate = view.activeEnd;
-      endDate.setDate(endDate.getDate() - 1);
-      currentDateFrom.value = startDate.getFullYear() + "-" + (startDate.getMonth() + 1)  + "-" + startDate.getDate();
-      currentDateTo.value = endDate.getFullYear() + "-" + (endDate.getMonth() + 1) + "-" + endDate.getDate();
+      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 (!getEvents()){
+      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;
+            })
+        )
       }
-      successCallback(
-          getEvents().map((event) => {
-            return {
-              id: event.id.toString(),
-              start: event.start,
-              end: event.end,
-            } as EventInput;
-          })
-      )
     }
   }