Prepair: With Recoil atom pass current poi data from MapComponent to poiUpdateModal.js when mouse over

components/PoiUpdateModal.js

@@ -13,6 +13,10 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
   const [poiTypeId, setPoiTypeId] = useState("");
   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 : ""
@@ -24,6 +28,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
       setPoiId(poiData.idPoi);
       setName(poiData.name);
       setPoiTypeId(poiData.idPoiTyp);
+      setIdLD(poiData.idLD);
 
       setDescription(poiData.description);
       setDeviceName(poiData.idLD);
@@ -36,7 +41,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     }
   }, [poiData]);
 
-  const fetchDeviceNameById = async (idLD) => {
+/*   const fetchDeviceNameById = async (idLD) => {
     try {
       const response = await fetch(`/api/getDeviceNameById?idLD=${idLD}`);
       const data = await response.json();
@@ -44,7 +49,17 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     } catch (error) {
       console.error("Error fetching device name:", error);
     }
-  };
+  }; */
+
+/*     const fetchDeviceNameById = async (idLD) => {
+    try {
+      const response = await fetch(`/api/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(() => {
@@ -107,7 +122,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     fetchPoiTypData();
   }, [selectedPoi]);
 
-  // Fetch device data
+  // 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 {
@@ -115,11 +130,14 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
         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);
         }
       } catch (error) {
         console.error(
@@ -130,9 +148,32 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     };
     fetchData();
   }, []);
+//--------------------------------------------------------------------------------------------
+// Fetch device name basierend auf der Geräte-ID
 
+useEffect(() => {
+  fetch('/api/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 === poiData?.idLD);
+      if (currentDevice) {
+        setDeviceName(currentDevice.name);
+      }
+    })
+    .catch(error => {
+      console.error('Fehler beim Abrufen der Gerätedaten:', error);
+      setLocationDeviceData([]);
+    });
+}, [poiData?.idLD]);
+
+
+//--------------------------------------------------------------------------------------------
   // Angenommen, deviceName enthält die Geräte-ID
-  const idLD = deviceName; // Stellen Sie sicher, dass dies eine ID ist und kein Name
+  //const idLD = deviceName; // Stellen Sie sicher, dass dies eine ID ist und kein Name
 
   const handleSubmit = async (event) => {
     event.preventDefault();
@@ -177,6 +218,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
   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">
@@ -207,6 +249,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
           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>
@@ -247,6 +290,9 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
       >
         POI aktualisieren
       </button>
+      <div>
+      {deviceName ? <p>Gerätename: {deviceName}</p> : <p>Gerätename wird geladen...</p>}
+    </div>
     </form>
   );
 };