fix: POI Update Modal

components/pois/PoiUpdateModal.js

@@ -12,53 +12,44 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
   const [poiTypData, setPoiTypData] = useState([]);
   const [poiTypeId, setPoiTypeId] = useState(""); // Sicherstellen, dass der Typ korrekt vorgewählt ist
   const [locationDeviceData, setLocationDeviceData] = useState([]);
-  const [deviceName, setDeviceName] = useState("");
+  const [deviceName, setDeviceName] = useState(poiData ? poiData.deviceName : "");
   const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
   const [description, setDescription] = useState(poiData ? poiData.description : "");
 
-  // Beim Öffnen des Modals den POI-Typ aus dem localStorage laden
+  // Setzt die initialen POI-Daten beim Öffnen des Modals
   useEffect(() => {
     if (poiData) {
       setPoiId(poiData.idPoi);
       setName(poiData.name);
       setPoiTypeId(poiData.idPoiTyp); // Setze den Typ-ID
-
-      // Prüfe, ob der Typ im localStorage gespeichert ist
-      const selectedPoiType = localStorage.getItem("selectedPoiType");
-      if (selectedPoiType) {
-        const matchingType = poiTypData.find((type) => type.name === selectedPoiType);
-        if (matchingType) {
-          setPoiTypeId(matchingType.idPoiTyp); // Setze die Typ-ID auf den gespeicherten Wert
-        }
-      }
-
       setIdLD(poiData.idLD);
       setDescription(poiData.description);
     }
-  }, [poiData, poiTypData]);
+  }, [poiData]);
 
   // Fetch POI types and set the current POI type in the dropdown
   useEffect(() => {
     const fetchPoiTypData = async () => {
-      const cachedPoiTypData = localStorage.getItem("poiTypData");
-      if (cachedPoiTypData) {
-        const data = JSON.parse(cachedPoiTypData);
+      try {
+        const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
+        const data = await response.json();
         setPoiTypData(data);
-        if (poiData) {
+
+        // Prüfe den gespeicherten Typ im localStorage
+        const storedPoiType = localStorage.getItem("selectedPoiType");
+
+        // Finde den passenden Typ in den abgerufenen Daten und setze ihn als ausgewählt
+        if (storedPoiType) {
+          const matchingType = data.find((type) => type.name === storedPoiType);
+          if (matchingType) {
+            setPoiTypeId(matchingType.idPoiTyp);
+          }
+        } else if (poiData && poiData.idPoiTyp) {
+          // Falls kein Typ im localStorage ist, setze den Typ von poiData
           setPoiTypeId(poiData.idPoiTyp);
         }
-      } else {
-        try {
-          const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
-          const data = await response.json();
-          setPoiTypData(data);
-          localStorage.setItem("poiTypData", JSON.stringify(data));
-          if (poiData) {
-            setPoiTypeId(poiData.idPoiTyp);
-          }
-        } catch (error) {
-          console.error("Fehler beim Abrufen der poiTyp Daten:", error);
-        }
+      } catch (error) {
+        console.error("Fehler beim Abrufen der poiTyp Daten:", error);
       }
     };
     fetchPoiTypData();
@@ -67,38 +58,22 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
   // Fetch location devices and pre-select the current device
   useEffect(() => {
     const fetchLocationDevices = async () => {
-      const cachedDeviceData = localStorage.getItem("locationDeviceData");
-      if (cachedDeviceData) {
-        const data = JSON.parse(cachedDeviceData);
+      try {
+        const response = await fetch("/api/talas5/location_device");
+        const data = await response.json();
         setLocationDeviceData(data);
+
         if (poiData && poiData.idLD) {
           const selectedDevice = data.find((device) => device.idLD === poiData.idLD);
           setDeviceName(selectedDevice ? selectedDevice.name : "");
         }
+      } catch (error) {
+        console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error);
       }
     };
     fetchLocationDevices();
   }, [poiData]);
 
-  const handleDeletePoi = async () => {
-    if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
-      try {
-        const response = await fetch(`/api/talas_v5_DB/pois/deletePoi?id=${poiId}`, {
-          method: "DELETE",
-        });
-        if (response.ok) {
-          onClose();
-          window.location.reload();
-        } else {
-          throw new Error("Fehler beim Löschen des POI.");
-        }
-      } catch (error) {
-        console.error("Fehler beim Löschen des POI:", error);
-        alert("Fehler beim Löschen des POI.");
-      }
-    }
-  };
-
   const handleSubmit = async (event) => {
     event.preventDefault();
     const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`);
@@ -133,6 +108,25 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
     }
   };
 
+  const handleDeletePoi = async () => {
+    if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
+      try {
+        const response = await fetch(`/api/talas_v5_DB/pois/deletePoi?id=${poiId}`, {
+          method: "DELETE",
+        });
+        if (response.ok) {
+          onClose();
+          window.location.reload(); // Aktualisiert die Seite nach dem Löschen
+        } else {
+          throw new Error("Fehler beim Löschen des POI.");
+        }
+      } catch (error) {
+        console.error("Fehler beim Löschen des POI:", error);
+        alert("Fehler beim Löschen des POI.");
+      }
+    }
+  };
+
   return (
     <div className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]" onClick={onClose}>
       <div className="relative bg-white p-6 rounded-lg shadow-lg" onClick={(e) => e.stopPropagation()}>