WIP: Station öffnen in Kontextmenü für Tooltip
This commit is contained in:
ISA
@@ -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
|
||||
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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user