80 lines
2.7 KiB
JavaScript
80 lines
2.7 KiB
JavaScript
// /components/uiWidgets/AreaDropdown.js
|
|
import React, { useEffect, useMemo } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { setSelectedArea } from "@/redux/slices/selectedAreaSlice";
|
|
import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice";
|
|
import { selectGisSystemStatic } from "@/redux/slices/webservice/gisSystemStaticSlice";
|
|
|
|
/**
|
|
* Kleines Dropdown zur Auswahl der Station (Area_Name),
|
|
* nutzt dieselbe Datenquelle wie das MapLayersControlPanel.
|
|
*/
|
|
const AreaDropdown = ({ onClose }) => {
|
|
const dispatch = useDispatch();
|
|
const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict) || {};
|
|
const GisSystemStatic = useSelector(selectGisSystemStatic) || [];
|
|
|
|
// Erlaubte Systeme: Allow === 1 und Map === 1
|
|
const allowedSystems = useMemo(() => {
|
|
return new Set(
|
|
(Array.isArray(GisSystemStatic) ? GisSystemStatic : [])
|
|
.filter(sys => sys.Allow === 1 && sys.Map === 1)
|
|
.map(sys => sys.IdSystem)
|
|
);
|
|
}, [GisSystemStatic]);
|
|
|
|
// Uniqe Areas basierend auf Allowed Systems
|
|
const areaOptions = useMemo(() => {
|
|
const points = GisStationsStaticDistrict?.Points || [];
|
|
const seen = new Set();
|
|
const filtered = points.filter(p => {
|
|
if (!p?.Area_Name) return false;
|
|
if (!allowedSystems.has(p.System)) return false;
|
|
if (seen.has(p.Area_Name)) return false;
|
|
seen.add(p.Area_Name);
|
|
return true;
|
|
});
|
|
return filtered.map(p => ({ label: p.Area_Name, value: p.IdLD }));
|
|
}, [GisStationsStaticDistrict, allowedSystems]);
|
|
|
|
const handleChange = e => {
|
|
const selectedIndex = e.target.options.selectedIndex;
|
|
const label = e.target.options[selectedIndex].text;
|
|
dispatch(setSelectedArea(label));
|
|
onClose?.();
|
|
};
|
|
|
|
// Schließe mit ESC
|
|
useEffect(() => {
|
|
const onKey = e => {
|
|
if (e.key === "Escape") onClose?.();
|
|
};
|
|
window.addEventListener("keydown", onKey);
|
|
return () => window.removeEventListener("keydown", onKey);
|
|
}, [onClose]);
|
|
|
|
return (
|
|
<div className="absolute top-16 right-3 w-72 z-50 bg-white rounded-lg shadow-md">
|
|
<div className="flex flex-col gap-4 p-4">
|
|
<div className="text-sm font-semibold mb-2">Station wählen</div>
|
|
<select
|
|
onChange={handleChange}
|
|
className="border p-2 rounded w-full"
|
|
defaultValue="__default__"
|
|
>
|
|
<option value="__default__" disabled>
|
|
Bitte wählen…
|
|
</option>
|
|
{areaOptions.map(opt => (
|
|
<option key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AreaDropdown;
|