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 */}
@@ -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)}
/>