diff --git a/components/DataSheet.js b/components/DataSheet.js index c2c172bd2..3d5772899 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -1,35 +1,31 @@ //components/DataSheet.js -import React, { useEffect, useState, useCallback } from "react"; +import React, { useEffect, useState } 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); + //useState selectedStation setzen + setSelectedArea(areaName); - console.log("Selected area normal:", areaName); - setTimeout(() => setDisableZoom(false), 1000); + console.log("Area selected oder areaName in DataSheet.js:", areaName); // Nur zur Bestätigung in der Konsole + //console.log("event.target:", event.target); }; useEffect(() => { @@ -84,54 +80,25 @@ function DataSheet() { }, [GisStationsStaticDistrict, GisSystemStatic]); //--------------------------------------------------------- const handleCheckboxChange = (name, event) => { - event.stopPropagation(); const { checked } = event.target; - setDisableZoom(true); - setMapLayersVisibility((prev) => ({ - ...prev, - [name]: checked, - })); - setTimeout(() => setDisableZoom(false), 1000); // Erhöhen Sie die Verzögerung - }; + 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; + }); + }; //--------------------------------------------------------- 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 = () => { - 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 + setSelectedArea("Station wählen"); // Setzt die Dropdown-Auswahl zurück auf "Station wählen" + setZoomTrigger((current) => current + 1); // Trigger durch Inkrementierung }; - - 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 ( @@ -142,12 +109,11 @@ function DataSheet() {