diff --git a/components/DataSheet.js b/components/DataSheet.js index 429e88066..80fd00779 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -1,10 +1,13 @@ +//components/DataSheet.js import React, { useEffect, useState } from "react"; -import { useRecoilState, useRecoilValue } from "recoil"; +import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; import { gisStationsStaticDistrictState } from "../store/gisStationState"; import { gisSystemStaticState } from "../store/gisSystemState"; import { mapLayersState } from "../store/mapLayersState"; +import { selectedAreaState } from "../store/selectedAreaState"; function DataSheet() { + const setSelectedArea = useSetRecoilState(selectedAreaState); const [mapLayersVisibility, setMapLayersVisibility] = useRecoilState(mapLayersState); const [stationListing, setStationListing] = useState([]); @@ -13,6 +16,14 @@ function DataSheet() { gisStationsStaticDistrictState ); const GisSystemStatic = useRecoilValue(gisSystemStaticState); + // In deiner Dropdown onChange Funktion + const handleAreaChange = (event) => { + const selectedIndex = event.target.options.selectedIndex; + const areaName = event.target.options[selectedIndex].text; + 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); + }; useEffect(() => { // Identify allowed system IDs @@ -29,11 +40,11 @@ function DataSheet() { !seenNames.has(item.Area_Name) && allowedSystems.has(item.System); if (isUnique) { seenNames.add(item.Area_Name); - console.log("Unique area:", item.Area_Name); + //console.log("Unique area:", item.Area_Name); } return isUnique; }); - console.log("GisStationsStaticDistrict:", GisStationsStaticDistrict); + //console.log("GisStationsStaticDistrict:", GisStationsStaticDistrict); // Set the station listings setStationListing( @@ -77,9 +88,7 @@ function DataSheet() {