fix: Leistung etwas verbessert wegen Kabelstrecken anzeigen und ausblenden

This commit is contained in:
ISA
2025-08-22 14:44:54 +02:00
parent 8cf520bb2c
commit 0a3c4c208f
7 changed files with 33 additions and 41 deletions

View File

@@ -23,4 +23,4 @@ NEXT_PUBLIC_USE_MOCKS=true
# z.B. http://10.10.0.13/xyz/index.aspx -> basePath in config.json auf /xyz setzen # z.B. http://10.10.0.13/xyz/index.aspx -> basePath in config.json auf /xyz setzen
# basePath wird jetzt in public/config.json gepflegt # basePath wird jetzt in public/config.json gepflegt
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.345 NEXT_PUBLIC_APP_VERSION=1.1.346

View File

@@ -24,4 +24,4 @@ NEXT_PUBLIC_USE_MOCKS=false
# basePath wird jetzt in public/config.json gepflegt # basePath wird jetzt in public/config.json gepflegt
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.345 NEXT_PUBLIC_APP_VERSION=1.1.346

View File

@@ -153,7 +153,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const [oms, setOms] = useState(null); // State für OMS-Instanz const [oms, setOms] = useState(null); // State für OMS-Instanz
// Flag, ob Nutzer die Polyline-Checkbox manuell betätigt hat // Flag, ob Nutzer die Polyline-Checkbox manuell betätigt hat
const userToggledPolyline = useRef(false); // Nutzer-Flag global auf window, damit auch Redux darauf zugreifen kann
if (typeof window !== "undefined" && window.userToggledPolyline === undefined) {
window.userToggledPolyline = false;
}
//-----userRights---------------- //-----userRights----------------
const isRightsLoaded = useSelector( const isRightsLoaded = useSelector(
@@ -305,7 +308,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
// Callback für Checkbox-Umschaltung (Kabelstrecken) // Callback für Checkbox-Umschaltung (Kabelstrecken)
const handlePolylineCheckboxChange = useCallback( const handlePolylineCheckboxChange = useCallback(
checked => { checked => {
userToggledPolyline.current = true; if (typeof window !== "undefined") {
window.userToggledPolyline = true;
}
dispatch(setPolylineVisible(checked)); dispatch(setPolylineVisible(checked));
}, },
[dispatch] [dispatch]
@@ -1031,7 +1036,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
</div> </div>
{GisStationsStaticDistrict && GisStationsStaticDistrict.Points?.length > 0 && ( {GisStationsStaticDistrict && GisStationsStaticDistrict.Points?.length > 0 && (
<MapLayersControlPanel className="z-50" /> <MapLayersControlPanel
className="z-50"
handlePolylineCheckboxChange={handlePolylineCheckboxChange}
/>
)} )}
<CoordinateInput onCoordinatesSubmit={handleCoordinatesSubmit} /> <CoordinateInput onCoordinatesSubmit={handleCoordinatesSubmit} />

View File

@@ -14,7 +14,7 @@ import { selectMapLayersState, setLayerVisibility } from "@/redux/slices/mapLaye
import { setVisible } from "@/redux/slices/database/pois/poiLayerVisibleSlice"; import { setVisible } from "@/redux/slices/database/pois/poiLayerVisibleSlice";
import { incrementZoomTrigger } from "@/redux/slices/zoomTriggerSlice"; import { incrementZoomTrigger } from "@/redux/slices/zoomTriggerSlice";
function MapLayersControlPanel() { function MapLayersControlPanel({ handlePolylineCheckboxChange }) {
const [editMode, setEditMode] = useState(false); // Zustand für editMode const [editMode, setEditMode] = useState(false); // Zustand für editMode
const [localStorageLoaded, setLocalStorageLoaded] = useState(false); // Tracking ob localStorage geladen wurde const [localStorageLoaded, setLocalStorageLoaded] = useState(false); // Tracking ob localStorage geladen wurde
const kabelstreckenVisible = useSelector(selectPolylineVisible); // Nur noch Redux const kabelstreckenVisible = useSelector(selectPolylineVisible); // Nur noch Redux
@@ -39,36 +39,7 @@ function MapLayersControlPanel() {
) )
: false; : false;
const handlePolylineCheckboxChange = event => { // handlePolylineCheckboxChange kommt jetzt als Prop von MapComponent
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));
// 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 =
mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility";
const updatedVisibility = { ...mapLayersVisibility, [talasKey]: true };
localStorage.setItem(mapStorageKey, JSON.stringify(updatedVisibility));
}
};
useEffect(() => { useEffect(() => {
// LocalStorage Werte beim ersten Laden der Komponente wiederherstellen (nur für POI und mapLayersVisibility, nicht mehr für Kabelstrecken) // LocalStorage Werte beim ersten Laden der Komponente wiederherstellen (nur für POI und mapLayersVisibility, nicht mehr für Kabelstrecken)
@@ -338,8 +309,8 @@ function MapLayersControlPanel() {
<div className="flex items-center"> <div className="flex items-center">
<input <input
type="checkbox" type="checkbox"
checked={kabelstreckenVisible} // Lokaler State statt Redux checked={kabelstreckenVisible}
onChange={handlePolylineCheckboxChange} onChange={e => handlePolylineCheckboxChange(e.target.checked)}
id="polyline-checkbox" id="polyline-checkbox"
disabled={!isTalasAllowed || editMode} disabled={!isTalasAllowed || editMode}
/> />

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "nodemap", "name": "nodemap",
"version": "1.1.345", "version": "1.1.346",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "nodemap", "name": "nodemap",
"version": "1.1.345", "version": "1.1.346",
"dependencies": { "dependencies": {
"@emotion/react": "^11.13.3", "@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0", "@emotion/styled": "^11.13.0",

View File

@@ -1,6 +1,6 @@
{ {
"name": "nodemap", "name": "nodemap",
"version": "1.1.345", "version": "1.1.346",
"dependencies": { "dependencies": {
"@emotion/react": "^11.13.3", "@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0", "@emotion/styled": "^11.13.0",

View File

@@ -5,6 +5,13 @@ import { createSlice } from "@reduxjs/toolkit";
// Thunk to initialize polyline visibility from localStorage using mapId/userId from URL // Thunk to initialize polyline visibility from localStorage using mapId/userId from URL
export const initializePolylineFromLocalStorageThunk = () => dispatch => { export const initializePolylineFromLocalStorageThunk = () => dispatch => {
try { try {
// Prüfe globales Nutzer-Flag
if (typeof window !== "undefined" && window.userToggledPolyline) {
console.log(
"[Redux] Initialisierung abgebrochen: Nutzer hat Polyline bereits manuell geändert."
);
return;
}
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const mapId = params.get("m"); const mapId = params.get("m");
const userId = params.get("u"); const userId = params.get("u");
@@ -60,6 +67,12 @@ const polylineLayerVisibleSlice = createSlice({
}, },
initializePolylineFromLocalStorage: (state, action) => { initializePolylineFromLocalStorage: (state, action) => {
// Diese Action wird nur beim Initialisieren aus localStorage verwendet // Diese Action wird nur beim Initialisieren aus localStorage verwendet
if (typeof window !== "undefined" && window.userToggledPolyline) {
console.log(
"[Redux] Initialisierung im Reducer abgebrochen: Nutzer hat Polyline bereits manuell geändert."
);
return;
}
state.visible = action.payload; state.visible = action.payload;
state.isInitialized = true; state.isInitialized = true;
console.log( console.log(