fix: close context menu 2 seconds before API call to prevent errors

- Implemented logic to monitor the context menu state and ensure it closes 2 seconds before the 20-second interval API call
- Added functionality to log remaining time while the context menu is open for better debugging
- Refactored interval handling to reset remaining time and close the context menu properly
- Addressed runtime error related to null context menu handling

components/MapComponent.js

@@ -76,6 +76,7 @@ import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabl
 import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
+  const [editMode, setEditMode] = useState(false); // editMode Zustand
   const { deviceName, setDeviceName } = useMapComponentState();
   const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp");
   //const [deviceName, setDeviceName] = useState("");
@@ -656,20 +657,23 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
   }, [map]);
   //--------------------------------------------
-  // contextmenü Error "Contextmenu ist nicht vorhanden"
   useEffect(() => {
-    if (map) {
+    const initializeContextMenu = () => {
-      // Überprüfe, ob die Karte und das Contextmenu existieren
+      if (map) {
-      if (map.contextmenu) {
+        map.whenReady(() => {
-        console.log("Contextmenu ist vorhanden");
+          setTimeout(() => {
-        // Hier kannst du deine Logik für das Contextmenu hinzufügen
+            if (map.contextmenu) {
-        map.contextmenu.hide(); // Beispiel: Contextmenu verstecken
+              console.log("Contextmenu ist vorhanden");
-      } else {
+            } else {
-        console.warn("Contextmenu ist nicht vorhanden");
+              console.warn("Contextmenu ist nicht verfügbar.");
+            }
+          }, 500);
+        });
       }
-    }
+    };
-  }, [map]);
 
+    initializeContextMenu();
+  }, [map]);
   return (
     <>
       <ToastContainer />

hooks/useLineData.js

@@ -1,4 +1,3 @@
-// /hooks/useLineData.js
 import { useEffect, useState } from "react";
 import { SERVER_URL } from "../config/urls";
 import { useDispatch, useSelector } from "react-redux";
@@ -10,11 +9,10 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
   const [tooltipContents, setTooltipContents] = useState({});
 
   useEffect(() => {
-    let isCancelled = false; // Flag to cancel ongoing operations if component unmounts
+    let isCancelled = false;
 
     const fetchData = async () => {
       try {
-        console.log("Fetching data...");
         const response1 = await fetch(webserviceGisLinesStatusUrl);
         const data1 = await response1.json();
 
@@ -64,11 +62,6 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
             if (matchingLine) {
               const values = valueMap[key];
 
-              if (!values) {
-                console.error(`Keine Werte gefunden für Key: ${key}`);
-                return;
-              }
-
               const messageDisplay = values.messages.map((msg) => `<span class="inline-block text-gray-800"><span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${msg.prioColor};"></span>${msg.message}</span><br>`).join("");
 
               const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : "";
@@ -102,8 +95,6 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
         }
       } catch (error) {
         console.error("Fehler beim Abrufen der Daten:", error);
-
-        // Füge einen try-catch Block für den Reload hinzu
         try {
           window.location.reload();
         } catch (reloadError) {
@@ -130,67 +121,4 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
   return { lineColors, tooltipContents };
 };
 
-// Funktion zur Gruppierung der Daten
-function logGroupedData(statisList) {
-  const grouped = statisList.reduce((acc, item) => {
-    const { IdLD, Modul, Level, PrioColor, PrioName, ModulName, ModulTyp, Message, DpName, Value } = item;
-
-    if (!acc[IdLD]) {
-      acc[IdLD] = {};
-    }
-
-    if (!acc[IdLD][Modul]) {
-      acc[IdLD][Modul] = {
-        ModulName: ModulName || "Unknown",
-        ModulTyp: ModulTyp || "N/A",
-        TotalLevel: Level,
-        PrioColors: new Set(),
-        PrioNames: new Set(),
-        Messages: [],
-        Messwert: undefined,
-        Schleifenwert: undefined,
-      };
-    }
-
-    acc[IdLD][Modul].PrioColors.add(PrioColor);
-    acc[IdLD][Modul].PrioNames.add(PrioName);
-    if (Message && Message !== "?") {
-      acc[IdLD][Modul].Messages.push(Message);
-    }
-
-    if (DpName.endsWith("_Messwert") && !acc[IdLD][Modul].Messwert) {
-      acc[IdLD][Modul].Messwert = Value;
-    }
-
-    if (DpName.endsWith("_Schleifenwert") && !acc[IdLD][Modul].Schleifenwert) {
-      acc[IdLD][Modul].Schleifenwert = Value;
-    }
-
-    return acc;
-  }, {});
-
-  const formattedData = {};
-  Object.entries(grouped).forEach(([stationId, modules]) => {
-    const filteredModules = Object.entries(modules)
-      .filter(([modulId, data]) => data.ModulName !== "?")
-      .map(([modulId, data]) => ({
-        Modul: modulId,
-        ModulName: data.ModulName,
-        ModulTyp: data.ModulTyp,
-        TotalLevel: data.TotalLevel,
-        PrioColors: Array.from(data.PrioColors).join(", "),
-        PrioNames: Array.from(data.PrioNames).join(", "),
-        Messages: data.Messages.join(" | "),
-        Messwert: data.Messwert,
-        Schleifenwert: data.Schleifenwert,
-      }));
-
-    if (filteredModules.length > 0) {
-      formattedData[stationId] = filteredModules;
-    }
-  });
-
-  console.log("Aggregierte und gruppierte Daten (gefiltert):", formattedData);
-}
-
 export default useLineData;

utils/setupPolylines.js

@@ -37,6 +37,31 @@ export function enablePolylineEvents(polylines, lineColors) {
   });
 }
 
+// Funktion zum Schließen des Kontextmenüs vor dem Intervall
+const closeContextMenuBeforeInterval = (map) => {
+  if (map && map.contextmenu && map.contextmenu.isVisible && map.contextmenu.isVisible()) {
+    console.log("Schließe Kontextmenü 2 Sekunden vor dem Intervall");
+    map.contextmenu.hide();
+  }
+};
+
+// Zeitintervall mit Schließen des Kontextmenüs 2 Sekunden vorher
+export const startIntervalWithContextMenuHandling = (map) => {
+  setInterval(() => {
+    remainingTime = 20; // Zeit zurücksetzen für den neuen Durchlauf
+    // Kontextmenü überwachen
+    monitorContextMenu(map);
+
+    // Schließe das Kontextmenü 2 Sekunden vor dem API-Aufruf
+    setTimeout(() => {
+      closeContextMenuBeforeInterval(map);
+    }, 18000); // 18 Sekunden warten, dann schließen
+
+    // API-Aufruf oder Logik, die alle 20 Sekunden ausgeführt wird
+    fetchData();
+  }, 20000); // 20-Sekunden-Intervall
+};
+
 export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => {
   const markers = [];
   const polylines = [];
@@ -223,6 +248,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
       console.log("Link der Linie (via Rechtsklick):", link);
       localStorage.setItem("lastElementType", "polyline");
       localStorage.setItem("polylineLink", link);
+      closeContextMenuBeforeInterval(map);
     });
 
     polylines.push(polyline);