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

90 room finder responsive

Browse Source
This commit is contained in:
survellow
2023-12-07 23:33:17 +01:00
parent 9f0f4ff204
commit dc7ae86a74
2 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import { computed, ComputedRef, ref, Ref, watch } from "vue";
import { computed, ComputedRef, inject, ref, Ref, watch } from "vue";
import { CalendarOptions, EventInput } from "@fullcalendar/core";
import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
import { useI18n } from "vue-i18n";
@ -27,6 +27,8 @@ const currentDateFrom: Ref<string> = ref("");
const currentDateTo: Ref<string> = ref("");
const occupations: Ref<CalenderEvent[]> = ref([]);
const mobilePage = inject("mobilePage") as Ref<boolean>;
const selectedRoom = computed(() => props.room);
watch(selectedRoom, () => {
@ -64,12 +66,13 @@ async function getOccupation() {
import allLocales from "@fullcalendar/core/locales-all";
const calendarOptions: ComputedRef<CalendarOptions> = computed(() => {
return {
const calendarOptions: ComputedRef<CalendarOptions> = computed(() =>
({
locales: allLocales,
locale: t("languageCode"),
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
initialView: "week",
// local debugging of mobilePage variable in object creation on ternary expression
initialView: mobilePage.value ? "Day" : "week",
dayHeaderFormat: { weekday: "short", omitCommas: true },
slotDuration: "00:15:00",
eventTimeFormat: {
@ -77,6 +80,8 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => {
minute: "2-digit",
hour12: false,
},
contentHeight: "auto",
height: 500,
views: {
week: {
description: "Wochenansicht",
@ -139,15 +144,23 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => {
start: event.start,
end: event.end,
color: event.showFree ? "var(--green-800)" : "var(--primary-color)",
textColor: event.showFree ? "var(--green-50)" : "var(--primary-text-color)",
textColor: event.showFree ? "var(--green-50)" : "var(--primary-color-text)",
title: event.showFree ? t("roomFinderPage.available") : t("roomFinderPage.occupied"),
} as EventInput;
}),
);
},
};
});
})
);
</script>
<template>
<FullCalendar ref="fullCalendar" :options="calendarOptions" />
</template>
<style scoped>
:deep(.fc-toolbar.fc-header-toolbar) {
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem;
}
</style>