diff --git a/frontend/src/components/RoomOccupation.vue b/frontend/src/components/RoomOccupation.vue index 1f13108..20db0e5 100644 --- a/frontend/src/components/RoomOccupation.vue +++ b/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 = ref(props.date); + const currentDateFrom: Ref = ref(""); const currentDateTo: Ref = ref(""); const occupations: Ref = ref([]); @@ -72,6 +79,7 @@ const calendarOptions: ComputedRef = 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 = computed(() => ({ }, datesSet: function (dateInfo: DatesSetArg) { - 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]; + + if(propDate.value !== null) { + console.debug("props.date: ", props.date); + const date = new Date(props.date); + + // 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 ( diff --git a/frontend/src/view/RoomFinder.vue b/frontend/src/view/RoomFinder.vue index 9abbf36..bafabca 100644 --- a/frontend/src/view/RoomFinder.vue +++ b/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 = 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}`); +}