Adapted the calendar to work with the current API

webclient/src/api_types/index.ts

@@ -573,15 +573,26 @@ export type components = {
     };
     readonly CalendarResponse: {
       /** @description The entries of the requested */
-      readonly entries: readonly components["schemas"]["CalendarEntry"][];
+      readonly events: readonly components["schemas"]["CalendarEntry"][];
       /**
        * Format: date-time
        * @description When the last sync with TUMonline happened.
        * @example 2018-01-01T00:00:00
        */
       readonly last_sync: string;
+      /**
+       * @description Link to the same calendar, but in TUMonline
+       * @example https://campus.tum.de/tumonline/wbKalender.wbRessource?pResNr=12543
+       */
+      readonly calendar_url: string;
     };
     readonly CalendarEntry: {
+      /**
+       * Format: int32
+       * @description The id of the calendar entry used in TUMonline internally
+       * @example 42
+       */
+      readonly id: number;
       /**
        * @description The title of the Entry
        * @example Quantenteleportation

webclient/src/components/CalendarModal.vue

@@ -15,7 +15,7 @@ const global = useGlobalStore();
 const showDate = ref(new Date());
 
 const tumonlineCalendarUrl = ref("https://campus.tum.de/tumonline");
-const lastmod = ref("xx.xx.xxxx xx:xx");
+const last_sync = ref("xx.xx.xxxx xx:xx");
 const events = ref<ICalendarItem[]>([]);
 
 const route = useRoute();
@@ -34,21 +34,22 @@ function update() {
 
   const startString = start.toISOString().replace("Z", "");
   const endString = end.toISOString().replace("Z", "");
-  console.table({ startString, endString });
-  useFetch<CalendarResponse>(`/api/calendar/${route.params.id}?start=${startString}&end=${endString}`, (d) => {
-    console.log(d);
-    tumonlineCalendarUrl.value = d.calendar_url;
-    lastmod.value = d.lastmod;
-    events.value = d.events.map((e) => ({
-      id: e.id,
-      title: e.title,
-      startDate: new Date(e.start),
-      endDate: new Date(e.end),
-      classes: e.classes,
-    }));
-  });
+  useFetch<CalendarResponse>(
+    `https://nav.tum.de/api/calendar/${route.params.id}?start=${startString}&end=${endString}`,
+    (d) => {
+      tumonlineCalendarUrl.value = d.calendar_url;
+      last_sync.value = new Date(d.last_sync).toLocaleString("de-DE", { timeStyle: "short", dateStyle: "short" });
+      events.value = d.events.map((e) => ({
+        id: e.id.toString(),
+        title: e.title,
+        startDate: new Date(e.start),
+        endDate: new Date(e.end),
+        classes: [e.entry_type],
+      }));
+    }
+  );
 }
-function setShowDate(d) {
+function setShowDate(d: Date) {
   showDate.value = d;
 }
 </script>
@@ -57,15 +58,21 @@ function setShowDate(d) {
     <a @click="global.calendar.open = false" class="modal-overlay" aria-label="Close"></a>
     <div class="modal-container">
       <div class="modal-header">
-        <a @click="global.calendar.open = false" class="btn btn-clear float-right" aria-label="Close"></a>
-        <div class="modal-title h5">Calendar</div>
+        <a
+          @click="global.calendar.open = false"
+          class="btn btn-clear float-right"
+          v-bind:aria-label="$t('calendar.modal.close')"
+        ></a>
+        <div class="modal-title h5">{{ $t("calendar.modal.title") }}</div>
       </div>
       <div class="modal-body">
         <div class="modal-body">
           <CalendarView
             id="calendar-view"
-            :items="global.calendar.events"
+            :items="events"
             :show-date="showDate"
+            :showTimes="true"
+            :timeFormatOptions="{ hour: '2-digit', minute: '2-digit' }"
             :startingDayOfWeek="1"
             class="theme-default"
           >
@@ -76,9 +83,10 @@ function setShowDate(d) {
         </div>
       </div>
       <div class="modal-footer">
-        Events are updated daily, if in doubt, please check the
-        <a v-bind:href="global.calendar.url || 'https://campus.tum.de'">official calendar on TUMonline</a>. <br />
-        Last update: {{ lastmod }}
+        {{ $t("calendar.modal.footer.disclaimer") }} <br />
+        {{ $t("calendar.modal.footer.please_check") }}
+        <a v-bind:href="tumonlineCalendarUrl">{{ $t("calendar.modal.footer.official_calendar") }}</a
+        >. {{ $t("calendar.modal.footer.last_sync") }}: {{ last_sync }}
       </div>
     </div>
   </div>
@@ -87,13 +95,12 @@ function setShowDate(d) {
 #calendar-modal {
   .modal-container {
     position: relative;
-    top: 5em;
     height: auto;
-    max-width: 100vw !important;
-    max-height: 90vh !important;
+    max-width: 97.5vw;
+    max-height: 90vh;
     .modal-body {
       padding: 0;
-      height: 50rem;
+      height: 40rem;
       #calendar-view {
         display: flex;
         flex-direction: column;

webclient/src/locales/de.yaml

@@ -203,3 +203,12 @@ view_view:
     header: "Lageplan"
     close: "Schließen"
     image_alt: "Ein Bild welches den Lageplan zeigt"
+calendar:
+  modal:
+    title: "Kalendar"
+    close: "Schließen"
+    footer:
+      disclaimer: "Veranstaltungen werden täglich aktualisiert und identische Termine zusammengefasst."
+      please_check: "Im Zweifelsfall prüfe bitte den"
+      official_calendar: "offiziellen TUMonline-Kalender"
+      last_sync: "Zuletzt aktualisiert"

webclient/src/locales/en.yaml

@@ -203,3 +203,12 @@ view_view:
     header: "Site Plan"
     close: "Close"
     image_alt: "Image showing the Site Plan"
+calendar:
+  modal:
+    title: "Calendar"
+    close: "Close"
+    footer:
+      disclaimer: "Events are updated daily and identical events are merged."
+      please_check: "If in doubt, please check the"
+      official_calendar: "official calendar on TUMonline"
+      last_sync: "Last update"