From 48c3b1295269d0bbe13f8913809f0bd2529b010c Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 16 Apr 2024 15:02:43 +0200
Subject: [PATCH] =?UTF-8?q?Informationen=20in=20Tooltips=20einf=C3=BCgen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MapComponent.js | 54 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 52 insertions(+), 2 deletions(-)

diff --git a/components/MapComponent.js b/components/MapComponent.js
index 901fd01e4..7023f5885 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -29,6 +29,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   const mapDataIconUrl = config.mapDataIconUrl;
 
   console.log("GisStationsStaticDistrict 1 :", GisStationsStaticDistrict);
+  console.log("GisStationsStatusDistrict 1 :", GisStationsStatusDistrict);
+  console.log("GisStationsMeasurements 1 :", GisStationsMeasurements);
+  console.log("GisSystemStatic 1 :", GisSystemStatic);
   console.log("map 1:", map);
 
   // Funktion zum Aktualisieren der Position in der Datenbank
@@ -55,8 +58,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       console.error("Fehler beim Aktualisieren der Position");
     }
   };
-  //---
-  //------------------------------------------
+
   // API-Daten laden für GisStationsStaticDistrict
   //http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485
   useEffect(() => {
@@ -660,6 +662,54 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
     //-------------------------------------
   }
+  //------------------------------------------
+  //Informationen in Tooltips einfügen
+  // Marker hinzufügen für GisStationsStaticDistrict
+  useEffect(() => {
+    if (
+      map &&
+      GisStationsStaticDistrict.length > 0 &&
+      GisStationsStatusDistrict.length > 0
+    ) {
+      // Zuerst alte Marker entfernen
+      map.eachLayer((layer) => {
+        if (layer instanceof L.Marker) {
+          map.removeLayer(layer);
+        }
+      });
+
+      // Neue Marker für jede Station hinzufügen
+      GisStationsStaticDistrict.forEach((station) => {
+        // Find corresponding status message
+        const status = GisStationsStatusDistrict.find(
+          (status) => status.IdLD === station.IdLD
+        );
+        const message = status ? status.Me : "Keine Statusmeldung verfügbar";
+
+        const marker = L.marker([station.X, station.Y], {
+          icon: L.icon({
+            iconUrl: getIconPath(station.Icon),
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            popupAnchor: [1, -34],
+            shadowSize: [41, 41],
+          }),
+        }).addTo(map);
+
+        // Ein Popup mit Informationen zur Station und Statusmeldung hinzufügen
+        marker
+          .bindPopup(
+            `<b>${station.LD_Name}</b><br>${station.Device}<br><b>Status:</b> ${message}`
+          )
+          .bindTooltip(`${station.LD_Name} - ${message}`, {
+            permanent: false,
+            direction: "top",
+          });
+      });
+    }
+  }, [map, GisStationsStaticDistrict, GisStationsStatusDistrict]); // Include GisStationsStatusDistrict in dependencies
+
+  //------------------------------------------
 
   return (
     <div