feat:#30 added query params to occupancy view

frontend/src/components/RoomOccupation.vue

@@ -14,6 +14,11 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  date: {
+    type: Date,
+    required: false,
+    default: null,
+  }
 });
 
 type CalenderEvent = {
@@ -23,6 +28,8 @@ type CalenderEvent = {
   showFree: boolean;
 };
 
+const propDate: Ref<Date|null> = ref(props.date);
+
 const currentDateFrom: Ref<string> = ref("");
 const currentDateTo: Ref<string> = ref("");
 const occupations: Ref<CalenderEvent[]> = ref([]);
@@ -72,6 +79,7 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
   plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
   // local debugging of mobilePage variable in object creation on ternary expression
   initialView: mobilePage.value ? "Day" : "week",
+  initialDate: propDate.value ? propDate.value : new Date(),
   dayHeaderFormat: { weekday: "short", omitCommas: true },
   slotDuration: "00:15:00",
   eventTimeFormat: {
@@ -123,12 +131,27 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
   },
 
   datesSet: function (dateInfo: DatesSetArg) {
-    const view = dateInfo.view;
+
-    const offset = new Date().getTimezoneOffset();
+    if(propDate.value !== null) {
-    const startDate = new Date(view.activeStart.getTime() - offset * 60 * 1000);
+      console.debug("props.date: ", props.date);
-    const endDate = new Date(view.activeEnd.getTime() - offset * 60 * 1000);
+      const date = new Date(props.date);
-    currentDateFrom.value = startDate.toISOString().split("T")[0];
+
-    currentDateTo.value = endDate.toISOString().split("T")[0];
+      // calculate the week start and end date which includes the date
+      const weekStart = new Date(date);
+      weekStart.setDate(date.getDate() - date.getDay()+1);
+      const weekEnd = new Date(date);
+      weekEnd.setDate(date.getDate() - date.getDay() + 6);
+      currentDateFrom.value = weekStart.toISOString().split("T")[0];
+      currentDateTo.value = weekEnd.toISOString().split("T")[0];
+      propDate.value = null;
+    } else {
+      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 (

frontend/src/view/RoomFinder.vue

@@ -5,14 +5,47 @@ import DynamicPage from "./DynamicPage.vue";
 import RoomOccupation from "../components/RoomOccupation.vue";
 import { computedAsync } from "@vueuse/core";
 
+function isRoomAvailable(room: string, rooms: { name: string }[]) {
+  // wait for the roomsList to be available
+  const roomInList = rooms.some((r) => r.name === room);
+  if (roomInList) {
+    selectedRoom.value.name = room;
+  }
+}
+
+const selectedRoom: Ref<{ name: string }> = ref({ name: "" });
+
+// Get Query Parameters if available
+// room, date
+const urlParams = new URLSearchParams(window.location.search);
+const room = urlParams.get("room");
+
 const roomsList = computedAsync(async () => {
+  let rooms: { name: string }[] = [];
   return await fetchRoom().then((data) =>
-    data.map((room) => {
+    rooms = data.map((room: string) => {
       return { name: room };
     }),
-  );
+  ).finally(() => {
-});
+    if (room) {
-const selectedRoom: Ref<{ name: string }> = ref({ name: "" });
+      // check if room is available in roomsList
+      isRoomAvailable(room, rooms)
+    }
+  });
+},
+[]);
+
+const selectedDate: Ref<Date|null> = ref(null);
+
+// Set the selected date from the URL
+const date = urlParams.get("date");
+if (date) {
+  // date is in format like YYYYMMDD
+  const year = date.substring(0, 4);
+  const month = date.substring(4, 6);
+  const day = date.substring(6, 8);
+  selectedDate.value = new Date(`${year}-${month}-${day}`);
+}
 </script>
 
 <template>
@@ -35,7 +68,7 @@ const selectedRoom: Ref<{ name: string }> = ref({ name: "" });
       />
     </template>
     <template #content>
-      <RoomOccupation :room="selectedRoom.name" />
+      <RoomOccupation :room="selectedRoom.name" :date="selectedDate" />
     </template>
   </DynamicPage>
 </template>