WIP: Add basic structure for edit mode to DataSheet.js

Der Bearbeitungsmodus ist noch nicht vollständig, und es fehlen
einige Funktionalitäten. Reduzierung der Datenbankanfragen noch in Arbeit.

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,7 @@ 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";
 
 function DataSheet() {
   const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
@@ -25,10 +25,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) => {
@@ -45,7 +42,6 @@ function DataSheet() {
         name: area.Area_Name,
       }))
     );
-    //console.log("filteredAreas:", filteredAreas);
 
     const seenSystemNames = new Set();
     const filteredSystems = GisSystemStatic.filter((item) => {
@@ -64,9 +60,6 @@ function DataSheet() {
       }))
     );
   }, [GisStationsStaticDistrict, GisSystemStatic]);
-  //}, []);
-  //-----------------------------------------
-  //-----------------------------------------
 
   const handleCheckboxChange = (name, event) => {
     const { checked } = event.target;
@@ -78,7 +71,6 @@ function DataSheet() {
       };
       return newState;
     });
-    console.log("mapLayersVisibility:", mapLayersVisibility);
   };
 
   const handleIconClick = () => {
@@ -90,12 +82,7 @@ function DataSheet() {
     <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 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
-          >
+          <select onChange={handleAreaChange} id="stationListing" className="border-solid-1 p-2 rounded ml-1 font-semibold">
             <option value="Station wählen">Station wählen</option>
             {stationListing.map((station) => (
               <option key={station.id} value={station.id}>
@@ -105,6 +92,7 @@ function DataSheet() {
           </select>
           <img src="/img/expand-icon.svg" alt="Expand" className="h-6 w-6 ml-2 cursor-pointer" onClick={handleIconClick} />
         </div>
+
         <div>
           {systemListing.map((system) => (
             <React.Fragment key={system.id}>
@@ -128,6 +116,8 @@ function DataSheet() {
             POIs
           </label>
         </div>
+
+        <EditModeToggle />
       </div>
     </div>
   );