From e9ce6088b8aa71708d1b2fd2a811a5dbad8f9032 Mon Sep 17 00:00:00 2001 From: ISA Date: Thu, 12 Dec 2024 08:59:05 +0100 Subject: [PATCH] =?UTF-8?q?WIP:=20Station=20=C3=B6ffnen=20in=20Kontextmen?= =?UTF-8?q?=C3=BC=20f=C3=BCr=20Tooltip?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hooks/layers/useGmaMarkersLayer.js | 86 +++++++++++++++++++----------- utils/initializeMap.js | 46 ++++++++++------ 2 files changed, 84 insertions(+), 48 deletions(-) diff --git a/hooks/layers/useGmaMarkersLayer.js b/hooks/layers/useGmaMarkersLayer.js index 2b4413ba7..0c6dd40e2 100644 --- a/hooks/layers/useGmaMarkersLayer.js +++ b/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( - ` + `
${area_name} @@ -40,7 +36,7 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi FBT : ${fbt} °C
- GT : ${gt} + GT : ${gt} °C
RLF : ${rlf} % @@ -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 - const simulatedEvent = { - latlng: marker.getLatLng(), - relatedTarget: marker, - originalEvent: event, - }; - console.log("simulateEvent:",simulatedEvent ) + // Erstelle ein benutzerdefiniertes Kontextmenü + const menu = document.createElement("div"); + menu.className = "custom-context-menu"; + menu.style.position = "absolute"; + menu.style.left = `${event.clientX}px`; + menu.style.top = `${event.clientY}px`; + 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; diff --git a/utils/initializeMap.js b/utils/initializeMap.js index 582210a83..01f1adf33 100644 --- a/utils/initializeMap.js +++ b/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 (initMap && initMap.contextmenu) { - // Verarbeite Kontextmenü-Callback - if (link) { - const newTab = window.open(link, "_blank"); - if (newTab) { - // Lösche Einträge im localStorage - localStorage.removeItem("polylineLink"); - localStorage.removeItem("lastElementType"); + if (!clickedElement) { + console.error("No valid target for the context menu entry (Element is null)."); + return; + } + + try { + if (clickedElement instanceof L.Marker || clickedElement?.options?.link) { + const link = clickedElement.options.link; + 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 { - console.error("Karte oder Kontextmenü nicht verfügbar."); + } catch (error) { + console.error("Error processing the context menu:", error); } }, },