Redux: alle Active 1 und 0 speichern

components/MapComponent.js

@@ -77,8 +77,12 @@ import { useMapComponentState } from "../hooks/useMapComponentState";
 import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState";
 import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
 import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState";
+import { useSelector } from "react-redux";
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
+  // **Hole nur die aktiven idLDs aus Redux**
+  const activeLines = useSelector((state) => state.lineVisibility.activeLines);
+  const activeIds = Object.keys(activeLines).filter((id) => activeLines[id] === 1);
   const polylineVisible = useRecoilValue(polylineLayerVisibleState);
   const [editMode, setEditMode] = useState(false); // editMode Zustand
   const { deviceName, setDeviceName } = useMapComponentState();

pages/api - Kopie/talas_v5_DB/gisLines/readGisLines.js

@@ -1,5 +1,6 @@
 // /pages/api/talas_v5_DB/gisLines/readGisLines.js
 import mysql from "mysql2/promise";
+import { store } from "../../../redux/store"; // Redux-Store importieren
 
 // Erstellen eines Pools von Datenbankverbindungen
 const pool = mysql.createPool({
@@ -18,14 +19,29 @@ export default async function handler(req, res) {
     return res.status(405).json({ error: "Nur GET Methode erlaubt" });
   }
 
-  const query = "SELECT * FROM talas_v5.gis_lines;";
+  // **Hole `idLD`-Werte aus Redux**
+  const state = store.getState();
+  const activeLines = state.lineVisibility.activeLines;
+  const activeIds = Object.keys(activeLines); // Alle `idLD` in Redux
+
+  if (activeIds.length === 0) {
+    return res.status(404).json({ error: "Keine aktiven Geräte in Redux gefunden" });
+  }
+
+  // **SQL-Query mit Filterung**
+  const query = `
+    SELECT * 
+    FROM talas_v5.gis_lines 
+    WHERE idLD IN (${activeIds.map(() => "?").join(",")});`;
 
   try {
-    const [results] = await pool.query(query);
+    console.log("🔍 Aktive Linien in Redux:", activeIds);
+    const [results] = await pool.query(query, activeIds); // Verwende aktive `idLD` als Parameter
     if (results.length > 0) {
       res.status(200).json(results);
+      console.log("✅ GIS-Linien erfolgreich abgerufen:", results.length, "Linien gefunden.");
     } else {
-      res.status(404).json({ error: "Gerät nicht gefunden" });
+      res.status(404).json({ error: "Keine passenden Linien gefunden" });
     }
   } catch (error) {
     console.error("Fehler beim Abrufen der gis_lines:", error);

utils/createAndSetDevices.js

@@ -1,26 +1,26 @@
 // /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 { store } from "../redux/store"; // Redux-Store importieren
-import { updateLineStatus } from "../redux/slices/lineVisibilitySlice"; // Redux-Slice importieren
+import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState";
+import { store } from "../redux/store";
+import { updateLineStatus } from "../redux/slices/lineVisibilitySlice";
 
-// Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad
 const determinePriority = (iconPath, priorityConfig) => {
   for (let priority of priorityConfig) {
     if (iconPath.includes(priority.name.toLowerCase())) {
       return priority.level;
     }
   }
-  return 5; // Standardpriorität (niedrigste)
+  return 5;
 };
 
-// **Funktion zum Erstellen und Setzen von Markern**
 export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
   try {
-    // API-Daten abrufen
     const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
     const jsonResponse = await response1.json();
     const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
@@ -33,12 +33,31 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
 
     console.log("✅ API-Daten geladen:", jsonResponse.Points.length, "Punkte gefunden.");
 
-    // **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, activeStations);
-
+    // Erstelle eine Map für Statusinformationen
     const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s]));
 
+    // Speichere `idLD` und `Active` Werte in Redux
+    const allLines = jsonResponse.Points.filter((station) => station.System === systemId).map((station) => {
+      console.log("------------------------");
+      console.log("station.IdLD: ", station.IdLD);
+      console.log("station.Active: ", station.Active);
+      console.log("------------------------");
+
+      // Redux: Aktualisiere `idLD` und `Active` Werte
+      store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active }));
+
+      return {
+        idLD: station.IdLD,
+        active: station.Active,
+      };
+    });
+
+    console.log("🔄 Alle Linien gespeichert:", allLines);
+
+    // Filtere nur aktive Stationen für Marker
+    const activeStations = jsonResponse.Points.filter((station) => station.System === systemId && station.Active === 1);
+    console.log("🔍 Gefilterte aktive Stationen:", activeStations);
+
     let markersData = activeStations.map((station) => {
       const statis = statisMap.get(station.IdLD);
       const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`;
@@ -53,9 +72,8 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
           iconAnchor: [12, 41],
           popupAnchor: [1, -34],
         }),
-        title: station.LD_Name,
-        contextmenu: true,
-        data: { Active: station.Active, idLD: station.IdLD }, // Speichere Active & idLD
+        areaName: station.Area_Name,
+        link: station.Link,
         zIndexOffset: zIndexOffset,
       });
 
@@ -65,26 +83,52 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
           <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">
+            ${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("")}
+          </div>
         </div>
       `);
 
-      // **Speichere `idLD` und `Active` in Redux**
-      store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active }));
+      marker.on("mouseover", function () {
+        this.openPopup();
+      });
+
+      marker.on("mouseout", function () {
+        this.closePopup();
+      });
+
+      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);
+        }
+      });
+
+      if (typeof marker.bounce === "function" && statis) {
+        marker.on("add", () => marker.bounce(3));
+      }
 
       return marker;
     });
 
     console.log("📌 Marker erstellt:", markersData.length, 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)
-    );
+    setMarkersFunction(markersData);
   } catch (error) {
-    console.error("❌ Fehler beim Abrufen der Daten: ", error);
+    console.error("❌ Fehler beim Abrufen der Daten in createAndSetDevices.js: ", error);
   }
 };