From 91ef7d6db9dc33ac06d81130728c61f62c1078b7 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 7 May 2024 10:49:28 +0200
Subject: [PATCH] =?UTF-8?q?Add:=20Kontextmen=C3=BC-Funktionalit=C3=A4t=20f?=
 =?UTF-8?q?=C3=BCr=20alle=20Stationen=20auf=20der=20Karte=20Dieser=20Commi?=
 =?UTF-8?q?t=20f=C3=BChrt=20eine=20erweiterte=20Interaktion=20mit=20den=20?=
 =?UTF-8?q?Kartenmarkern=20durch=20die=20Implementierung=20von=20openInNew?=
 =?UTF-8?q?Tab=20und=20=20openInSameWindow.=20Benutzer=20k=C3=B6nnen=20nun?=
 =?UTF-8?q?=20=C3=BCber=20das=20Kontextmen=C3=BC=20verschiedene=20Aktionen?=
 =?UTF-8?q?=20ausf=C3=BChren,=20wie=20das=20=C3=96ffnen=20von=20Marker-bez?=
 =?UTF-8?q?ogenen=20Links=20in=20einem=20neuen=20Tab=20oder=20im=20aktuell?=
 =?UTF-8?q?en=20Fenster=20und=20das=20Anzeigen=20von=20Koordinaten.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Details der Implementierung:
- `addContextMenuToMarker` wurde hinzugefügt, um das Kontextmenü jedem Marker zuzuweisen.
- Marker enthalten nun ein 'data'-Objekt für zusätzliche Informationen wie URLs, um die Funktionalität zu unterstützen.
- Spezifische Callback-Funktionen wie `openInNewTab`, `openInSameWindow` und `showCoordinates` wurden definiert, um die Kontextmenüaktionen zu behandeln.
- Diese Funktionen nutzen die Marker-Daten und -Position, um relevante Aktionen direkt über die Kartenoberfläche bereitzustellen.

Ziel dieser Änderungen ist es, die Benutzerinteraktion mit der Karte durch schnellen Zugriff auf relevante Informationen und Funktionen zu verbessern.
---
 components/MapComponent.js | 45 +++++++++++++++++---------------------
 1 file changed, 20 insertions(+), 25 deletions(-)

diff --git a/components/MapComponent.js b/components/MapComponent.js
index 5f15c52f8..c5c339359 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -290,16 +290,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         contextmenu: true,
         contextmenuItems: [
           { text: "Station hinzufügen", callback: addStationCallback },
-          {
-            text: "Station öffnen (Tab)",
-            icon: "img/screen_new.png",
-            callback: (e) => openInNewTab(e, marker),
-          },
-          {
-            text: "Station öffnen",
-            icon: "img/screen_same.png",
-            callback: (e) => showCoordinates(e, marker),
-          },
           {
             text: "Koordinaten",
             icon: "img/screen_same.png",
@@ -393,7 +383,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       contextmenu: true,
       contextmenuWidth: 140,
       contextmenuItems: [
-        { text: "Station hinzufügen", callback: addStationCallback },
         {
           text: "Station öffnen (Tab)",
           icon: "/img/screen_new.png",
@@ -404,16 +393,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           icon: "/img/screen_same.png",
           callback: (e) => openInSameWindow(e, marker),
         },
-        {
-          text: "Koordinaten anzeigen",
-          icon: "/img/screen_same.png",
-          callback: (e) => showCoordinates(e, marker),
-        },
-
-        "-", // Divider
-        { text: "Reinzoomen", callback: zoomIn },
-        { text: "Rauszoomen", callback: zoomOut },
-        { text: "Hier zentrieren", callback: centerHere },
       ],
     });
   }
@@ -442,12 +421,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   };
 
   // Funktion zum Anzeigen der Koordinaten
-  function showCoordinates(e, marker) {
-    const latLng = marker.getLatLng();
+  const showCoordinates = (e) => {
     alert(
-      `Latitude: ${latLng.lat.toFixed(5)}, Longitude: ${latLng.lng.toFixed(5)}`
+      "Breitengrad: " +
+        e.latlng.lat.toFixed(5) +
+        "\nLängengrad: " +
+        e.latlng.lng.toFixed(5)
     );
-  }
+  };
   const showData = (e) => {};
   const showTalas = (e) => {
     map.addLayer(TALAS);
@@ -901,6 +882,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseout", function () {
           this.closePopup();
         });
+        addContextMenuToMarker(marker);
       });
       map.addLayer(ECI);
     }
@@ -922,6 +904,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseout", function () {
           this.closePopup();
         });
+        addContextMenuToMarker(marker);
       });
       map.addLayer(GSMModem);
     }
@@ -943,6 +926,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseout", function () {
           this.closePopup();
         });
+        addContextMenuToMarker(marker);
       });
       map.addLayer(CiscoRouter);
     }
@@ -964,6 +948,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseout", function () {
           this.closePopup();
         });
+        addContextMenuToMarker(marker);
       });
       map.addLayer(WAGO);
 
@@ -987,6 +972,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseout", function () {
           this.closePopup();
         });
+        addContextMenuToMarker(marker);
       });
       map.addLayer(Siemens);
     }
@@ -1008,6 +994,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseout", function () {
           this.closePopup();
         });
+        addContextMenuToMarker(marker);
       });
       map.addLayer(OTDR);
     }
@@ -1029,6 +1016,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseout", function () {
           this.closePopup();
         });
+        addContextMenuToMarker(marker);
       });
       map.addLayer(WDM);
     }
@@ -1110,6 +1098,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseout", function () {
           this.closePopup();
         });
+        addContextMenuToMarker(marker);
       });
       map.addLayer(GMA);
     }
@@ -1132,6 +1121,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseout", function () {
           this.closePopup();
         });
+        addContextMenuToMarker(marker);
       });
       map.addLayer(GMA);
     }
@@ -1153,6 +1143,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseout", function () {
           this.closePopup();
         });
+        addContextMenuToMarker(marker);
       });
       map.addLayer(TALASICL);
     }
@@ -1174,6 +1165,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseout", function () {
           this.closePopup();
         });
+        addContextMenuToMarker(marker);
       });
     }
   }, [map, dauzMarkers]);
@@ -1194,6 +1186,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseout", function () {
           this.closePopup();
         });
+        addContextMenuToMarker(marker);
       });
     }
   }, [map, smsfunkmodemMarkers]);
@@ -1214,6 +1207,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseout", function () {
           this.closePopup();
         });
+        addContextMenuToMarker(marker);
       });
     }
   }, [map, ulafMarkers]);
@@ -1234,6 +1228,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseout", function () {
           this.closePopup();
         });
+        addContextMenuToMarker(marker);
       });
     }
   }, [map, sonstigeMarkers]);