feat:#13 added overlay panel with infos about event and colors

frontend/src/helpers/ical.ts

@@ -1,24 +1,89 @@
-import ICAL from 'ical.js';
-import { CalendarComponent } from 'ical';
+import ICAL from "ical.js";
+import { CalendarComponent } from "ical";
 
-export function parseICalData(icalData: string | undefined) {
+/**
+ * Interface for the color distinction event
+ * @param title Event name
+ * @param color Color code for the event
+ */
+export interface ColorDistinctionEvent {
+  title: string;
+  color: string;
+}
+
+/**
+ * Parses iCal data and returns an array of calendar components
+ * @param icalData iCal data to parse
+ * @returns Array of calendar components
+ */
+export function parseICalData(icalData: string | undefined): CalendarComponent[] {
   if (icalData === undefined || !icalData) {
     return [];
+  } else {
+    const jCalData = ICAL.parse(icalData);
+    const comp = new ICAL.Component(jCalData);
+    const vEvents = comp.getAllSubcomponents('vevent');
+    const colorDistinctionEvents = extracted(vEvents);
+
+    return vEvents.map((vevent: CalendarComponent) => {
+      const event = new ICAL.Event(vevent);
+
+      return {
+        title: event.summary,
+        start: event.startDate.toJSDate(),
+        end: event.endDate.toJSDate(),
+        notes: event.description,
+        allDay: event.startDate.isDate,
+        color: colorDistinctionEvents.find((e: ColorDistinctionEvent) => e.title === event.summary)?.color,
+        id: event.uid,
+        location: event.location,
+      };
+    });
   }
+}
 
-  const jCalData = ICAL.parse(icalData);
-  const comp = new ICAL.Component(jCalData);
-  const vEvents = comp.getAllSubcomponents('vevent');
-
-  return vEvents.map((vevent: CalendarComponent) => {
+/**
+ * Extracts the event names and assigns a color to each event
+ * @param vEvents Array of calendar components
+ * @returns Array of objects with event name and color
+ */
+function extracted(vEvents: CalendarComponent[]): ColorDistinctionEvent[] {
+  // filter vevents to get all unique event names
+  const distinctEvents = vEvents.filter((vevent: CalendarComponent, index: number, self: CalendarComponent[]) => {
     const event = new ICAL.Event(vevent);
+    return self.findIndex((v) => {
+      const e = new ICAL.Event(v);
+      return e.summary === event.summary;
+    }) === index;
+  });
 
+  //create dynamic color distinctionEvents map that will be used to color code events
+  return distinctEvents.map((vevent: CalendarComponent) => {
+    const event = new ICAL.Event(vevent);
+    // map event name to a color for color coding css
+    // like var(--htwk-rot-700)
+    const colors: string[] = [
+      "var(--htwk-rot-200)",
+      "var(--htwk-gruen-300)",
+      "var(--htwk-magenta-400)",
+      "var(--htwk-cyan-400)",
+      "var(--htwk-silbergrau-600)",
+      "var(--htwk-yellow-300)",
+      "var(--htwk-blau-300)",
+      "var(--htwk-dunkelblau-200)",
+      "var(--htwk-rot-400)",
+      "var(--htwk-gruen-400)",
+      "var(--htwk-blau-200)"
+    ];
+
+    // give each event a color based on its name ascending
+    const randomColor = colors[distinctEvents.findIndex((e: CalendarComponent) => {
+      const ev = new ICAL.Event(e);
+      return ev.summary === event.summary;
+    }) % colors.length];
     return {
       title: event.summary,
-      start: event.startDate.toJSDate(),
-      end: event.endDate.toJSDate(),
-      allDay: event.startDate.isDate,
-      // Include other properties as needed
+      color: randomColor
     };
   });
-}
+}