feat: tooltip for lines, but should be fixed, same message on all lines

components/MapComponent.js

@@ -6,6 +6,7 @@ import React, {
   useState,
   useMemo,
   useCallback,
+  use,
 } from "react";
 import { MapContainer, TileLayer, Polyline, LayerGroup } from "react-leaflet";
 
@@ -2153,6 +2154,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, []);
   //--------------------------- Linien färben ------------------------------
   const [lineColors, setLineColors] = useState({});
+  const [tooltipContent, setTooltipContent] = useState("");
 
   // API-Aufruf, um Farben der Linien abzurufen
 
@@ -2161,6 +2163,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       try {
         const response1 = await fetch(webserviceGisLinesStatusUrl);
         const data1 = await response1.json();
+        console.log("data1 webserviceGisLinesStatusUrl: ", data1.Statis);
         const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
         const data2 = await response2.json();
 
@@ -2171,14 +2174,29 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           );
           if (matchingLine) {
             colorsByModule[matchingLine.idModul] = stat.PrioColor;
-            //console.log("Übereinstimmung gefunden für", stat);
-            /*   console.log(
+            console.log("Übereinstimmung gefunden für", stat);
+            console.log(
               "stat color",
               stat.PrioColor,
               "matchingLine",
-              matchingLine.idModul
-            ); */
+              matchingLine.idModul,
+              "matchingLine",
+              matchingLine.idLD
+            );
             setLineColors(colorsByModule);
+            setTooltipContent(`
+              <div class="p-0 rounded-lg bg-white bg-opacity-90">
+                <div class="font-bold text-sm text-black">
+                  <span>DpName:  ${stat.DpName || "Unknown"}</span> 
+                </div>
+                <div class="font-bold text-xxs text-blue-700">
+                  <span>ModulName : ${stat.ModulName || "N/A"}</span> 
+                </div>
+                <div class="font-bold text-xxs text-red-700">
+                  <span>Message : ${stat.Message || "N/A"}</span> 
+                </div>
+              </div>
+            `);
             //console.log("colorsByModule: ", colorsByModule);
             //console.log("lineColors: ", lineColors);
           } else {
@@ -2207,10 +2225,49 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     iconAnchor: [5, 5],
   });
   //----------------------- Update lines----------------------------------
+  const [lineStatusData, setLineStatusData] = useState([]);
+  const [linesData, setLinesData] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response1 = await fetch(webserviceGisLinesStatusUrl);
+        const data1 = await response1.json();
+        setLineStatusData(data1.Statis);
+
+        const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
+        const data2 = await response2.json();
+
+        const colorsByModule = {};
+        data1.Statis.forEach((stat) => {
+          const matchingLine = data2.find(
+            (item) => item.idLD === stat.IdLD && item.idModul === stat.Modul
+          );
+          if (matchingLine) {
+            colorsByModule[matchingLine.idModul] = stat.PrioColor;
+            console.log("Übereinstimmung gefunden für: ", stat);
+            setLinesData(matchingLine);
+          }
+        });
+
+        setLineColors(colorsByModule);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+    fetchData();
+  }, []);
+  //---------------------------------------------------------
+  useEffect(() => {
+    console.log("lineStatusData", lineStatusData);
+    console.log("lineData:", linesData);
+  }, [lineStatusData, linesData]);
+  //---------------------------------------------------------
   // Function to initialize markers and polylines
   // Initialisieren eines Zustands für die Speicherung der Polyline-Objekte
   const [polylines, setPolylines] = useState([]);
   const [markers, setMarkers] = useState([]);
+
   useEffect(() => {
     if (!map) return;
 
@@ -2224,6 +2281,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     linePositions.forEach((lineData, lineIndex) => {
       const lineMarkers = [];
       lineData.coordinates.forEach((coord, index) => {
+        console.log("lineData coord", lineData);
         const marker = L.marker(coord, {
           icon: circleIcon,
           draggable: true,
@@ -2240,7 +2298,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           }).addTo(map);
 
           // Hinzufügen eines Tooltips
-          updatedPolyline.bindTooltip("Informationen oder Name der Linie", {
+          updatedPolyline.bindTooltip(tooltipContent, {
             permanent: false, // true, wenn Sie möchten, dass der Tooltip immer sichtbar ist
             direction: "auto", // Kann 'right', 'left', 'top' oder 'bottom' sein
           });
@@ -2299,7 +2357,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         color: lineColors[lineData.idModul] || "#000000",
       }).addTo(map);
 
-      polyline.bindTooltip("Informationen oder Name der Linie", {
+      polyline.bindTooltip(tooltipContent, {
         permanent: false, // true, wenn Sie möchten, dass der Tooltip immer sichtbar ist
         direction: "auto", // Kann 'right', 'left', 'top' oder 'bottom' sein
       });