SystemListing für Checkboxen im Card kommt von API GisSystemStatic

components/DataSheet.js

@@ -1,21 +1,26 @@
 import React, { useEffect, useState } from "react";
 import { useRecoilValue } from "recoil";
 import { gisStationsStaticDistrictState } from "../features/gisStationState";
-
+import { gisSystemStaticState } from "../features/gisSystemState";
 function DataSheet() {
   // useState für uniqueAreas und stationListing
   const [uniqueAreas, setUniqueAreas] = useState([]);
+  const [uniqueSystems, setUniqueSystems] = useState([]);
   const [stationListing, setStationListing] = useState([]);
+  const [systemListing, setSystemListing] = useState([]);
   const GisStationsStaticDistrict = useRecoilValue(
     gisStationsStaticDistrictState
   );
+  const GisSystemStatic = useRecoilValue(gisSystemStaticState);
 
   useEffect(() => {
     console.log(
       "GisStationsStaticDistrict in DataSheet:",
       GisStationsStaticDistrict
     );
+    console.log("GisSystemStatic in DataSheet:", GisSystemStatic);
 
+    // Filtern der eindeutigen Gebiete (Areas) und alphabetisches Sortieren
     const seenNames = new Set();
     const filteredAreas = GisStationsStaticDistrict.filter((item) => {
       const isUnique = !seenNames.has(item.Area_Name);
@@ -27,6 +32,17 @@ function DataSheet() {
 
     setUniqueAreas(filteredAreas);
 
+    const seenSystemNames = new Set();
+    const filteredSystems = GisSystemStatic.filter((item) => {
+      const isUnique = !seenSystemNames.has(item.Name);
+      if (isUnique) {
+        seenSystemNames.add(item.Name);
+      }
+      return isUnique;
+    });
+
+    setUniqueSystems(filteredSystems);
+
     // Erzeugen von stationListing aus uniqueAreas und alphabetisches Sortieren
     const newStationListing = filteredAreas
       .map((area, index) => ({
@@ -36,6 +52,14 @@ function DataSheet() {
       .sort((a, b) => a.name.localeCompare(b.name)); // Alphabetisches Sortieren der Namen
 
     setStationListing(newStationListing);
+
+    //----------
+    const newSystemListing = filteredSystems.map((area, index) => ({
+      id: index + 1, // Zuweisung einer eindeutigen ID
+      name: area.Name,
+    }));
+    setSystemListing(newSystemListing);
+    console.log("System Listing:", systemListing);
   }, [GisStationsStaticDistrict]);
 
   const [checkedStations, setCheckedStations] = useState({});
@@ -84,7 +108,7 @@ function DataSheet() {
         </div>
 
         {/* Liste der Stationen mit Checkboxen */}
-        {stationListing.map((station) => (
+        {systemListing.map((station) => (
           <div key={station.id} className="flex items-center">
             <input
               type="checkbox"

components/MapComponent.js

@@ -9,19 +9,22 @@ import dynamic from "next/dynamic";
 import "leaflet.smooth_marker_bouncing";
 import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
 import DataSheet from "../components/DataSheet";
-import { useRecoilState } from 'recoil';
+import { useRecoilState } from "recoil";
-import { gisStationsStaticDistrictState } from '../features/gisStationState';
+import { gisStationsStaticDistrictState } from "../features/gisStationState";
+import { gisSystemStaticState } from "../features/gisSystemState";
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
   const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
   const [map, setMap] = useState(null); // Zustand der Karteninstanz
   const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung
-  const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useRecoilState(gisStationsStaticDistrictState);
+  const [GisStationsStaticDistrict, setGisStationsStaticDistrict] =
+    useRecoilState(gisStationsStaticDistrictState);
   const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState(
     []
   ); // Zustand für Statusdaten
   const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten
-  const [GisSystemStatic, setGisSystemStatic] = useState([]); // Zustand für Systemdaten
+  const [GisSystemStatic, setGisSystemStatic] =
+    useRecoilState(gisSystemStaticState); // Zustand für Systemdaten
   const [DataIcons, setDataIcons] = useState([]); // Zustand für Icon-Daten
 
   // Konstanten für die URLs
@@ -171,6 +174,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
         if (jsonResponse && jsonResponse.Systems) {
           setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems'
+          console.log("GisSystemStatic:", jsonResponse.Systems);
         } else {
           console.error(
             'Erwartete Daten im "Systems"-Array nicht gefunden',
@@ -279,7 +283,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, [mapRef, map]); // Abhängigkeiten prüfen
 
   // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
-/*     useEffect(() => {
+  /*     useEffect(() => {
     // Remove old markers
     if (map) {
       map.eachLayer((layer) => {
@@ -549,7 +553,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   // minor-marker-icon-23.png
 
   // Marker hinzufügen für GisStationsStaticDistrict
- /*  useEffect(() => {
+  /*  useEffect(() => {
     // Stellen Sie sicher, dass sowohl `map` als auch `oms` initialisiert sind
     if (!map || !oms) {
       console.error("Map or OMS is not initialized");
@@ -684,33 +688,32 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           fetch(mapGisStationsStatusDistrictUrl),
           // Andere relevante API-Anfragen
         ]);
-        const data = await Promise.all(responses.map(res => res.json()));
+        const data = await Promise.all(responses.map((res) => res.json()));
-  
+
         if (data[0] && data[0].Points) {
           setGisStationsStaticDistrict(data[0].Points);
         } else {
-          console.error('Daten für GisStationsStaticDistrict nicht gefunden');
+          console.error("Daten für GisStationsStaticDistrict nicht gefunden");
           setGisStationsStaticDistrict([]);
         }
-  
+
         if (data[1] && data[1].Statis) {
           setGisStationsStatusDistrict(data[1].Statis);
         } else {
-          console.error('Daten für GisStationsStatusDistrict nicht gefunden');
+          console.error("Daten für GisStationsStatusDistrict nicht gefunden");
           setGisStationsStatusDistrict([]);
         }
-  
+
         // Weitere Datenverarbeitung...
-  
       } catch (error) {
         console.error("Fehler beim Laden der Daten: ", error);
         // Setzen Sie Zustände auf leere Arrays oder Fehlerzustände
       }
     };
-  
+
     fetchData();
   }, []);
-  
+
   useEffect(() => {
     if (!map) return;
     map.eachLayer((layer) => {
@@ -718,7 +721,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         map.removeLayer(layer);
       }
     });
-  
+
     // Marker für lokale MySQL-Daten
     locations.forEach((location) => {
       const { latitude, longitude } = parsePoint(location.position);
@@ -753,7 +756,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
       marker.addTo(map);
     });
-  
+
     // Marker für GisStationsStaticDistrict
     GisStationsStaticDistrict.forEach((station) => {
       // Filter für Statusobjekte dieser spezifischen Station
@@ -826,28 +829,32 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         });
         marker.bounce(3);
       }
-           // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht
+      // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht
-           if (station.LD_Name === "GMA Littwin (TEST)") {
+      if (station.LD_Name === "GMA Littwin (TEST)") {
-            marker.bindTooltip(
+        marker
-              `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.Area_Name}</div>`,
+          .bindTooltip(
-              {
+            `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.Area_Name}</div>`,
-                permanent: true,
+            {
-                direction: "right",
+              permanent: true,
-                opacity: 1, // Tooltip immer sichtbar
+              direction: "right",
-                offset: L.point({ x: 10, y: 0 }),
+              opacity: 1, // Tooltip immer sichtbar
-              }
+              offset: L.point({ x: 10, y: 0 }),
-            ).addTo(GMA);
+            }
-          } else {
+          )
-            marker.bindTooltip(
+          .addTo(GMA);
-              `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.LD_Name}</div>`,
+      } else {
-              {
+        marker
-                permanent: false,
+          .bindTooltip(
-                direction: "right",
+            `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.LD_Name}</div>`,
-                opacity: 0,
+            {
-                offset: L.point({ x: 10, y: 0 }),
+              permanent: false,
-              }
+              direction: "right",
-            ).addTo(GMA);
+              opacity: 0,
-          }
+              offset: L.point({ x: 10, y: 0 }),
+            }
+          )
+          .addTo(GMA);
+      }
       // Marker zu OMS und der Karte hinzufügen
       oms.addMarker(marker);
       marker.addTo(map).bindPopup(`
@@ -858,10 +865,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         ${statusInfo}<br>
       `);
       let LocID = station.IdLocation;
-
     });
   }, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich
-  
 
   //------------------------------------------ */
   let uniqueIdLDsData = [];

features/gisSystemState.js

@@ -0,0 +1,7 @@
+// Pfad: features/gisStationState.js
+import { atom } from "recoil";
+
+export const gisSystemStaticState = atom({
+  key: "gisSystemStatic", // Eindeutiger Schlüssel (innerhalb des Projekts)
+  default: [], // Standardwert (Anfangszustand)
+});