feat:#30 added query params to occupancy view

This commit is contained in:
Elmar Kresse
2024-02-23 01:48:26 +01:00
parent 38d039dddd
commit 44c905b190
2 changed files with 67 additions and 11 deletions

View File

@ -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();
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 (