308 lines
11 KiB
JavaScript
308 lines
11 KiB
JavaScript
// /components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
|
|
import React, { useEffect, useState } from "react";
|
|
import { setSelectedArea } from "@/redux/slices/selectedAreaSlice";
|
|
import EditModeToggle from "@/components/uiWidgets/mapLayersControlPanel/EditModeToggle";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import {
|
|
selectPolylineVisible,
|
|
setPolylineVisible,
|
|
} from "@/redux/slices/database/polylines/polylineLayerVisibleSlice";
|
|
import { selectGisSystemStatic } from "@/redux/slices/webservice/gisSystemStaticSlice";
|
|
import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice";
|
|
import { selectMapLayersState, setLayerVisibility } from "@/redux/slices/mapLayersSlice";
|
|
import { setVisible } from "@/redux/slices/database/pois/poiLayerVisibleSlice";
|
|
import { incrementZoomTrigger } from "@/redux/slices/zoomTriggerSlice";
|
|
|
|
function MapLayersControlPanel() {
|
|
const [editMode, setEditMode] = useState(false); // Zustand für editMode
|
|
const poiVisible = useSelector(state => state.poiLayerVisible.visible);
|
|
const setPoiVisible = value => dispatch(setVisible(value));
|
|
const dispatch = useDispatch();
|
|
const mapLayersVisibility = useSelector(selectMapLayersState);
|
|
const [stationListing, setStationListing] = useState([]);
|
|
const [systemListing, setSystemListing] = useState([]);
|
|
const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict) || [];
|
|
const GisSystemStatic = useSelector(selectGisSystemStatic) || [];
|
|
|
|
const polylineVisible = useSelector(selectPolylineVisible);
|
|
|
|
const handlePolylineCheckboxChange = event => {
|
|
const checked = event.target.checked;
|
|
dispatch(setPolylineVisible(checked));
|
|
localStorage.setItem("polylineVisible", checked);
|
|
|
|
if (checked) {
|
|
dispatch(setLayerVisibility({ layer: "TALAS", visibility: true }));
|
|
localStorage.setItem(
|
|
"mapLayersVisibility",
|
|
JSON.stringify({ ...mapLayersVisibility, TALAS: true })
|
|
);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
// LocalStorage Werte laden
|
|
const storedPoiVisible = localStorage.getItem("poiVisible");
|
|
if (storedPoiVisible !== null) {
|
|
setPoiVisible(storedPoiVisible === "true");
|
|
}
|
|
const storedPolylineVisible = localStorage.getItem("polylineVisible");
|
|
if (storedPolylineVisible !== null) {
|
|
dispatch(setPolylineVisible(storedPolylineVisible === "true"));
|
|
}
|
|
|
|
// Layer-Sichtbarkeiten aus localStorage laden
|
|
const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility");
|
|
if (storedMapLayersVisibility) {
|
|
const parsedVisibility = JSON.parse(storedMapLayersVisibility);
|
|
Object.keys(parsedVisibility).forEach(key => {
|
|
dispatch(setLayerVisibility({ layer: key, visibility: parsedVisibility[key] }));
|
|
});
|
|
}
|
|
|
|
// EditMode lesen
|
|
const storedEditMode = localStorage.getItem("editMode");
|
|
setEditMode(storedEditMode === "true");
|
|
}, [setPoiVisible, dispatch]); // ✅ `setMapLayersVisibility` entfernt
|
|
|
|
const handleAreaChange = event => {
|
|
const selectedIndex = event.target.options.selectedIndex;
|
|
const areaName = event.target.options[selectedIndex].text;
|
|
dispatch(setSelectedArea(areaName));
|
|
};
|
|
|
|
useEffect(() => {
|
|
const allowedSystems = Array.isArray(GisSystemStatic)
|
|
? new Set(GisSystemStatic.filter(system => system.Allow === 1).map(system => system.IdSystem))
|
|
: new Set();
|
|
|
|
const seenNames = new Set();
|
|
const filteredAreas = GisStationsStaticDistrict?.Points?.length
|
|
? GisStationsStaticDistrict.Points.filter(item => {
|
|
const isUnique = !seenNames.has(item.Area_Name) && allowedSystems.has(item.System);
|
|
if (isUnique) {
|
|
seenNames.add(item.Area_Name);
|
|
}
|
|
return isUnique;
|
|
})
|
|
: [];
|
|
|
|
setStationListing(
|
|
filteredAreas.map((area, index) => ({
|
|
id: index + 1,
|
|
name: area.Area_Name,
|
|
}))
|
|
);
|
|
|
|
const seenSystemNames = new Set();
|
|
const filteredSystems = Array.isArray(GisSystemStatic)
|
|
? GisSystemStatic.filter(item => {
|
|
const isUnique = !seenSystemNames.has(item.Name) && item.Allow === 1;
|
|
if (isUnique) {
|
|
seenSystemNames.add(item.Name);
|
|
}
|
|
return isUnique;
|
|
})
|
|
: [];
|
|
|
|
setSystemListing(
|
|
filteredSystems.map((system, index) => ({
|
|
id: index + 1,
|
|
name: system.Name, // Verwende den Originalnamen für die Anzeige
|
|
key: `system-${system.IdSystem}`, // Internen Schlüssel für die MapLayersVisibility-Logik
|
|
}))
|
|
);
|
|
}, [GisStationsStaticDistrict, GisSystemStatic]);
|
|
|
|
const handleCheckboxChange = (key, event) => {
|
|
if (editMode) return;
|
|
const { checked } = event.target;
|
|
|
|
dispatch(setLayerVisibility({ layer: key, visibility: checked }));
|
|
localStorage.setItem(
|
|
"mapLayersVisibility",
|
|
JSON.stringify({ ...mapLayersVisibility, [key]: checked })
|
|
);
|
|
|
|
setTimeout(() => {
|
|
const event = new Event("visibilityChanged");
|
|
window.dispatchEvent(event);
|
|
}, 0);
|
|
};
|
|
|
|
const handlePoiCheckboxChange = event => {
|
|
const { checked } = event.target;
|
|
setPoiVisible(checked);
|
|
localStorage.setItem("poiVisible", checked); // Store POI visibility in localStorage
|
|
};
|
|
|
|
const handleIconClick = () => {
|
|
setSelectedArea("Station wählen");
|
|
dispatch(incrementZoomTrigger());
|
|
};
|
|
|
|
//------------------------------
|
|
useEffect(() => {
|
|
if (process.env.NEXT_PUBLIC_DEBUG_LOG === "true") {
|
|
window.__debug = window.__debug || {};
|
|
window.__debug.gisStations = GisStationsStaticDistrict;
|
|
}
|
|
|
|
if (!GisStationsStaticDistrict) {
|
|
console.warn("⚠️ GisStationsStaticDistrict ist `null` oder nicht geladen.");
|
|
return;
|
|
}
|
|
|
|
if (typeof GisStationsStaticDistrict !== "object") {
|
|
console.warn("⚠️ GisStationsStaticDistrict ist kein Objekt:", GisStationsStaticDistrict);
|
|
return;
|
|
}
|
|
|
|
if (!GisStationsStaticDistrict.Points || !Array.isArray(GisStationsStaticDistrict.Points)) {
|
|
console.warn(
|
|
"⚠️ GisStationsStaticDistrict.Points ist nicht vorhanden oder kein Array.",
|
|
GisStationsStaticDistrict
|
|
);
|
|
return;
|
|
}
|
|
|
|
const seenNames = new Set();
|
|
const filteredAreas = GisStationsStaticDistrict.Points.filter(item => {
|
|
if (!item.Area_Name) return false; // Sicherstellen, dass Area_Name existiert
|
|
const isUnique = !seenNames.has(item.Area_Name);
|
|
if (isUnique) {
|
|
seenNames.add(item.Area_Name);
|
|
}
|
|
return isUnique;
|
|
});
|
|
if (process.env.NEXT_PUBLIC_DEBUG_LOG === "true") {
|
|
console.log("📌 stationListing aktualisiert:", filteredAreas);
|
|
}
|
|
}, [GisStationsStaticDistrict, GisSystemStatic]);
|
|
//---------------------------
|
|
useEffect(() => {
|
|
const next = (GisStationsStaticDistrict.Points || []).map(p => p.Area_Name).join("|");
|
|
const current = stationListing.map(s => s.name).join("|");
|
|
if (next !== current) {
|
|
setStationListing(
|
|
GisStationsStaticDistrict.Points.map((area, index) => ({
|
|
id: index + 1,
|
|
name: area.Area_Name,
|
|
}))
|
|
);
|
|
}
|
|
}, [GisStationsStaticDistrict]);
|
|
//---------------------------
|
|
|
|
//---------------------------
|
|
return (
|
|
<div
|
|
id="mainDataSheet"
|
|
className="absolute top-3 right-3 w-1/6 min-w-[300px] max-w-[400px] 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 space-x-2">
|
|
<select
|
|
onChange={handleAreaChange}
|
|
id="stationListing"
|
|
className="border-solid-1 p-2 rounded ml-1 font-semibold"
|
|
style={{ minWidth: "150px", maxWidth: "200px" }}
|
|
>
|
|
<option value="Station wählen">Station wählen</option>
|
|
{[
|
|
...new Map(
|
|
(GisStationsStaticDistrict.Points || [])
|
|
.filter(p => !!p.Area_Name)
|
|
.map(p => [p.Area_Name, p])
|
|
).values(),
|
|
].map((item, index) => (
|
|
<option key={item.Area_Name} value={item.IdLD}>
|
|
{item.Area_Name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<div className="flex items-center space-x-2">
|
|
<EditModeToggle />
|
|
<img
|
|
src="/img/expand-icon.svg"
|
|
alt="Expand"
|
|
className="h-6 w-6 cursor-pointer"
|
|
onClick={handleIconClick}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Checkboxen mit Untermenüs */}
|
|
<div className="flex flex-col gap-2">
|
|
{systemListing.map(system => (
|
|
<div key={system.id} className="flex flex-col">
|
|
<div className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={mapLayersVisibility[system.key] || false}
|
|
onChange={e => handleCheckboxChange(system.key, e)}
|
|
id={`system-${system.id}`}
|
|
disabled={editMode} // Checkbox deaktiviert, wenn editMode aktiv ist
|
|
/>
|
|
<label htmlFor={`system-${system.id}`} className="text-sm ml-2">
|
|
{system.name}
|
|
</label>
|
|
</div>
|
|
|
|
{/* Untermenü für TALAS */}
|
|
{system.name === "TALAS" && (
|
|
<div className="ml-6 flex flex-col gap-1">
|
|
<div className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={polylineVisible} // Zustand für Kabelstrecken
|
|
onChange={handlePolylineCheckboxChange}
|
|
id="polyline-checkbox"
|
|
/>
|
|
<label htmlFor="polyline-checkbox" className="text-sm ml-2">
|
|
Kabelstrecken
|
|
</label>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
<div className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={poiVisible}
|
|
onChange={handlePoiCheckboxChange}
|
|
id="poi-checkbox"
|
|
/>
|
|
<label htmlFor="poi-checkbox" className="text-sm ml-2">
|
|
POIs
|
|
</label>
|
|
</div>
|
|
|
|
{/* Areas
|
|
<div className="flex items-center">
|
|
<input type="checkbox" checked={areaVisible} onChange={handleAreaCheckboxChange} id="area-checkbox" />
|
|
<label htmlFor="area-checkbox" className="text-sm ml-2">
|
|
Bereiche
|
|
</label>
|
|
</div>
|
|
*/}
|
|
|
|
{/* Standorte
|
|
<div className="flex items-center">
|
|
<input type="checkbox" checked={standordVisible} onChange={handleStandorteCheckboxChange} id="area-checkbox" />
|
|
<label htmlFor="area-checkbox" className="text-sm ml-2">
|
|
Standorte
|
|
</label>
|
|
</div>
|
|
|
|
*/}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default MapLayersControlPanel;
|