87 string splitting by separator, not whitespace

frontend/src/api/fetchRoom.ts

@@ -31,7 +31,7 @@ export async function fetchEventsByRoomAndDuration(
     })
     .catch((error) => {
       console.log("Error fetching events: ", error);
-      return null;
+      return Promise.reject(error);
     });
   console.log("occupations: ", events);
   return events;

frontend/src/components/RoomOccupation.vue

@@ -20,6 +20,7 @@ type CalenderEvent = {
   id: number;
   start: string;
   end: string;
+  showFree: boolean;
 };
 
 const currentDateFrom: Ref<string> = ref("");
@@ -38,21 +39,27 @@ async function getOccupation() {
   if (selectedRoom.value === "") {
     return;
   }
-  const events = await fetchEventsByRoomAndDuration(
+  fetchEventsByRoomAndDuration(
     selectedRoom.value,
     currentDateFrom.value,
     currentDateTo.value,
-  );
-  occupations.value = events.map((event, index) => {
-    return {
-      id: index,
-      start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
-      end: event.end.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
-    };
-  });
+  )
+  .then((events) => {
+    occupations.value = events.map((event, index) => {
+      return {
+        id: index,
+        start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
+        end: event.end.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
+        showFree: event.name.toLowerCase().includes("zur freien verfügung"),
+      };
+    });
 
-  const calendar = fullCalendar.value?.getApi();
-  calendar?.refetchEvents();
+    const calendar = fullCalendar.value?.getApi();
+    calendar?.refetchEvents();
+  })
+  .catch((error) => {
+    console.log(error);
+  });
 }
 
 import allLocales from "@fullcalendar/core/locales-all";
@@ -124,20 +131,19 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => {
       currentDateTo.value = endDate.toISOString().split("T")[0];
       getOccupation();
     },
-    events: function (_info: any, successCallback: any, failureCallback: any) {
-      if (occupations.value.length === 0) {
-        failureCallback(new Error("no events"));
-      } else {
-        successCallback(
-          occupations.value.map((event) => {
-            return {
-              id: event.id.toString(),
-              start: event.start,
-              end: event.end,
-            } as EventInput;
-          }),
-        );
-      }
+    events: function (_info: any, successCallback: any, _: any) {
+      successCallback(
+        occupations.value.map((event) => {
+          return {
+            id: event.id.toString(),
+            start: event.start,
+            end: event.end,
+            color: event.showFree ? "var(--green-800)" : "var(--primary-color)",
+            textColor: event.showFree ? "var(--green-50)" : "var(--primary-text-color)",
+            title: event.showFree ? t("roomFinderPage.available") : t("roomFinderPage.occupied"),
+          } as EventInput;
+        }),
+      );
     },
   };
 });

frontend/src/i18n/translations/de.json

@@ -21,7 +21,9 @@
     "headline": "Raumfinder",
     "detail": "Bitte wähle einen Raum aus, um die Belegung einzusehen",
     "dropDownSelect": "Bitte wähle einen Raum aus",
-    "noRoomsAvailable": "Keine Räume verfügbar"
+    "noRoomsAvailable": "Keine Räume verfügbar",
+    "available": "verfügbar",
+    "occupied": "belegt"
   },
   "moduleSelection": {
     "nextStep": "Weiter",

frontend/src/i18n/translations/en.json

@@ -21,7 +21,9 @@
     "headline": "room finder",
     "detail": "Please select a room to view the occupancy",
     "dropDownSelect": "Please select a room",
-    "noRoomsAvailable": "No rooms listed"
+    "noRoomsAvailable": "No rooms listed",
+    "available": "available",
+    "occupied": "occupied"
   },
   "moduleSelection": {
     "nextStep": "next step",