126 lines
4.1 KiB
JavaScript
126 lines
4.1 KiB
JavaScript
// components/DataSheet.js
|
|
import React, { useEffect, useState } from "react";
|
|
import { useRecoilValue, useRecoilState } from "recoil";
|
|
import { gisStationsStaticDistrictState } from "../states/gisStationState";
|
|
import { gisSystemStaticState } from "../states/gisSystemState";
|
|
import { mapLayersState } from "../states/mapLayersState";
|
|
|
|
function DataSheet() {
|
|
const [layers, setLayers] = useRecoilState(mapLayersState);
|
|
const [uniqueAreas, setUniqueAreas] = useState([]);
|
|
const [uniqueSystems, setUniqueSystems] = useState([]);
|
|
const [stationListing, setStationListing] = useState([]);
|
|
const [systemListing, setSystemListing] = useState([]);
|
|
const GisStationsStaticDistrict = useRecoilValue(
|
|
gisStationsStaticDistrictState
|
|
);
|
|
const GisSystemStatic = useRecoilValue(gisSystemStaticState);
|
|
|
|
useEffect(() => {
|
|
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);
|
|
|
|
const seenSystemNames = new Set();
|
|
const filteredSystems = GisSystemStatic.filter((item) => {
|
|
const isUnique = !seenSystemNames.has(item.Name);
|
|
if (isUnique) {
|
|
seenSystemNames.add(item.Name);
|
|
}
|
|
return isUnique;
|
|
});
|
|
setUniqueSystems(filteredSystems);
|
|
|
|
const newStationListing = filteredAreas
|
|
.map((area, index) => ({ id: index + 1, name: area.Area_Name }))
|
|
.sort((a, b) => a.name.localeCompare(b.name));
|
|
setStationListing(newStationListing);
|
|
|
|
const newSystemListing = filteredSystems.map((system, index) => ({
|
|
id: index + 1,
|
|
name: system.Name.replace(/[^a-zA-Z0-9]/g, ""), // Ersetzen von Sonderzeichen
|
|
displayName: system.Name, // Beibehalten des originalen Namens für die Anzeige
|
|
}));
|
|
setSystemListing(newSystemListing);
|
|
|
|
console.log("Station Listing:", newStationListing);
|
|
console.log("System Listing:", newSystemListing);
|
|
}, [GisStationsStaticDistrict, GisSystemStatic]);
|
|
|
|
const handleCheckboxChange = (layerKey) => {
|
|
console.log(
|
|
`Ändern der Sichtbarkeit für: ${layerKey}, aktueller Wert: ${layers[layerKey]}`
|
|
);
|
|
setLayers((prevLayers) => {
|
|
const newLayers = {
|
|
...prevLayers,
|
|
[layerKey]: !prevLayers[layerKey],
|
|
};
|
|
console.log(`Neuer Wert für ${layerKey}: ${newLayers[layerKey]}`);
|
|
return newLayers;
|
|
});
|
|
};
|
|
|
|
const handleStationChange = (event) => {
|
|
console.log("Ausgewählte Station:", event.target.value);
|
|
};
|
|
|
|
const resetView = () => {
|
|
console.log("Ansicht wird zurückgesetzt.");
|
|
};
|
|
|
|
return (
|
|
<div
|
|
id="mainDataSheet"
|
|
className="absolute top-3 right-3 w-1/6 min-w-[300px] z-10 bg-white p-2 rounded-lg shadow-lg"
|
|
>
|
|
<div className="flex flex-col gap-4 p-4">
|
|
<div className="flex items-center justify-between">
|
|
<select
|
|
onChange={handleStationChange}
|
|
id="stationListing"
|
|
className="border-solid-1 p-2 rounded ml-1"
|
|
>
|
|
<option>Station wählen</option>
|
|
{stationListing.map((station) => (
|
|
<option key={station.id} value={station.id}>
|
|
{station.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<img
|
|
src="/img/expand-icon.svg"
|
|
alt="Expand"
|
|
className="h-6 w-6 ml-2"
|
|
/>
|
|
</div>
|
|
{systemListing.map((station) => (
|
|
<div key={station.id} className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
id={`box-${station.id}`}
|
|
className="accent-blue-500 checked:bg-blue-500"
|
|
checked={layers[`show_${station.name}`] || false}
|
|
onChange={() => handleCheckboxChange(`show_${station.name}`)}
|
|
/>
|
|
<label
|
|
htmlFor={`box-${station.id}`}
|
|
className="text-sm font-bold ml-2"
|
|
>
|
|
{station.name}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DataSheet;
|