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 { gisStationsStaticDistrictState } from '../features/gisStationState';
+import { useRecoilState } from "recoil";
+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',
@@ -684,24 +688,23 @@ 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
@@ -828,7 +831,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       }
       // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht
       if (station.LD_Name === "GMA Littwin (TEST)") {
-            marker.bindTooltip(
+        marker
+          .bindTooltip(
             `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.Area_Name}</div>`,
             {
               permanent: true,
@@ -836,9 +840,11 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
               opacity: 1, // Tooltip immer sichtbar
               offset: L.point({ x: 10, y: 0 }),
             }
-            ).addTo(GMA);
+          )
+          .addTo(GMA);
       } else {
-            marker.bindTooltip(
+        marker
+          .bindTooltip(
             `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.LD_Name}</div>`,
             {
               permanent: false,
@@ -846,7 +852,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
               opacity: 0,
               offset: L.point({ x: 10, y: 0 }),
             }
-            ).addTo(GMA);
+          )
+          .addTo(GMA);
       }
       // Marker zu OMS und der Karte hinzufügen
       oms.addMarker(marker);
@@ -858,11 +865,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         ${statusInfo}<br>
       `);
       let LocID = station.IdLocation;
-
     });
   }, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich
 
-
   //------------------------------------------ */
   let uniqueIdLDsData = [];
   let Tooltip = [];

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)
+});