refactor: POI-Daten vollständig in Redux integriert
- useFetchPoiData.js entfernt - Neue Redux-Slices für POI-Typen und POI-Icons erstellt - Neue Services und Thunks hinzugefügt - fetch-Aufrufe durch zentralisierte Redux-Logik ersetzt - store.js aktualisiert und neue States registriert
This commit is contained in:
ISA
@@ -0,0 +1,251 @@
|
||||
// /componentss/MapLayersControlPanel.js
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { setSelectedArea } from "../../../redux/slices/selectedAreaSlice";
|
||||
import EditModeToggle from "./EditModeToggle";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { selectPolylineVisible, setPolylineVisible } from "../../../redux/slices/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/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 = Array.isArray(GisStationsStaticDistrict)
|
||||
? GisStationsStaticDistrict.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.Name.replace(/[\s\-]+/g, ""), // 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(() => {
|
||||
console.log("🔍 GisStationsStaticDistrict Inhalt:", 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;
|
||||
});
|
||||
|
||||
console.log("📌 stationListing aktualisiert:", filteredAreas);
|
||||
}, [GisStationsStaticDistrict, GisSystemStatic]);
|
||||
|
||||
//---------------------------
|
||||
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>
|
||||
{stationListing.map((station) => (
|
||||
<option key={station.id} value={station.id}>
|
||||
{station.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>
|
||||
|
||||
{/* Bereiche
|
||||
<div className="flex items-center">
|
||||
<input type="checkbox" checked={bereicheVisible} onChange={handleBereicheCheckboxChange} id="bereiche-checkbox" />
|
||||
<label htmlFor="bereiche-checkbox" className="text-sm ml-2">
|
||||
Bereiche
|
||||
</label>
|
||||
</div>
|
||||
*/}
|
||||
|
||||
{/* Standorte
|
||||
<div className="flex items-center">
|
||||
<input type="checkbox" checked={standordVisible} onChange={handleStandorteCheckboxChange} id="bereiche-checkbox" />
|
||||
<label htmlFor="bereiche-checkbox" className="text-sm ml-2">
|
||||
Standorte
|
||||
</label>
|
||||
</div>
|
||||
|
||||
*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MapLayersControlPanel;
|
||||
Reference in New Issue
Block a user