diff --git a/components/DataSheet.js b/components/DataSheet.js index 380592e90..c2c172bd2 100644 --- a/components/DataSheet.js +++ b/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() {
{ className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
+ + {/* {locationDeviceData.----------------------------------------------*/} +
+ + +
+ {/* {locationDeviceData.----------------------------------------------*/}
- {/* {locationDeviceData.----------------------------------------------*/} -
- - -
- {/* {locationDeviceData.----------------------------------------------*/} -
- - -
-
- - +
+
+ +
+
+ +
+