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

fixed frontend (format, lint, build)

Browse Source
This commit is contained in:
masterElmar
2023-11-01 22:31:12 +01:00
parent a8dce8207b
commit 0fc6e249d2
10 changed files with 277 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,11 @@
<script lang="ts" setup>
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import {computed, ref, Ref, watch} from "vue";
import {CalendarOptions, EventInput} from "@fullcalendar/core";
import {fetchEventsByRoomAndDuration} from "../api/fetchRoom.ts";
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import { computed, ref, Ref, watch } from "vue";
import { CalendarOptions, EventInput } from "@fullcalendar/core";
import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
const props = defineProps({
room: {
@ -26,114 +26,112 @@ const occupations: Ref<CalenderEvent[]> = ref([]);
const selectedRoom = computed(() => props.room);
watch(selectedRoom, (_newValue: string) => {
watch(selectedRoom, () => {
getOccupation();
});
const fullCalendar = ref<InstanceType<typeof FullCalendar>>()
const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
async function getOccupation() {
if (selectedRoom.value === "") {
return;
}
const events = await fetchEventsByRoomAndDuration(
selectedRoom.value,
currentDateFrom.value,
currentDateTo.value
selectedRoom.value,
currentDateFrom.value,
currentDateTo.value,
);
occupations.value = events.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')
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()
const calendar = fullCalendar.value?.getApi();
calendar?.refetchEvents();
}
const calendarOptions: CalendarOptions = {
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
initialView: 'week',
dayHeaderFormat: {weekday: 'short', omitCommas: true},
slotDuration: "00:15:00",
eventTimeFormat: {
hour: "2-digit",
minute: "2-digit",
hour12: false
},
views: {
week: {
type: 'timeGrid',
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: false,
hour12: false
},
dateAlignment: "week",
titleFormat: {month: 'short', day: 'numeric'},
slotMinTime: "06:00:00",
slotMaxTime: "22:00:00",
duration: {days: 7},
firstDay: 1,
allDaySlot: false,
hiddenDays: [0]
const calendarOptions: CalendarOptions = {
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
initialView: "week",
dayHeaderFormat: { weekday: "short", omitCommas: true },
slotDuration: "00:15:00",
eventTimeFormat: {
hour: "2-digit",
minute: "2-digit",
hour12: false,
},
views: {
week: {
type: "timeGrid",
slotLabelFormat: {
hour: "numeric",
minute: "2-digit",
omitZeroMinute: false,
meridiem: false,
hour12: false,
},
Day: {
type: 'timeGrid',
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: false,
hour12: 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'
},
dateAlignment: "week",
titleFormat: { month: "short", day: "numeric" },
slotMinTime: "06:00:00",
slotMaxTime: "22:00:00",
datesSet: function (dateInfo) {
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();
duration: { days: 7 },
firstDay: 1,
allDaySlot: false,
hiddenDays: [0],
},
events: function(_info, successCallback, failureCallback) {
if (occupations.value.length === 0){
failureCallback(new Error("no events"))
}else{
successCallback(
occupations.value.map((event) => {
return {
id: event.id.toString(),
start: event.start,
end: event.end,
} as EventInput;
})
)
}
Day: {
type: "timeGrid",
slotLabelFormat: {
hour: "numeric",
minute: "2-digit",
omitZeroMinute: false,
meridiem: false,
hour12: 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 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 (_info, successCallback, failureCallback) {
if (occupations.value.length === 0) {
failureCallback(new Error("no events"));
} else {
successCallback(
occupations.value.map((event) => {
return {
id: event.id.toString(),
start: event.start,
end: event.end,
} as EventInput;
}),
);
}
}
},
};
</script>
<template>
<FullCalendar ref="fullCalendar" :options="calendarOptions"/>
</template>
<FullCalendar ref="fullCalendar" :options="calendarOptions" />
</template>