HTWK/htwkalender
1
1
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git synced 2025-07-23 13:08:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat:#30 reactive URL parameters RoomOccupation

Browse Source
This commit is contained in:
survellow
2024-02-24 04:14:11 +01:00
parent 27b1b591cc
commit 62acdcbc88
6 changed files with 105 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/components/RoomOccupation.vue
View File

@ -7,6 +7,9 @@ import { computed, ComputedRef, inject, ref, Ref, watch } from "vue";
import { CalendarOptions, DatesSetArg, EventInput } from "@fullcalendar/core";
import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
import { useI18n } from "vue-i18n";
import allLocales from "@fullcalendar/core/locales-all";
import router from "@/router";
import { formatYearMonthDay } from "@/helpers/dates";
const { t } = useI18n({ useScope: "global" });
const props = defineProps({
@ -14,11 +17,6 @@ const props = defineProps({
type: String,
required: true,
},
date: {
type: Date,
required: false,
default: null,
},
});
type CalenderEvent = {
@ -28,7 +26,28 @@ type CalenderEvent = {
showFree: boolean;
};
const propDate: Ref<Date | null> = ref(props.date);
const date: Ref<Date> = ref(new Date());
// Watch for changes in URL parameter
router.afterEach(setDateFromQuery);
// Set the selected date from the URL
function setDateFromQuery() {
const queryDate = router.currentRoute.value.query.date;
if (typeof queryDate === "string") {
if (queryDate === formatYearMonthDay(date.value)) {
return;
}
// date is in format like YYYYMMDD
// TODO check if date is valid
const year = queryDate.substring(0, 4);
const month = queryDate.substring(4, 6);
const day = queryDate.substring(6, 8);
date.value = new Date(`${year}-${month}-${day}`);
}
}
setDateFromQuery();
const currentDateFrom: Ref<string> = ref("");
const currentDateTo: Ref<string> = ref("");
@ -71,15 +90,13 @@ async function getOccupation() {
});
}
import allLocales from "@fullcalendar/core/locales-all";
const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
locales: allLocales,
locale: t("languageCode"),
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(),
initialDate: date.value,
dayHeaderFormat: { weekday: "short", omitCommas: true },
slotDuration: "00:15:00",
eventTimeFormat: {
@ -131,28 +148,18 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
},
datesSet: function (dateInfo: DatesSetArg) {
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];
}
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];
router.replace({
query: {
...router.currentRoute.value.query,
date: formatYearMonthDay(startDate),
},
});
getOccupation();
},
events: function (