From 5cf84fb14edb23a855caacf7e6028fcebe5d4ce6 Mon Sep 17 00:00:00 2001 From: ISA Date: Wed, 4 Jun 2025 07:08:35 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20Ger=C3=A4temarker-Sichtbarkeit=20an=20Re?= =?UTF-8?q?dux-Layerzustand=20gekoppelt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Hardcodiertes Zeichnen der Gerätemarker beim Initialisieren entfernt - Sichtbarkeitssteuerung vollständig über mapLayersVisibility aus Redux umgesetzt - Dynamische Layererzeugung aus GisSystemStatic integriert - Marker werden nur angezeigt, wenn zugehöriger Layer aktiv ist --- components/mainComponent/MapComponent.js | 210 +++++++++++++++----- config/appVersion.js | 2 +- hooks/layers/useCiscoRouterMarkersLayer.js | 50 ----- hooks/layers/useDauzMarkersLayer.js | 46 ----- hooks/layers/useDynamicDeviceLayers.js | 23 +-- hooks/layers/useEciMarkersLayer.js | 49 ----- hooks/layers/useGmaMarkersLayer.js | 54 ----- hooks/layers/useLteModemMarkersLayer.js | 47 ----- hooks/layers/useOtdrMarkersLayer.js | 46 ----- hooks/layers/useSiemensMarkersLayer.js | 50 ----- hooks/layers/useSmsfunkmodemMarkersLayer.js | 66 ------ hooks/layers/useSonstigeMarkersLayer.js | 46 ----- hooks/layers/useTalasMarkersLayer.js | 36 ---- hooks/layers/useTalasiclMarkersLayer.js | 46 ----- hooks/layers/useTkComponentsMarkersLayer.js | 50 ----- hooks/layers/useUlafMarkersLayer.js | 78 -------- hooks/layers/useWagoMarkersLayer.js | 50 ----- hooks/layers/useWdmMarkersLayer.js | 46 ----- hooks/useDataUpdater.js | 31 +++ hooks/useDataUpdater.ts | 26 --- hooks/useDynamicMarkerLayers.js | 91 +++------ jsconfig.json | 8 + package-lock.json | 2 +- 23 files changed, 236 insertions(+), 917 deletions(-) delete mode 100644 hooks/layers/useCiscoRouterMarkersLayer.js delete mode 100644 hooks/layers/useDauzMarkersLayer.js delete mode 100644 hooks/layers/useEciMarkersLayer.js delete mode 100644 hooks/layers/useGmaMarkersLayer.js delete mode 100644 hooks/layers/useLteModemMarkersLayer.js delete mode 100644 hooks/layers/useOtdrMarkersLayer.js delete mode 100644 hooks/layers/useSiemensMarkersLayer.js delete mode 100644 hooks/layers/useSmsfunkmodemMarkersLayer.js delete mode 100644 hooks/layers/useSonstigeMarkersLayer.js delete mode 100644 hooks/layers/useTalasMarkersLayer.js delete mode 100644 hooks/layers/useTalasiclMarkersLayer.js delete mode 100644 hooks/layers/useTkComponentsMarkersLayer.js delete mode 100644 hooks/layers/useUlafMarkersLayer.js delete mode 100644 hooks/layers/useWagoMarkersLayer.js delete mode 100644 hooks/layers/useWdmMarkersLayer.js create mode 100644 hooks/useDataUpdater.js delete mode 100644 hooks/useDataUpdater.ts create mode 100644 jsconfig.json diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js index 371aee09d..2039cd02d 100644 --- a/components/mainComponent/MapComponent.js +++ b/components/mainComponent/MapComponent.js @@ -41,13 +41,25 @@ import { selectGisLines } from "../../redux/slices/database/polylines/gisLinesSl import { selectGisLinesStatus } from "../../redux/slices/webservice/gisLinesStatusSlice"; import { selectPoiTypData, selectPoiTypStatus } from "../../redux/slices/database/pois/poiTypSlice"; import { selectPriorityConfig } from "../../redux/slices/database/priorityConfigSlice.js"; -import { selectPoiIconsData, selectPoiIconsStatus } from "../../redux/slices/database/pois/poiIconsDataSlice"; +import { + selectPoiIconsData, + selectPoiIconsStatus, +} from "../../redux/slices/database/pois/poiIconsDataSlice"; import { selectGisLinesStatusFromWebservice } from "../../redux/slices/webservice/gisLinesStatusSlice"; import { selectGisUserRightsFromWebservice } from "../../redux/slices/webservice/userRightsSlice"; -import { updateCountdown, closePolylineContextMenu } from "../../redux/slices/database/polylines/polylineContextMenuSlice.js"; -import { selectPolylineVisible, setPolylineVisible } from "../../redux/slices/database/polylines/polylineLayerVisibleSlice.js"; +import { + updateCountdown, + closePolylineContextMenu, +} from "../../redux/slices/database/polylines/polylineContextMenuSlice.js"; +import { + selectPolylineVisible, + setPolylineVisible, +} from "../../redux/slices/database/polylines/polylineLayerVisibleSlice.js"; import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice.js"; -import { selectGisSystemStatic, setGisSystemStatic } from "../../redux/slices/webservice/gisSystemStaticSlice.js"; +import { + selectGisSystemStatic, + setGisSystemStatic, +} from "../../redux/slices/webservice/gisSystemStaticSlice.js"; //-----------Redux-Thunks------------------- import { fetchGisStationsMeasurementsThunk } from "../../redux/thunks/webservice/fetchGisStationsMeasurementsThunk"; import { fetchGisSystemStaticThunk } from "../../redux/thunks/webservice/fetchGisSystemStaticThunk"; @@ -63,38 +75,43 @@ import { fetchPoiTypThunk } from "../../redux/thunks/database/pois/fetchPoiTypTh import { updateAreaThunk } from "../../redux/thunks/database/area/updateAreaThunk"; import useDynamicDeviceLayers from "../../hooks/layers/useDynamicDeviceLayers"; + +import useDataUpdater from "@/hooks/useDataUpdater"; //----------------------------------------------------------------------------------------------------- const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //------------------------------- const dispatch = useDispatch(); + useDataUpdater(); - const countdown = useSelector((state) => state.polylineContextMenu.countdown); - const countdownActive = useSelector((state) => state.polylineContextMenu.countdownActive); - const isPolylineContextMenuOpen = useSelector((state) => state.polylineContextMenu.isOpen); + const countdown = useSelector(state => state.polylineContextMenu.countdown); + const countdownActive = useSelector(state => state.polylineContextMenu.countdownActive); + const isPolylineContextMenuOpen = useSelector(state => state.polylineContextMenu.isOpen); const polylineVisible = useSelector(selectPolylineVisible); - const isPoiTypLoaded = useSelector((state) => state.poiTypes.status === "succeeded"); - const statusMeasurements = useSelector((state) => state.gisStationsMeasurements.status); - const statusSystem = useSelector((state) => state.gisSystemStatic.status); - const statusStaticDistrict = useSelector((state) => state.gisStationsStaticDistrict.status); - const statusStatusDistrict = useSelector((state) => state.gisStationsStatusDistrict.status); + const isPoiTypLoaded = useSelector(state => state.poiTypes.status === "succeeded"); + const statusMeasurements = useSelector(state => state.gisStationsMeasurements.status); + const statusSystem = useSelector(state => state.gisSystemStatic.status); + const statusStaticDistrict = useSelector(state => state.gisStationsStaticDistrict.status); + const statusStatusDistrict = useSelector(state => state.gisStationsStatusDistrict.status); const priorityConfig = useSelector(selectPriorityConfig); - const poiLayerVisible = useSelector((state) => state.poiLayerVisible.visible); - const zoomTrigger = useSelector((state) => state.zoomTrigger.trigger); - const poiReadTrigger = useSelector((state) => state.poiReadFromDbTrigger.trigger); + const poiLayerVisible = useSelector(state => state.poiLayerVisible.visible); + const zoomTrigger = useSelector(state => state.zoomTrigger.trigger); + const poiReadTrigger = useSelector(state => state.poiReadFromDbTrigger.trigger); const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict); const GisSystemStatic = useSelector(selectGisSystemStatic); - const gisSystemStaticStatus = useSelector((state) => state.gisSystemStatic.status); - const polylineEventsDisabled = useSelector((state) => state.polylineEventsDisabled.disabled); + const gisSystemStaticStatus = useSelector(state => state.gisSystemStatic.status); + const polylineEventsDisabled = useSelector(state => state.polylineEventsDisabled.disabled); const mapLayersVisibility = useSelector(selectMapLayersState) || {}; - const selectedArea = useSelector((state) => state.selectedArea.area); - const linesData = useSelector((state) => state.gisLinesFromDatabase.data); - const gisLinesStatus = useSelector((state) => state.gisLinesStatusFromWebservice.status); - const { data: gisLinesStatusData, status: statusGisLinesStatus } = useSelector(selectGisLinesStatusFromWebservice); + const selectedArea = useSelector(state => state.selectedArea.area); + const linesData = useSelector(state => state.gisLinesFromDatabase.data); + const gisLinesStatus = useSelector(state => state.gisLinesStatusFromWebservice.status); + const { data: gisLinesStatusData, status: statusGisLinesStatus } = useSelector( + selectGisLinesStatusFromWebservice + ); const poiIconsData = useSelector(selectPoiIconsData); const poiIconsStatus = useSelector(selectPoiIconsStatus); const poiTypData = useSelector(selectPoiTypData); - const poiTypStatus = useSelector((state) => state.poiTypes.status); + const poiTypStatus = useSelector(state => state.poiTypes.status); //const poiTypStatus = useSelector(selectPoiTypStatus); //------------------------------- @@ -115,11 +132,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const [oms, setOms] = useState(null); // State für OMS-Instanz //-----userRights---------------- - const isRightsLoaded = useSelector((state) => state.gisUserRightsFromWebservice.status === "succeeded"); + const isRightsLoaded = useSelector( + state => state.gisUserRightsFromWebservice.status === "succeeded" + ); const userRights = useSelector(selectGisUserRightsFromWebservice); const hasRights = userRights.includes(56); //----------------------------- - const openPopupWithCoordinates = (e) => { + const openPopupWithCoordinates = e => { const coordinates = `${e.latlng.lat.toFixed(5)}, ${e.latlng.lng.toFixed(5)}`; setCurrentCoordinates(coordinates); setIsPopupOpen(true); @@ -166,20 +185,29 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //-------------------------------------------- - const handleCoordinatesSubmit = (coords) => { + const handleCoordinatesSubmit = coords => { const [lat, lng] = coords.split(",").map(Number); if (map && lat && lng) { map.flyTo([lat, lng], 12); // Zentriere die Karte auf die Koordinaten } }; //-----------------------------Map Initialisierung---------------- - useInitializeMap(map, mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, (value) => dispatch(setDisabled(value))); + useInitializeMap( + map, + mapRef, + setMap, + setOms, + setMenuItemAdded, + addItemsToMapContextMenu, + hasRights, + value => dispatch(setDisabled(value)) + ); //-------------------------React Hooks-------------------------------- useEffect(() => { if (linesData && Array.isArray(linesData)) { - const transformed = linesData.map((item) => ({ - coordinates: item.points.map((point) => [point.x, point.y]), + const transformed = linesData.map(item => ({ + coordinates: item.points.map(point => [point.x, point.y]), idModul: item.idModul, idLD: item.idLD, })); @@ -204,7 +232,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { map.removeLayer(poiLayerRef.current); poiLayerRef.current = new L.LayerGroup().addTo(map); } - locations.forEach((location) => {}); + locations.forEach(location => {}); }; //console.log("trigger in MapComponent.js:", poiReadTrigger); }, [map, locations, poiReadTrigger]); @@ -233,7 +261,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { deviceName, dispatch ); - }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded, userRights, poiLayerVisible, poiData, poiTypMap, dispatch]); + }, [ + map, + locations, + onLocationUpdate, + poiReadTrigger, + isPoiTypLoaded, + userRights, + poiLayerVisible, + poiData, + poiTypMap, + dispatch, + ]); //--------------------------------------------- //console.log("priorityConfig in MapComponent2: ", priorityConfig); @@ -263,8 +302,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { if (!map) return; // Entferne alte Marker und Polylinien - markers.forEach((marker) => marker.remove()); - polylines.forEach((polyline) => polyline.remove()); + markers.forEach(marker => marker.remove()); + polylines.forEach(polyline => polyline.remove()); // Setze neue Marker und Polylinien mit den aktuellen Daten const { markers: newMarkers, polylines: newPolylines } = setupPolylines( @@ -281,7 +320,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { newPolylines.forEach((polyline, index) => { //console.log("polyline: ", polyline); - const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Die Linie ist noch nicht in Webservice vorhanden oder bekommt keine Daten"; + const tooltipContent = + tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || + "Die Linie ist noch nicht in Webservice vorhanden oder bekommt keine Daten"; polyline.bindTooltip(tooltipContent, { permanent: false, @@ -291,7 +332,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { pane: "tooltipPane", }); - polyline.on("mouseover", (e) => { + polyline.on("mouseover", e => { const tooltip = polyline.getTooltip(); if (tooltip) { const mousePos = e.containerPoint; @@ -323,7 +364,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { setMarkers(newMarkers); setPolylines(newPolylines); - }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]); + }, [ + map, + linePositions, + lineColors, + tooltipContents, + newPoint, + newCoords, + tempMarker, + polylineVisible, + ]); //-------------------------------------------- @@ -338,7 +388,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { useEffect(() => { if (map) { console.log("map in MapComponent: ", map); - const handleMapMoveEnd = (event) => { + const handleMapMoveEnd = event => { const newCenter = map.getCenter(); const newZoom = map.getZoom(); @@ -367,7 +417,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const points = GisStationsStaticDistrict?.Points; if (selectedArea && map) { - const station = points.find((s) => s.Area_Name === selectedArea); + const station = points.find(s => s.Area_Name === selectedArea); if (station) { console.log("📌 Gefundene Station:", station); @@ -387,7 +437,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //-------------------------------------------- useEffect(() => { if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) { - addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates); + addItemsToMapContextMenu( + map, + menuItemAdded, + setMenuItemAdded, + hasRights, + setShowPopup, + setPopupCoordinates + ); } }, [map, poiLayerRef, isPoiTypLoaded, menuItemAdded, hasRights, isRightsLoaded]); //-------------------------------------------- @@ -464,14 +521,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { // Entferne alle Marker aus der Karte if (!map) return; // Sicherstellen, dass map existiert - areaMarkers.forEach((marker) => { + areaMarkers.forEach(marker => { if (map.hasLayer(marker)) { map.removeLayer(marker); } }); } else { // Wenn editMode aktiviert ist, füge die Marker hinzu und aktiviere Dragging - areaMarkers.forEach((marker) => { + areaMarkers.forEach(marker => { if (!map.hasLayer(marker)) { marker.addTo(map); // Layer hinzufügen } @@ -482,7 +539,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }, [areaMarkers, map]); //---------------------------------- - const { markerStates, layerRefs } = useDynamicDeviceLayers(map, GisSystemStatic, mapLayersVisibility, priorityConfig, oms); + const { markerStates, layerRefs } = useDynamicDeviceLayers( + map, + GisSystemStatic, + mapLayersVisibility, + priorityConfig, + oms + ); useEffect(() => { const handleVisibilityChange = () => { if (!map) return; @@ -584,7 +647,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { dispatch(fetchGisLinesStatusThunk()); }, [dispatch]); //--------------------------------------------------------- - const rights = useSelector((state) => state.gisUserRightsFromWebservice.rights); + const rights = useSelector(state => state.gisUserRightsFromWebservice.rights); useEffect(() => { dispatch(fetchUserRightsThunk()); }, [dispatch]); @@ -653,7 +716,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { useEffect(() => { if (poiTypStatus === "succeeded" && Array.isArray(poiTypData)) { const map = new Map(); - poiTypData.forEach((item) => map.set(item.idPoiTyp, item.name)); + poiTypData.forEach(item => map.set(item.idPoiTyp, item.name)); setPoiTypMap(map); } }, [poiTypData, poiTypStatus]); @@ -672,7 +735,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { Object.entries(markerStates).forEach(([systemName, markers]) => { const isVisible = mapLayersVisibility[systemName]; - markers.forEach((marker) => { + markers.forEach(marker => { const hasLayer = map.hasLayer(marker); if (editMode || !isVisible) { if (hasLayer) map.removeLayer(marker); @@ -684,7 +747,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { // optional für alle zusammen const allMarkers = Object.values(markerStates) - .filter((entry) => Array.isArray(entry)) + .filter(entry => Array.isArray(entry)) .flat(); checkOverlappingMarkers(map, allMarkers, plusRoundIcon); @@ -697,22 +760,55 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { window.oms = oms; // Für Debugging global } }, [oms]); + //--------------------------------------------- //-------------------------------------------- return ( <> {/* Zeigt das POI-Modal, wenn `showPoiModal` true ist */} - {showPoiModal && setShowPoiModal(false)} />} + {showPoiModal && ( + setShowPoiModal(false)} /> + )} -
{showPoiUpdateModal && setShowPoiUpdateModal(false)} poiData={currentPoiData} onSubmit={() => {}} latlng={popupCoordinates} />}
+
+ {showPoiUpdateModal && ( + setShowPoiUpdateModal(false)} + poiData={currentPoiData} + onSubmit={() => {}} + latlng={popupCoordinates} + /> + )} +
{showPopup && ( -
-
e.stopPropagation()}> -
@@ -720,7 +816,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { )}
- {GisStationsStaticDistrict && GisStationsStaticDistrict.Points?.length > 0 && } + {GisStationsStaticDistrict && GisStationsStaticDistrict.Points?.length > 0 && ( + + )}
@@ -740,7 +838,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
- + ); }; diff --git a/config/appVersion.js b/config/appVersion.js index c2348f312..5717142f0 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.228"; +export const APP_VERSION = "1.1.229"; diff --git a/hooks/layers/useCiscoRouterMarkersLayer.js b/hooks/layers/useCiscoRouterMarkersLayer.js deleted file mode 100644 index 79965b87f..000000000 --- a/hooks/layers/useCiscoRouterMarkersLayer.js +++ /dev/null @@ -1,50 +0,0 @@ -/* // hooks/useCiscoRouterMarkersLayer.js -import { useEffect, useState } from "react"; -import L from "leaflet"; -import { createAndSetDevices } from "../../utils/createAndSetDevices"; -import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; -import { checkOverlappingMarkers } from "../../utils/mapUtils"; - -const useCiscoRouterMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { - const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); - - useEffect(() => { - if (GisSystemStatic && GisSystemStatic.length && map) { - createAndSetDevices(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig); // Cisco Router - } - }, [GisSystemStatic, map, priorityConfig]); - - useEffect(() => { - if (map && ciscoRouterMarkers.length) { - ciscoRouterMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - // Popup on mouseover and mouseout - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - - addContextMenuToMarker(marker); - }); - - // Disable map context menu - map.options.contextmenu = false; - map.options.contextmenuItems = []; - - oms.map.options.contextmenu = false; - oms.map.options.contextmenuItems = []; - - // Call the function to check for overlapping markers - checkOverlappingMarkers(oms, map); - } - }, [map, ciscoRouterMarkers]); - - return ciscoRouterMarkers; -}; - -export default useCiscoRouterMarkersLayer; - */ diff --git a/hooks/layers/useDauzMarkersLayer.js b/hooks/layers/useDauzMarkersLayer.js deleted file mode 100644 index f1352c4ed..000000000 --- a/hooks/layers/useDauzMarkersLayer.js +++ /dev/null @@ -1,46 +0,0 @@ -/* // hooks/useDauzMarkersLayer.js -import { useEffect, useState } from "react"; -import L from "leaflet"; -import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; -import { createAndSetDevices } from "../../utils/createAndSetDevices"; - -const useDauzMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { - const [dauzMarkers, setDauzMarkers] = useState([]); - - useEffect(() => { - if (GisSystemStatic && GisSystemStatic.length && map) { - createAndSetDevices(110, setDauzMarkers, GisSystemStatic, priorityConfig); // DAUZ - } - }, [GisSystemStatic, map, priorityConfig]); - - useEffect(() => { - if (map && dauzMarkers.length) { - dauzMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - // Popup on mouseover and mouseout - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - - addContextMenuToMarker(marker); - }); - - // Disable map context menu - map.options.contextmenu = false; - map.options.contextmenuItems = []; - - oms.map.options.contextmenu = false; - oms.map.options.contextmenuItems = []; - } - }, [map, dauzMarkers, oms]); - - return dauzMarkers; -}; - -export default useDauzMarkersLayer; - */ diff --git a/hooks/layers/useDynamicDeviceLayers.js b/hooks/layers/useDynamicDeviceLayers.js index 49288d4a4..edcdc4c60 100644 --- a/hooks/layers/useDynamicDeviceLayers.js +++ b/hooks/layers/useDynamicDeviceLayers.js @@ -17,12 +17,12 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior const [markerStates, setMarkerStates] = useState({}); const layerRefs = useRef({}); - // Marker initialisieren + // Marker initialisieren (nicht sichtbar machen) useEffect(() => { if (!map || GisSystemStatic.length === 0) return; GisSystemStatic.forEach(({ Name, IdSystem }) => { - const key = `system-${IdSystem}`; // ✅ Einheitlicher Key + const key = `system-${IdSystem}`; // Einheitlicher Key if (!layerRefs.current[key]) { layerRefs.current[key] = new L.LayerGroup().addTo(map); @@ -30,12 +30,11 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior createAndSetDevices( IdSystem, - (newMarkers) => { - setMarkerStates((prev) => ({ ...prev, [key]: newMarkers })); - newMarkers.forEach((m) => { - layerRefs.current[key].addLayer(m); - if (oms) oms.addMarker(m); - }); + newMarkers => { + setMarkerStates(prev => ({ ...prev, [key]: newMarkers })); + + // ❌ NICHT direkt zur Karte hinzufügen + // Sichtbarkeit folgt im 2. useEffect checkOverlappingMarkers(map, newMarkers, plusRoundIcon, oms); }, GisSystemStatic, @@ -44,14 +43,14 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior }); }, [map, GisSystemStatic, priorityConfig]); - // Sichtbarkeit aktualisieren + // Sichtbarkeit nach Redux-Status steuern useEffect(() => { if (!map) return; const editMode = localStorage.getItem("editMode") === "true"; Object.entries(markerStates).forEach(([key, markers]) => { const isVisible = mapLayersVisibility[key]; - markers.forEach((marker) => { + markers.forEach(marker => { const hasLayer = map.hasLayer(marker); if (editMode || !isVisible) { if (hasLayer) map.removeLayer(marker); @@ -61,9 +60,7 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior }); }); - const allMarkers = Object.values(markerStates) - .filter(Array.isArray) // nur Arrays zulassen - .flat(); + const allMarkers = Object.values(markerStates).filter(Array.isArray).flat(); checkOverlappingMarkers(map, allMarkers, plusRoundIcon); }, [map, markerStates, mapLayersVisibility]); diff --git a/hooks/layers/useEciMarkersLayer.js b/hooks/layers/useEciMarkersLayer.js deleted file mode 100644 index fee8a003e..000000000 --- a/hooks/layers/useEciMarkersLayer.js +++ /dev/null @@ -1,49 +0,0 @@ -/* // /hooks/layers/useEciMarkersLayer.js -import { useEffect, useState } from "react"; -import L from "leaflet"; -import { createAndSetDevices } from "../../utils/createAndSetDevices"; -import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; -import { checkOverlappingMarkers } from "../../utils/mapUtils"; - -const useEciMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { - const [eciMarkers, setEciMarkers] = useState([]); - - useEffect(() => { - if (GisSystemStatic && GisSystemStatic.length && map) { - createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System - } - }, [GisSystemStatic, map, priorityConfig]); - - useEffect(() => { - if (map && eciMarkers.length) { - eciMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - // Popup beim Überfahren mit der Maus öffnen und schließen - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - - addContextMenuToMarker(marker); - }); - // Disable map context menu - map.options.contextmenu = false; - map.options.contextmenuItems = []; - - oms.map.options.contextmenu = false; - oms.map.options.contextmenuItems = []; - - // Call the function to check for overlapping markers - checkOverlappingMarkers(oms, map); - } - }, [map, eciMarkers]); - - return eciMarkers; -}; - -export default useEciMarkersLayer; - */ diff --git a/hooks/layers/useGmaMarkersLayer.js b/hooks/layers/useGmaMarkersLayer.js deleted file mode 100644 index ed2a5da48..000000000 --- a/hooks/layers/useGmaMarkersLayer.js +++ /dev/null @@ -1,54 +0,0 @@ -import { useEffect } from "react"; -import { store } from "../redux/store"; -import L from "leaflet"; -import "leaflet-contextmenu"; -import { openInNewTab } from "./openInNewTab"; - -const useGmaMarkersLayer = (map, markers, selectedMarkerId) => { - useEffect(() => { - if (!map || !markers || markers.length === 0) return; - - const markerGroup = L.layerGroup(); - - markers.forEach((markerData) => { - const marker = L.marker([markerData.lat, markerData.lng], { - contextmenu: true, - contextmenuItems: [ - { - text: "Station öffnen (Tab)", - icon: "/img/screen_new.png", - callback: () => - openInNewTab(null, { - options: { - link: markerData.link, - }, - }), - }, - ], - }); - - markerGroup.addLayer(marker); - - // Optional: highlight selected marker - if (selectedMarkerId && markerData.id === selectedMarkerId) { - marker.setZIndexOffset(1000); - marker.setIcon( - L.icon({ - iconUrl: "/img/marker-selected.png", - iconSize: [25, 41], - iconAnchor: [12, 41], - }) - ); - } - }); - - markerGroup.addTo(map); - - return () => { - markerGroup.clearLayers(); - map.removeLayer(markerGroup); - }; - }, [map, markers, selectedMarkerId]); -}; - -export default useGmaMarkersLayer; diff --git a/hooks/layers/useLteModemMarkersLayer.js b/hooks/layers/useLteModemMarkersLayer.js deleted file mode 100644 index 8c4d82cd7..000000000 --- a/hooks/layers/useLteModemMarkersLayer.js +++ /dev/null @@ -1,47 +0,0 @@ -// hooks/useLteModemMarkersLayer.js -import { useEffect, useState } from "react"; -import L from "leaflet"; -import { createAndSetDevices } from "../../utils/createAndSetDevices"; -import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; -import { checkOverlappingMarkers } from "../../utils/mapUtils"; - -const useLteModemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { - const [lteModemMarkers, setLteModemMarkers] = useState([]); - - useEffect(() => { - if (GisSystemStatic && GisSystemStatic.length && map) { - createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem - } - }, [GisSystemStatic, map, priorityConfig]); - - useEffect(() => { - if (map && lteModemMarkers.length) { - lteModemMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - // Popup beim Überfahren mit der Maus öffnen und schließen - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - - addContextMenuToMarker(marker); - }); - // Disable map context menu - map.options.contextmenu = false; - map.options.contextmenuItems = []; - - oms.map.options.contextmenu = false; - oms.map.options.contextmenuItems = []; - - // Call the function to check for overlapping markers - checkOverlappingMarkers(oms, map); - } - }, [map, lteModemMarkers]); - - return lteModemMarkers; -}; -export default useLteModemMarkersLayer; diff --git a/hooks/layers/useOtdrMarkersLayer.js b/hooks/layers/useOtdrMarkersLayer.js deleted file mode 100644 index 837b77e9e..000000000 --- a/hooks/layers/useOtdrMarkersLayer.js +++ /dev/null @@ -1,46 +0,0 @@ -/* // hooks/useOtdrMarkersLayer.js -import { useEffect, useState } from "react"; -import L from "leaflet"; -import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; -import { createAndSetDevices } from "../../utils/createAndSetDevices"; // Assuming this function is in poiUtils - -const useOtdrMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { - const [otdrMarkers, setOtdrMarkers] = useState([]); - - useEffect(() => { - if (GisSystemStatic && GisSystemStatic.length && map) { - createAndSetDevices(9, setOtdrMarkers, GisSystemStatic, priorityConfig); // OTDR - } - }, [GisSystemStatic, map, priorityConfig]); - - useEffect(() => { - if (map && otdrMarkers.length) { - otdrMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - // Popup on mouseover and mouseout - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - - addContextMenuToMarker(marker); - }); - - // Disable map context menu - map.options.contextmenu = false; - map.options.contextmenuItems = []; - - oms.map.options.contextmenu = false; - oms.map.options.contextmenuItems = []; - } - }, [map, otdrMarkers, oms]); - - return otdrMarkers; -}; - -export default useOtdrMarkersLayer; - */ diff --git a/hooks/layers/useSiemensMarkersLayer.js b/hooks/layers/useSiemensMarkersLayer.js deleted file mode 100644 index f862aeab3..000000000 --- a/hooks/layers/useSiemensMarkersLayer.js +++ /dev/null @@ -1,50 +0,0 @@ -/* // hooks/useSiemensMarkersLayer.js -import { useState, useEffect } from "react"; -import L from "leaflet"; -import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; -import { createAndSetDevices } from "../../utils/createAndSetDevices"; -import { checkOverlappingMarkers } from "../../utils/mapUtils"; - -const useSiemensMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => { - const [siemensMarkers, setSiemensMarkers] = useState([]); - - useEffect(() => { - if (gisSystemStatic && gisSystemStatic.length && map) { - createAndSetDevices(8, setSiemensMarkers, gisSystemStatic, priorityConfig); // Siemens-System - } - }, [gisSystemStatic, map, priorityConfig]); - - useEffect(() => { - if (map && siemensMarkers.length) { - siemensMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - // Popup on mouseover and mouseout - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - - addContextMenuToMarker(marker); - }); - - // Disable map context menu - map.options.contextmenu = false; - map.options.contextmenuItems = []; - - oms.map.options.contextmenu = false; - oms.map.options.contextmenuItems = []; - - // Call the function to check for overlapping markers - checkOverlappingMarkers(oms, map); - } - }, [map, siemensMarkers, oms]); - - return siemensMarkers; -}; - -export default useSiemensMarkersLayer; - */ diff --git a/hooks/layers/useSmsfunkmodemMarkersLayer.js b/hooks/layers/useSmsfunkmodemMarkersLayer.js deleted file mode 100644 index 5ebd714c3..000000000 --- a/hooks/layers/useSmsfunkmodemMarkersLayer.js +++ /dev/null @@ -1,66 +0,0 @@ -/* // hooks/useSmsfunkmodemMarkersLayer.js -import { useEffect, useState } from "react"; -import L from "leaflet"; -import "leaflet-contextmenu"; -import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; - -const useSmsfunkmodemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig, isVisible) => { - const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); - - useEffect(() => { - if (!map || !GisSystemStatic) return; - - // Debugging: Logge die Sichtbarkeit und die übergebenen Daten - console.log("isVisible für SMS Modem:", isVisible); - console.log("Alle Stationen in GisSystemStatic:", GisSystemStatic); - - // Hilfsfunktion: Normalisiert Strings - const normalizeString = (str) => str?.trim().toLowerCase() || ""; - - // Filter für SMS Modem (System === 111 oder Name entspricht "SMS Modem") - const markers = isVisible - ? GisSystemStatic.filter((station) => station.System === 111 || normalizeString(station.Name) === "SMS Modem").map((station) => { - console.log("Gefundener SMS Modem-Marker:", station); // Debugging - const marker = L.marker([station.Latitude, station.Longitude], { - icon: L.icon({ - iconUrl: "/img/icons/pois/sms-funkmodem.png", - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - }), - id: station.id, - areaName: station.Area_Name, - draggable: false, - }).bindPopup(` -
- ${station.Area_Name || "Unbekannt"}
- ${station.Description || "No Description"}
-
- `); - - // Füge ein Kontextmenü hinzu - addContextMenuToMarker(marker); - return marker; - }) - : []; - - // Setze die Marker im Zustand - setSmsfunkmodemMarkers(markers); - - // Füge Marker zur Karte hinzu - markers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - }); - - // Cleanup: Entferne Marker bei Deaktivierung oder wenn der Hook entladen wird - return () => { - markers.forEach((marker) => marker.remove()); - }; - }, [map, GisSystemStatic, isVisible]); - - return smsfunkmodemMarkers; -}; - -export default useSmsfunkmodemMarkersLayer; - */ diff --git a/hooks/layers/useSonstigeMarkersLayer.js b/hooks/layers/useSonstigeMarkersLayer.js deleted file mode 100644 index f0876e745..000000000 --- a/hooks/layers/useSonstigeMarkersLayer.js +++ /dev/null @@ -1,46 +0,0 @@ -/* // hooks/useSonstigeMarkersLayer.js -import { useEffect, useState } from "react"; -import L from "leaflet"; -import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; -import { createAndSetDevices } from "../../utils/createAndSetDevices"; - -const useSonstigeMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { - const [sonstigeMarkers, setSonstigeMarkers] = useState([]); - - useEffect(() => { - if (GisSystemStatic && GisSystemStatic.length && map) { - createAndSetDevices(200, setSonstigeMarkers, GisSystemStatic, priorityConfig); // Sonstige - } - }, [GisSystemStatic, map, priorityConfig]); - - useEffect(() => { - if (map && sonstigeMarkers.length) { - sonstigeMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - // Popup on mouseover and mouseout - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - - addContextMenuToMarker(marker); - }); - - // Disable map context menu - map.options.contextmenu = false; - map.options.contextmenuItems = []; - - oms.map.options.contextmenu = false; - oms.map.options.contextmenuItems = []; - } - }, [map, sonstigeMarkers, oms]); - - return sonstigeMarkers; -}; - -export default useSonstigeMarkersLayer; - */ diff --git a/hooks/layers/useTalasMarkersLayer.js b/hooks/layers/useTalasMarkersLayer.js deleted file mode 100644 index 7ec5d0118..000000000 --- a/hooks/layers/useTalasMarkersLayer.js +++ /dev/null @@ -1,36 +0,0 @@ -// /hooks/layers/useTalasMarkersLayer.js -/* import { useEffect, useState } from "react"; -import { createAndSetDevices } from "../../utils/createAndSetDevices"; -import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; - -const useTalasMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { - const [talasMarkers, setTalasMarkers] = useState([]); - - useEffect(() => { - if (GisSystemStatic && GisSystemStatic.length && map) { - createAndSetDevices(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System - } - }, [GisSystemStatic, map, priorityConfig]); - - useEffect(() => { - if (map && talasMarkers.length && oms) { - talasMarkers.forEach((marker) => { - oms.addMarker(marker); // Erst zu OMS hinzufügen - marker.addTo(map); // Dann zum Map hinzufügen - - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - - addContextMenuToMarker(marker); // Kontextmenü-Event hinzufügen - }); - } - }, [map, talasMarkers, oms]); - - return talasMarkers; -}; - -export default useTalasMarkersLayer; */ diff --git a/hooks/layers/useTalasiclMarkersLayer.js b/hooks/layers/useTalasiclMarkersLayer.js deleted file mode 100644 index 58a1423f5..000000000 --- a/hooks/layers/useTalasiclMarkersLayer.js +++ /dev/null @@ -1,46 +0,0 @@ -/* // hooks/useTalasiclMarkersLayer.js -import { useEffect, useState } from "react"; -import L from "leaflet"; -import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; -import { createAndSetDevices } from "../../utils/createAndSetDevices"; - -const useTalasiclMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { - const [talasiclMarkers, setTalasiclMarkers] = useState([]); - - useEffect(() => { - if (GisSystemStatic && GisSystemStatic.length && map) { - createAndSetDevices(100, setTalasiclMarkers, GisSystemStatic, priorityConfig); // TALASICL - } - }, [GisSystemStatic, map, priorityConfig]); - - useEffect(() => { - if (map && talasiclMarkers.length) { - talasiclMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - // Popup on mouseover and mouseout - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - - addContextMenuToMarker(marker); - }); - - // Disable map context menu - map.options.contextmenu = false; - map.options.contextmenuItems = []; - - oms.map.options.contextmenu = false; - oms.map.options.contextmenuItems = []; - } - }, [map, talasiclMarkers, oms]); - - return talasiclMarkers; -}; - -export default useTalasiclMarkersLayer; - */ diff --git a/hooks/layers/useTkComponentsMarkersLayer.js b/hooks/layers/useTkComponentsMarkersLayer.js deleted file mode 100644 index 8ea789dfa..000000000 --- a/hooks/layers/useTkComponentsMarkersLayer.js +++ /dev/null @@ -1,50 +0,0 @@ -/* // /hooks/layers/useTkComponentsMarkersLayer.js -import { useEffect, useState } from "react"; -import L from "leaflet"; -import { createAndSetDevices } from "../../utils/createAndSetDevices"; -import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; -import { checkOverlappingMarkers } from "../../utils/mapUtils"; - -const useTkComponentsMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { - const [tkComponentsMarkers, setTkComponentsMarkers] = useState([]); - - useEffect(() => { - if (GisSystemStatic && GisSystemStatic.length && map) { - createAndSetDevices(2, setTkComponentsMarkers, GisSystemStatic, priorityConfig); // ECI-System - } - GisSystemStatic.filter((system) => system.IdSystem === 30).forEach((station) => console.log("Koordinaten für TK-Komponenten wird von hier nie aufgerufen:", station.Latitude, station.Longitude)); - }, [GisSystemStatic, map, priorityConfig]); - - useEffect(() => { - if (map && tkComponentsMarkers.length) { - tkComponentsMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - // Popup beim Überfahren mit der Maus öffnen und schließen - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - - addContextMenuToMarker(marker); - }); - // Disable map context menu - map.options.contextmenu = false; - map.options.contextmenuItems = []; - - oms.map.options.contextmenu = false; - oms.map.options.contextmenuItems = []; - - // Call the function to check for overlapping markers - checkOverlappingMarkers(oms, map); - } - }, [map, tkComponentsMarkers]); - - return tkComponentsMarkers; -}; - -export default useTkComponentsMarkersLayer; - */ diff --git a/hooks/layers/useUlafMarkersLayer.js b/hooks/layers/useUlafMarkersLayer.js deleted file mode 100644 index 52259c7c1..000000000 --- a/hooks/layers/useUlafMarkersLayer.js +++ /dev/null @@ -1,78 +0,0 @@ -/* // hooks/useUlafMarkersLayer.js -import { useEffect, useState } from "react"; -import L from "leaflet"; -import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; -//import { fetchDeviceNameById } from "../services/api/fetchDeviceNameById"; - - -const useUlafMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { - const [ulafMarkers, setUlafMarkers] = useState([]); - - useEffect(() => { - if (!map || !GisSystemStatic) return; - - const markers = []; - GisSystemStatic.forEach((station) => { - if (station.System === 0) { - // Adjust the condition to match ULAF system identification - const marker = L.marker([station.Lat, station.Lon], { - icon: L.icon({ - iconUrl: "/img/icons/ulaf.png", - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - }), - id: station.id, - name: station.name, - description: station.description, - }); - - marker.bindPopup(` -
- ${station.name || "Unbekannt"}
- ${station.description || "Keine Beschreibung"} -
- `); - - marker.on("mouseover", function () { - this.openPopup(); - }); - - marker.on("mouseout", function () { - this.closePopup(); - }); - - marker.on("click", async () => { - //const deviceName = await fetchDeviceNameById(station.idLD); - marker - .bindPopup( - ` -
- ${station.name || "Unbekannt"}
- ${deviceName}
- ${station.description || "Keine Beschreibung"} -
- ` - ) - .openPopup(); - }); - - markers.push(marker); - if (map) marker.addTo(map); - if (oms) oms.addMarker(marker); - addContextMenuToMarker(marker); - } - }); - - setUlafMarkers(markers); - - return () => { - markers.forEach((marker) => map.removeLayer(marker)); - }; - }, [map, GisSystemStatic, oms, priorityConfig]); - - return ulafMarkers; -}; - -export default useUlafMarkersLayer; - */ diff --git a/hooks/layers/useWagoMarkersLayer.js b/hooks/layers/useWagoMarkersLayer.js deleted file mode 100644 index a91a367cf..000000000 --- a/hooks/layers/useWagoMarkersLayer.js +++ /dev/null @@ -1,50 +0,0 @@ -/* // hooks/useWagoMarkersLayer.js -import { useState, useEffect } from "react"; -import L from "leaflet"; -import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; -import { createAndSetDevices } from "../../utils/createAndSetDevices"; -import { checkOverlappingMarkers } from "../../utils/mapUtils"; - -const useWagoMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => { - const [wagoMarkers, setWagoMarkers] = useState([]); - - useEffect(() => { - if (gisSystemStatic && gisSystemStatic.length && map) { - createAndSetDevices(7, setWagoMarkers, gisSystemStatic, priorityConfig); // WAGO-System - } - }, [gisSystemStatic, map, priorityConfig]); - - useEffect(() => { - if (map && wagoMarkers.length) { - wagoMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - // Popup on mouseover and mouseout - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - - addContextMenuToMarker(marker); - }); - - // Disable map context menu - map.options.contextmenu = false; - map.options.contextmenuItems = []; - - oms.map.options.contextmenu = false; - oms.map.options.contextmenuItems = []; - - // Call the function to check for overlapping markers - checkOverlappingMarkers(oms, map); - } - }, [map, wagoMarkers, oms]); - - return wagoMarkers; -}; - -export default useWagoMarkersLayer; - */ diff --git a/hooks/layers/useWdmMarkersLayer.js b/hooks/layers/useWdmMarkersLayer.js deleted file mode 100644 index 1bb0a2da9..000000000 --- a/hooks/layers/useWdmMarkersLayer.js +++ /dev/null @@ -1,46 +0,0 @@ -/* // hooks/useWdmMarkersLayer.js -import { useEffect, useState } from "react"; -import L from "leaflet"; -import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; -import { createAndSetDevices } from "../../utils/createAndSetDevices"; - -const useWdmMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => { - const [wdmMarkers, setWdmMarkers] = useState([]); - - useEffect(() => { - if (GisSystemStatic && GisSystemStatic.length && map) { - createAndSetDevices(10, setWdmMarkers, GisSystemStatic, priorityConfig); // WDM - } - }, [GisSystemStatic, map, priorityConfig]); - - useEffect(() => { - if (map && wdmMarkers.length) { - wdmMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - // Popup on mouseover and mouseout - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - - addContextMenuToMarker(marker); - }); - - // Disable map context menu - map.options.contextmenu = false; - map.options.contextmenuItems = []; - - oms.map.options.contextmenu = false; - oms.map.options.contextmenuItems = []; - } - }, [map, wdmMarkers, oms]); - - return wdmMarkers; -}; - -export default useWdmMarkersLayer; - */ diff --git a/hooks/useDataUpdater.js b/hooks/useDataUpdater.js new file mode 100644 index 000000000..bf5e9ec83 --- /dev/null +++ b/hooks/useDataUpdater.js @@ -0,0 +1,31 @@ +// hooks/useDataUpdater.js +import { useEffect } from "react"; +import { useDispatch } from "react-redux"; +// import type { AppDispatch } from "../redux/store"; + +// ✅ Thunks aus korrektem Pfad importieren +import { fetchGisLinesStatusThunk } from "../redux/thunks/webservice/fetchGisLinesStatusThunk"; +import { fetchGisStationsMeasurementsThunk } from "../redux/thunks/webservice/fetchGisStationsMeasurementsThunk"; +import { fetchGisStationsStaticDistrictThunk } from "../redux/thunks/webservice/fetchGisStationsStaticDistrictThunk"; +import { fetchGisStationsStatusDistrictThunk } from "../redux/thunks/webservice/fetchGisStationsStatusDistrictThunk"; +import { fetchGisSystemStaticThunk } from "../redux/thunks/webservice/fetchGisSystemStaticThunk"; + +const REFRESH_INTERVAL = parseInt(process.env.NEXT_PUBLIC_REFRESH_INTERVAL || "10000"); + +export default function useDataUpdater() { + const dispatch = useDispatch(); + useEffect(() => { + const updateAll = () => { + dispatch(fetchGisLinesStatusThunk()); + dispatch(fetchGisStationsMeasurementsThunk()); + dispatch(fetchGisStationsStaticDistrictThunk()); + dispatch(fetchGisStationsStatusDistrictThunk()); + dispatch(fetchGisSystemStaticThunk()); + }; + + updateAll(); // direkt initial einmal laden + const interval = setInterval(updateAll, REFRESH_INTERVAL); + + return () => clearInterval(interval); // Cleanup + }, [dispatch]); +} diff --git a/hooks/useDataUpdater.ts b/hooks/useDataUpdater.ts deleted file mode 100644 index b5c8899e9..000000000 --- a/hooks/useDataUpdater.ts +++ /dev/null @@ -1,26 +0,0 @@ -// hooks/useDataUpdater.ts -import { useEffect } from "react"; -import { useDispatch } from "react-redux"; -import { fetchPois } from "../redux/slices/database/pois/poiTypSlice"; -import { fetchLineStatus } from "@redux/lineStatusSlice"; -import { fetchDeviceStatus } from "@redux/deviceStatusSlice"; - -const REFRESH_INTERVAL = parseInt(process.env.NEXT_PUBLIC_REFRESH_INTERVAL || "10000"); - -export default function useDataUpdater() { - const dispatch = useDispatch(); - - useEffect(() => { - const update = () => { - dispatch(fetchPois()); - dispatch(fetchLineStatus()); - dispatch(fetchDeviceStatus()); - // Füge hier weitere dispatches hinzu - }; - - update(); // Initialer Abruf - const interval = setInterval(update, REFRESH_INTERVAL); - - return () => clearInterval(interval); - }, [dispatch]); -} diff --git a/hooks/useDynamicMarkerLayers.js b/hooks/useDynamicMarkerLayers.js index 8a8f2be3c..d847e25ea 100644 --- a/hooks/useDynamicMarkerLayers.js +++ b/hooks/useDynamicMarkerLayers.js @@ -6,75 +6,42 @@ import { plusRoundIcon } from "../components/PlusRoundIcon.js"; export const useDynamicMarkerLayers = ( map, - gisSystemStaticLoaded, GisSystemStatic, + mapLayersVisibility, priorityConfig, - setMarkerStates + setMarkerStates // Funktion wie setMarkers(z.B. map.setMarkers(prev => ({...prev, [systemName]: markers}))) ) => { - const layerRefs = { - gmaLayerRef: useRef(null), - talasLayerRef: useRef(null), - eciMarkersLayerRef: useRef(null), - gsmModemMarkersLayerRef: useRef(null), - ciscoRouterMarkersLayerRef: useRef(null), - wagoMarkersLayerRef: useRef(null), - siemensMarkersLayerRef: useRef(null), - otdrMarkersLayerRef: useRef(null), - wdmMarkersLayerRef: useRef(null), - messstellenMarkersLayerRef: useRef(null), - talasiclMarkersLayerRef: useRef(null), - dauzMarkersLayerRef: useRef(null), - smsfunkmodemMarkersLayerRef: useRef(null), - ulafMarkersLayerRef: useRef(null), - sonstigeMarkersLayerRef: useRef(null), - tkComponentsMarkersRef: useRef(null), - }; + const layerRefs = useRef({}); // dynamisch pro systemName useEffect(() => { - if (!gisSystemStaticLoaded || !map) return; + if (!map || !Array.isArray(GisSystemStatic?.Systems)) return; - const layerGroups = [ - { ref: layerRefs.gmaLayerRef, id: 11, setState: setMarkerStates.setGmaMarkers }, - { ref: layerRefs.talasLayerRef, id: 1, setState: setMarkerStates.setTalasMarkers }, - { ref: layerRefs.eciMarkersLayerRef, id: 2, setState: setMarkerStates.setEciMarkers }, - { ref: layerRefs.gsmModemMarkersLayerRef, id: 5, setState: setMarkerStates.setGsmModemMarkers }, - { ref: layerRefs.ciscoRouterMarkersLayerRef, id: 6, setState: setMarkerStates.setCiscoRouterMarkers }, - { ref: layerRefs.wagoMarkersLayerRef, id: 7, setState: setMarkerStates.setWagoMarkers }, - { ref: layerRefs.siemensMarkersLayerRef, id: 8, setState: setMarkerStates.setSiemensMarkers }, - { ref: layerRefs.otdrMarkersLayerRef, id: 9, setState: setMarkerStates.setOtdrMarkers }, - { ref: layerRefs.wdmMarkersLayerRef, id: 10, setState: setMarkerStates.setWdmMarkers }, - { ref: layerRefs.messstellenMarkersLayerRef, id: 13, setState: setMarkerStates.setMessstellenMarkers }, - { ref: layerRefs.talasiclMarkersLayerRef, id: 100, setState: setMarkerStates.setTalasiclMarkers }, - { ref: layerRefs.dauzMarkersLayerRef, id: 110, setState: setMarkerStates.setDauzMarkers }, - { ref: layerRefs.smsfunkmodemMarkersLayerRef, id: 111, setState: setMarkerStates.setSmsfunkmodemMarkers }, - { ref: layerRefs.ulafMarkersLayerRef, id: 0, setState: setMarkerStates.setUlafMarkers }, - { ref: layerRefs.sonstigeMarkersLayerRef, id: 200, setState: setMarkerStates.setSonstigeMarkers }, - { ref: layerRefs.tkComponentsMarkersRef, id: 30, setState: setMarkerStates.setTkComponentsMarkers }, - ]; + GisSystemStatic.Systems.forEach(system => { + const { id, System_Name } = system; - layerGroups.forEach(({ ref }) => { - if (!ref.current) { - ref.current = new L.LayerGroup().addTo(map); + if (!layerRefs.current[System_Name]) { + layerRefs.current[System_Name] = new L.LayerGroup().addTo(map); } + + // Sichtbarkeit prüfen + const isVisible = mapLayersVisibility?.[System_Name] ?? false; + const layer = layerRefs.current[System_Name]; + layer.clearLayers(); + + createAndSetDevices( + id, + markers => { + setMarkerStates(prev => ({ ...prev, [System_Name]: markers })); + + if (isVisible) { + markers.forEach(marker => layer.addLayer(marker)); + } + + checkOverlappingMarkers(map, markers, plusRoundIcon); + }, + GisSystemStatic, + priorityConfig + ); }); - - const updateMarkers = ({ ref, id, setState }) => { - if (ref.current) { - ref.current.clearLayers(); - } - - createAndSetDevices(id, (newMarkers) => { - setState(newMarkers); - newMarkers.forEach((marker) => ref.current.addLayer(marker)); - checkOverlappingMarkers(map, newMarkers, plusRoundIcon); - }, GisSystemStatic, priorityConfig); - }; - - const updateAllMarkers = () => { - layerGroups.forEach(updateMarkers); - }; - - updateAllMarkers(); - - }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]); + }, [map, GisSystemStatic, mapLayersVisibility, priorityConfig]); }; diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 000000000..9c3338335 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./*"] + } + } +} diff --git a/package-lock.json b/package-lock.json index 1ac531b01..98162beb8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "03.06.2025 NodeMap", + "name": "03.06.2025 NodeMap at home", "lockfileVersion": 3, "requires": true, "packages": {