Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Kabelstrecken werden ausgeblendet

Browse Source
This commit is contained in:
ISA
2025-08-22 09:46:31 +02:00
parent bf7b62d110
commit f2a322a91b
8 changed files with 82 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/mainComponent/MapComponent.js
View File

@@ -367,6 +367,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
//Tooltip an mouse position anzeigen für die Linien
useEffect(() => {
if (!map) return;
console.log(
"[MapComponent/useEffect] polylineVisible:",
polylineVisible,
"isTalasAllowed:",
isTalasAllowed,
"poiLayerVisible:",
poiLayerVisible
);
// Wenn TALAS nicht erlaubt ist, Polyline-Checkbox und Anzeige deaktivieren
if (!isTalasAllowed) {
@@ -381,6 +389,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
marker.remove();
});
cleanupPolylinesForMemory(polylines, map);
console.log("[MapComponent/useEffect] Nach cleanupPolylinesForMemory, polylines:", polylines);
// Setze neue Marker und Polylinien mit den aktuellen Daten (asynchron!)
const updatePolylines = async () => {
@@ -442,9 +451,19 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
cleanupMarkers(markers, oms);
setMarkers(newMarkers);
setPolylines(newPolylines);
console.log("[MapComponent/useEffect] setPolylines (sichtbar):", newPolylines);
} else {
// Entferne wirklich alle Polylinien-Layer von der Karte
if (map) {
map.eachLayer(layer => {
if (layer instanceof L.Polyline) {
map.removeLayer(layer);
}
});
}
cleanupPolylinesForMemory(polylines, map);
setPolylines([]);
console.log("[MapComponent/useEffect] setPolylines ([]), alle Polylinien entfernt");
}
};
updatePolylines();

66
components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
View File

@@ -6,7 +6,6 @@ import { useSelector, useDispatch } from "react-redux";
import {
selectPolylineVisible,
setPolylineVisible,
initializePolylineFromLocalStorageThunk,
} from "@/redux/slices/database/polylines/polylineLayerVisibleSlice";
import { selectGisSystemStatic } from "@/redux/slices/webservice/gisSystemStaticSlice";
import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice";
@@ -15,11 +14,9 @@ import { setVisible } from "@/redux/slices/database/pois/poiLayerVisibleSlice";
import { incrementZoomTrigger } from "@/redux/slices/zoomTriggerSlice";
function MapLayersControlPanel() {
// Dummy state to force re-render after checkbox click (workaround for Redux/localStorage sync)
const [forceUpdate, setForceUpdate] = useState(0);
const [editMode, setEditMode] = useState(false); // Zustand für editMode
const [localStorageLoaded, setLocalStorageLoaded] = useState(false); // Tracking ob localStorage geladen wurde
const kabelstreckenVisible = useSelector(selectPolylineVisible); // Redux State für Kabelstrecken
const kabelstreckenVisible = useSelector(selectPolylineVisible); // Nur noch Redux
const poiVisible = useSelector(state => state.poiLayerVisible.visible);
const setPoiVisible = value => dispatch(setVisible(value));
const dispatch = useDispatch();
@@ -43,18 +40,26 @@ function MapLayersControlPanel() {
const handlePolylineCheckboxChange = event => {
const checked = event.target.checked;
// Debug-Ausgabe
const params = new URLSearchParams(window.location.search);
const mapId = params.get("m");
const userId = params.get("u");
const polylineKey =
mapId && userId ? `polylineVisible_m${mapId}_u${userId}` : "polylineVisible";
console.log(
"[UI/handlePolylineCheckboxChange] checked:",
checked,
"Redux:",
kabelstreckenVisible,
"localStorage:",
localStorage.getItem(polylineKey)
);
dispatch(setPolylineVisible(checked));
// Synchronisiere Redux nach localStorage-Update
setTimeout(() => {
dispatch(initializePolylineFromLocalStorageThunk());
setForceUpdate(f => f + 1); // Force re-render
const event = new Event("polylineVisibilityChanged");
window.dispatchEvent(event);
}, 100);
// Wenn aktiviert, TALAS aktivieren
if (checked) {
const talasKey = "system-1";
dispatch(setLayerVisibility({ layer: talasKey, visibility: true }));
// Optional: mapLayersVisibility im localStorage aktualisieren, aber nicht mehr für Sichtbarkeit nutzen
const mapId = localStorage.getItem("currentMapId");
const userId = localStorage.getItem("currentUserId");
const mapStorageKey =
@@ -64,23 +69,19 @@ function MapLayersControlPanel() {
}
};
// Initialisiere Redux-State für Kabelstrecken-Checkbox bei Kartenwechsel (mapId/userId)
useEffect(() => {
// LocalStorage Werte beim ersten Laden der Komponente oder bei Kartenwechsel wiederherstellen
// LocalStorage Werte beim ersten Laden der Komponente wiederherstellen (nur für POI und mapLayersVisibility, nicht mehr für Kabelstrecken)
const storedPoiVisible = localStorage.getItem("poiVisible");
if (storedPoiVisible !== null) {
setPoiVisible(storedPoiVisible === "true");
}
// Kartenabhängige Sichtbarkeit für Kabelstrecken initialisieren
// Kartenspezifischer localStorage-Key verwenden
const mapId = localStorage.getItem("currentMapId");
const userId = localStorage.getItem("currentUserId");
const mapStorageKey =
mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility";
// Kabelstrecken-Checkbox initialisieren: Redux übernimmt map/user-spezifisch, keine Manipulation von 'polylineVisible' oder 'kabelstreckenVisible' hier mehr!
// mapLayersVisibility initialisieren
const storedMapLayersVisibility = localStorage.getItem(mapStorageKey);
if (storedMapLayersVisibility) {
const parsedVisibility = JSON.parse(storedMapLayersVisibility);
@@ -88,6 +89,7 @@ function MapLayersControlPanel() {
dispatch(setLayerVisibility({ layer: key, visibility: parsedVisibility[key] }));
});
} else {
// Initialisiere mapLayersVisibility basierend auf Allow & Map (nur Systeme mit Map===1 anzeigen)
if (Array.isArray(GisSystemStatic)) {
const initialVisibility = {};
GisSystemStatic.forEach(system => {
@@ -106,7 +108,7 @@ function MapLayersControlPanel() {
setEditMode(storedEditMode === "true");
setLocalStorageLoaded(true);
}, [localStorage.getItem("currentMapId"), localStorage.getItem("currentUserId")]);
}, []); // Läuft nur beim Mount
const handleAreaChange = event => {
const selectedIndex = event.target.options.selectedIndex;
@@ -165,16 +167,32 @@ function MapLayersControlPanel() {
const handleCheckboxChange = (key, event) => {
if (editMode) return;
const { checked } = event.target;
// Debug-Ausgabe
const params = new URLSearchParams(window.location.search);
const mapId = params.get("m");
const userId = params.get("u");
const polylineKey =
mapId && userId ? `polylineVisible_m${mapId}_u${userId}` : "polylineVisible";
console.log(
"[UI/handleCheckboxChange] key:",
key,
"checked:",
checked,
"Redux:",
kabelstreckenVisible,
"localStorage:",
localStorage.getItem(polylineKey)
);
dispatch(setLayerVisibility({ layer: key, visibility: checked }));
const mapId = localStorage.getItem("currentMapId");
const userId = localStorage.getItem("currentUserId");
const mapId2 = localStorage.getItem("currentMapId");
const userId2 = localStorage.getItem("currentUserId");
const mapStorageKey =
mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility";
mapId2 && userId2 ? `mapLayersVisibility_m${mapId2}_u${userId2}` : "mapLayersVisibility";
localStorage.setItem(mapStorageKey, JSON.stringify({ ...mapLayersVisibility, [key]: checked }));
// Wenn TALAS (system-1) deaktiviert wird, Kabelstrecken deaktivieren
if (key === "system-1" && !checked) {
setKabelstreckenVisible(false);
// entfernt: keine Manipulation von 'kabelstreckenVisible' oder 'polylineVisible' mehr
localStorage.setItem("kabelstreckenVisible", "false");
localStorage.setItem("polylineVisible", "false");
dispatch(setPolylineVisible(false));
setTimeout(() => {
const polylineEvent = new Event("polylineVisibilityChanged");
@@ -319,7 +337,7 @@ function MapLayersControlPanel() {
<div className="flex items-center">
<input
type="checkbox"
checked={kabelstreckenVisible} // Redux State
checked={kabelstreckenVisible} // Lokaler State statt Redux
onChange={handlePolylineCheckboxChange}
id="polyline-checkbox"
disabled={!isTalasAllowed || editMode}