984ce72201
- Entfernt `useRecoilState(mapLayersState)` und durch `useSelector(selectMapLayersState)` ersetzt. - Alle `setMapLayersVisibility` durch `dispatch(setLayerVisibility(...))` ersetzt. - LocalStorage-Handling für `mapLayersVisibility` mit Redux umgesetzt. - Fehler "setMapLayersVisibility is not defined" behoben, indem `dispatch` verwendet wurde. - Sicherstellung, dass `mapLayersSlice` im Redux-Store registriert ist.
291 lines
12 KiB
JavaScript
291 lines
12 KiB
JavaScript
// /componentss/DataSheet.js
|
|
import React, { useEffect, useState } from "react";
|
|
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
|
|
import { gisStationsStaticDistrictState } from "../redux/slices/webService/gisStationsStaticDistrictSlice";
|
|
import { gisSystemStaticState } from "../redux/slices/webService/gisSystemStaticSlice.js";
|
|
import { mapLayersState } from "../redux/slices/mapLayersSlice";
|
|
import { selectedAreaState } from "../redux/slices/selectedAreaSlice";
|
|
import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js";
|
|
import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice";
|
|
import EditModeToggle from "./EditModeToggle";
|
|
import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice"; // Import für Polyline-Visibility
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { selectPolylineVisible, setPolylineVisible } from "../redux/slices/polylineLayerVisibleSlice";
|
|
import { selectGisSystemStatic } from "../redux/slices/webService/gisSystemStaticSlice";
|
|
import { useInitGisStationsStatic } from "../components/mainComponent/hooks/webServices/useInitGisStationsStatic";
|
|
|
|
import { fetchGisStationsStatic, selectGisStationsStatic } from "../redux/slices/webService/gisStationsStaticSlice";
|
|
import { selectGisStationsStaticDistrict } from "../redux/slices/webService/gisStationsStaticDistrictSlice";
|
|
|
|
import { selectMapLayersState, setLayerVisibility } from "../redux/slices/mapLayersSlice";
|
|
|
|
function DataSheet() {
|
|
const [editMode, setEditMode] = useState(false); // Zustand für editMode
|
|
const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
|
|
const setSelectedArea = useSetRecoilState(selectedAreaState);
|
|
const mapLayersVisibility = useSelector(selectMapLayersState);
|
|
const [stationListing, setStationListing] = useState([]);
|
|
const [systemListing, setSystemListing] = useState([]);
|
|
const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict) || [];
|
|
const GisSystemStatic = useSelector(selectGisSystemStatic) || [];
|
|
const GisStationsStatic = useSelector(selectGisStationsStatic) || []; //Area-Name/Bereiche dropdownmenu
|
|
|
|
const setZoomTrigger = useSetRecoilState(zoomTriggerState);
|
|
const dispatch = useDispatch();
|
|
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 }));
|
|
}
|
|
};
|
|
|
|
const [bereicheVisible, setBereicheVisible] = useState(false); // NEU: Bereiche-Status
|
|
const [standordVisible, setStandorteVisible] = useState(false); // NEU: Standorte-Status
|
|
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;
|
|
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");
|
|
setZoomTrigger((current) => current + 1);
|
|
};
|
|
|
|
//---------------------------
|
|
const handleBereicheCheckboxChange = (event) => {
|
|
if (editMode) return;
|
|
const { checked } = event.target;
|
|
setBereicheVisible(checked);
|
|
localStorage.setItem("bereicheVisible", checked);
|
|
};
|
|
const handleStandorteCheckboxChange = (event) => {
|
|
if (editMode) return;
|
|
const { checked } = event.target;
|
|
setStandorteVisible(checked);
|
|
localStorage.setItem("standorteVisible", checked);
|
|
};
|
|
//------------------------------
|
|
useEffect(() => {
|
|
// console.log("GisSystemStatic aus Redux:", GisSystemStatic); // ✅ Debugging: Ist es ein Array?
|
|
}, [GisSystemStatic]);
|
|
//-----------------------------
|
|
useInitGisStationsStatic();
|
|
//---------------------------
|
|
useEffect(() => {
|
|
//console.log("🔍 GisStationsStatic Inhalt:", GisStationsStatic);
|
|
|
|
if (!GisStationsStatic) {
|
|
console.warn("⚠️ GisStationsStatic ist `null` oder nicht geladen.");
|
|
return;
|
|
}
|
|
|
|
if (typeof GisStationsStatic !== "object") {
|
|
console.warn("⚠️ GisStationsStatic ist kein Objekt:", GisStationsStatic);
|
|
return;
|
|
}
|
|
|
|
if (!GisStationsStatic.Points || !Array.isArray(GisStationsStatic.Points)) {
|
|
//console.warn("⚠️ GisStationsStatic.Points ist nicht vorhanden oder kein Array.", GisStationsStatic);
|
|
return;
|
|
}
|
|
|
|
const seenNames = new Set();
|
|
const filteredAreas = GisStationsStatic.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;
|
|
});
|
|
|
|
setStationListing(
|
|
filteredAreas.map((area, index) => ({
|
|
id: area.IdArea || index + 1,
|
|
name: area.Area_Name || "Unbekannt",
|
|
}))
|
|
);
|
|
|
|
// console.log("📌 stationListing aktualisiert:", filteredAreas);
|
|
}, [GisStationsStatic]);
|
|
|
|
//---------------------------
|
|
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 DataSheet;
|