Checkboxen switch

components/DataSheet.js

@@ -1,12 +1,12 @@
-//components/DataSheet.js
+// 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";
+
 function DataSheet() {
   const [layers, setLayers] = useRecoilState(mapLayersState);
-  // useState für uniqueAreas und stationListing
   const [uniqueAreas, setUniqueAreas] = useState([]);
   const [uniqueSystems, setUniqueSystems] = useState([]);
   const [stationListing, setStationListing] = useState([]);
@@ -17,13 +17,6 @@ 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);
@@ -32,7 +25,6 @@ function DataSheet() {
       }
       return isUnique;
     });
-
     setUniqueAreas(filteredAreas);
 
     const seenSystemNames = new Set();
@@ -43,44 +35,44 @@ function DataSheet() {
       }
       return isUnique;
     });
-
     setUniqueSystems(filteredSystems);
 
-    // Erzeugen von stationListing aus uniqueAreas und alphabetisches Sortieren
     const newStationListing = filteredAreas
-      .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
-
+      .map((area, index) => ({ id: index + 1, name: area.Area_Name }))
+      .sort((a, b) => a.name.localeCompare(b.name));
     setStationListing(newStationListing);
 
-    //----------
-    const newSystemListing = filteredSystems.map((area, index) => ({
-      id: index + 1, // Zuweisung einer eindeutigen ID
-      name: area.Name,
+    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
     }));
     setSystemListing(newSystemListing);
-    // console.log("System Listing:", systemListing);
-  }, [GisStationsStaticDistrict]);
 
-  const [checkedStations, setCheckedStations] = useState({});
+    console.log("Station Listing:", newStationListing);
+    console.log("System Listing:", newSystemListing);
+  }, [GisStationsStaticDistrict, GisSystemStatic]);
 
-  const handleCheckboxChange = (layerName) => {
-    // Umschalten der Sichtbarkeit im Zustand
-    setLayers((prevLayers) => ({
-      ...prevLayers,
-      [layerName]: !prevLayers[layerName], // Umschalten des Booleschen Werts
-    }));
+  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 handleStationChange = (event) => {
-    // console.log("Station selected:", event.target.value);
+    console.log("Ausgewählte Station:", event.target.value);
   };
 
   const resetView = () => {
-    // console.log("View has been reset");
+    console.log("Ansicht wird zurückgesetzt.");
   };
 
   return (
@@ -90,7 +82,6 @@ function DataSheet() {
     >
       <div className="flex flex-col gap-4 p-4">
         <div className="flex items-center justify-between">
-          {/* Dropdown */}
           <select
             onChange={handleStationChange}
             id="stationListing"
@@ -103,23 +94,20 @@ function DataSheet() {
               </option>
             ))}
           </select>
-          {/* Icon */}
           <img
             src="/img/expand-icon.svg"
             alt="Expand"
             className="h-6 w-6 ml-2"
           />
         </div>
-
-        {/* Liste der Stationen mit Checkboxen */}
         {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[station.name] || false} // Zustand von Recoil verwenden
-              onChange={() => handleCheckboxChange(station.name)}
+              checked={layers[`show_${station.name}`] || false}
+              onChange={() => handleCheckboxChange(`show_${station.name}`)}
             />
             <label
               htmlFor={`box-${station.id}`}