From 50ab19a3a43623d032fd0a3a86f4552c673e2d65 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Fri, 21 Apr 2023 16:42:01 +0200
Subject: [PATCH] Adapted the calendar to work with the current API

---
 webclient/src/components/CalendarModal.vue | 57 ++++++++++++----------
 webclient/src/locales/de.yaml              |  9 ++++
 webclient/src/locales/en.yaml              |  9 ++++
 3 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/webclient/src/components/CalendarModal.vue b/webclient/src/components/CalendarModal.vue
index 134ba22ad..e9cfbec76 100644
--- a/webclient/src/components/CalendarModal.vue
+++ b/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;
diff --git a/webclient/src/locales/de.yaml b/webclient/src/locales/de.yaml
index ab471f907..fd71e5c3d 100644
--- a/webclient/src/locales/de.yaml
+++ b/webclient/src/locales/de.yaml
@@ -206,3 +206,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"
diff --git a/webclient/src/locales/en.yaml b/webclient/src/locales/en.yaml
index db07ffd93..70cbb33f1 100644
--- a/webclient/src/locales/en.yaml
+++ b/webclient/src/locales/en.yaml
@@ -206,3 +206,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"