fix: TypeError: Cannot read properties of null (reading 'contextmenu')

- Korrigiert TypeError, der auftrat, wenn versucht wurde, auf `contextmenu` zuzugreifen, während es null war.
- Implementiert präzise Zeitmessung mithilfe von `Date.now()`, um das Schließen des Kontextmenüs nach genau 17 Sekunden sicherzustellen.
- Verbessert Benutzererfahrung durch zuverlässigere und stabilere Menüverwaltung.

hooks/useLineData.js

@@ -103,15 +103,7 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
       }
     };
 
-    const scheduleNextFetch = () => {
-      if (!isCancelled) {
-        fetchData();
-        setTimeout(scheduleNextFetch, 20000);
-      }
-    };
-
     fetchData();
-    scheduleNextFetch();
 
     return () => {
       isCancelled = true;

utils/setupPolylines.js

@@ -204,25 +204,70 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
       color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
       weight: 3,
       contextmenu: true,
+      contextmenuInheritItems: false, // Standard-Kontextmenü deaktivieren
       contextmenuItems: [],
     }).addTo(map);
 
     // Füge "Stützpunkt hinzufügen" nur hinzu, wenn editMode aktiv ist
     if (editMode) {
-      polyline.options.contextmenuItems.push({
+      polyline.options.contextmenuItems.push(
-        text: "Stützpunkt hinzufügen",
+        {
-        icon: "/img/icons/gisLines/add-support-point.svg",
+          text: "Station öffnen (Tab)",
-        callback: (e) => {
+          icon: "/img/screen_new.png",
-          if (tempMarker) {
+          callback: (e) => {
-            tempMarker.remove();
+            const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
-          }
+            window.open(link, "_blank");
-          const newPoint = e.latlng;
+          },
-          const closestPoints = findClosestPoints(lineData.coordinates, newPoint, map);
-          insertNewPOI(closestPoints, newPoint, lineData, map);
-          redrawPolyline(lineData, lineColors, tooltipContents, map);
-          window.location.reload();
         },
-      });
+        { separator: true },
+
+        {
+          text: "Koordinaten anzeigen",
+          icon: "/img/not_listed_location.png",
+          callback: (e) => {
+            alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5));
+          },
+        },
+        { separator: true },
+        {
+          text: "Reinzoomen",
+          icon: "/img/zoom_in.png",
+          callback: (e) => map.zoomIn(),
+        },
+        {
+          text: "Rauszoomen",
+          icon: "/img/zoom_out.png",
+          callback: (e) => map.zoomOut(),
+        },
+        {
+          text: "Hier zentrieren",
+          icon: "/img/center_focus.png",
+          callback: (e) => map.panTo(e.latlng),
+        },
+        { separator: true },
+        {
+          text: "POI hinzufügen",
+          icon: "/img/add_station.png",
+          callback: (e) => {
+            // Hier kannst du die Logik für das Hinzufügen eines POIs implementieren
+            alert("POI hinzufügen an: " + e.latlng);
+          },
+        },
+        {
+          text: "Stützpunkt hinzufügen",
+          icon: "/img/icons/gisLines/add-support-point.svg",
+          callback: (e) => {
+            if (tempMarker) {
+              tempMarker.remove();
+            }
+            const newPoint = e.latlng;
+            const closestPoints = findClosestPoints(lineData.coordinates, newPoint, map);
+            insertNewPOI(closestPoints, newPoint, lineData, map);
+            redrawPolyline(lineData, lineColors, tooltipContents, map);
+            window.location.reload();
+          },
+        }
+      );
     }
 
     // Hier wird der Tooltip hinzugefügt
@@ -232,6 +277,24 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
     });
 
     polyline.on("mouseover", (e) => {
+      const startTime = Date.now(); // Startzeit erfassen
+      localStorage.setItem("contextMenuStartTime", startTime); // Speichern in localStorage
+
+      // Starte einen Intervall-Timer, um die Differenz zu berechnen
+      const countdownInterval = setInterval(() => {
+        const currentTime = Date.now();
+        const elapsedTime = (currentTime - startTime) / 1000; // Differenz in Sekunden
+
+        // Speichern der abgelaufenen Zeit in localStorage
+        localStorage.setItem("contextMenuCountdown", elapsedTime);
+
+        // Wenn die Zeit 17 Sekunden erreicht, schließe das Menü
+        if (elapsedTime >= 17) {
+          clearInterval(countdownInterval);
+          const contextMenu = map.contextmenu; // Zugriff auf das Kontextmenü
+          contextMenu.hide(); // Kontextmenü schließen
+        }
+      }, 1000); // Jede Sekunde
       //console.log("Mouseover on polyline", lineData);
       polyline.setStyle({ weight: 14 });
       const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
@@ -243,14 +306,28 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
     polyline.on("mouseout", (e) => {
       // console.log("Mouseout from polyline", lineData);
       polyline.setStyle({ weight: 3 });
+      // Setze den Countdown auf 0, wenn mouseout ausgelöst wird
+      localStorage.setItem("contextMenuCountdown", 0);
     });
     // Speichere den Link bei einem Rechtsklick (Kontextmenü)
-    polyline.on("contextmenu", (e) => {
+    /*  
+       polyline.on("contextmenu", (e) => {
       const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
       console.log("Link der Linie (via Rechtsklick):", link);
       localStorage.setItem("lastElementType", "polyline");
       localStorage.setItem("polylineLink", link);
     });
+     */
+    // Starte den Timer zum Schließen des Kontextmenüs nach 15 Sekunden
+    polyline.on("contextmenu", function (e) {
+      const contextMenu = this._map.contextmenu; // Zugriff auf das Kontextmenü
+      const closeMenu = () => contextMenu.hide(); // Funktion zum Schließen des Menüs
+
+      const countdown = parseInt(localStorage.getItem("contextMenuCountdown"), 10);
+      if (countdown >= 17) {
+        closeMenu();
+      }
+    });
 
     polylines.push(polyline);
     markers.push(...lineMarkers);