From 3c79a297fda0c4e3d8ad67d17e1c5cc29e1d96af Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 19 Dec 2024 13:45:51 +0100
Subject: [PATCH] feat: Dynamische Sichtbarkeit von Bereichs-Markern basierend
 auf Layer-Status implementiert
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hinzugefügt: Logik zur Überprüfung von mapLayersVisibility aus localStorage.
- Kombiniert: `storage`-Event-Listener und regelmäßige Überprüfung mit `setInterval`.
- Verhindert unnötige DOM-Updates durch Verwendung von `useRef` zur Nachverfolgung des letzten Sichtbarkeitsstatus.
- Bereiche werden nun korrekt angezeigt/ausgeblendet, wenn Layer-Checkboxen geändert werden.
---
 components/MapComponent.js              |  4 +-
 hooks/layers/useBereicheMarkersLayer.js | 77 +++++++++++++++++--------
 2 files changed, 56 insertions(+), 25 deletions(-)

diff --git a/components/MapComponent.js b/components/MapComponent.js
index 1a08f2e87..954ba0561 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -782,12 +782,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   // Rufe useBereicheMarkersLayer direkt auf
   const bereicheMarkers = useBereicheMarkersLayer(map, oms, "/api/talas_v5_DB/bereich/readBereich?m=12");
 
-  useEffect(() => {
+  /*   useEffect(() => {
     if (map && oms) {
       // Wenn zusätzliche Initialisierung nötig ist, führe sie hier aus.
       console.log("Bereiche-Markierungen geladen:", bereicheMarkers);
     }
-  }, [map, oms, bereicheMarkers]);
+  }, [map, oms, bereicheMarkers]); */
 
   //----------------------------------
   useEffect(() => {
diff --git a/hooks/layers/useBereicheMarkersLayer.js b/hooks/layers/useBereicheMarkersLayer.js
index 867911c8f..f06195605 100644
--- a/hooks/layers/useBereicheMarkersLayer.js
+++ b/hooks/layers/useBereicheMarkersLayer.js
@@ -1,19 +1,46 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 
 // Definiere ein Standard-Icon
 const customIcon = new L.Icon({
-  iconUrl: "/img/marker-icon.png", // Beispielpfad: Passe dies auf dein Symbol an
-  iconSize: [25, 41], // Größe des Icons
-  iconAnchor: [12, 41], // Position des Icons
+  iconUrl: "/img/marker-icon.png",
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
   popupAnchor: [1, -34],
-  shadowUrl: "/img/marker-shadow.png", // Optionaler Schatten
+  shadowUrl: "/img/marker-shadow.png",
   shadowSize: [41, 41],
 });
 
 const useBereicheMarkersLayer = (map, oms, apiUrl) => {
   const [bereicheMarkers, setBereicheMarkers] = useState([]);
+  const prevVisibility = useRef(null); // Referenz, um vorherige Sichtbarkeitsdaten zu speichern
+
+  const updateMarkersVisibility = () => {
+    if (!map || bereicheMarkers.length === 0) return;
+
+    // Hole die Sichtbarkeitsdaten aus localStorage
+    const mapLayersVisibility = JSON.parse(localStorage.getItem("mapLayersVisibility")) || {};
+
+    // Überprüfen, ob alle Layer unsichtbar sind
+    const areAllLayersInvisible = Object.values(mapLayersVisibility).every((visibility) => !visibility);
+
+    // Wenn die Sichtbarkeit gleich bleibt, breche die Ausführung ab
+    if (areAllLayersInvisible === prevVisibility.current) return;
+
+    // Speichere den neuen Sichtbarkeitsstatus
+    prevVisibility.current = areAllLayersInvisible;
+
+    // Füge Marker hinzu oder entferne sie basierend auf der Bedingung
+    bereicheMarkers.forEach((marker) => {
+      if (areAllLayersInvisible) {
+        marker.addTo(map);
+        if (oms) oms.addMarker(marker); // Overlapping Marker Spiderfier
+      } else {
+        map.removeLayer(marker); // Entferne Marker, wenn die Bedingung nicht erfüllt ist
+      }
+    });
+  };
 
   useEffect(() => {
     // Hole die Daten aus der API
@@ -23,12 +50,10 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
         const data = await response.json();
 
         const markers = data.map((item) => {
-          // Erstelle Marker für jedes Datenbank-Item
           const marker = L.marker([item.x, item.y], { icon: customIcon }).bindPopup(`
             <strong>ID Location:</strong> ${item.idLocation} <br />
             <strong>ID Map:</strong> ${item.idMaps}
           `);
-
           return marker;
         });
 
@@ -42,22 +67,28 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
   }, [apiUrl]);
 
   useEffect(() => {
-    if (map && bereicheMarkers.length) {
-      // Füge alle Marker zur Karte hinzu
-      bereicheMarkers.forEach((marker) => {
-        marker.addTo(map);
-        if (oms) oms.addMarker(marker); // Overlapping Marker Spiderfier
-      });
-    }
-  }, [map, bereicheMarkers, oms]);
-  useEffect(() => {
-    if (!map) return; // Sicherheitsprüfung
-    if (bereicheMarkers.length > 0) {
-      bereicheMarkers.forEach((marker) => {
-        marker.addTo(map);
-        if (oms) oms.addMarker(marker);
-      });
-    }
+    // Initialisiere die Sichtbarkeit beim ersten Laden
+    updateMarkersVisibility();
+
+    // Listener für Änderungen in localStorage hinzufügen
+    const handleStorageChange = (event) => {
+      if (event.key === "mapLayersVisibility") {
+        updateMarkersVisibility();
+      }
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+
+    // Fallback: Überwachung durch Intervall
+    const intervalId = setInterval(() => {
+      updateMarkersVisibility();
+    }, 500); // Alle 500ms prüfen
+
+    return () => {
+      // Entferne den Listener und das Intervall
+      window.removeEventListener("storage", handleStorageChange);
+      clearInterval(intervalId);
+    };
   }, [map, bereicheMarkers, oms]);
 
   return bereicheMarkers;