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

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
-          //Browser neu laden, um die aktualisierte Liste anzuzeigen
+          onClose();
           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
-          console.log("Selected Device:", selectedDevice);
-          console.log("Selected devciceName:", deviceName);
+          setDeviceName(selectedDevice ? selectedDevice.id : data[0].id);
         }
       } 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(
-            (device, index) => (
-              console.log("device.id und name:", device),
-              (
-                <option key={index} value={device.id}>
-                  {device.name}
-                </option>
-              )
-            )
-          )}
+          {locationDeviceData.map((device, index) => (
+            <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"
       >