Version 1.0.2 mit node_modules Verzeichnis

components/DataSheet.js

@@ -1,4 +1,3 @@
-// components/DataSheet.js
 import React, { useEffect, useState } from "react";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState";
@@ -7,6 +6,8 @@ import { mapLayersState } from "../store/atoms/mapLayersState";
 import { selectedAreaState } from "../store/atoms/selectedAreaState";
 import { zoomTriggerState } from "../store/atoms/zoomTriggerState";
 import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState";
+import EditModeToggle from "./EditModeToggle";
+import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState"; // Import für Polyline-Visibility
 
 function DataSheet() {
   const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
@@ -17,6 +18,22 @@ function DataSheet() {
   const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
   const setZoomTrigger = useSetRecoilState(zoomTriggerState);
+  const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines
+  useEffect(() => {
+    const storedPoiVisible = localStorage.getItem("poiVisible");
+    if (storedPoiVisible !== null) {
+      setPoiVisible(storedPoiVisible === "true");
+    }
+    const storedPolylineVisible = localStorage.getItem("polylineVisible");
+    if (storedPolylineVisible !== null) {
+      setPolylineVisible(storedPolylineVisible === "true");
+    }
+
+    const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility");
+    if (storedMapLayersVisibility) {
+      setMapLayersVisibility(JSON.parse(storedMapLayersVisibility));
+    }
+  }, [setPoiVisible, setMapLayersVisibility]);
 
   const handleAreaChange = (event) => {
     const selectedIndex = event.target.options.selectedIndex;
@@ -25,10 +42,7 @@ function DataSheet() {
   };
 
   useEffect(() => {
-    console.log("GisStationsStaticDistrict:", GisStationsStaticDistrict);
-    console.log("GisSystemStatic:", GisSystemStatic);
     const allowedSystems = new Set(GisSystemStatic.filter((system) => system.Allow === 1).map((system) => system.IdSystem));
-    console.log("allowedSystems:", allowedSystems);
 
     const seenNames = new Set();
     const filteredAreas = GisStationsStaticDistrict.filter((item) => {
@@ -48,11 +62,11 @@ function DataSheet() {
         name: area.Area_Name,
       }))
     );
-    //console.log("filteredAreas:", filteredAreas);
 
     const seenSystemNames = new Set();
     const filteredSystems = GisSystemStatic.filter((item) => {
       const formattedName = item.Name.replace(/[\s\-]+/g, "");
+      console.log(formattedName);
       const isUnique = !seenSystemNames.has(formattedName) && item.Allow === 1;
       if (isUnique) {
         seenSystemNames.add(formattedName);
@@ -67,9 +81,6 @@ function DataSheet() {
       }))
     );
   }, [GisStationsStaticDistrict, GisSystemStatic]);
-  //}, []);
-  //-----------------------------------------
-  //-----------------------------------------
 
   const handleCheckboxChange = (name, event) => {
     const { checked } = event.target;
@@ -79,26 +90,32 @@ function DataSheet() {
         ...prev,
         [name]: checked,
       };
+      localStorage.setItem("mapLayersVisibility", JSON.stringify(newState)); // Store in localStorage
       return newState;
     });
-    console.log("mapLayersVisibility:", mapLayersVisibility);
+  };
+
+  const handlePoiCheckboxChange = (event) => {
+    const { checked } = event.target;
+    setPoiVisible(checked);
+    localStorage.setItem("poiVisible", checked); // Store POI visibility in localStorage
   };
 
   const handleIconClick = () => {
     setSelectedArea("Station wählen");
     setZoomTrigger((current) => current + 1);
   };
+  const handlePolylineCheckboxChange = (event) => {
+    const { checked } = event.target;
+    setPolylineVisible(checked);
+    localStorage.setItem("polylineVisible", checked); // Store Polyline visibility in localStorage
+  };
 
   return (
-    <div id="mainDataSheet" className="absolute top-3 right-3 w-1/6 min-w-[300px] z-10 bg-white p-2 rounded-lg shadow-lg">
+    <div id="mainDataSheet" className="absolute top-3 right-3 w-1/6 min-w-[300px] max-w-[400px] z-10 bg-white p-2 rounded-lg shadow-lg">
       <div className="flex flex-col gap-4 p-4">
-        <div className="flex items-center justify-between">
-          <select
-            onChange={handleAreaChange}
-            id="stationListing"
-            className="border-solid-1 p-2 rounded ml-1 font-semibold"
-            role="combobox" // Ensure the correct role is set
-          >
+        <div className="flex items-center justify-between space-x-2">
+          <select onChange={handleAreaChange} id="stationListing" className="border-solid-1 p-2 rounded ml-1 font-semibold" style={{ minWidth: "150px", maxWidth: "200px" }}>
             <option value="Station wählen">Station wählen</option>
             {stationListing.map((station) => (
               <option key={station.id} value={station.id}>
@@ -106,30 +123,38 @@ function DataSheet() {
               </option>
             ))}
           </select>
-          <img src="/img/expand-icon.svg" alt="Expand" className="h-6 w-6 ml-2 cursor-pointer" onClick={handleIconClick} />
+          <div className="flex items-center space-x-2">
+            <EditModeToggle />
+            <img src="/img/expand-icon.svg" alt="Expand" className="h-6 w-6 cursor-pointer" onClick={handleIconClick} />
+          </div>
         </div>
-        <div>
+
+        {/* Checkboxen in einem gemeinsamen Container */}
+        <div className="flex flex-col gap-2">
           {systemListing.map((system) => (
             <React.Fragment key={system.id}>
-              <input type="checkbox" checked={mapLayersVisibility[system.name] || false} onChange={(e) => handleCheckboxChange(system.name, e)} id={`system-${system.id}`} />
-              <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
-                {system.name}
-              </label>
-              <br />
+              <div className="flex items-center">
+                <input type="checkbox" checked={mapLayersVisibility[system.name] || false} onChange={(e) => handleCheckboxChange(system.name, e)} id={`system-${system.id}`} />
+                <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
+                  {system.name}
+                </label>
+              </div>
             </React.Fragment>
           ))}
-          <input
-            type="checkbox"
-            checked={poiVisible}
-            onChange={(e) => {
-              const checked = e.target.checked;
-              setPoiVisible(checked);
-            }}
-            id="poi-checkbox"
-          />
-          <label htmlFor="poi-checkbox" className="text-sm ml-2">
-            POIs
-          </label>
+
+          <div className="flex items-center">
+            <input type="checkbox" checked={poiVisible} onChange={handlePoiCheckboxChange} id="poi-checkbox" />
+            <label htmlFor="poi-checkbox" className="text-sm ml-2">
+              POIs
+            </label>
+          </div>
+
+          <div className="flex items-center">
+            <input type="checkbox" checked={polylineVisible} onChange={handlePolylineCheckboxChange} id="polyline-checkbox" />
+            <label htmlFor="polyline-checkbox" className="text-sm ml-2">
+              Kabelstrecken
+            </label>
+          </div>
         </div>
       </div>
     </div>