mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git
synced 2025-07-23 13:08:48 +02:00
[#10] Move to new endpoint (room schedule for given duration)
This commit is contained in:
Tom Wahl
@ -3,230 +3,186 @@ import FullCalendar from '@fullcalendar/vue3'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import interactionPlugin from '@fullcalendar/interaction'
|
||||
import timeGridPlugin from '@fullcalendar/timegrid'
|
||||
import {computed, PropType, ref, Ref, watch} from "vue";
|
||||
import {Event} from "../model/event.ts";
|
||||
import {Module} from "../model/module.ts";
|
||||
import {computed, ref, Ref, watch} from "vue";
|
||||
import {CalendarOptions, EventInput} from "@fullcalendar/core";
|
||||
|
||||
const props = defineProps({
|
||||
occupations: {
|
||||
type: Array as PropType<Event[]>,
|
||||
room: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
type CalenderEvent = {
|
||||
id: number;
|
||||
start: string;
|
||||
end: string;
|
||||
};
|
||||
|
||||
const currentDateFrom: Ref<string> = ref("");
|
||||
const currentDateTo: Ref<string> = ref("");
|
||||
const occupations: Ref<CalenderEvent[]> = ref([]);
|
||||
|
||||
// array of modules with boolean if selected with getter and setter
|
||||
const events: Ref<{ id: string; start: string, end: string }[]> = ref(
|
||||
props.occupations?.map((event, index) => {
|
||||
return {
|
||||
id: index,
|
||||
start: event.start.replace(/\s\+\d{4}\s\w+$/, '').replace(' ', 'T'),
|
||||
end: event.End.replace(/\s\+\d{4}\s\w+$/, '').replace(' ', 'T')
|
||||
};
|
||||
}),
|
||||
);
|
||||
const selectedRoom = computed(() => props.room);
|
||||
|
||||
|
||||
const currentOccupations = computed(() => props.occupations);
|
||||
|
||||
watch(currentOccupations, (newValue: Event[]) => {
|
||||
events.value = newValue.map((event, index) => {
|
||||
return {
|
||||
id: index,
|
||||
start: event.Start.replace(/\s\+\d{4}\s\w+$/, '').replace(' ', 'T'),
|
||||
end: event.End.replace(/\s\+\d{4}\s\w+$/, '').replace(' ', 'T'),
|
||||
};
|
||||
});
|
||||
console.log(events.value);
|
||||
watch(selectedRoom, (newValue: string) => {
|
||||
getOccupation();
|
||||
console.log("change room: " + newValue);
|
||||
});
|
||||
|
||||
const fullCalendar = ref<InstanceType<typeof FullCalendar>>()
|
||||
|
||||
async function getOccupation() {
|
||||
if (selectedRoom.value === "") {
|
||||
return;
|
||||
}
|
||||
console.log("fetching events", selectedRoom.value, currentDateFrom.value, currentDateTo.value);
|
||||
/*occupations.value = await fetchEventsByRoomAndDuration(
|
||||
selectedRoom.value,
|
||||
currentDateFrom.value,
|
||||
currentDateTo.value
|
||||
);*/
|
||||
|
||||
|
||||
const calendarOptions = {
|
||||
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
|
||||
initialView: 'timeGridFourDay',
|
||||
dayHeaderFormat: { weekday: 'short', omitCommas: true},
|
||||
slotDuration: "00:15:00",
|
||||
views: {
|
||||
timeGridFourDay: {
|
||||
type: 'timeGrid',
|
||||
slotLabelFormat: {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
omitZeroMinute: false,
|
||||
meridiem: false
|
||||
},
|
||||
dateAlignment: "week",
|
||||
titleFormat: { month: 'short', day: 'numeric' },
|
||||
slotMinTime: "06:00:00",
|
||||
slotMaxTime: "22:00:00",
|
||||
/*
|
||||
const events: Ref<{ id: number; start: string, end: string }[]> = ref(
|
||||
props.occupations?.map((event, index) => {
|
||||
return {
|
||||
id: index,
|
||||
start: event.Start.replace(/\s\+\d{4}\s\w+$/, '').replace(' ', 'T'),
|
||||
end: event.End.replace(/\s\+\d{4}\s\w+$/, '').replace(' ', 'T')
|
||||
};
|
||||
}),
|
||||
);*/
|
||||
let calendar = fullCalendar.value?.getApi()
|
||||
calendar?.refetchEvents()
|
||||
console.log("events: ", calendar?.getEvents())
|
||||
|
||||
duration: {days: 7},
|
||||
firstDay: 1,
|
||||
allDaySlot: false,
|
||||
hiddenDays:[0]
|
||||
}
|
||||
}
|
||||
|
||||
function getEvents(){
|
||||
const mock = [
|
||||
{
|
||||
"id": 0,
|
||||
"start": "2023-10-16T09:30:00",
|
||||
"end": "2023-10-16T11:00:00"
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"start": "2023-10-16T11:15:00",
|
||||
"end": "2023-10-16T12:45:00"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"start": "2023-10-17T13:45:00",
|
||||
"end": "2023-10-17T15:15:00"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"start": "2023-10-16T07:30:00",
|
||||
"end": "2023-10-16T9:00:00"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"start": "2023-10-20T15:30:00",
|
||||
"end": "2023-10-20T17:00:00"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"start": "2023-10-16T17:15:00",
|
||||
"end": "2023-10-16T18:45:00"
|
||||
}]
|
||||
console.log(currentDateFrom.value, currentDateTo.value)
|
||||
const events = mock.map((event) => {
|
||||
const randomInt = Math.floor(Math.random() * 2);
|
||||
if (randomInt)
|
||||
return {
|
||||
id: event.id,
|
||||
start: currentDateFrom.value + event.start.substring(10, event.start.length),
|
||||
end: currentDateFrom.value + event.end.substring(10, event.end.length),
|
||||
};
|
||||
else
|
||||
return {
|
||||
id: event.id,
|
||||
start: currentDateTo.value + event.start.substring(10, event.start.length),
|
||||
end: currentDateTo.value + event.end.substring(10, event.end.length),
|
||||
};
|
||||
});
|
||||
console.log("generated events: ", events)
|
||||
return events;
|
||||
}
|
||||
|
||||
const calendarOptions: CalendarOptions = {
|
||||
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
|
||||
initialView: 'week',
|
||||
dayHeaderFormat: {weekday: 'short', omitCommas: true},
|
||||
slotDuration: "00:15:00",
|
||||
views: {
|
||||
week: {
|
||||
type: 'timeGrid',
|
||||
slotLabelFormat: {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
omitZeroMinute: false,
|
||||
meridiem: false
|
||||
},
|
||||
events: [
|
||||
{
|
||||
"id": 0,
|
||||
"start": "2023-10-16T09:30:00",
|
||||
"end": "2023-10-16T11:00:00"
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"start": "2023-10-16T11:15:00",
|
||||
"end": "2023-10-16T12:45:00"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"start": "2023-10-17T13:45:00",
|
||||
"end": "2023-10-17T15:15:00"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"start": "2023-10-16T09:30:00",
|
||||
"end": "2023-10-16T11:00:00"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"start": "2023-10-20T09:30:00",
|
||||
"end": "2023-10-20T11:00:00"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"start": "2023-10-16T09:30:00",
|
||||
"end": "2023-10-16T11:00:00"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"start": "2023-10-20T09:30:00",
|
||||
"end": "2023-10-20T11:00:00"
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"start": "2023-10-18T13:45:00",
|
||||
"end": "2023-10-18T17:00:00"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"start": "2023-10-18T13:45:00",
|
||||
"end": "2023-10-18T17:00:00"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"start": "2023-10-16T13:45:00",
|
||||
"end": "2023-10-16T15:15:00"
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"start": "2023-10-17T11:15:00",
|
||||
"end": "2023-10-17T12:45:00"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"start": "2023-10-16T13:45:00",
|
||||
"end": "2023-10-16T15:15:00"
|
||||
},
|
||||
{
|
||||
"id": 12,
|
||||
"start": "2023-10-17T11:15:00",
|
||||
"end": "2023-10-17T12:45:00"
|
||||
},
|
||||
{
|
||||
"id": 13,
|
||||
"start": "2023-10-18T09:30:00",
|
||||
"end": "2023-10-18T12:45:00"
|
||||
},
|
||||
{
|
||||
"id": 14,
|
||||
"start": "2023-10-16T13:45:00",
|
||||
"end": "2023-10-16T15:15:00"
|
||||
},
|
||||
{
|
||||
"id": 15,
|
||||
"start": "2023-10-17T11:15:00",
|
||||
"end": "2023-10-17T12:45:00"
|
||||
},
|
||||
{
|
||||
"id": 16,
|
||||
"start": "2023-10-18T09:30:00",
|
||||
"end": "2023-10-18T12:45:00"
|
||||
},
|
||||
{
|
||||
"id": 17,
|
||||
"start": "2023-10-16T13:45:00",
|
||||
"end": "2023-10-16T15:15:00"
|
||||
},
|
||||
{
|
||||
"id": 18,
|
||||
"start": "2023-10-17T11:15:00",
|
||||
"end": "2023-10-17T12:45:00"
|
||||
},
|
||||
{
|
||||
"id": 19,
|
||||
"start": "2023-10-18T09:30:00",
|
||||
"end": "2023-10-18T12:45:00"
|
||||
},
|
||||
{
|
||||
"id": 20,
|
||||
"start": "2023-10-16T13:45:00",
|
||||
"end": "2023-10-16T15:15:00"
|
||||
},
|
||||
{
|
||||
"id": 21,
|
||||
"start": "2023-10-17T11:15:00",
|
||||
"end": "2023-10-17T12:45:00"
|
||||
},
|
||||
{
|
||||
"id": 22,
|
||||
"start": "2023-10-18T09:30:00",
|
||||
"end": "2023-10-18T12:45:00"
|
||||
},
|
||||
{
|
||||
"id": 23,
|
||||
"start": "2023-10-17T09:30:00",
|
||||
"end": "2023-10-17T11:00:00"
|
||||
},
|
||||
{
|
||||
"id": 24,
|
||||
"start": "2023-10-20T11:15:00",
|
||||
"end": "2023-10-20T12:45:00"
|
||||
},
|
||||
{
|
||||
"id": 25,
|
||||
"start": "2023-10-20T11:15:00",
|
||||
"end": "2023-10-20T12:45:00"
|
||||
},
|
||||
{
|
||||
"id": 26,
|
||||
"start": "2023-10-16T11:15:00",
|
||||
"end": "2023-10-16T12:45:00"
|
||||
},
|
||||
{
|
||||
"id": 27,
|
||||
"start": "2023-10-17T13:45:00",
|
||||
"end": "2023-10-17T15:15:00"
|
||||
},
|
||||
{
|
||||
"id": 28,
|
||||
"start": "2023-10-17T15:30:00",
|
||||
"end": "2023-10-17T17:00:00"
|
||||
},
|
||||
{
|
||||
"id": 29,
|
||||
"start": "2023-10-19T11:15:00",
|
||||
"end": "2023-10-19T12:45:00"
|
||||
},
|
||||
{
|
||||
"id": 30,
|
||||
"start": "2023-10-19T13:45:00",
|
||||
"end": "2023-10-19T15:15:00"
|
||||
}
|
||||
]
|
||||
dateAlignment: "week",
|
||||
titleFormat: {month: 'short', day: 'numeric'},
|
||||
slotMinTime: "06:00:00",
|
||||
slotMaxTime: "22:00:00",
|
||||
|
||||
duration: {days: 7},
|
||||
firstDay: 1,
|
||||
allDaySlot: false,
|
||||
hiddenDays: [0]
|
||||
},
|
||||
Day: {
|
||||
type: 'timeGrid',
|
||||
slotLabelFormat: {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
omitZeroMinute: false,
|
||||
meridiem: false
|
||||
},
|
||||
titleFormat: {month: 'short', day: 'numeric'},
|
||||
slotMinTime: "06:00:00",
|
||||
slotMaxTime: "22:00:00",
|
||||
duration: {days: 1},
|
||||
allDaySlot: false,
|
||||
hiddenDays: [0]
|
||||
},
|
||||
},
|
||||
headerToolbar: {
|
||||
end: 'prev,next today',
|
||||
center: 'title',
|
||||
start: 'week,Day'
|
||||
},
|
||||
datesSet: function (dateInfo) {
|
||||
const view = dateInfo.view;
|
||||
const startDate = view.activeStart;
|
||||
const endDate = view.activeEnd;
|
||||
endDate.setDate(endDate.getDate() - 1);
|
||||
currentDateFrom.value = startDate.getFullYear() + "-" + (startDate.getMonth() + 1) + "-" + startDate.getDate();
|
||||
currentDateTo.value = endDate.getFullYear() + "-" + (endDate.getMonth() + 1) + "-" + endDate.getDate();
|
||||
getOccupation();
|
||||
},
|
||||
events: function(_info, successCallback, failureCallback) {
|
||||
if (!getEvents()){
|
||||
failureCallback(new Error("no events"))
|
||||
}
|
||||
successCallback(
|
||||
getEvents().map((event) => {
|
||||
return {
|
||||
id: event.id.toString(),
|
||||
start: event.start,
|
||||
end: event.end,
|
||||
} as EventInput;
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<FullCalendar :options="calendarOptions"/>
|
||||
<FullCalendar ref="fullCalendar" :options="calendarOptions"/>
|
||||
</template>
|
||||
Reference in New Issue
Block a user