feat:#30 added query params to occupancy view

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 };
     }),
-  );
-});
-const selectedRoom: Ref<{ name: string }> = ref({ name: "" });
+  ).finally(() => {
+    if (room) {
+      // 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>