Merge remote-tracking branch 'origin' into 3-semi-offline-room-finder

frontend/src/components/CalendarLink.vue

@@ -76,6 +76,14 @@ const forwardToMicrosoft = () => {
   );
 };
 
+const forwardToHTWKalendar = () => {
+  // route to path /calendar/view?token=token
+  router.push({
+    name: "calendar-view",
+    query: { token: tokenStore().token },
+  });
+};
+
 const actions = computed(() => [
   {
     label: t("calendarLink.copyToClipboard"),
@@ -92,6 +100,11 @@ const actions = computed(() => [
     icon: "pi pi-microsoft",
     command: forwardToMicrosoft,
   },
+  {
+    label: t("calendarLink.toHTWKalendar"),
+    icon: "pi pi-home",
+    command: forwardToHTWKalendar,
+  }
 ]);
 </script>
 

frontend/src/components/CalendarViewer.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+
+import FullCalendar from "@fullcalendar/vue3";
+import { computed, ComputedRef, inject, Ref, ref, watch } from "vue";
+import { CalendarOptions, DatesSetArg } from "@fullcalendar/core";
+import allLocales from "@fullcalendar/core/locales-all";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import iCalenderPlugin from "@fullcalendar/icalendar";
+import router from "@/router";
+import { formatYearMonthDay } from "@/helpers/dates.ts";
+import { useI18n } from "vue-i18n";
+import { useQuery } from "@tanstack/vue-query";
+import tokenStore from "@/store/tokenStore.ts";
+import { parseICalData } from "@/helpers/ical.ts";
+import { fetchICalendarEvents } from "@/api/loadICal.ts";
+
+const { t } = useI18n({ useScope: "global" });
+
+const props = defineProps({
+  token: {
+    type: String,
+    required: true,
+  },
+});
+
+const selectedToken = computed(() => props.token);
+
+const mobilePage = inject("mobilePage") as Ref<boolean>;
+const date: Ref<Date> = ref(new Date());
+
+const { data: calendar } = useQuery({
+  queryKey: ["userCalendar", selectedToken],
+  queryFn: () =>
+    fetchICalendarEvents(selectedToken.value),
+  select: (data) => {
+    return data;
+  },
+  networkMode: "offlineFirst",
+  enabled: () => tokenStore().token !== "",
+  staleTime: 5000000, // 500 seconds
+});
+
+const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
+
+const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
+  locales: allLocales,
+  locale: t("languageCode"),
+  plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, iCalenderPlugin],
+  // local debugging of mobilePage variable in object creation on ternary expression
+  initialView: mobilePage.value ? "Day" : "week",
+  initialDate: date.value,
+  dayHeaderFormat: { weekday: "short", omitCommas: true },
+  slotDuration: "00:15:00",
+  eventTimeFormat: {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  },
+  height: "auto",
+  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],
+    },
+    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: DatesSetArg) {
+    const view = dateInfo.view;
+    const offset = new Date().getTimezoneOffset();
+    const endDate = new Date(view.activeEnd.getTime() - offset * 60 * 1000);
+    router.replace({
+      query: {
+        ...router.currentRoute.value.query,
+        date: formatYearMonthDay(endDate),
+      },
+    });
+  },
+  events: parseICalData(calendar.value),
+}));
+
+watch(mobilePage, () => {
+  fullCalendar.value?.getApi().changeView(mobilePage.value ? "Day" : "week");
+});
+</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>

frontend/src/components/MenuBar.vue

@@ -27,14 +27,26 @@ const isDark = ref(true);
 
 const items = computed(() => [
   {
-    label: t("createCalendar"),
-    icon: "pi pi-fw pi-plus",
-    route: "/",
-  },
-  {
-    label: t("editCalendar"),
-    icon: "pi pi-fw pi-pencil",
-    route: "/edit",
+    label: t("calendar"),
+    icon: "pi pi-fw pi-angle-down",
+    info: "calendar",
+    items: [
+      {
+        label: t("createCalendar"),
+        icon: "pi pi-fw pi-plus",
+        route: "/calendar/create",
+      },
+      {
+        label: t("editCalendar"),
+        icon: "pi pi-fw pi-pencil",
+        route: "/calendar/edit",
+      },
+      {
+        label: t("userCalendar"),
+        icon: "pi pi-fw pi-calendar",
+        route: "/calendar/view",
+      },
+    ],
   },
   {
     label: t("rooms"),

frontend/src/components/RoomOccupation.vue

@@ -175,9 +175,12 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
           id: event.id.toString(),
           start: event.start,
           end: event.end,
-          color: event.showFree 
-            ? "var(--htwk-gruen-500)" 
+          backgroundColor: event.showFree
+            ? "var(--htwk-gruen-500)"
             : "var(--htwk-grau-60-500)",
+          borderColor: event.showFree
+            ? "var(--htwk-gruen-600)"
+            : "var(--htwk-grau-60-600)",
           textColor: event.showFree
             ? "var(--green-50)"
             : "white",