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

Merge pull request #106 from HTWK-Leipzig/90-roomfinder-redesign

Browse Source 
90 roomfinder redesign
This commit is contained in:
masterElmar
2023-12-07 23:34:13 +01:00
committed by GitHub
parent 370f240b72 dc7ae86a74
commit 96293ad7bb
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 dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction"; import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid"; 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 { CalendarOptions, EventInput } from "@fullcalendar/core";
import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts"; import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
@@ -27,6 +27,8 @@ const currentDateFrom: Ref<string> = ref("");
const currentDateTo: Ref<string> = ref(""); const currentDateTo: Ref<string> = ref("");
const occupations: Ref<CalenderEvent[]> = ref([]); const occupations: Ref<CalenderEvent[]> = ref([]);
const mobilePage = inject("mobilePage") as Ref<boolean>;
const selectedRoom = computed(() => props.room); const selectedRoom = computed(() => props.room);
watch(selectedRoom, () => { watch(selectedRoom, () => {
@@ -64,12 +66,13 @@ async function getOccupation() {
import allLocales from "@fullcalendar/core/locales-all"; import allLocales from "@fullcalendar/core/locales-all";
const calendarOptions: ComputedRef<CalendarOptions> = computed(() => { const calendarOptions: ComputedRef<CalendarOptions> = computed(() =>
return { ({
locales: allLocales, locales: allLocales,
locale: t("languageCode"), locale: t("languageCode"),
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin], 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 }, dayHeaderFormat: { weekday: "short", omitCommas: true },
slotDuration: "00:15:00", slotDuration: "00:15:00",
eventTimeFormat: { eventTimeFormat: {
@@ -77,6 +80,8 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => {
minute: "2-digit", minute: "2-digit",
hour12: false, hour12: false,
}, },
contentHeight: "auto",
height: 500,
views: { views: {
week: { week: {
description: "Wochenansicht", description: "Wochenansicht",
@@ -139,15 +144,23 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => {
start: event.start, start: event.start,
end: event.end, end: event.end,
color: event.showFree ? "var(--green-800)" : "var(--primary-color)", 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"), title: event.showFree ? t("roomFinderPage.available") : t("roomFinderPage.occupied"),
} as EventInput; } as EventInput;
}), }),
); );
}, },
}; })
}); );
</script> </script>
<template> <template>
<FullCalendar ref="fullCalendar" :options="calendarOptions" /> <FullCalendar ref="fullCalendar" :options="calendarOptions" />
</template> </template>
<style scoped>
:deep(.fc-toolbar.fc-header-toolbar) {
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem;
}
</style>

2
frontend/src/view/RoomFinder.vue
View File

@@ -54,7 +54,7 @@ rooms().then(
<div <div
:class=" :class="
[selectedRoom.name === ''? [selectedRoom.name === ''?
['opacity-0', 'pointer-events-none'] : ['opacity-0', 'pointer-events-none', 'h-1rem', 'overflow-hidden'] :
['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out'] ['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
, ,
'w-full', 'lg:w-8']" 'w-full', 'lg:w-8']"