{/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
{showPopup && (
diff --git a/components/PoiUpdateModal.js b/components/PoiUpdateModal.js
new file mode 100644
index 000000000..f2eab3c39
--- /dev/null
+++ b/components/PoiUpdateModal.js
@@ -0,0 +1,225 @@
+// components/PoiUpdate.js
+import React, { useState, useEffect, use } from "react";
+import ReactDOM from "react-dom";
+import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
+import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore";
+import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
+
+const PoiUpdateModal = ({ onClose, map, poiData }) => {
+ const [poiId, setPoiId] = useState(poiData ? poiData.id : "");
+ const [poiTypData, setpoiTypData] = useState(); // Recoil State verwenden
+
+ const [name, setName] = useState("");
+ const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string
+ const [poiTypeName, setPoiTypeName] = useState(""); // Initialize as string
+ //const [latitude] = useState(latlng.lat.toFixed(5));
+ //const [longitude] = useState(latlng.lng.toFixed(5));
+ const setLoadData = useSetRecoilState(readPoiMarkersStore);
+ const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
+ const [locationDeviceData, setLocationDeviceData] = useState([]);
+ const [deviceName, setDeviceName] = useState("");
+
+ //---------------------------------------------------------------------------------------
+
+ useEffect(() => {
+ const fetchpoiData = async () => {
+ try {
+ const response = await fetch("/api/readLocation");
+ const data = await response.json();
+ console.log("data in PoiUpdateModal: ", data[0].idPoiTyp);
+ setpoiTypData(data);
+ if (data && data.length > 0) {
+ setPoiTypeId(data[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType
+ setPoiTypeName(data[1].name); // Set initial poiTypeName to the name of the first poiType
+ /* console.log(
+ "Initial poiTypeId set in ShowAddStationPopup.js :",
+ data[0].idPoiTyp
+ ); */
+ }
+ } catch (error) {
+ console.error("Fehler beim Abrufen der poi Tabelle Daten:", error);
+ }
+ };
+
+ fetchpoiData();
+ }, []);
+
+ //------------------------------------------------------------------------------------
+
+ useEffect(() => {
+ const fetchpoiTypData = async () => {
+ try {
+ const response = await fetch("/api/readPoiTyp");
+ const data = await response.json();
+ setpoiTypData(data);
+ if (data && data.length > 0) {
+ setPoiTypeId(data[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType
+ setPoiTypeName(data[1].name); // Set initial poiTypeName to the name of the first poiType
+ /* console.log(
+ "Initial poiTypeId set in ShowAddStationPopup.js :",
+ data[0].idPoiTyp
+ ); */
+ }
+ } catch (error) {
+ console.error("Fehler beim Abrufen der poiTyp Daten:", error);
+ }
+ };
+
+ fetchpoiTypData();
+ }, []);
+ //------------------------------------------------------------------------------------------
+ useEffect(() => {
+ // Funktion zum Abrufen der Daten von der API -> DB talas_v5.location_device
+ const fetchData = async () => {
+ try {
+ const response = await fetch("/api/talas_v5/location_device");
+ const data = await response.json();
+ setLocationDeviceData(data);
+ if (data.length > 0) {
+ setDeviceName(data[0].name); // Setzen des anfänglichen Gerätenamens
+ }
+ //console.log("Abgerufene Standort- und Gerätedaten:", data);
+ } catch (error) {
+ console.error(
+ "Fehler beim Abrufen der Standort- und Gerätedaten:",
+ error
+ );
+ }
+ };
+
+ fetchData();
+ }, []);
+
+ //------------------------------------------------------------------------------------------
+
+ //-----------------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-------------------
+ useEffect(() => {
+ if (poiData) {
+ console.log("poiData in PoiUpdateModal: ", poiData);
+ console.log("poiData.name in PoiUpdateModal: ", poiData.name);
+ setName(poiData.name);
+ console.log("poiData.idPoi in PoiUpdateModal: ", poiData.idPoi);
+ setPoiId(poiData.idPoi);
+ }
+ }, [poiData]);
+ //------------------------------------------------------------------------------------------
+ return (
+
+ );
+};
+
+export default PoiUpdateModal;
diff --git a/pages/api/updatePoi.js b/pages/api/updatePoi.js
new file mode 100644
index 000000000..a79bbaf01
--- /dev/null
+++ b/pages/api/updatePoi.js
@@ -0,0 +1,39 @@
+// pages/api/updateLocation.js
+import mysql from "mysql";
+import util from "util";
+
+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,
+ charset: "utf8mb4",
+};
+
+export default async function handler(req, res) {
+ if (req.method !== "POST") {
+ res.setHeader("Allow", ["POST"]);
+ return res.status(405).end(`Method ${req.method} Not Allowed`);
+ }
+
+ const { id, latitude, longitude } = req.body;
+
+ const connection = mysql.createConnection(dbConfig);
+ // Promisify the query method
+ const query = util.promisify(connection.query).bind(connection);
+
+ try {
+ await query("UPDATE poi SET position = POINT(?, ?) WHERE idPoi = ?", [
+ longitude,
+ latitude,
+ id,
+ ]);
+ res.status(200).json({ success: true });
+ } catch (error) {
+ console.error(error);
+ res.status(500).json({ error: "Ein Fehler ist aufgetreten" });
+ } finally {
+ connection.end();
+ }
+}