diff --git a/components/DataSheet.js b/components/DataSheet.js index 1205df266..e48f98c5d 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -1,32 +1,45 @@ import React, { useEffect, useState } from "react"; -import { useRecoilValue } from 'recoil'; -import { gisStationsStaticDistrictState } from '../features/gisStationState'; +import { useRecoilValue } from "recoil"; +import { gisStationsStaticDistrictState } from "../features/gisStationState"; function DataSheet() { - const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState); - useEffect(() => { - console.log('GisStationsStaticDistrict in DataSheet:', GisStationsStaticDistrict); - }, [GisStationsStaticDistrict]); - const stationListing = [ - { id: 1, name: "Ammersricht BZR (FGN)" }, - { id: 2, name: "Bad-Bentheim" }, - { id: 3, name: "Gevelsberg" }, - { id: 4, name: "Köln" }, - { id: 5, name: "Olfen-Selm" }, - { id: 6, name: "Plettenberg" }, - { id: 7, name: "Renzenhof (RG)" }, - { id: 8, name: "Schlüchtern II" }, - { id: 9, name: "Wuppertal" }, - // Füge hier weitere Stationen hinzu, falls nötig - ]; - - const [checkedStations, setCheckedStations] = useState( - stationListing.reduce((acc, station) => { - acc[station.id] = false; - return acc; - }, {}) + // useState für uniqueAreas und stationListing + const [uniqueAreas, setUniqueAreas] = useState([]); + const [stationListing, setStationListing] = useState([]); + const GisStationsStaticDistrict = useRecoilValue( + gisStationsStaticDistrictState ); + useEffect(() => { + console.log( + "GisStationsStaticDistrict in DataSheet:", + GisStationsStaticDistrict + ); + + const seenNames = new Set(); + const filteredAreas = GisStationsStaticDistrict.filter((item) => { + const isUnique = !seenNames.has(item.Area_Name); + if (isUnique) { + seenNames.add(item.Area_Name); + } + return isUnique; + }); + + setUniqueAreas(filteredAreas); + + // Erzeugen von stationListing aus uniqueAreas und alphabetisches Sortieren + const newStationListing = filteredAreas + .map((area, index) => ({ + id: index + 1, // Zuweisung einer eindeutigen ID + name: area.Area_Name, + })) + .sort((a, b) => a.name.localeCompare(b.name)); // Alphabetisches Sortieren der Namen + + setStationListing(newStationListing); + }, [GisStationsStaticDistrict]); + + const [checkedStations, setCheckedStations] = useState({}); + const handleCheckboxChange = (id) => { setCheckedStations((prev) => ({ ...prev, @@ -48,12 +61,12 @@ function DataSheet() { className="absolute top-3 right-3 w-1/6 min-w-[300px] z-10 bg-white p-2 rounded-lg shadow-lg" >
-
+
{/* Dropdown */} {/* Icon */} Expand
@@ -77,7 +90,7 @@ function DataSheet() { type="checkbox" id={`box-${station.id}`} className="accent-blue-500 checked:bg-blue-500" - checked={checkedStations[station.id]} + checked={checkedStations[station.id] || false} onChange={() => handleCheckboxChange(station.id)} />