idLD foreign key von talas_v5.location_device in poi Tabelle ,in der Spalte idLD speichern beim hinzufügen eines POI auf die Map

components/ShowAddStationPopup.js

@@ -17,18 +17,6 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
   const [locationDeviceData, setLocationDeviceData] = useState([]);
   const [deviceName, setDeviceName] = useState("");
 
-  /*   useEffect(() => {
-    if (map && loadData) {
-      
-      console.log("Map and loadData are defined in ShowAddStationPopup.js", map);
-      console.log("loadData object in ShowAddStationPopup.js:", loadData);
-      // Your code here
-    }else{
-      console.log("Map and loadData are not defined in ShowAddStationPopup.js");
-    }
-  }, [map, loadData]); */
-
-  // In Kontextmenü-Formular Typen anzeigen
   useEffect(() => {
     const fetchpoiTypData = async () => {
       try {
@@ -51,40 +39,8 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
     fetchpoiTypData();
   }, []);
 
-  //-----------------handleSubmit-------------------
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-    const formData = {
-      name,
-      poiTypeId,
-      latitude,
-      longitude,
-    };
-
-    const response = await fetch("/api/addLocation", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(formData),
-    });
-
-    if (response.ok) {
-      setTrigger((trigger) => {
-        console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert
-        const newTrigger = trigger + 1;
-        console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert
-        onClose();
-        return newTrigger;
-      });
-    } else {
-      console.error("Fehler beim Hinzufügen des POI");
-    }
-
-    if (map && typeof map.closePopup === "function") {
-      map.closePopup();
-    }
-  };
   //---------------------------------------------------------------------------------------
-  useEffect(() => {
+  /*   useEffect(() => {
     // Funktion zum Abrufen der Daten von der API -> DB talas_v5.location_device
     const fetchData = async () => {
       try {
@@ -101,7 +57,7 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
     };
 
     fetchData();
-  }, []); // Leerarray als Dependency, um den Effekt nur beim Laden der Komponente auszuführen
+  }, []); // Leerarray als Dependency, um den Effekt nur beim Laden der Komponente auszuführen */
 
   //------------------------------------------------------------------------------------------
   useEffect(() => {
@@ -127,6 +83,41 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
   }, []);
 
   //------------------------------------------------------------------------------------------
+  //-----------------handleSubmit-------------------
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const formData = {
+      name,
+      poiTypeId,
+      latitude,
+      longitude,
+      idLD: locationDeviceData.find((device) => device.name === deviceName)
+        .idLD,
+    };
+
+    const response = await fetch("/api/addLocation", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(formData),
+    });
+
+    if (response.ok) {
+      setTrigger((trigger) => {
+        console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert
+        const newTrigger = trigger + 1;
+        console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert
+        onClose();
+        return newTrigger;
+      });
+    } else {
+      console.error("Fehler beim Hinzufügen des POI");
+    }
+
+    if (map && typeof map.closePopup === "function") {
+      map.closePopup();
+    }
+  };
+  //-----------------handleSubmit-------------------
 
   return (
     <form onSubmit={handleSubmit} className="m-0 p-2 w-full ">

pages/api/addLocation.js

@@ -11,13 +11,14 @@ const dbConfig = {
 
 export default function handler(req, res) {
   if (req.method === "POST") {
-    const { name, poiTypeId, latitude, longitude } = req.body;
+    const { name, poiTypeId, latitude, longitude, idLD } = req.body;
     console.log("Received data:", req.body); // Überprüfen der empfangenen Daten
     const connection = mysql.createConnection(dbConfig);
 
-    const query = "INSERT INTO poi (description, idPoiTyp, position) VALUES (?, ?, ST_GeomFromText(?))";
+    const query =
+      "INSERT INTO poi (description, idPoiTyp, position, idLD) VALUES (?, ?, ST_GeomFromText(?),?)";
     const point = `POINT(${longitude} ${latitude})`;
-    const values = [name, poiTypeId, point]; // Stellen Sie sicher, dass poiTypeId korrekt ist
+    const values = [name, poiTypeId, point, idLD]; // Stellen Sie sicher, dass poiTypeId korrekt ist
 
     connection.query(query, values, (error, results) => {
       connection.end();
@@ -25,11 +26,15 @@ export default function handler(req, res) {
         console.error("Fehler beim Einfügen des Standorts:", error);
         return res.status(500).json({ error: "Ein Fehler ist aufgetreten" });
       }
-      res.status(200).json({ id: results.insertId, message: "Standort erfolgreich hinzugefügt" });
+      res
+        .status(200)
+        .json({
+          id: results.insertId,
+          message: "Standort erfolgreich hinzugefügt",
+        });
     });
   } else {
     res.setHeader("Allow", ["POST"]);
     res.status(405).end(`Method ${req.method} Not Allowed`);
   }
 }
-