fix: POI Update Modal

components/pois/AddPoiModalWindow.js

@@ -8,7 +8,7 @@ import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTrigger
 const AddPoiModalWindow = ({ onClose, map, latlng }) => {
   const [poiTypData, setpoiTypData] = useState([]);
   const [name, setName] = useState("");
-  const [poiTypeId, setPoiTypeId] = useState("");
+  const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as empty string
   const [latitude] = useState(latlng.lat.toFixed(5));
   const [longitude] = useState(latlng.lng.toFixed(5));
   const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
@@ -39,6 +39,13 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
 
   const handleSubmit = async (event) => {
     event.preventDefault();
+
+    // Check for valid poiTypeId
+    if (!poiTypeId) {
+      alert("Bitte wählen Sie einen Typ aus.");
+      return;
+    }
+
     const formData = {
       name,
       poiTypeId,
@@ -56,6 +63,8 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
     if (response.ok) {
       setTrigger((trigger) => trigger + 1);
       onClose();
+      // Browser aktualisieren
+      window.location.reload();
     } else {
       console.error("Fehler beim Hinzufügen des POI");
     }
@@ -115,6 +124,9 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
           Typ:
         </label>
         <select id="idPoiTyp2" name="idPoiTyp2" value={poiTypeId} onChange={(e) => setPoiTypeId(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
+          <option value="" disabled>
+            Typ auswählen...
+          </option>
           {poiTypData.map((poiTyp, index) => (
             <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
               {poiTyp.name}
@@ -122,6 +134,7 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
           ))}
         </select>
       </div>
+
       <div className="flex flex-row items-center justify-center">
         <div className="flex items-center mb-4">
           <label htmlFor="lat" className="block mr-2 flex-none text-xs">

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");
+      try {
-      if (cachedPoiTypData) {
+        const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
-        const data = JSON.parse(cachedPoiTypData);
+        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 {
+      } catch (error) {
-        try {
+        console.error("Fehler beim Abrufen der poiTyp Daten:", error);
-          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);
-        }
       }
     };
     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");
+      try {
-      if (cachedDeviceData) {
+        const response = await fetch("/api/talas5/location_device");
-        const data = JSON.parse(cachedDeviceData);
+        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()}>