WIP: Checkboxen für Marker deaktivieren wenn EditMode aktive ist

components/DataSheet.js

@@ -10,6 +10,7 @@ import EditModeToggle from "./EditModeToggle";
 import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState"; // Import für Polyline-Visibility
 
 function DataSheet() {
+  const [editMode, setEditMode] = useState(false); // Zustand für editMode
   const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
   const setSelectedArea = useSetRecoilState(selectedAreaState);
   const [mapLayersVisibility, setMapLayersVisibility] = useRecoilState(mapLayersState);
@@ -20,6 +21,7 @@ function DataSheet() {
   const setZoomTrigger = useSetRecoilState(zoomTriggerState);
   const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines
   useEffect(() => {
+    // LocalStorage Werte laden
     const storedPoiVisible = localStorage.getItem("poiVisible");
     if (storedPoiVisible !== null) {
       setPoiVisible(storedPoiVisible === "true");
@@ -33,6 +35,10 @@ function DataSheet() {
     if (storedMapLayersVisibility) {
       setMapLayersVisibility(JSON.parse(storedMapLayersVisibility));
     }
+
+    // EditMode lesen
+    const storedEditMode = localStorage.getItem("editMode");
+    setEditMode(storedEditMode === "true");
   }, [setPoiVisible, setMapLayersVisibility]);
 
   const handleAreaChange = (event) => {
@@ -79,6 +85,7 @@ function DataSheet() {
   }, [GisStationsStaticDistrict, GisSystemStatic]);
 
   const handleCheckboxChange = (key, event) => {
+    if (editMode) return; // Checkbox deaktiviert bei aktivem EditMode
     const { checked } = event.target;
     setMapLayersVisibility((prev) => {
       const newState = {
@@ -129,19 +136,18 @@ function DataSheet() {
         {/* Checkboxen in einem gemeinsamen Container */}
         <div className="flex flex-col gap-2">
           {systemListing.map((system) => (
-            <React.Fragment key={system.id}>
-              <div className="flex items-center">
-                <input
-                  type="checkbox"
-                  checked={mapLayersVisibility[system.key] || false} // Schlüssel für Logik
-                  onChange={(e) => handleCheckboxChange(system.key, e)} // Schlüssel für Logik
-                  id={`system-${system.id}`}
-                />
-                <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
-                  {system.name} {/* Anzeigename */}
-                </label>
-              </div>
-            </React.Fragment>
+            <div className="flex items-center" key={system.id}>
+              <input
+                type="checkbox"
+                checked={mapLayersVisibility[system.key] || false}
+                onChange={(e) => handleCheckboxChange(system.key, e)}
+                id={`system-${system.id}`}
+                disabled={editMode} // Checkbox deaktiviert, wenn editMode aktiv ist
+              />
+              <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
+                {system.name}
+              </label>
+            </div>
           ))}
 
           <div className="flex items-center">