From e60ce2b354c6c74cd27f072397026fc898096d38 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 3 Sep 2024 15:46:50 +0200
Subject: [PATCH] Recoil Statefpr  polylines and Devices in process

---
 components/MapComponent.js                 |  9 ++++++++-
 hooks/useCreateAndSetDevices.js            | 15 +++++++++++++++
 store/atoms/polylineEventsDisabledState.js |  7 +++++++
 utils/createAndSetDevices.js               | 18 +++++++++++++++++-
 4 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 hooks/useCreateAndSetDevices.js
 create mode 100644 store/atoms/polylineEventsDisabledState.js

diff --git a/components/MapComponent.js b/components/MapComponent.js
index 38e8a46bc..adc96ab44 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -9,7 +9,6 @@ import {
   urls,
   OverlappingMarkerSpiderfier,
   DataSheet,
-  useRecoilState,
   useRecoilValue,
   useSetRecoilState,
   gisStationsStaticDistrictState,
@@ -66,7 +65,13 @@ import {
   useLayerVisibility,
   useLineData,
 } from "./imports.js";
+import useCreateAndSetDevices from "../hooks/useCreateAndSetDevices";
+//import { useCreateAndSetDevices } from "../hooks/useCreateAndSetDevices";
 import { useMapComponentState } from "../hooks/useMapComponentState";
+import { useRecoilState } from "recoil";
+import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState";
+import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
+
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const { deviceName, setDeviceName } = useMapComponentState();
   const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp");
@@ -343,6 +348,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
   }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
 
+  //useCreateAndSetDevices(1, talasMarkers, GisSystemStatic, priorityConfig);
+
   useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS");
   useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI");
   useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem");
diff --git a/hooks/useCreateAndSetDevices.js b/hooks/useCreateAndSetDevices.js
new file mode 100644
index 000000000..c1fcb9cdf
--- /dev/null
+++ b/hooks/useCreateAndSetDevices.js
@@ -0,0 +1,15 @@
+// /hooks/useCreateAndSetDevices.js
+import { useEffect } from "react";
+import { useRecoilState } from "recoil";
+import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState";
+import { createAndSetDevices } from "../utils/createAndSetDevices";
+
+const useCreateAndSetDevices = (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
+  const [polylineEventsDisabled, setPolylineEventsDisabled] = useRecoilState(polylineEventsDisabledState);
+
+  useEffect(() => {
+    createAndSetDevices(systemId, setMarkersFunction, GisSystemStatic, priorityConfig, setPolylineEventsDisabled);
+  }, [systemId, setMarkersFunction, GisSystemStatic, priorityConfig, setPolylineEventsDisabled]);
+};
+
+export default useCreateAndSetDevices;
diff --git a/store/atoms/polylineEventsDisabledState.js b/store/atoms/polylineEventsDisabledState.js
new file mode 100644
index 000000000..1cb4e1f70
--- /dev/null
+++ b/store/atoms/polylineEventsDisabledState.js
@@ -0,0 +1,7 @@
+// /store/atoms/polylineEventsDisabledState.js
+import { atom } from "recoil";
+
+export const polylineEventsDisabledState = atom({
+  key: "polylineEventsDisabledState",
+  default: false,
+});
diff --git a/utils/createAndSetDevices.js b/utils/createAndSetDevices.js
index 7228a7b39..bdf4cedfb 100644
--- a/utils/createAndSetDevices.js
+++ b/utils/createAndSetDevices.js
@@ -5,6 +5,7 @@ import "leaflet.smooth_marker_bouncing";
 import { toast } from "react-toastify";
 import * as config from "../config/config.js";
 import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines"; // Importiere die Funktion zum Deaktivieren der Polyline-Ereignisse
+import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState"; // Importiere den Recoil-Atom-Zustand
 
 // Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad
 const determinePriority = (iconPath, priorityConfig) => {
@@ -53,14 +54,29 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
         });
 
         // Verwende das `contextmenu`-Ereignis für den Rechtsklick
-        marker.on("contextmenu", function (event) {
+        /*     marker.on("contextmenu", function (event) {
           if (event && event.preventDefault) {
             event.preventDefault(); // Verhindert das Standard-Kontextmenü
           }
           disablePolylineEvents(window.polylines);
           this.openPopup();
         });
+ */
+        marker.on("contextmenu", function (event) {
+          if (event && event.preventDefault) {
+            event.preventDefault(); // Verhindert das Standard-Kontextmenü
+          }
+          //setPolylineEventsDisabled(true);
+          disablePolylineEvents(window.polylines);
+          this.openPopup();
+        });
 
+        document.addEventListener("mouseout", function (event) {
+          if (event.relatedTarget === null || event.relatedTarget.nodeName === "BODY") {
+            //setPolylineEventsDisabled(false);
+            enablePolylineEvents(window.polylines, window.lineColors);
+          }
+        });
         marker.on("mouseout", function () {
           this.closePopup();
         });