diff --git a/.env.local b/.env.local index c8440e954..db5e2af0c 100644 --- a/.env.local +++ b/.env.local @@ -7,7 +7,7 @@ DB_NAME=talas_v5 DB_PORT=3306 # Public Settings (Client braucht IP/Domain) -NEXT_PUBLIC_SERVER_URL="http://10.10.0.70" # oder evtl. später https://nodemap.firma.de +NEXT_PUBLIC_SERVER_URL="http://192.168.10.33" # oder evtl. später https://nodemap.firma.de NEXT_PUBLIC_ENABLE_GEOCODER=true NEXT_PUBLIC_USE_MOCK_API=true - +NEXT_PUBLIC_DEBUG_LOG=true diff --git a/components/DataSheet.js b/components/DataSheet.js index 404d2e423..175f966ed 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -9,8 +9,9 @@ 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 } from "react-redux"; +import { useSelector, useDispatch } from "react-redux"; import { selectGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice"; +import { selectPolylineVisible, setPolylineVisible } from "../redux/slices/polylineLayerVisibleSlice"; function DataSheet() { const [editMode, setEditMode] = useState(false); // Zustand für editMode @@ -23,7 +24,15 @@ function DataSheet() { const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict); const GisSystemStatic = useRecoilValue(gisSystemStaticState); const setZoomTrigger = useSetRecoilState(zoomTriggerState); - const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines + const dispatch = useDispatch(); + const polylineVisible = useSelector(selectPolylineVisible); + + const handlePolylineCheckboxChange = (event) => { + const checked = event.target.checked; + dispatch(setPolylineVisible(checked)); + localStorage.setItem("polylineVisible", checked); + }; + const [bereicheVisible, setBereicheVisible] = useState(false); // NEU: Bereiche-Status const [standordVisible, setStandorteVisible] = useState(false); // NEU: Standorte-Status useEffect(() => { @@ -34,7 +43,7 @@ function DataSheet() { } const storedPolylineVisible = localStorage.getItem("polylineVisible"); if (storedPolylineVisible !== null) { - setPolylineVisible(storedPolylineVisible === "true"); + dispatch(setPolylineVisible(storedPolylineVisible === "true")); } const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility"); @@ -128,25 +137,6 @@ function DataSheet() { setSelectedArea("Station wählen"); setZoomTrigger((current) => current + 1); }; - const handlePolylineCheckboxChange = (event) => { - const { checked } = event.target; - - // Setze den Zustand von Kabelstrecken - setPolylineVisible(checked); - localStorage.setItem("polylineVisible", checked); - - // Wenn Kabelstrecken aktiviert werden, aktiviere TALAS - if (checked) { - setMapLayersVisibility((prev) => { - const newState = { - ...prev, - TALAS: true, - }; - localStorage.setItem("mapLayersVisibility", JSON.stringify(newState)); - return newState; - }); - } - }; //--------------------------- const handleBereicheCheckboxChange = (event) => { @@ -161,6 +151,7 @@ function DataSheet() { setStandorteVisible(checked); localStorage.setItem("standorteVisible", checked); }; + //------------------------------ //--------------------------- return ( diff --git a/components/MapComponent.js b/components/MapComponent.js index dfe046430..02b3a5289 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -67,12 +67,14 @@ import { fetchGisStationsStatusDistrict } from "../services/api/fetchGisStations import { fetchGisStationsMeasurements } from "../services/api/fetchGisStationsMeasurements.js"; import { fetchGisSystemStatic } from "../services/api/fetchGisSystemStatic.js"; +import { usePolylineTooltipLayer } from "../hooks/usePolylineTooltipLayer"; +import { selectPolylineVisible, setPolylineVisible } from "../redux/slices/polylineLayerVisibleSlice"; const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const dispatch = useDispatch(); const currentPoi = useSelector(selectCurrentPoi); //const setCurrentPoi = useSetRecoilState(currentPoiState); - const polylineVisible = useRecoilValue(polylineLayerVisibleState); + const polylineVisible = useSelector(selectPolylineVisible); const [editMode, setEditMode] = useState(false); // editMode Zustand const { deviceName, setDeviceName } = useMapComponentState(); const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp"); @@ -558,7 +560,17 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { polylines.forEach((polyline) => polyline.remove()); // Setze neue Marker und Polylinien mit den aktuellen Daten - const { markers: newMarkers, polylines: newPolylines } = setupPolylines(map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, polylineVisible); + const { markers: newMarkers, polylines: newPolylines } = setupPolylines( + map, + linePositions, + lineColors, + tooltipContents, + setNewCoords, + tempMarker, + currentZoom, + currentCenter, + polylineVisible // kommt aus Redux + ); newPolylines.forEach((polyline, index) => { console.log("polyline: ", polyline); @@ -992,6 +1004,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } }, [map, menuItemAdded]); //-------------------------------------------- + // Beim ersten Client-Render den Wert aus localStorage laden + useEffect(() => { + const storedPolylineVisible = localStorage.getItem("polylineVisible") === "true"; + dispatch(setPolylineVisible(storedPolylineVisible)); + }, [dispatch]); //---------------------------------------------- diff --git a/config/appVersion.js b/config/appVersion.js index afdc44bc3..09b4a1c93 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.11"; +export const APP_VERSION = "1.1.12"; diff --git a/hooks/useLineData-old.js b/hooks/useLineData-old.js deleted file mode 100644 index ae72adb76..000000000 --- a/hooks/useLineData-old.js +++ /dev/null @@ -1,132 +0,0 @@ -// hooks/useLineData.js //fix v1.0.8.1 -import { useEffect, useState } from "react"; -import { toast } from "react-toastify"; -import { SERVER_URL } from "../config/urls"; -import { useDispatch, useSelector } from "react-redux"; - -const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { - const dispatch = useDispatch(); - const messages = useSelector((state) => state.messages); - const [lineColors, setLineColors] = useState({}); - const [tooltipContents, setTooltipContents] = useState({}); - - useEffect(() => { - let isCancelled = false; - - const fetchData = async () => { - try { - const response1 = await fetch(webserviceGisLinesStatusUrl); - if (!response1.ok) throw new Error("Fehler bei GIS-Linienstatus"); - - const data1 = await response1.json(); - const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`); - if (!response2.ok) throw new Error("Fehler beim Abrufen der GIS-Linien"); - - const data2 = await response2.json(); - const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/device/getAllStationsNames`); - if (!response3.ok) throw new Error("Fehler beim Abrufen der Stationsnamen"); - - const namesData = await response3.json(); - - if (!isCancelled) { - if (!data1.Statis || data1.Statis.length === 0) { - toast.warn("Keine Linienstatus-Daten verfügbar!", { position: "top-center", autoClose: 5000 }); - setLineStatusData([]); - return; - } - - const colorsByModule = {}; - const newTooltipContents = {}; - const valueMap = {}; - - const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level); - - sortedStatis.forEach((statis) => { - const key = `${statis.IdLD}-${statis.Modul}`; - - if (!valueMap[key]) { - valueMap[key] = { - messages: [], - messwert: undefined, - schleifenwert: undefined, - }; - } - - if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) { - valueMap[key].messwert = statis.Value; - } - if (statis.DpName.endsWith("_Schleifenwert") && !valueMap[key].schleifenwert) { - valueMap[key].schleifenwert = statis.Value; - } - - if (statis.Message && statis.Message !== "?") { - valueMap[key].messages.push({ - message: statis.Message, - prioColor: statis.PrioColor && statis.PrioColor !== "#ffffff" ? statis.PrioColor : "green", - }); - } - }); - - sortedStatis.forEach((statis) => { - const key = `${statis.IdLD}-${statis.Modul}`; - const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul); - - if (matchingLine) { - const values = valueMap[key]; - - const messageDisplay = values.messages.map((msg) => `${msg.message}
`).join(""); - - colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green"; - - newTooltipContents[key] = ` -
- ${statis.ModulName || "Unknown"} -
- ${statis.ModulTyp || "N/A"} -
- Slot: ${statis.Modul || "N/A"} -
- Station: ${namesData[matchingLine.idLD] || "N/A"} -
-
- ${messageDisplay} -
-
- ${values.messwert ? `Messwert: ${values.messwert}
` : ""} - ${values.schleifenwert ? `Schleifenwert: ${values.schleifenwert}` : ""} -
- `; - } - }); - - setLineColors(colorsByModule); - setTooltipContents(newTooltipContents); - setLineStatusData(data1.Statis); - } - } catch (error) { - //console.error("Fehler beim Abrufen der Daten in useLineData.js:", error); - // toast.error("Fehler beim Abrufen der Linienstatus-Daten!", { position: "top-center", autoClose: 5000 }); - console.warn("Fehler beim Abrufen der Linienstatus-Daten in useLineData.js "); - } - }; - - const scheduleNextFetch = () => { - if (!isCancelled) { - fetchData(); - setTimeout(scheduleNextFetch, 30000); - } - }; - - fetchData(); - scheduleNextFetch(); - - return () => { - isCancelled = true; - localStorage.removeItem("contextMenuExpired"); - }; - }, [webserviceGisLinesStatusUrl, setLineStatusData]); - - return { lineColors, tooltipContents }; -}; - -export default useLineData; diff --git a/redux/slices/polylineLayerVisibleSlice.js b/redux/slices/polylineLayerVisibleSlice.js index 7ecc26963..973f58b82 100644 --- a/redux/slices/polylineLayerVisibleSlice.js +++ b/redux/slices/polylineLayerVisibleSlice.js @@ -1,7 +1,22 @@ // /redux/slices/polylineLayerVisibleSlice.js -import { atom } from "recoil"; +// redux/slices/polylineLayerVisibleSlice.js +import { createSlice } from "@reduxjs/toolkit"; -export const polylineLayerVisibleState = atom({ - key: "polylineLayerVisibleState", - default: true, // Standardmäßig auf sichtbar setzen +const initialState = { + visible: false, // oder Standardwert +}; + +const polylineLayerVisibleSlice = createSlice({ + name: "polylineLayerVisible", + initialState, + reducers: { + setPolylineVisible: (state, action) => { + state.visible = action.payload; + localStorage.setItem("polylineVisible", action.payload); + }, + }, }); + +export const { setPolylineVisible } = polylineLayerVisibleSlice.actions; +export const selectPolylineVisible = (state) => state.polylineLayerVisible.visible; +export default polylineLayerVisibleSlice.reducer; diff --git a/redux/store.js b/redux/store.js index b231f13df..7c4c501b5 100644 --- a/redux/store.js +++ b/redux/store.js @@ -2,11 +2,13 @@ import { configureStore } from "@reduxjs/toolkit"; import lineVisibilityReducer from "./slices/lineVisibilitySlice"; import currentPoiReducer from "./slices/currentPoiSlice"; import gisStationsStaticDistrictReducer from "./slices/gisStationsStaticDistrictSlice"; +import polylineLayerVisibleReducer from "./slices/polylineLayerVisibleSlice"; export const store = configureStore({ reducer: { lineVisibility: lineVisibilityReducer, currentPoi: currentPoiReducer, gisStationsStaticDistrict: gisStationsStaticDistrictReducer, + polylineLayerVisible: polylineLayerVisibleReducer, }, }); diff --git a/utils/createAndSetDevices.js b/utils/createAndSetDevices.js index d9c197316..c592c5c53 100644 --- a/utils/createAndSetDevices.js +++ b/utils/createAndSetDevices.js @@ -59,7 +59,7 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste return { idLD: station.IdLD, active: station.Active }; }); - console.log("🔄 Alle Linien gespeichert:", allLines); + //console.log("🔄 Alle Linien gespeichert:", allLines); const activeStations = staticDistrictData.Points.filter((station) => station.System === systemId && station.Active === 1); diff --git a/utils/setupPolylines.js b/utils/setupPolylines.js index ec0beb792..94c53cf6c 100644 --- a/utils/setupPolylines.js +++ b/utils/setupPolylines.js @@ -84,22 +84,11 @@ function monitorContextMenu(map) { } export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible) => { - // Hole activeLines direkt aus Redux - const state = store.getState(); // Hole den gesamten Zustand - const activeLines = state.lineVisibility.activeLines; // Zugriff auf activeLines - - if (!activeLines) { - console.warn("activeLines ist undefined oder null."); + if (!polylineVisible) { + console.warn("Polylines deaktiviert - keine Zeichnung"); return { markers: [], polylines: [] }; } - if (localStorage.getItem("polylineVisible") === null) { - localStorage.setItem("polylineVisible", "true"); // Standardwert setzen - polylineVisible = true; // Wert in der Funktion initialisieren - } else { - polylineVisible = localStorage.getItem("polylineVisible") === "true"; - } - if (!polylineVisible) { // Entferne alle Polylinien, wenn sie ausgeblendet werden sollen if (window.polylines) { @@ -117,15 +106,8 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, linePositions.forEach((lineData, lineIndex) => { console.log("LineData:", lineData.idLD, lineData.idModul); - console.log("ActiveLines:", activeLines); // **Fix: Sicherstellen, dass activeLines definiert ist und idLD existiert** - const isActive = activeLines && lineData.idLD && activeLines[String(lineData.idLD)] === 1; - - if (!isActive) { - console.warn(`Linie mit idLD ${lineData.idLD} wird ausgeblendet.`); - return; - } const lineMarkers = [];