bf4fc95b8e
- Refactored initializeMap to accept the DOM node instead of the ref object - Updated all checks to use the DOM node directly - Improved useInitializeMap to only call initializeMap when the container is ready - Prevents "mapRef.current ist nicht definiert oder nicht im DOM" errors - Ensures map is only initialized when the container is attached
417 lines
16 KiB
JavaScript
417 lines
16 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 [localStorageLoaded, setLocalStorageLoaded] = useState(false); // Tracking ob localStorage geladen wurde
|
||
const [kabelstreckenVisible, setKabelstreckenVisible] = useState(false); // Lokaler State für Kabelstrecken
|
||
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) || [];
|
||
|
||
// Debug: Kabelstrecken state verfolgen
|
||
useEffect(() => {
|
||
console.log("🎯 kabelstreckenVisible state changed to:", kabelstreckenVisible);
|
||
}, [kabelstreckenVisible]);
|
||
|
||
// Prüfen, ob TALAS (IdSystem 1) erlaubt & sichtbar auf Karte (Allow + Map)
|
||
const isTalasAllowed = Array.isArray(GisSystemStatic)
|
||
? GisSystemStatic.some(
|
||
system => system.IdSystem === 1 && system.Allow === 1 && system.Map === 1
|
||
)
|
||
: false;
|
||
|
||
const handlePolylineCheckboxChange = event => {
|
||
const checked = event.target.checked;
|
||
console.log("🖱️ Kabelstrecken checkbox clicked, new value:", checked);
|
||
|
||
// Beide localStorage-Variablen setzen für Kompatibilität
|
||
setKabelstreckenVisible(checked);
|
||
localStorage.setItem("kabelstreckenVisible", checked.toString());
|
||
localStorage.setItem("polylineVisible", checked.toString()); // Auch die alte Variable setzen
|
||
console.log("💾 Saved to localStorage as kabelstreckenVisible:", checked);
|
||
console.log("💾 Saved to localStorage as polylineVisible:", checked);
|
||
|
||
// Redux für andere Teile der App aktualisieren
|
||
dispatch(setPolylineVisible(checked));
|
||
|
||
// Event auslösen, damit andere Komponenten über die Änderung informiert werden
|
||
setTimeout(() => {
|
||
const event = new Event("polylineVisibilityChanged");
|
||
window.dispatchEvent(event);
|
||
console.log("📢 Event 'polylineVisibilityChanged' dispatched");
|
||
}, 100);
|
||
|
||
// Wenn Kabelstrecken aktiviert wird, aktiviere automatisch auch TALAS (IdSystem 1)
|
||
if (checked) {
|
||
const talasKey = "system-1"; // TALAS hat IdSystem 1
|
||
dispatch(setLayerVisibility({ layer: talasKey, visibility: true }));
|
||
|
||
// Kartenspezifischer localStorage-Key verwenden
|
||
const mapId = localStorage.getItem("currentMapId");
|
||
const userId = localStorage.getItem("currentUserId");
|
||
const mapStorageKey =
|
||
mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility";
|
||
|
||
const updatedVisibility = { ...mapLayersVisibility, [talasKey]: true };
|
||
localStorage.setItem(mapStorageKey, JSON.stringify(updatedVisibility));
|
||
|
||
console.log("🔗 Kabelstrecken aktiviert → TALAS automatisch aktiviert");
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
// LocalStorage Werte beim ersten Laden der Komponente wiederherstellen
|
||
console.log("🔄 Loading localStorage values...");
|
||
|
||
const storedPoiVisible = localStorage.getItem("poiVisible");
|
||
console.log("📦 POI localStorage value:", storedPoiVisible);
|
||
if (storedPoiVisible !== null) {
|
||
setPoiVisible(storedPoiVisible === "true");
|
||
}
|
||
|
||
// Neue Variable für Kabelstrecken mit Fallback auf die alte Variable
|
||
let storedKabelstreckenVisible = localStorage.getItem("kabelstreckenVisible");
|
||
const storedPolylineVisible = localStorage.getItem("polylineVisible");
|
||
|
||
// Falls kabelstreckenVisible nicht existiert, aber polylineVisible schon, übernehmen wir den Wert
|
||
if (storedKabelstreckenVisible === null && storedPolylineVisible !== null) {
|
||
storedKabelstreckenVisible = storedPolylineVisible;
|
||
localStorage.setItem("kabelstreckenVisible", storedPolylineVisible);
|
||
console.log("<22> Migrated polylineVisible to kabelstreckenVisible:", storedPolylineVisible);
|
||
}
|
||
|
||
console.log("<22>📦 Kabelstrecken localStorage value:", storedKabelstreckenVisible);
|
||
console.log("📦 Polyline localStorage value:", storedPolylineVisible);
|
||
|
||
if (storedKabelstreckenVisible !== null) {
|
||
const shouldBeVisible = storedKabelstreckenVisible === "true";
|
||
console.log("🎯 Setting kabelstreckenVisible to:", shouldBeVisible);
|
||
setKabelstreckenVisible(shouldBeVisible);
|
||
|
||
// Beide localStorage-Variablen synchronisieren
|
||
localStorage.setItem("polylineVisible", shouldBeVisible.toString());
|
||
// Redux für Konsistenz setzen
|
||
dispatch(setPolylineVisible(shouldBeVisible));
|
||
|
||
// Event auslösen nach dem Laden
|
||
setTimeout(() => {
|
||
const event = new Event("polylineVisibilityChanged");
|
||
window.dispatchEvent(event);
|
||
console.log("📢 Event 'polylineVisibilityChanged' dispatched on load");
|
||
}, 200);
|
||
}
|
||
|
||
// Kartenspezifischer localStorage-Key verwenden
|
||
const mapId = localStorage.getItem("currentMapId");
|
||
const userId = localStorage.getItem("currentUserId");
|
||
const mapStorageKey =
|
||
mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility";
|
||
|
||
const storedMapLayersVisibility = localStorage.getItem(mapStorageKey);
|
||
console.log(`📦 MapLayers localStorage value for ${mapStorageKey}:`, storedMapLayersVisibility);
|
||
|
||
if (storedMapLayersVisibility) {
|
||
const parsedVisibility = JSON.parse(storedMapLayersVisibility);
|
||
Object.keys(parsedVisibility).forEach(key => {
|
||
dispatch(setLayerVisibility({ layer: key, visibility: parsedVisibility[key] }));
|
||
});
|
||
} else {
|
||
// Initialisiere mapLayersVisibility basierend auf Allow & Map (nur Systeme mit Map===1 anzeigen)
|
||
console.log(
|
||
"🚀 No stored mapLayersVisibility found, initializing based on Allow && Map values..."
|
||
);
|
||
if (Array.isArray(GisSystemStatic)) {
|
||
const initialVisibility = {};
|
||
GisSystemStatic.forEach(system => {
|
||
const systemKey = `system-${system.IdSystem}`;
|
||
const visibility = system.Allow === 1 && system.Map === 1; // <— angepasst
|
||
if (visibility) {
|
||
// nur speichern wenn grundsätzlich sichtbar
|
||
initialVisibility[systemKey] = visibility;
|
||
dispatch(setLayerVisibility({ layer: systemKey, visibility }));
|
||
console.log(
|
||
`🎯 Setting ${systemKey} (${system.Name}) visibility to ${visibility} (Allow=${system.Allow}, Map=${system.Map})`
|
||
);
|
||
}
|
||
});
|
||
localStorage.setItem(mapStorageKey, JSON.stringify(initialVisibility));
|
||
console.log(`💾 Saved initial mapLayersVisibility to ${mapStorageKey}:`, initialVisibility);
|
||
}
|
||
}
|
||
|
||
const storedEditMode = localStorage.getItem("editMode");
|
||
console.log("📦 EditMode localStorage value:", storedEditMode);
|
||
setEditMode(storedEditMode === "true");
|
||
|
||
setLocalStorageLoaded(true);
|
||
}, []); // Läuft nur beim Mount
|
||
|
||
const handleAreaChange = event => {
|
||
const selectedIndex = event.target.options.selectedIndex;
|
||
const areaName = event.target.options[selectedIndex].text;
|
||
dispatch(setSelectedArea(areaName));
|
||
};
|
||
|
||
useEffect(() => {
|
||
// Allowed systems jetzt nach Allow && Map filtern
|
||
const allowedSystems = Array.isArray(GisSystemStatic)
|
||
? new Set(
|
||
GisSystemStatic.filter(system => system.Allow === 1 && system.Map === 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 && item.Map === 1; // <— Map Bedingung hinzugefügt
|
||
if (isUnique) {
|
||
seenSystemNames.add(item.Name);
|
||
}
|
||
return isUnique;
|
||
})
|
||
: [];
|
||
|
||
setSystemListing(
|
||
filteredSystems.map((system, index) => ({
|
||
id: index + 1,
|
||
name: system.Name, // Anzeige
|
||
key: `system-${system.IdSystem}`, // interner Schlüssel
|
||
}))
|
||
);
|
||
}, [GisStationsStaticDistrict, GisSystemStatic]);
|
||
|
||
const handleCheckboxChange = (key, event) => {
|
||
if (editMode) return;
|
||
const { checked } = event.target;
|
||
|
||
dispatch(setLayerVisibility({ layer: key, visibility: checked }));
|
||
|
||
// Kartenspezifischer localStorage-Key verwenden
|
||
const mapId = localStorage.getItem("currentMapId");
|
||
const userId = localStorage.getItem("currentUserId");
|
||
const mapStorageKey =
|
||
mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility";
|
||
|
||
localStorage.setItem(mapStorageKey, JSON.stringify({ ...mapLayersVisibility, [key]: checked }));
|
||
|
||
// Wenn TALAS (system-1) deaktiviert wird, deaktiviere automatisch auch Kabelstrecken
|
||
if (key === "system-1" && !checked) {
|
||
console.log("🔗 TALAS deaktiviert → Kabelstrecken automatisch deaktiviert");
|
||
|
||
// Kabelstrecken deaktivieren
|
||
setKabelstreckenVisible(false);
|
||
localStorage.setItem("kabelstreckenVisible", "false");
|
||
localStorage.setItem("polylineVisible", "false");
|
||
dispatch(setPolylineVisible(false));
|
||
|
||
// Event für Kabelstrecken auslösen
|
||
setTimeout(() => {
|
||
const polylineEvent = new Event("polylineVisibilityChanged");
|
||
window.dispatchEvent(polylineEvent);
|
||
console.log("📢 Event 'polylineVisibilityChanged' dispatched (auto-deactivated)");
|
||
}, 50);
|
||
}
|
||
|
||
setTimeout(() => {
|
||
const event = new Event("visibilityChanged");
|
||
window.dispatchEvent(event);
|
||
}, 0);
|
||
};
|
||
|
||
const handlePoiCheckboxChange = event => {
|
||
const { checked } = event.target;
|
||
setPoiVisible(checked);
|
||
localStorage.setItem("poiVisible", checked.toString()); // 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(),
|
||
*/}
|
||
{GisStationsStaticDistrict.Points.filter(p => !!p.Area_Name).map((item, index) => (
|
||
<option key={item.Area_Name + "-" + item.IdLD} 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={kabelstreckenVisible} // Lokaler State statt Redux
|
||
onChange={handlePolylineCheckboxChange}
|
||
id="polyline-checkbox"
|
||
disabled={!isTalasAllowed || editMode}
|
||
/>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default MapLayersControlPanel;
|