From 21218609bcb0338f2747f57df9c3bece68dfd55a Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 28 May 2024 13:14:34 +0200
Subject: [PATCH] Set draggable based on permission

---
 components/MapComponent.js | 88 +++++++++++++++++---------------------
 1 file changed, 39 insertions(+), 49 deletions(-)

diff --git a/components/MapComponent.js b/components/MapComponent.js
index add750d65..4451db82b 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -613,7 +613,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   // serverIP 10.10.0.13 idMap=10 idUser=485
   const serverURL = "http://10.10.0.13";
   const c = 10; // Beispielwert für idMap
-  const user = 483; // Beispielwert für idUser
+  const user = 486; // Beispielwert für idUser
 
   const fetchUserRights = async () => {
     try {
@@ -969,20 +969,17 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
   useEffect(() => {
     if (map && poiLayerRef.current && isPoiTypLoaded) {
-      // Entfernen Sie die bestehende Ebene und erstellen Sie eine neue
       map.removeLayer(poiLayerRef.current);
       poiLayerRef.current = new L.LayerGroup().addTo(map);
 
-      // Fügen Sie die aktualisierten Marker hinzu
       locations.forEach(async (location) => {
         const { latitude, longitude } = parsePoint(location.position);
-        const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt ";
-        //console.log("poiTypName in poiLayer:", poiTypName);
-        //console.log("location.idPoiTyp poiLayer:", location.idPoiTyp);
-        //console.log("location.idPoiTyp poiLayer:", location);
-        //console.log("location.idPoiTyp:", location.idPoiTyp);
-
+        const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
         const deviceName = await fetchDeviceNameById(location.idLD);
+
+        // Check if user has the right to drag the marker
+        const canDrag = userRights ? userRights.includes(56) : false; // Check if userRights is not null before using includes
+
         const marker = L.marker([latitude, longitude], {
           icon: L.icon({
             iconUrl: `/img/icons/pois/poi-marker-icon-${location.idPoiTyp}.png`,
@@ -990,74 +987,67 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
             iconAnchor: [12, 41],
             popupAnchor: [1, -34],
           }),
-          draggable: true,
+          draggable: canDrag, // Set draggable based on permission
           id: location.idPoi,
         }).bindContextMenu({
           contextmenu: true,
           contextmenuWidth: 140,
           contextmenuItems: [
             {
-              text: "POI Bearbeiten", //git stash save "POI Bearbeiten"
-
+              text: "POI Bearbeiten",
               icon: "/img/poi-edit.png",
               callback: () => handleEditPoi(marker),
             },
           ],
         });
-        //console.log("location.idPoi:", location);
 
-        // Popup konfigurieren
         marker.bindPopup(`
-        <div>
-            <b  class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
+          <div>
+            <b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
+            ${deviceName}<br>
+            ${poiTypName}<br>
+          </div>
+        `);
 
-                   ${deviceName}<br> <!-- Gerät:-->
-
-          ${poiTypName}<br> <!-- Typ:-->
-        </div>
-    `);
-
-        const poiData = {
-          id: location.idPoi,
-          deviceId: location.idLD,
-          typ: poiTypName,
-          description: location.description,
-        };
-
-        // Event-Handler hinzufügen
         marker.on("mouseover", function () {
           this.openPopup();
-          //Informationen in der Konsole anzeigen
-          //console.log("poiLayer Marker ID:", location.idPoi);
-          //console.log("poiLayer Marker Typ:", poiTypName);
-          //console.log("poiLayer Marker Beschreibung:", location.description);
-          //Informationen an handlePoiSelect  übergeben
-          handlePoiSelect(poiData);
-
-          //console.log("poiData in MapComponent.js:", poiData);
-
+          handlePoiSelect({
+            id: location.idPoi,
+            deviceId: location.idLD,
+            typ: poiTypName,
+            description: location.description,
+          });
           setCurrentPoi(location);
-
-          //console.log("poiData in MapComponent.js:", poiData);
         });
+
         marker.on("mouseout", function () {
           this.closePopup();
         });
 
         marker.on("dragend", (e) => {
-          const newLat = e.target.getLatLng().lat;
-          const newLng = e.target.getLatLng().lng;
-          const markerId = e.target.options.id;
-          updateLocationInDatabase(markerId, newLat, newLng).then(() => {
-            onLocationUpdate(markerId, newLat, newLng);
-            console.log("trigger in MapComponent.js:", poiReadTrigger);
-          });
+          if (canDrag) {
+            const newLat = e.target.getLatLng().lat;
+            const newLng = e.target.getLatLng().lng;
+            const markerId = e.target.options.id;
+            updateLocationInDatabase(markerId, newLat, newLng).then(() => {
+              onLocationUpdate(markerId, newLat, newLng);
+            });
+          } else {
+            console.log("Drag operation not allowed");
+          }
         });
 
         marker.addTo(poiLayerRef.current);
       });
     }
-  }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded]);
+  }, [
+    map,
+    locations,
+    onLocationUpdate,
+    poiReadTrigger,
+    isPoiTypLoaded,
+    userRights,
+  ]);
 
   useEffect(() => {
     if (gisSystemStaticLoaded && map) {