WIP: Station öffnen in Kontextmenü für Tooltip

hooks/layers/useGmaMarkersLayer.js

@@ -1,8 +1,7 @@
-// hooks/layers/useGmaMarkersLayer.js
+import { useEffect } from "react";
-import { useEffect } from "react";
 import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 
-const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
+const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
   useEffect(() => {
     if (!map || !isVisible) return;
 
@@ -10,10 +9,7 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
     GMA.clearLayers();
 
     markers.forEach((marker) => {
-      // Finde die Messungen, die zu diesem Marker gehören
+      const relevantMeasurements = GisStationsMeasurements.filter((m) => m.Area_Name === marker.options.areaName);
-      const relevantMeasurements = GisStationsMeasurements.filter(
-        (m) => m.Area_Name === marker.options.areaName
-      );
 
       let measurements = {};
       let area_name = marker.options.areaName;
@@ -28,7 +24,7 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
       const rlf = measurements["RLF"] || "-";
 
       marker.bindTooltip(
-        `
+        ` 
           <div class="p-0 rounded-lg bg-white bg-opacity-90 tooltip-content">
             <div class="font-bold text-sm text-black">
               <span>${area_name}</span> 
@@ -40,7 +36,7 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
               <span>FBT : ${fbt} °C</span> 
             </div>
             <div class="font-bold text-xxs text-yellow-500">
-              <span>GT : ${gt}</span> 
+              <span>GT : ${gt} °C</span> 
             </div>
             <div class="font-bold text-xxs text-green-700">
               <span>RLF : ${rlf} %</span> 
@@ -55,41 +51,69 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
         }
       );
 
-      // Tooltip-Kontextmenü auf Marker-Kontextmenü verlinken
       marker.on("tooltipopen", (e) => {
         const tooltipElement = e.tooltip._contentNode;
 
         if (tooltipElement) {
           tooltipElement.addEventListener("contextmenu", (event) => {
-            event.preventDefault(); // Standard-Kontextmenü verhindern
+            event.preventDefault();
             console.log("Rechtsklick auf Tooltip erkannt");
 
-            // Simuliere das Kontextmenü für den Marker
+            // Erstelle ein benutzerdefiniertes Kontextmenü
-            const simulatedEvent = {
+            const menu = document.createElement("div");
-              latlng: marker.getLatLng(),
+            menu.className = "custom-context-menu";
-              relatedTarget: marker,
+            menu.style.position = "absolute";
-              originalEvent: event,
+            menu.style.left = `${event.clientX}px`;
-            };
+            menu.style.top = `${event.clientY}px`;
-            console.log("simulateEvent:",simulatedEvent )
+            menu.style.backgroundColor = "#fff";
+            menu.style.border = "1px solid #ccc";
+            menu.style.padding = "8px";
+            menu.style.zIndex = "1000";
 
-            marker.fire("contextmenu", simulatedEvent);
+            // Menüeinträge hinzufügen
+            const openStation = document.createElement("div");
+            openStation.textContent = "Station öffnen (Tab)";
+            openStation.style.cursor = "pointer";
+            openStation.onclick = () => {
+              if (marker.options.link) {
+                window.open(marker.options.link, "_blank");
+              } else {
+                console.error("Kein Link für Tooltip vorhanden.");
+              }
+              document.body.removeChild(menu); // Menü entfernen
+            };
+
+            const showDetails = document.createElement("div");
+            showDetails.textContent = "Details anzeigen";
+            showDetails.style.cursor = "pointer";
+            showDetails.onclick = () => {
+              alert(`Details für ${area_name}`);
+              document.body.removeChild(menu); // Menü entfernen
+            };
+
+            // Menüeinträge zum Menü hinzufügen
+            menu.appendChild(openStation);
+            menu.appendChild(document.createElement("hr"));
+            menu.appendChild(showDetails);
+
+            // Menü zum DOM hinzufügen
+            document.body.appendChild(menu);
+
+            // Menü entfernen, wenn irgendwo anders geklickt wird
+            const handleClickOutside = () => {
+              if (document.body.contains(menu)) {
+                document.body.removeChild(menu);
+                document.removeEventListener("click", handleClickOutside);
+              }
+            };
+
+            document.addEventListener("click", handleClickOutside);
           });
         }
       });
 
-      // Entferne Listener, wenn Tooltip geschlossen wird
-/*       marker.on("tooltipclose", (e) => {
-        const tooltipElement = e.tooltip._contentNode;
-        if (tooltipElement) {
-          tooltipElement.removeEventListener("contextmenu", () => {});
-          //console.log("Tooltip geschlossen");
-        }
-      }); */
-
-      // Kontextmenü für Marker hinzufügen
       addContextMenuToMarker(marker);
 
-      // Füge den Marker zur Layer-Gruppe hinzu
       GMA.addLayer(marker);
       oms.addMarker(marker);
     });
@@ -103,4 +127,4 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
   }, [map, markers, GisStationsMeasurements, GMA, oms, isVisible]);
 };
 
-export default useMarkersLayer;
+export default useGmaMarkersLayer;

utils/initializeMap.js

@@ -12,7 +12,20 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
     const initMap = L.map(mapRef.current, {
       center: [53.111111, 8.4625],
       zoom: 12,
-      layers: [layers.MAP_LAYERS.TALAS, layers.MAP_LAYERS.ECI, layers.MAP_LAYERS.ULAF, layers.MAP_LAYERS.GSMModem],
+      layers: [
+        layers.MAP_LAYERS.TALAS,
+        layers.MAP_LAYERS.ECI,
+        layers.MAP_LAYERS.GSMModem,
+        layers.MAP_LAYERS.CiscoRouter,
+        layers.MAP_LAYERS.WAGO,
+        layers.MAP_LAYERS.Siemens,
+        layers.MAP_LAYERS.OTDR,
+        layers.MAP_LAYERS.WDM,
+        layers.MAP_LAYERS.GMA,
+        layers.MAP_LAYERS.TALASICL,
+        layers.MAP_LAYERS.Sonstige,
+        layers.MAP_LAYERS.ULAF,
+      ],
       minZoom: 5,
       maxZoom: 15,
       zoomControl: false,
@@ -22,28 +35,27 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
           text: "Station öffnen (Tab)",
           icon: "/img/screen_new.png",
           callback: (e) => {
-            const link = localStorage.getItem("polylineLink");
             const clickedElement = e.relatedTarget;
 
-            // Überprüfe, ob Karte und contextmenu existieren
+            if (!clickedElement) {
-            if (initMap && initMap.contextmenu) {
+              console.error("No valid target for the context menu entry (Element is null).");
-              // Verarbeite Kontextmenü-Callback
+              return;
-              if (link) {
+            }
-                const newTab = window.open(link, "_blank");
+
-                if (newTab) {
+            try {
-                  // Lösche Einträge im localStorage
+              if (clickedElement instanceof L.Marker || clickedElement?.options?.link) {
-                  localStorage.removeItem("polylineLink");
+                const link = clickedElement.options.link;
-                  localStorage.removeItem("lastElementType");
+                if (link) {
+                  console.log("Opening link in a new tab:", link);
+                  window.open(link, "_blank");
                 } else {
-                  console.error("Fehler: Das neue Tab konnte nicht geöffnet werden.");
+                  console.error("No link found in the Marker options.");
                 }
-              } else if (clickedElement instanceof L.Marker || clickedElement instanceof L.Polyline) {
-                openInNewTab(e, clickedElement);
               } else {
-                console.error("Kein gültiges Ziel für den Kontextmenüeintrag");
+                console.error("No valid target for the context menu entry");
               }
-            } else {
+            } catch (error) {
-              console.error("Karte oder Kontextmenü nicht verfügbar.");
+              console.error("Error processing the context menu:", error);
             }
           },
         },