From 727e4f6edc8dcdf0ea9bd24faaa0b6849b2763fe Mon Sep 17 00:00:00 2001
From: ISA <ismail.ali@littwin-systemtechnik.de>
Date: Wed, 11 Dec 2024 21:36:52 +0100
Subject: [PATCH] WIP: ToolTip rechte Maustaste wird erkannt

---
 hooks/layers/useGmaMarkersLayer.js | 31 +++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/hooks/layers/useGmaMarkersLayer.js b/hooks/layers/useGmaMarkersLayer.js
index 82e7d8fc4..6979c24c1 100644
--- a/hooks/layers/useGmaMarkersLayer.js
+++ b/hooks/layers/useGmaMarkersLayer.js
@@ -12,7 +12,9 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
     // Hinzufügen neuer Marker
     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,12 +30,10 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
       const gt = measurements["GT"] || "-";
       const rlf = measurements["RLF"] || "-";
 
-      //console.log(`Station oder Bereich ${area_name} - LT: ${lt}, FBT: ${fbt}, GT: ${gt}, RLF: ${rlf}`);
-
       // Tooltip für den Marker binden
       marker.bindTooltip(
         `
-          <div class="p-0 rounded-lg bg-white bg-opacity-90">
+          <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> 
             </div>
@@ -55,9 +55,30 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
           permanent: true,
           direction: "auto",
           offset: [60, 0],
+          interactive: true, // Tooltip is now interactive
         }
       );
 
+      // Hinzufügen eines Kontextmenüs direkt zum Tooltip
+      marker.on("tooltipopen", function (e) {
+        const tooltipElement = e.tooltip._contentNode;
+        if (tooltipElement) {
+          tooltipElement.addEventListener("contextmenu", (event) => {
+            event.preventDefault(); // Verhindere das Standard-Kontextmenü
+            console.log("Rechtsklick auf Tooltip erkannt", {
+              tooltipContent: tooltipElement.innerHTML,
+              link: marker.options.link,
+            });
+
+            if (marker.options.link) {
+              window.open(marker.options.link, "_blank");
+            } else {
+              console.error("Kein Tooltip-Link vorhanden.");
+            }
+          });
+        }
+      });
+
       // Ereignisse für das Öffnen und Schließen des Tooltips
       marker.on("mouseover", function () {
         this.openPopup();
@@ -66,7 +87,7 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
         this.closePopup();
       });
 
-      // Kontextmenü hinzufügen
+      // Kontextmenü für Marker hinzufügen
       addContextMenuToMarker(marker);
 
       // Füge den Marker zur Layer-Gruppe hinzu