From 91197bf86c5253eb4e7ebf104a8ba9c4dec74e93 Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 17 May 2024 10:38:55 +0200 Subject: [PATCH] =?UTF-8?q?POI=20hinzuf=C3=BCgen=20Formular=20Elemente=20a?= =?UTF-8?q?nordnen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/DataSheet.js | 65 +++++++++++---- components/MapComponent.js | 10 +-- components/ShowAddStationPopup.js | 80 ++++++++----------- package-lock.json | 8 +- package.json | 1 + pages/api/talas_v5/area.js | 43 ++++++++++ public/img/icons/pois/poi-marker-icon-1.png | Bin 0 -> 3044 bytes public/img/icons/pois/poi-marker-icon-2.png | Bin 0 -> 2741 bytes public/img/icons/pois/poi-marker-icon-20.png | Bin 0 -> 3236 bytes public/img/icons/pois/poi-marker-icon-21.png | Bin 0 -> 3146 bytes public/img/icons/pois/poi-marker-icon-4.png | Bin 0 -> 2914 bytes public/img/icons/pois/poi-marker-icon-6.png | Bin 0 -> 3216 bytes 12 files changed, 141 insertions(+), 66 deletions(-) create mode 100644 pages/api/talas_v5/area.js create mode 100644 public/img/icons/pois/poi-marker-icon-1.png create mode 100644 public/img/icons/pois/poi-marker-icon-2.png create mode 100644 public/img/icons/pois/poi-marker-icon-20.png create mode 100644 public/img/icons/pois/poi-marker-icon-21.png create mode 100644 public/img/icons/pois/poi-marker-icon-4.png create mode 100644 public/img/icons/pois/poi-marker-icon-6.png 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.----------------------------------------------*/} -
- - -
-
- - +
+
+ +
+
+ +
+