Poi Aktualisierung done!

components/PoiUpdateModal.js

@@ -1,15 +1,41 @@
+// pages/api/poiUpdateModal.js
 import React, { useState, useEffect } from "react";
 
 const PoiUpdateModal = ({ onClose, poiData }) => {
   const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
-  const [description, setDescription] = useState(
+  const [name, setName] = useState(poiData ? poiData.name : "");
-    poiData ? poiData.description : ""
-  );
   const [poiTypData, setPoiTypData] = useState([]);
   const [poiTypeId, setPoiTypeId] = useState("");
   const [locationDeviceData, setLocationDeviceData] = useState([]);
   const [deviceName, setDeviceName] = useState("");
 
+  const [description, setDescription] = useState(
+    poiData ? poiData.description : ""
+  );
+
+  // Function to handle deleting a POI
+  const handleDeletePoi = async () => {
+    if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
+      try {
+        const response = await fetch(`/api/deletePoi?id=${poiId}`, {
+          method: "DELETE",
+        });
+        if (response.ok) {
+          alert("POI wurde erfolgreich gelöscht.");
+          onClose(); // Close the modal
+          //Browser neu laden, um die aktualisierte Liste anzuzeigen
+          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.");
+      }
+    }
+  };
+
+  // Fetch POI types
   useEffect(() => {
     const fetchPoiTypData = async () => {
       try {
@@ -24,7 +50,10 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
       }
     };
     fetchPoiTypData();
+  }, []);
 
+  // Fetch device data
+  useEffect(() => {
     const fetchData = async () => {
       try {
         const response = await fetch("/api/talas_v5/location_device");
@@ -43,6 +72,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     fetchData();
   }, []);
 
+  // Form submission handler
   const handleSubmit = async (event) => {
     event.preventDefault();
     const idLDResponse = await fetch(
@@ -50,7 +80,6 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     );
     const idLDData = await idLDResponse.json();
     const idLD = idLDData.idLD;
-
     try {
       const response = await fetch("/api/updatePoi", {
         method: "POST",
@@ -59,7 +88,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
         },
         body: JSON.stringify({
           idPoi: poiId,
-          description: description,
+          description: name,
           idPoiTyp: poiTypeId,
           idLD: idLD,
         }),
@@ -83,16 +112,16 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
   return (
     <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
       <div className="flex items-center mb-4">
-        <label htmlFor="description" className="block mr-2 flex-none">
+        <label htmlFor="name" className="block mr-2 flex-none">
-          Beschreibung:
+          Name:
         </label>
         <input
           type="text"
-          id="description"
+          id="name"
-          name="description"
+          name="name"
-          value={description}
+          value={name}
-          onChange={(e) => setDescription(e.target.value)}
+          onChange={(e) => setName(e.target.value)}
-          placeholder="Beschreibung der Station"
+          placeholder="Name der Station"
           className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
         />
       </div>
@@ -135,6 +164,14 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
         </select>
       </div>
 
+      <button
+        type="button" // Use button type to prevent form submission
+        onClick={handleDeletePoi}
+        className="bg-red-400 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full mb-4"
+      >
+        POI löschen
+      </button>
+
       <button
         type="submit"
         className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"