Redux, idLD speichern nur Aktive Geräte

utils/createAndSetDevices.js

@@ -1,12 +1,11 @@
 // /utils/createAndSetDevices.js
-import circleIcon from "../components/gisPolylines/icons/CircleIcon";
-import { saveLineData, redrawPolyline } from "./mapUtils";
 import L from "leaflet";
 import "leaflet.smooth_marker_bouncing";
 import { toast } from "react-toastify";
 import * as config from "../config/config.js";
 import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines";
-import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState";
+import { store } from "../redux/store"; // Redux-Store importieren
+import { updateLineStatus } from "../redux/slices/lineVisibilitySlice"; // Redux-Slice importieren
 
 // Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad
 const determinePriority = (iconPath, priorityConfig) => {
@@ -18,30 +17,25 @@ const determinePriority = (iconPath, priorityConfig) => {
   return 5; // Standardpriorität (niedrigste)
 };
 
-// Funktion zum Erstellen und Setzen von Markern
+// **Funktion zum Erstellen und Setzen von Markern**
 export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
   try {
-    // API-Aufrufe zählen
-    let requestCount = localStorage.getItem("gisStationsStaticRequestCount-createDevice") || 0;
-    requestCount++;
-    localStorage.setItem("gisStationsStaticRequestCount-createDevice", requestCount);
-
+    // API-Daten abrufen
     const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
     const jsonResponse = await response1.json();
     const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
     const statusResponse = await response2.json();
 
     if (!jsonResponse.Points || !statusResponse.Statis) {
-      console.error("Fehlende Daten in API-Response!");
+      console.error("❌ Fehlende Daten in API-Response!");
       return;
     }
 
     console.log("✅ API-Daten geladen:", jsonResponse.Points.length, "Punkte gefunden.");
 
-    // Filter: Nur Stationen mit `Active === 1`
+    // **Filter: Nur Stationen mit `Active === 1`**
     const activeStations = jsonResponse.Points.filter((station) => station.System === systemId && station.Active === 1);
-
-    console.log("🔍 Gefilterte aktive Stationen:", activeStations.length);
+    console.log("🔍 Gefilterte aktive Stationen:", activeStations.length, activeStations);
 
     const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s]));
 
@@ -61,62 +55,35 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
         }),
         title: station.LD_Name,
         contextmenu: true,
-        data: { Active: station.Active }, // Speichere Active-Wert für spätere Verwendung
+        data: { Active: station.Active, idLD: station.IdLD }, // Speichere Active & idLD
         zIndexOffset: zIndexOffset,
       });
 
-      marker.on("mouseover", function () {
-        this.openPopup();
-      });
-
-      marker.on("contextmenu", function (event) {
-        if (event && event.preventDefault) event.preventDefault();
-        this.openPopup();
-      });
-
-      document.addEventListener("mouseout", function (event) {
-        if (event.relatedTarget === null || event.relatedTarget.nodeName === "BODY") {
-          enablePolylineEvents(window.polylines, window.lineColors);
-        }
-      });
-
-      marker.on("mouseout", function () {
-        this.closePopup();
-      });
-
-      if (typeof marker.bounce === "function" && statis) {
-        marker.on("add", () => marker.bounce(3));
-      }
-
-      const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
-        .reverse()
-        .map(
-          (status) => `
-          <div class="flex items-center my-1">
-            <div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
-            ${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
-          </div>
-        `
-        )
-        .join("");
-
       marker.bindPopup(`
         <div class="bg-white rounded-lg">
           <span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
           <span class="text-md font-bold text-gray-800"> ${station.Device}</span><br>
           <span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
           <span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
-          <div class="mt-2">${statusInfo}</div>
         </div>
       `);
 
+      // **Speichere `idLD` und `Active` in Redux**
+      store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active }));
+
       return marker;
     });
 
-    console.log("📌 Marker erstellt:", markersData.length);
+    console.log("📌 Marker erstellt:", markersData.length, markersData);
 
-    // Aktualisiere den Marker-Status im State
-    setMarkersFunction(markersData);
+    // **Sicherstellen, dass vorhandene Marker nicht überschrieben werden**
+    setMarkersFunction((prevMarkers) => [...prevMarkers, ...markersData]);
+
+    // **Debugging: Alle Marker in der Konsole anzeigen**
+    console.log(
+      "📌 Alle Marker (Debugging):",
+      markersData.map((m) => m.options.title)
+    );
   } catch (error) {
     console.error("❌ Fehler beim Abrufen der Daten: ", error);
   }