From 6dbd856380cc9bf4ef13751a2cf0f19b2c219d19 Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 17 May 2024 14:59:47 +0200 Subject: [PATCH] =?UTF-8?q?=20Bug=20Fix=20=20Der=20Bug=20in=20der=20Anwend?= =?UTF-8?q?ung=20tritt=20auf,=20wenn=20eine=20Checkbox=20angeklickt=20wird?= =?UTF-8?q?=20und=20unerwartet=20eine=20Zoom-Funktion=20ausgel=C3=B6st=20w?= =?UTF-8?q?ird.=20=20Dies=20geschieht=20nach=20einer=20Auswahl=20aus=20ein?= =?UTF-8?q?em=20Dropdown-Men=C3=BC.=20Wenn=20eine=20Option=20im=20Dropdown?= =?UTF-8?q?-Men=C3=BC=20ausgew=C3=A4hlt=20wird,=20=20scheint=20der=20darau?= =?UTF-8?q?f=20folgende=20Klick=20auf=20eine=20Checkbox=20dazu=20zu=20f?= =?UTF-8?q?=C3=BChren,=20dass=20auf=20die=20zuletzt=20ausgew=C3=A4hlte=20P?= =?UTF-8?q?osition=20im=20Dropdown-Men=C3=BC=20=20gezoomt=20wird.=20Die=20?= =?UTF-8?q?Zustands=C3=A4nderungen=20oder=20Event-Handler=20in=20der=20Anw?= =?UTF-8?q?endung=20interagieren=20auf=20eine=20nicht=20beabsichtigte=20We?= =?UTF-8?q?ise,=20=20wodurch=20diese=20unerw=C3=BCnschte=20Zoom-Aktion=20a?= =?UTF-8?q?ktiviert=20wird.=20sogar=20wenn=20Info=20geklickt=20wird.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/DataSheet.js | 70 +++++--------------- components/MapComponent.js | 11 ++- components/PoiUtils.js | 55 +++++++++++++++ public/img/icons/pois/poi-marker-icon-0.png | Bin 0 -> 2399 bytes 4 files changed, 82 insertions(+), 54 deletions(-) create mode 100644 components/PoiUtils.js create mode 100644 public/img/icons/pois/poi-marker-icon-0.png 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() {