fix: Beschreibung in Popup bei POI bearbeiten war nicht sichtbar, nur Platzhalter

components/MapComponent.js

@@ -40,16 +40,15 @@ import { set } from "lodash";
 import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible.js";
 import { data } from "autoprefixer";
 import plusRoundIcon from "./PlusRoundIcon.js";
-/* import {
+import {} from //parsePoint,
-  parsePoint,
+//handleEditPoi,
-  handleEditPoi,
+//insertNewMarker,
-  insertNewMarker,
+//redrawPolyline,
-  redrawPolyline,
+//saveLineData,
-  saveLineData,
+"../utils/utils.js";
-} from "../utils/utils.js"; */
 import { parsePoint, findClosestPoints } from "../utils/geometryUtils.js";
 import {
-  handleEditPoi,
+  //handleEditPoi,
   insertNewMarker,
   removeMarker,
 } from "../utils/markerUtils.js";
@@ -487,6 +486,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
                 <div class="mt-2">${statusInfo}</div>
               </div>
             `);
+
           return marker;
         });
 
@@ -499,6 +499,44 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //--------------------------------------------------------------------------------
 
   const mapLayersVisibility = useRecoilValue(mapLayersState);
+  //----------------------------------------------
+  const handleEditPoi = (selectedPoi) => {
+    // Prüfung, ob der Benutzer die notwendigen Rechte hat
+    if (!userRights || !userRights.includes(56)) {
+      toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
+        position: "top-center",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
+      console.log("Benutzer hat keine Berechtigung zum Bearbeiten.");
+      return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt
+    }
+
+    //console.log("Selected Marker ID (idPoi):", marker.options.idPoi);
+    console.log(
+      "Selected Marker Description:",
+      selectedPoi.options.description
+    );
+    console.log("Selected Marker :", selectedPoi.options);
+
+    setCurrentPoiData({
+      idPoi: selectedPoi.options.id,
+      name: selectedPoi.options.name,
+      description: selectedPoi.options.description,
+    });
+    //console.log("POI-Daten1:", currentPoiData);
+
+    fetchPoiData(selectedPoi.options.id);
+    fetchPoiData(selectedPoi.options.name);
+    //fetchPoiData(selectedPoi.options);
+
+    setShowPoiUpdateModal(true);
+  };
+  //----------------------------------------------
 
   //------------------------------------------
   //------------------------------------------ */
@@ -1051,6 +1089,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
               }),
               draggable: canDrag,
               id: location.idPoi,
+              name: location.name,
+              description: location.description,
             }).bindContextMenu({
               contextmenu: true,
               contextmenuWidth: 140,
@@ -2280,7 +2320,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, [zoomTrigger, map]);
   //---------------------------------------------------------
   //---------------------------------------------------------zoomen in kontextmenü
-
+  // Beispiel für die Verwendung von fetchPoiData mit Recoil Zustand
+  /*   useEffect(() => {
+    if (selectedPoi) {
+      fetchPoiData(selectedPoi.idPoi)
+        .then((data) => {
+          console.log("Fetched POI data:", data);
+        })
+        .catch((error) => {
+          console.error("Fehler beim Abrufen der POI-Daten:", error);
+        });
+    }
+  }, [selectedPoi]); */
   //---------------------------------------------------------
   //---------------------------------------------------------
 

components/PoiUpdateModal.js

@@ -1,5 +1,5 @@
 // pages/api/poiUpdateModal.js
-//
+
 import React, { useState, useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import { selectedPoiState } from "../store/atoms/poiState";
@@ -15,52 +15,24 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
   const [locationDeviceData, setLocationDeviceData] = useState([]);
   const [deviceName, setDeviceName] = useState("");
   const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
-  const [idLocationDevice, setIdLocationDevice] = useState("");
 
   const [description, setDescription] = useState(
     poiData ? poiData.description : ""
   );
 
-  // Log the initial POI data
   useEffect(() => {
     if (poiData) {
+      console.log("Initial poiData:", poiData);
       setPoiId(poiData.idPoi);
       setName(poiData.name);
       setPoiTypeId(poiData.idPoiTyp);
       setIdLD(poiData.idLD);
-
       setDescription(poiData.description);
       setDeviceName(poiData.idLD);
       console.log("Loaded POI Data for editing:", poiData);
-      console.log("POI ID:", poiData.idPoi);
-      console.log("POI Name:", poiData.name);
-      console.log("POI Typ ID:", poiData.idPoiTyp);
-      console.log("POI Beschreibung:", poiData.description);
-      console.log("POI Geräte-ID:", poiData.idLD);
     }
   }, [poiData]);
 
-  /*   const fetchDeviceNameById = async (idLD) => {
-    try {
-      const response = await fetch(`/api/getDeviceNameById?idLD=${idLD}`);
-      const data = await response.json();
-      setDeviceName(data.deviceName);
-    } catch (error) {
-      console.error("Error fetching device name:", error);
-    }
-  }; */
-
-  /*     const fetchDeviceNameById = async (idLD) => {
-    try {
-      const response = await fetch(`/api/talas_v5_DB/locationDevice/locationDeviceNameById?idLD=${idLD}`);
-      const data = await response.json();
-      setDeviceName(data.deviceName);
-    } catch (error) {
-      console.error("Error fetching device name:", error);
-    }
-  }; */
-
-  // Beim Öffnen des Modals die Geräte-ID basierend auf dem Gerätenamen abrufen, wenn vorhanden
   useEffect(() => {
     const fetchDeviceId = async () => {
       if (poiData && poiData.idLD) {
@@ -82,7 +54,6 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     fetchDeviceId();
   }, [poiData]);
 
-  // Function to handle deleting a POI
   const handleDeletePoi = async () => {
     if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
       try {
@@ -94,8 +65,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
         );
         if (response.ok) {
           alert("POI wurde erfolgreich gelöscht.");
-          onClose(); // Close the modal
+          onClose();
-          //Browser neu laden, um die aktualisierte Liste anzuzeigen
           window.location.reload();
         } else {
           throw new Error("Fehler beim Löschen des POI.");
@@ -107,7 +77,6 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     }
   };
 
-  // Fetch POI types
   useEffect(() => {
     const fetchPoiTypData = async () => {
       try {
@@ -127,22 +96,20 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     fetchPoiTypData();
   }, [selectedPoi]);
 
-  // Fetch device data um den Gerät Namen in den dropdown menu anzuzeigen also erstmal die Liste der Geräte abrufen
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await fetch("/api/talas_v5/location_device");
+        // const response = await fetch("/api/talas_v5/location_device"); //"/api/talas_v5_DB/locationDevice/location_device"
+        const response = await fetch(
+          "/api/talas_v5_DB/locationDevice/locationDevices"
+        );
         const data = await response.json();
-        //console.log("Standort- und Gerätedaten:", data);
         setLocationDeviceData(data);
-        console.log("Standort- und Gerätedaten poiData:", poiData);
         if (poiData && poiData.idLD) {
           const selectedDevice = data.find(
             (device) => device.id === poiData.idLD
           );
-          setDeviceName(selectedDevice ? selectedDevice.id : data[0].id); // Hier wird die ID als initialer Zustand gesetzt
+          setDeviceName(selectedDevice ? selectedDevice.id : data[0].id);
-          console.log("Selected Device:", selectedDevice);
-          console.log("Selected devciceName:", deviceName);
         }
       } catch (error) {
         console.error(
@@ -153,18 +120,12 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     };
     fetchData();
   }, []);
-  //--------------------------------------------------------------------------------------------
-  // Fetch device name basierend auf der Geräte-ID
 
   useEffect(() => {
-    console.log("currentPoi von PoiUpdateModal.js : ", currentPoi.idLD);
     fetch("/api/talas_v5_DB/locationDevice/locationDevices")
       .then((response) => response.json())
       .then((data) => {
         setLocationDeviceData(data);
-        console.log("Standort- und Gerätedaten 3:", data);
-        console.log("Standort- und Gerätedaten 3 poiData:", poiData);
-        // Findet das Gerät, das der aktuellen IDLD entspricht
         const currentDevice = data.find(
           (device) => device.idLD === currentPoi.idLD
         );
@@ -178,10 +139,6 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
       });
   }, [poiData?.idLD, currentPoi]);
 
-  //--------------------------------------------------------------------------------------------
-  // Angenommen, deviceName enthält die Geräte-ID
-  //const idLD = deviceName; // Stellen Sie sicher, dass dies eine ID ist und kein Name
-
   const handleSubmit = async (event) => {
     event.preventDefault();
     const idLDResponse = await fetch(
@@ -201,7 +158,6 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
           description: description,
           idPoiTyp: poiTypeId,
           idLD: idLD,
-          //idLD: parseInt(deviceName, 10), // Konvertieren in eine Ganzzahl
         }),
       });
 
@@ -220,19 +176,6 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     }
   };
 
-  //ausgewählte poi Informationen in Console anzeigen
-  console.log("Selected POI:", selectedPoi);
-  console.log("Selected POI Gerät id in poiUpdateModal.js:", selectedPoi.id);
-  console.log("Selected POI Typ name in poiUpdateModal.js:", selectedPoi.typ); //als Typ in dropdown menu
-  console.log(
-    "Selected POI Beschreibung in poiUpdateModal.js:",
-    selectedPoi.description
-  );
-  console.log(
-    "Selected POI Gerät deviceId in poiUpdateModal.js:",
-    selectedPoi.deviceId
-  );
-
   return (
     <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
       <div className="flex items-center mb-4">
@@ -261,16 +204,11 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
           onChange={(e) => setDeviceName(e.target.value)}
           className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
         >
-          {locationDeviceData.map(
+          {locationDeviceData.map((device, index) => (
-            (device, index) => (
+            <option key={index} value={device.id}>
-              console.log("device.id und name:", device),
+              {device.name}
-              (
+            </option>
-                <option key={index} value={device.id}>
+          ))}
-                  {device.name}
-                </option>
-              )
-            )
-          )}
         </select>
       </div>
 
@@ -294,7 +232,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
       </div>
 
       <button
-        type="button" // Use button type to prevent form submission
+        type="button"
         onClick={handleDeletePoi}
         className="bg-red-400 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full mb-4"
       >

config/config.js

@@ -5,7 +5,7 @@ const mapVersion = "0.5.3"; // Die Version der verwendeten Karte
 const standardSideMenu = true; // Einstellung, ob ein standardmäßiges Seitenmenü verwendet wird
 const fullSideMenu = false; // Einstellung, ob ein vollständiges Seitenmenü verwendet wird
 //const serverURL = "/api"; // Die Basis-URL des Servers, von dem Daten bezogen werden
-const serverURL = "http://10.10.0.70";
+const serverURL = "http://10.10.0.13";
 console.log("serverURL in config:", serverURL);
 // Initialisieren von Variablen, die später im Browserkontext gesetzt werden
 let windowHeight, url_string, url, idMap, idUser;