mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git
synced 2025-07-23 13:08:48 +02:00
[#10] WIP
This commit is contained in:
Tom Wahl
232
frontend/src/components/RoomOccupation.vue
Normal file
232
frontend/src/components/RoomOccupation.vue
Normal file
@ -0,0 +1,232 @@
|
||||
<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, PropType, ref, Ref, watch} from "vue";
|
||||
import {Event} from "../model/event.ts";
|
||||
import {Module} from "../model/module.ts";
|
||||
|
||||
const props = defineProps({
|
||||
occupations: {
|
||||
type: Array as PropType<Event[]>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
// 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 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);
|
||||
});
|
||||
|
||||
|
||||
|
||||
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",
|
||||
|
||||
duration: {days: 7},
|
||||
firstDay: 1,
|
||||
allDaySlot: false,
|
||||
hiddenDays:[0]
|
||||
}
|
||||
},
|
||||
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"
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<FullCalendar :options="calendarOptions"/>
|
||||
</template>
|
||||
Reference in New Issue
Block a user