From d0811366f5b71daf9d1ed1bd7126fedd05ad8cbb Mon Sep 17 00:00:00 2001 From: ISA Date: Sun, 22 Dec 2024 07:07:09 +0100 Subject: [PATCH] feat: Marker-Layer-Logik in useDynamicMarkerLayers Hook ausgelagert MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Logik zur Initialisierung und Aktualisierung von Marker-Layern aus MapComponent.js ausgelagert. - Neuer Hook: useDynamicMarkerLayers im hooks-Verzeichnis hinzugefügt. - Modularisierung und Wiederverwendbarkeit verbessert. --- components/MapComponent.js | 116 +++++++------------------------- hooks/useDynamicMarkerLayers.js | 80 ++++++++++++++++++++++ 2 files changed, 105 insertions(+), 91 deletions(-) create mode 100644 hooks/useDynamicMarkerLayers.js diff --git a/components/MapComponent.js b/components/MapComponent.js index 2e24d8cf9..73c41e709 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -47,6 +47,7 @@ import { usePolylineTooltipLayer } from "../hooks/usePolylineTooltipLayer"; import { useFetchLineStatusData } from "../hooks/useFetchLineStatusData"; import { useFetchPriorityConfig } from "../hooks/useFetchPriorityConfig"; import { useUpdateGmaData } from "../hooks/useUpdateGmaData"; +import { useDynamicMarkerLayers } from "../hooks/useDynamicMarkerLayers"; //-------------------------------------------- import { currentPoiState } from "../redux/slices/currentPoiSlice.js"; import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice"; @@ -584,97 +585,30 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { ); //--------------------------------- - - const gmaLayerRef = useRef(null); - const talasLayerRef = useRef(null); - const eciMarkersLayerRef = useRef(null); - const gsmModemMarkersLayerRef = useRef(null); - const ciscoRouterMarkersLayerRef = useRef(null); - const wagoMarkersLayerRef = useRef(null); - const siemensMarkersLayerRef = useRef(null); - const otdrMarkersLayerRef = useRef(null); - const wdmMarkersLayerRef = useRef(null); - const messstellenMarkersLayerRef = useRef(null); - const talasiclMarkersLayerRef = useRef(null); - const dauzMarkersLayerRef = useRef(null); - const smsfunkmodemMarkersLayerRef = useRef(null); - const ulafMarkersLayerRef = useRef(null); - const sonstigeMarkersLayerRef = useRef(null); - const tkComponentsMarkersRef = useRef(null); - useEffect(() => { - if (!gisSystemStaticLoaded || !map) return; // Sicherstellen, dass die Karte und Daten geladen sind - - const layerGroups = [ - { ref: gmaLayerRef, id: 11, setState: setGmaMarkers }, - { ref: talasLayerRef, id: 1, setState: setTalasMarkers }, - { ref: eciMarkersLayerRef, id: 2, setState: setEciMarkers }, - { ref: gsmModemMarkersLayerRef, id: 5, setState: setGsmModemMarkers }, - { ref: ciscoRouterMarkersLayerRef, id: 6, setState: setCiscoRouterMarkers }, - { ref: wagoMarkersLayerRef, id: 7, setState: setWagoMarkers }, - { ref: siemensMarkersLayerRef, id: 8, setState: setSiemensMarkers }, - { ref: otdrMarkersLayerRef, id: 9, setState: setOtdrMarkers }, - { ref: wdmMarkersLayerRef, id: 10, setState: setWdmMarkers }, - { ref: messstellenMarkersLayerRef, id: 13, setState: setMessstellenMarkers }, - { ref: talasiclMarkersLayerRef, id: 100, setState: setTalasiclMarkers }, - { ref: dauzMarkersLayerRef, id: 110, setState: setDauzMarkers }, - { ref: smsfunkmodemMarkersLayerRef, id: 111, setState: setSmsfunkmodemMarkers }, - { ref: ulafMarkersLayerRef, id: 0, setState: setUlafMarkers }, - { ref: sonstigeMarkersLayerRef, id: 200, setState: setSonstigeMarkers }, - { ref: tkComponentsMarkersRef, id: 30, setState: setTkComponentsMarkers }, - ]; - - // Initialisiere LayerGroups nur einmal - layerGroups.forEach(({ ref }) => { - if (!ref.current) { - ref.current = new L.LayerGroup().addTo(map); - } - }); - - const updateMarkers = ({ ref, id, setState }) => { - if (ref.current) { - ref.current.clearLayers(); // Entferne alte Marker - } - - // Erstelle und füge neue Marker hinzu - createAndSetDevices( - id, - (newMarkers) => { - setState(newMarkers); // Zustand aktualisieren - newMarkers.forEach((marker) => ref.current.addLayer(marker)); // Marker zur LayerGroup hinzufügen - - // Überprüfe auf überlappende Marker und füge das Plus-Icon hinzu - checkOverlappingMarkers(map, newMarkers, plusRoundIcon); - }, - GisSystemStatic, - priorityConfig - ); - }; - - // Aktualisiere alle Marker-Gruppen - const updateAllMarkers = () => { - layerGroups.forEach(updateMarkers); - }; - - // Initiales Update - updateAllMarkers(); - - // Setze ein Intervall für regelmäßige Updates - /* const intervalId = setInterval(() => { - updateAllMarkers(); - }, 60000); // 20 Sekunden - - // Aufräumen bei Komponentenentladung - return () => { - clearInterval(intervalId); // Entferne Intervall - - // LayerGroups leeren - layerGroups.forEach(({ ref }) => { - if (ref.current) { - ref.current.clearLayers(); - } - }); - }; */ - }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]); +useDynamicMarkerLayers( + map, + gisSystemStaticLoaded, + GisSystemStatic, + priorityConfig, + { + setGmaMarkers, + setTalasMarkers, + setEciMarkers, + setGsmModemMarkers, + setCiscoRouterMarkers, + setWagoMarkers, + setSiemensMarkers, + setOtdrMarkers, + setWdmMarkers, + setMessstellenMarkers, + setTalasiclMarkers, + setDauzMarkers, + setSmsfunkmodemMarkers, + setUlafMarkers, + setSonstigeMarkers, + setTkComponentsMarkers, + } + ); //--------------------------------------- // Initialisiere Leaflet-Karte diff --git a/hooks/useDynamicMarkerLayers.js b/hooks/useDynamicMarkerLayers.js new file mode 100644 index 000000000..8a8f2be3c --- /dev/null +++ b/hooks/useDynamicMarkerLayers.js @@ -0,0 +1,80 @@ +import { useEffect, useRef } from "react"; +import L from "leaflet"; +import { createAndSetDevices } from "../utils/createAndSetDevices.js"; +import { checkOverlappingMarkers } from "../utils/markerUtils"; +import { plusRoundIcon } from "../components/PlusRoundIcon.js"; + +export const useDynamicMarkerLayers = ( + map, + gisSystemStaticLoaded, + GisSystemStatic, + priorityConfig, + setMarkerStates +) => { + 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), + }; + + useEffect(() => { + if (!gisSystemStaticLoaded || !map) 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 }, + ]; + + layerGroups.forEach(({ ref }) => { + if (!ref.current) { + ref.current = new L.LayerGroup().addTo(map); + } + }); + + 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]); +};