wip: Dynamische Layers /Geräte Gruppen Erkennung , overlapping funktioniert es noch nicht

components/mainComponent/MapComponent.js

@@ -16,12 +16,11 @@ import { restoreMapSettings, checkOverlappingMarkers } from "../../utils/mapUtil
 import { APP_VERSION } from "../../config/appVersion.js";
 import * as layers from "../../config/layers.js";
 import addItemsToMapContextMenu from "../contextmenu/useMapContextMenu.js";
-import useGmaMarkersLayer from "../../hooks/layers/useGmaMarkersLayer.js";
-import useSmsfunkmodemMarkersLayer from "../../hooks/layers/useSmsfunkmodemMarkersLayer.js";
+
 import useAreaMarkersLayer from "../../hooks/layers/useAreaMarkersLayer.js";
 import { setupPolylines } from "../../utils/polylines/setupPolylines.js";
 import { setupPOIs } from "../../utils/setupPOIs.js";
-import useLayerVisibility from "../../hooks/useLayerVisibility.js";
+
 import useLineData from "../../hooks/useLineData.js";
 import { useMapComponentState } from "../../hooks/useMapComponentState.js";
 
@@ -69,10 +68,12 @@ import { fetchPoiIconsDataThunk } from "../../redux/thunks/database/pois/fetchPo
 import { fetchPoiTypThunk } from "../../redux/thunks/database/pois/fetchPoiTypThunk.js";
 import { updateAreaThunk } from "../../redux/thunks/database/area/updateAreaThunk";
 
+import useDynamicDeviceLayers from "../../hooks/layers/useDynamicDeviceLayers";
 //-----------------------------------------------------------------------------------------------------
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //-------------------------------
   const dispatch = useDispatch();
+
   const countdown = useSelector((state) => state.polylineContextMenu.countdown);
   const countdownActive = useSelector((state) => state.polylineContextMenu.countdownActive);
   const isPolylineContextMenuOpen = useSelector((state) => state.polylineContextMenu.isOpen);
@@ -109,7 +110,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [isPopupOpen, setIsPopupOpen] = useState(false);
   const closePopup = () => setIsPopupOpen(false);
   const [currentCoordinates, setCurrentCoordinates] = useState("");
-  const [AddPoiModalWindowState, setAddPoiModalWindowState] = useState(false);
   const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false);
   const [currentPoiData, setCurrentPoiData] = useState(null);
   const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
@@ -119,7 +119,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
   const [map, setMap] = useState(null); // Zustand der Karteninstanz
   const [oms, setOms] = useState(null); // State für OMS-Instanz
-  const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten
+
   //-----userRights----------------
   const isRightsLoaded = useSelector((state) => state.gisUserRightsFromWebservice.status === "succeeded");
   const userRights = useSelector(selectGisUserRightsFromWebservice);
@@ -137,24 +137,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   //console.log("priorityConfig in MapComponent1: ", priorityConfig);
   //-----------------------------------------
-  const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11 alle sind untetschiedlich Nummern
-  const [talasMarkers, setTalasMarkers] = useState([]);
-  const [eciMarkers, setEciMarkers] = useState([]);
-  const [lteModemMarkers, setlteModemMarkers] = useState([]);
-  const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]);
-  const [wagoMarkers, setWagoMarkers] = useState([]);
-  const [siemensMarkers, setSiemensMarkers] = useState([]);
-  const [otdrMarkers, setOtdrMarkers] = useState([]);
-  const [wdmMarkers, setWdmMarkers] = useState([]);
-  const [messstellenMarkers, setMessstellenMarkers] = useState([]);
-  const [talasiclMarkers, setTalasiclMarkers] = useState([]);
-  const [dauzMarkers, setDauzMarkers] = useState([]);
-  const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);
-  const [ulafMarkers, setUlafMarkers] = useState([]);
-  const [sonstigeMarkers, setSonstigeMarkers] = useState([]);
-  const [tkComponentsMarkers, setTkComponentsMarkers] = useState([]);
-  //--------------------------------------------
-
   const [linePositions, setLinePositions] = useState([]);
   const { lineColors, tooltipContents } = useLineData();
   const [polylines, setPolylines] = useState([]);
@@ -166,6 +148,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [showCoordinatesModal, setShowCoordinatesModal] = useState(false);
   const [popupCoordinates, setPopupCoordinates] = useState(null);
   const [popupVisible, setPopupVisible] = useState(false);
+  const [poiData, setPoiData] = useState([]);
 
   const openVersionInfoModal = () => {
     setShowVersionInfoModal(true);
@@ -187,43 +170,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
   });
 
-  const allMarkers = [
-    ...talasMarkers,
-    ...eciMarkers,
-    ...lteModemMarkers,
-    ...ciscoRouterMarkers,
-    ...wagoMarkers,
-    ...siemensMarkers,
-    ...otdrMarkers,
-    ...wdmMarkers,
-    ...gmaMarkers,
-    ...messstellenMarkers,
-    ...talasiclMarkers,
-    ...dauzMarkers,
-    ...smsfunkmodemMarkers,
-    ...sonstigeMarkers,
-    ...tkComponentsMarkers,
-    ...ulafMarkers,
-  ];
-  //--------------------------------------------
-  const gmaLayerRef = useRef(null);
-  const talasLayerRef = useRef(null);
-  const eciMarkersLayerRef = useRef(null);
-  const lteModemMarkersLayerRef = 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);
-  //------------------------------
-  const [poiData, setPoiData] = useState([]);
   //--------------------------------------------
 
   const handleCoordinatesSubmit = (coords) => {
@@ -234,7 +180,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   };
   //-----------------------------Map Initialisierung----------------
   useInitializeMap(map, mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, (value) => dispatch(setDisabled(value)));
-  //--------------------------------------------------------------------
+
   //-------------------------React Hooks--------------------------------
   useEffect(() => {
     if (linesData && Array.isArray(linesData)) {
@@ -316,51 +262,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
   }, [map, zoomTrigger]);
   //--------------------------------------------
-  useEffect(() => {
-    if (map) {
-      // Sammle alle Marker in einer einzigen Liste
-
-      const editMode = localStorage.getItem("editMode") === "true"; // EditMode prüfen
-      const visibility = mapLayersVisibility || {};
-
-      allMarkers.forEach((marker) => {
-        const layerKey = marker.options?.layerKey; // Layer-Key aus den Marker-Optionen
-        const isVisible = visibility[layerKey]; // Sichtbarkeitsstatus prüfen
-
-        if (!layerKey || isVisible === undefined) return;
-
-        if (editMode || !isVisible) {
-          // Entferne Marker, wenn EditMode aktiv ist oder Layer unsichtbar
-          if (map.hasLayer(marker)) map.removeLayer(marker);
-        } else {
-          // Füge Marker hinzu, wenn EditMode deaktiviert ist und Layer sichtbar
-          if (!map.hasLayer(marker)) marker.addTo(map);
-        }
-      });
-
-      // Überprüfe überlappende Marker und füge das "Plus"-Icon hinzu
-      checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
-    }
-  }, [
-    map,
-    talasMarkers,
-    eciMarkers,
-    lteModemMarkers,
-    ciscoRouterMarkers,
-    wagoMarkers,
-    siemensMarkers,
-    otdrMarkers,
-    wdmMarkers,
-    gmaMarkers,
-    messstellenMarkers,
-    talasiclMarkers,
-    dauzMarkers,
-    smsfunkmodemMarkers,
-    sonstigeMarkers,
-    tkComponentsMarkers,
-    ulafMarkers,
-    mapLayersVisibility, // Neu: Abhängigkeit für Sichtbarkeitsstatus
-  ]);
 
   //-----------------------------------------------------------------
   //Tooltip an mouse position anzeigen für die Linien
@@ -534,128 +435,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     initializeContextMenu();
   }, [map]);
 
-  //--------------hooks-------------------------------------------
-
-  useGmaMarkersLayer(
-    map,
-    gmaMarkers,
-    GisStationsMeasurements,
-    layers.MAP_LAYERS.GMA,
-    oms,
-    mapLayersVisibility.GMA // Übergebe die Sichtbarkeitsbedingung als Parameter
-  );
-  //--------------------------------------------
-  //useCreateAndSetDevices(1, talasMarkers, GisSystemStatic, priorityConfig);
-  useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS", oms);
-  useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI", oms);
-  useLayerVisibility(map, lteModemMarkers, mapLayersVisibility, "LTEModem", oms);
-  useLayerVisibility(map, ciscoRouterMarkers, mapLayersVisibility, "CiscoRouter", oms);
-  //useLayerVisibility(map, lteModemMarkers, mapLayersVisibility, "LTEModem", oms);
-  useLayerVisibility(map, wagoMarkers, mapLayersVisibility, "WAGO", oms);
-  useLayerVisibility(map, siemensMarkers, mapLayersVisibility, "Siemens", oms);
-  useLayerVisibility(map, otdrMarkers, mapLayersVisibility, "OTDR", oms);
-  useLayerVisibility(map, wdmMarkers, mapLayersVisibility, "WDM", oms);
-  useLayerVisibility(map, gmaMarkers, mapLayersVisibility, "GMA", oms);
-  useLayerVisibility(map, sonstigeMarkers, mapLayersVisibility, "Sonstige", oms);
-  useLayerVisibility(map, tkComponentsMarkers, mapLayersVisibility, "TKKomponenten", oms);
-  useLayerVisibility(map, talasiclMarkers, mapLayersVisibility, "TALASICL", oms);
-  useLayerVisibility(map, dauzMarkers, mapLayersVisibility, "DAUZ", oms);
-  useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSModem", oms);
-  useLayerVisibility(map, messstellenMarkers, mapLayersVisibility, "Messstellen", oms);
-  useLayerVisibility(map, ulafMarkers, mapLayersVisibility, "ULAF", oms);
-  //--------------------------------------------
-  useEffect(() => {
-    if (gisSystemStaticStatus !== "succeeded" || !map) return;
-
-    const layerGroups = [
-      { ref: gmaLayerRef, id: 11, setState: setGmaMarkers },
-      { ref: talasLayerRef, id: 1, setState: setTalasMarkers },
-      { ref: eciMarkersLayerRef, id: 2, setState: setEciMarkers },
-      { ref: lteModemMarkersLayerRef, id: 5, setState: setlteModemMarkers },
-      { 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();
-
-      if (map) {
-        // console.log("🔥 Automatischer Klick-Event ausgelöst, um Spiderfy zu aktualisieren.");
-        map.fire("click");
-      }
-      if (isPolylineContextMenuOpen) {
-        dispatch(closePolylineContextMenu()); // Schließe das Kontextmenü, bevor das nächste Update passiert
-      }
-      if (map) {
-        // console.log("🔥 nochmal klick.");
-        map.fire("click");
-      }
-    }, 20000);
-
-    // Aufräumen bei Komponentenentladung
-    return () => {
-      clearInterval(intervalId); // Entferne Intervall
-
-      // LayerGroups leeren
-      layerGroups.forEach(({ ref }) => {
-        if (ref.current) {
-          ref.current.clearLayers();
-        }
-      });
-    };
-  }, [map, GisSystemStatic, priorityConfig]);
-
   //---------------------------------------
   // Initialisiere Leaflet-Karte
   // Rufe useAreaMarkersLayer direkt auf
-  //const [areaUrl, setAreaUrl] = useState(null);
   const urlParams = new URLSearchParams(window.location.search); // URL-Parameter parsen
   const mValue = urlParams.get("m"); // Wert von "m" holen
   const hostname = window.location.hostname; // Dynamischer Hostname
@@ -706,18 +488,21 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, [areaMarkers, map]);
 
   //----------------------------------
+  const { markerStates, layerRefs } = useDynamicDeviceLayers(map, GisSystemStatic, mapLayersVisibility, priorityConfig);
   useEffect(() => {
     const handleVisibilityChange = () => {
-      // Erneut die Marker-Überprüfung auslösen
+      if (!map) return;
+
+      const allMarkers = Object.values(markerStates).filter(Array.isArray).flat();
+
       checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
     };
 
     window.addEventListener("visibilityChanged", handleVisibilityChange);
-
     return () => {
       window.removeEventListener("visibilityChanged", handleVisibilityChange);
     };
-  }, [map, allMarkers]);
+  }, [map, markerStates]);
 
   //---------------------------------------
   useEffect(() => {
@@ -881,6 +666,35 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       setPoiData(poiIconsData);
     }
   }, [poiIconsData, poiIconsStatus]);
+  //-----------------------------------------------------------------
+  //-----------------------------------------------------------------
+
+  //---------------------------------------------
+
+  useEffect(() => {
+    if (!map) return;
+
+    const editMode = localStorage.getItem("editMode") === "true";
+
+    Object.entries(markerStates).forEach(([systemName, markers]) => {
+      const isVisible = mapLayersVisibility[systemName];
+      markers.forEach((marker) => {
+        const hasLayer = map.hasLayer(marker);
+        if (editMode || !isVisible) {
+          if (hasLayer) map.removeLayer(marker);
+        } else {
+          if (!hasLayer) marker.addTo(map);
+        }
+      });
+    });
+
+    // optional für alle zusammen
+    const allMarkers = Object.values(markerStates)
+      .filter((entry) => Array.isArray(entry))
+      .flat();
+
+    checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
+  }, [map, markerStates, mapLayersVisibility]);
 
   //---------------------------------------------
   //--------------------------------------------