feat:#4 updated router and views

frontend/src/api/loadICal.ts

@@ -0,0 +1,23 @@
+//Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.
+//Copyright (C) 2024 HTWKalender support@htwkalender.de
+
+//This program is free software: you can redistribute it and/or modify
+//it under the terms of the GNU Affero General Public License as published by
+//the Free Software Foundation, either version 3 of the License, or
+//(at your option) any later version.
+
+//This program is distributed in the hope that it will be useful,
+//but WITHOUT ANY WARRANTY; without even the implied warranty of
+//MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//GNU Affero General Public License for more details.
+
+//You should have received a copy of the GNU Affero General Public License
+//along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+export async function fetchICalendarEvents() {
+  const response = await fetch("https://cal.htwk-leipzig.de/api/feed?token=rk47mvraeb43t3g");
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.text();
+}

frontend/src/components/CalendarViewer.vue

@@ -11,12 +11,30 @@ 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 mobilePage = inject("mobilePage") as Ref<boolean>;
 const date: Ref<Date> = ref(new Date());
-const feedUrl: Ref<string> = ref("https://cal.htwk-leipzig.de/api/feed?token=rk47mvraeb43t3g");
+
+tokenStore().setToken("3rz8vb3974tr2b")
+
+
+const { data: calendar } = useQuery({
+  queryKey: ["userCalendar", tokenStore().token],
+  queryFn: () =>
+    fetchICalendarEvents(),
+  select: (data) => {
+    return data;
+  },
+  networkMode: "offlineFirst",
+  enabled: () => tokenStore().token !== "",
+  staleTime: 5000000, // 500 seconds
+});
 
 const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
 
@@ -88,13 +106,7 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
       },
     });
   },
-  events: {
-    url: feedUrl.value,
-    format: "ics",
-    failure: function () {
-      alert("There was an error while fetching the calendar events!");
-    },
-  },
+  events: parseICalData(calendar.value),
 }));
 
 watch(mobilePage, () => {

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"),
@@ -53,11 +65,6 @@ const items = computed(() => [
       },
     ],
   },
-  {
-    label: t("userCalendar"),
-    icon: "pi pi-fw pi-calendar",
-    route: "/user/calendar",
-  },
   {
     label: t("faq"),
     icon: "pi pi-fw pi-book",

frontend/src/helpers/ical.ts

@@ -0,0 +1,24 @@
+import ICAL from 'ical.js';
+import { CalendarComponent } from 'ical';
+
+export function parseICalData(icalData: string | undefined) {
+  if (icalData === undefined || !icalData) {
+    return [];
+  }
+
+  const jCalData = ICAL.parse(icalData);
+  const comp = new ICAL.Component(jCalData);
+  const vEvents = comp.getAllSubcomponents('vevent');
+
+  return vEvents.map((vevent: CalendarComponent) => {
+    const event = new ICAL.Event(vevent);
+
+    return {
+      title: event.summary,
+      start: event.startDate.toJSDate(),
+      end: event.endDate.toJSDate(),
+      allDay: event.startDate.isDate,
+      // Include other properties as needed
+    };
+  });
+}

frontend/src/i18n/translations/de.json

@@ -3,6 +3,7 @@
   "createCalendar": "Kalender erstellen",
   "editCalendar": "Kalender bearbeiten",
   "userCalendar": "Dein Kalender",
+  "calendar": "Kalender",
   "rooms": "Räume",
   "faq": "FAQ",
   "imprint": "Impressum",

frontend/src/i18n/translations/en.json

@@ -3,6 +3,7 @@
   "createCalendar": "create calendar",
   "editCalendar": "edit calendar",
   "userCalendar": "user calendar",
+  "calendar": "calendar",
   "rooms": "rooms",
   "faq": "faq",
   "imprint": "imprint",

frontend/src/router/index.ts

@@ -36,7 +36,12 @@ const router = createRouter({
   routes: [
     {
       path: "/",
-      name: "course-selection",
+      name: "home",
+      component: CourseSelection,
+    },
+    {
+      path: "/calendar/create",
+      name: "calendar-create",
       component: CourseSelection,
     },
     {
@@ -50,8 +55,8 @@ const router = createRouter({
       component: FreeRooms,
     },
     {
-      path: "/user/calendar",
-      name: "user-calendar",
+      path: "/calendar/view",
+      name: "calendar-view",
       component: CalenderViewer,
     },
     {
@@ -80,7 +85,7 @@ const router = createRouter({
       component: CalendarLink,
     },
     {
-      path: "/edit",
+      path: "/calendar/edit",
       name: "edit",
       component: EditCalendarView,
     },

frontend/src/view/UserCalendar.vue

@@ -1,10 +1,25 @@
 <script setup lang="ts">
 
 import CalendarViewer from "@/components/CalendarViewer.vue";
+import DynamicPage from "@/view/DynamicPage.vue";
+
+
+
+
 </script>
 
 <template>
-  <CalendarViewer />
+  <DynamicPage
+    :hide-content="false"
+    :headline="$t('freeRooms.freeRooms')"
+    :sub-title="$t('freeRooms.detail')"
+  >
+    <template #selection="{ flexSpecs }">
+      <CalendarViewer
+        :class="flexSpecs"
+      />
+    </template>
+</DynamicPage>
 </template>
 
 <style scoped>