POI hinzufügen Formular Elemente anordnen

components/DataSheet.js

@@ -1,29 +1,35 @@
 //components/DataSheet.js
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState";
 import { gisSystemStaticState } from "../store/atoms/gisSystemState";
 import { mapLayersState } from "../store/atoms/mapLayersState";
 import { selectedAreaState } from "../store/atoms/selectedAreaState";
 import { zoomTriggerState } from "../store/atoms/zoomTriggerState";
+import { debounce } from "lodash"; // Lodash-Bibliothek für die Debounce-Funktion
 
 function DataSheet() {
+  const [disableZoom, setDisableZoom] = useState(false);
   const setSelectedArea = useSetRecoilState(selectedAreaState);
   const [mapLayersVisibility, setMapLayersVisibility] =
     useRecoilState(mapLayersState);
   const [stationListing, setStationListing] = useState([]);
   const [systemListing, setSystemListing] = useState([]);
+  const [selectedStation, setSelectedStation] = useState(""); // Neuer State für den ausgewählten Station-Wert
+
   const GisStationsStaticDistrict = useRecoilValue(
     gisStationsStaticDistrictState
   );
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
   // In deiner Dropdown onChange Funktion
   const handleAreaChange = (event) => {
+    setSelectedStation(event.target.value);
     const selectedIndex = event.target.options.selectedIndex;
     const areaName = event.target.options[selectedIndex].text;
+    setDisableZoom(true);
     setSelectedArea(areaName);
-    //console.log("Area selected oder areaName in DataSheet.js:", areaName); // Nur zur Bestätigung in der Konsole
-    //console.log("event.target:", event.target);
+    console.log("Selected area normal:", areaName);
+    setTimeout(() => setDisableZoom(false), 1000);
   };
 
   useEffect(() => {
@@ -78,24 +84,54 @@ function DataSheet() {
   }, [GisStationsStaticDistrict, GisSystemStatic]);
   //---------------------------------------------------------
   const handleCheckboxChange = (name, event) => {
+    event.stopPropagation();
     const { checked } = event.target;
-    //console.log(`Checkbox ${name} checked state:`, checked); // Log the checked state of the checkbox
-
-    setMapLayersVisibility((prev) => {
-      const newState = {
-        ...prev,
-        [name]: checked,
-      };
-      //console.log(`New mapLayersVisibility state:`, newState); // Log the new state after update
-      return newState;
-    });
+    setDisableZoom(true);
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      [name]: checked,
+    }));
+    setTimeout(() => setDisableZoom(false), 1000); // Erhöhen Sie die Verzögerung
   };
+
   //---------------------------------------------------------
   const setZoomTrigger = useSetRecoilState(zoomTriggerState);
 
+  // Debounce-Funktion zum Verhindern von zu schnellen Zoom-Auslösungen
+  const debouncedSetZoomTrigger = useCallback(
+    debounce(() => {
+      setZoomTrigger((current) => current + 1);
+    }, 300),
+    [setZoomTrigger]
+  ); // 300 Millisekunden Verzögerung
+
   const handleIconClick = () => {
-    setZoomTrigger((current) => current + 1); // Trigger durch Inkrementierung
+    if (selectedStation !== "Station wählen" && !disableZoom) {
+      console.log("Icon clicked, valid station selected, triggering zoom.");
+      debouncedSetZoomTrigger();
+    } else {
+      console.log(
+        "No zoom triggered due to either 'Station wählen' or disableZoom state."
+      );
+    }
+    setSelectedStation("Station wählen"); // Dies setzt das Dropdown-Menü zurück auf den Standardwert
   };
+
+  useEffect(() => {
+    console.log("Selected station has changed to:", selectedStation);
+    // Führen Sie hier weitere Aktionen basierend auf dem neuen Wert von selectedStation aus
+  }, [selectedStation]); // Abhängigkeit zu selectedStation hinzufügen
+  //---------------------------------------------------------
+  /*   useEffect(() => {
+    if (!disableZoom) {
+      console.log("Zoom enabled, ready to trigger zoom.");
+      // Stellen Sie hier Ihre Logik bereit, um den Zoom zu triggern, wenn dies zulässig ist
+      debouncedSetZoomTrigger();
+    } else {
+      console.log("Zoom disabled, no action will be taken.");
+    }
+  }, [disableZoom]); // Reagiert nur auf Änderungen von disableZoom */
+
   //---------------------------------------------------------
 
   return (
@@ -106,6 +142,7 @@ function DataSheet() {
       <div className="flex flex-col gap-4 p-4">
         <div className="flex items-center justify-between">
           <select
+            value={selectedStation} // Binden des Wertes an den State
             onChange={handleAreaChange} // Verwenden der neuen handleAreaChange Funktion
             id="stationListing"
             className="border-solid-1 p-2 rounded ml-1  font-semibold"