From fc5ee68dd8d32486e0ccdd5b086bda806c939ea0 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Mon, 24 Jun 2024 02:17:10 +0200
Subject: [PATCH] tmp

---
 webclient/components/CalendarModal.vue | 48 +++++++++++++++++---------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/webclient/components/CalendarModal.vue b/webclient/components/CalendarModal.vue
index f6da175f1..41d406c1f 100644
--- a/webclient/components/CalendarModal.vue
+++ b/webclient/components/CalendarModal.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-// @ts-expect-error
+// @ts-expect-error vue-simple-calendar does not provide types
 import { CalendarView, CalendarViewHeader } from "vue-simple-calendar";
-// @ts-expect-error
+// @ts-expect-error vue-simple-calendar does not provide types
 import type { ICalendarItem } from "vue-simple-calendar/dist/src/ICalendarItem.d.ts";
 
-import type { components } from "@/api_types";
+import type { components, operations } from "@/api_types";
 import "/node_modules/vue-simple-calendar/dist/style.css";
 import "/node_modules/vue-simple-calendar/dist/css/gcal.css";
 
 type CalendarResponse = components["schemas"]["CalendarResponse"];
+type CalendarBody = operations["calendar"]["requestBody"]["content"]["application/json"];
 
 const showDate = ref(new Date());
 
@@ -27,14 +28,20 @@ const end_before = computed(() => {
 });
 
 const runtimeConfig = useRuntimeConfig();
-const url = computed(() => {
-  const params = new URLSearchParams();
-  params.append("start_after", start_after.value);
-  params.append("end_before", end_before.value);
-
-  return `${runtimeConfig.public.apiURL}/api/calendar/${calendar.value.showing[0]}?${params.toString()}`;
+const url = computed(() => `${runtimeConfig.public.apiURL}/api/calendar`);
+const body = computed<CalendarBody>(() => ({
+  start_after: start_after.value,
+  end_before: end_before.value,
+  ids: calendar.value.showing,
+}));
+const { data, status, error } = useFetch<CalendarResponse>(url, {
+  key: "calendar",
+  dedupe: "defer",
+  deep: false,
+  body: body,
+  retry: 120,
+  retryDelay: 5000,
 });
-const { data, status, error } = useFetch<CalendarResponse>(url, { key: "calendar", dedupe: "defer", deep: false });
 const earliest_last_sync = computed<string | null>(() => {
   if (!data.value) return null;
   return Object.values(data.value)
@@ -44,13 +51,20 @@ const earliest_last_sync = computed<string | null>(() => {
 });
 const events = computed<ICalendarItem[]>(() => {
   if (!data.value) return [];
-  return data.value.events.map((e) => ({
-    id: e.id.toString(),
-    title: e.title,
-    startDate: new Date(e.start),
-    endDate: new Date(e.end),
-    classes: [e.entry_type],
-  }));
+  const items = [];
+  const show_room_names = !!Object.keys(data.value).length;
+  for (const [k, v] of Object.entries(data.value)) {
+    items.push(
+      ...v.events.map((e) => ({
+        id: e.id.toString(),
+        title: show_room_names ? k + " " + e.title : e.title,
+        startDate: new Date(e.start),
+        endDate: new Date(e.end),
+        classes: [e.entry_type],
+      })),
+    );
+  }
+  return items;
 });
 
 function setShowDate(d: Date) {