idLD geht muss noch das Löschen Button hinzufügen

components/PoiUpdateModal.js

@@ -1,37 +1,15 @@
-// pages/api/poiUpdateModal.js
 import React, { useState, useEffect } from "react";
 
 const PoiUpdateModal = ({ onClose, poiData }) => {
   const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
-  const [name, setName] = useState(poiData ? poiData.name : "");
+  const [description, setDescription] = useState(
+    poiData ? poiData.description : ""
+  );
   const [poiTypData, setPoiTypData] = useState([]);
   const [poiTypeId, setPoiTypeId] = useState("");
   const [locationDeviceData, setLocationDeviceData] = useState([]);
   const [deviceName, setDeviceName] = useState("");
 
-  // 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 {
@@ -46,10 +24,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
       }
     };
     fetchPoiTypData();
-  }, []);
 
-  // Fetch device data
-  useEffect(() => {
     const fetchData = async () => {
       try {
         const response = await fetch("/api/talas_v5/location_device");
@@ -68,9 +43,14 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     fetchData();
   }, []);
 
-  // Form submission handler
   const handleSubmit = async (event) => {
     event.preventDefault();
+    const idLDResponse = await fetch(
+      `/api/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`
+    );
+    const idLDData = await idLDResponse.json();
+    const idLD = idLDData.idLD;
+
     try {
       const response = await fetch("/api/updatePoi", {
         method: "POST",
@@ -79,8 +59,9 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
         },
         body: JSON.stringify({
           idPoi: poiId,
-          description: name,
+          description: description,
           idPoiTyp: poiTypeId,
+          idLD: idLD,
         }),
       });
 
@@ -102,16 +83,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="name" className="block mr-2 flex-none">
+        <label htmlFor="description" className="block mr-2 flex-none">
-          Name:
+          Beschreibung:
         </label>
         <input
           type="text"
-          id="name"
+          id="description"
-          name="name"
+          name="description"
-          value={name}
+          value={description}
-          onChange={(e) => setName(e.target.value)}
+          onChange={(e) => setDescription(e.target.value)}
-          placeholder="Name der Station"
+          placeholder="Beschreibung der Station"
           className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
         />
       </div>
@@ -154,14 +135,6 @@ 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"

pages/api/getDeviceId.js

@@ -0,0 +1,40 @@
+// API in /api/getDeviceId.js
+import mysql from "mysql";
+
+const dbConfig = {
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASSWORD,
+  database: process.env.DB_NAME,
+  port: process.env.DB_PORT,
+};
+
+const connection = mysql.createConnection(dbConfig);
+connection.connect((err) => {
+  if (err) {
+    console.error("Fehler beim Verbinden:", err.stack);
+    return;
+  }
+});
+
+export default function handler(req, res) {
+  if (req.method !== "GET") {
+    return res.status(405).json({ error: "Nur GET Methode erlaubt" });
+  }
+  const { deviceName } = req.query;
+
+  const query = "SELECT idLD FROM location_device WHERE name = ?";
+  connection.query(query, [deviceName], (error, results) => {
+    if (error) {
+      console.error("Fehler beim Abrufen der Geräte-ID:", error);
+      return res
+        .status(500)
+        .json({ error: "Fehler beim Abrufen der Geräte-ID" });
+    }
+    if (results.length > 0) {
+      res.json({ idLD: results[0].idLD });
+    } else {
+      res.status(404).json({ error: "Gerät nicht gefunden" });
+    }
+  });
+}