TALAS Checkbox zum ein- und ausblenden von Markers auf dem Map

components/DataSheet.js

@@ -1,12 +1,13 @@
 // components/DataSheet.js
 import React, { useEffect, useState } from "react";
-import { useRecoilValue, useRecoilState } from "recoil";
-import { gisStationsStaticDistrictState } from "../states/gisStationState";
-import { gisSystemStaticState } from "../states/gisSystemState";
-import { mapLayersState } from "../states/mapLayersState";
-
+import { useRecoilState, useRecoilValue } from "recoil";
+import { gisStationsStaticDistrictState } from "../store/gisStationState";
+import { gisSystemStaticState } from "../store/gisSystemState";
+import { mapLayersState } from "../store/mapLayersState";
 function DataSheet() {
-  const [layers, setLayers] = useRecoilState(mapLayersState);
+  const [mapLayersVisibility, setMapLayersVisibility] =
+    useRecoilState(mapLayersState);
+  // useState für uniqueAreas und stationListing
   const [uniqueAreas, setUniqueAreas] = useState([]);
   const [uniqueSystems, setUniqueSystems] = useState([]);
   const [stationListing, setStationListing] = useState([]);
@@ -17,6 +18,13 @@ function DataSheet() {
   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);
@@ -25,6 +33,7 @@ function DataSheet() {
       }
       return isUnique;
     });
+
     setUniqueAreas(filteredAreas);
 
     const seenSystemNames = new Set();
@@ -35,45 +44,58 @@ function DataSheet() {
       }
       return isUnique;
     });
+
     setUniqueSystems(filteredSystems);
 
+    // Erzeugen von stationListing aus uniqueAreas und alphabetisches Sortieren
     const newStationListing = filteredAreas
-      .map((area, index) => ({ id: index + 1, name: area.Area_Name }))
-      .sort((a, b) => a.name.localeCompare(b.name));
+      .map((area, index) => ({
+        id: index + 1, // Zuweisung einer eindeutigen ID
+        name: area.Area_Name,
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name)); // Alphabetisches Sortieren der Namen
+
     setStationListing(newStationListing);
 
-    const newSystemListing = filteredSystems.map((system, index) => ({
-      id: index + 1,
-      name: system.Name.replace(/[^a-zA-Z0-9]/g, ""), // Ersetzen von Sonderzeichen
-      displayName: system.Name, // Beibehalten des originalen Namens für die Anzeige
+    //----------
+    const newSystemListing = filteredSystems.map((area, index) => ({
+      id: index + 1, // Zuweisung einer eindeutigen ID
+      name: area.Name,
     }));
     setSystemListing(newSystemListing);
+    console.log("System Listing:", systemListing);
+  }, [GisStationsStaticDistrict]);
 
-    console.log("Station Listing:", newStationListing);
-    console.log("System Listing:", newSystemListing);
-  }, [GisStationsStaticDistrict, GisSystemStatic]);
+  const [checkedStations, setCheckedStations] = useState({});
 
-  const handleCheckboxChange = (layerKey) => {
-    console.log(
-      `Ändern der Sichtbarkeit für: ${layerKey}, aktueller Wert: ${layers[layerKey]}`
-    );
-    setLayers((prevLayers) => {
-      const newLayers = {
-        ...prevLayers,
-        [layerKey]: !prevLayers[layerKey],
-      };
-      console.log(`Neuer Wert für ${layerKey}: ${newLayers[layerKey]}`);
-      return newLayers;
-    });
+  const handleCheckboxChangeTALAS = (event) => {
+    const { checked } = event.target;
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      TALAS: checked,
+    }));
   };
 
   const handleStationChange = (event) => {
-    console.log("Ausgewählte Station:", event.target.value);
+    console.log("Station selected:", event.target.value);
   };
 
   const resetView = () => {
-    console.log("Ansicht wird zurückgesetzt.");
+    console.log("View has been reset");
   };
+  useEffect(() => {
+    console.log("Checked Stations:", checkedStations);
+    // Wenn systemListing.name == "TALAS" ist, gib in der Konsole aus
+    const talasStation = systemListing.find(
+      (station) => station.name === "TALAS"
+    );
+    if (talasStation) {
+      console.log(
+        "TALAS Station ist gecheckt:",
+        checkedStations[talasStation.id]
+      );
+    }
+  }, [checkedStations, systemListing]);
 
   return (
     <div
@@ -82,6 +104,7 @@ function DataSheet() {
     >
       <div className="flex flex-col gap-4 p-4">
         <div className="flex items-center justify-between">
+          {/* Dropdown */}
           <select
             onChange={handleStationChange}
             id="stationListing"
@@ -94,29 +117,25 @@ function DataSheet() {
               </option>
             ))}
           </select>
+          {/* Icon */}
           <img
             src="/img/expand-icon.svg"
             alt="Expand"
             className="h-6 w-6 ml-2"
           />
         </div>
-        {systemListing.map((station) => (
-          <div key={station.id} className="flex items-center">
-            <input
-              type="checkbox"
-              id={`box-${station.id}`}
-              className="accent-blue-500 checked:bg-blue-500"
-              checked={layers[`show_${station.name}`] || false}
-              onChange={() => handleCheckboxChange(`show_${station.name}`)}
-            />
-            <label
-              htmlFor={`box-${station.id}`}
-              className="text-sm font-bold ml-2"
-            >
-              {station.name}
-            </label>
-          </div>
-        ))}
+
+        {/* Liste der Stationen mit Checkboxen */}
+
+        <div>
+          <input
+            type="checkbox"
+            checked={mapLayersVisibility.TALAS}
+            onChange={handleCheckboxChangeTALAS}
+          />
+          <label className="text-sm font-bold ml-2">TALAS</label>
+          {/* Weitere Inhalte der Datenblattkomponente */}
+        </div>
       </div>
     </div>
   );