Der Name von POI lesen und in Aktualisierung-Popup einfügen

components/MapComponent.js

@@ -39,12 +39,30 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   const [currentPoiData, setCurrentPoiData] = useState(null);
 
   const handleEditPoi = (marker) => {
-    console.log("Gewählte Marker ID (idPoi):", marker.options.id);
-    // Setzen der aktuellen POI-Daten für die Übergabe an das Modal
+    console.log("Selected Marker ID (idPoi):", marker.options.idPoi);
+    console.log("Selected Marker Description:", marker.options.description);
+
     setCurrentPoiData({
       idPoi: marker.options.id,
-      //name: marker.options.name, // Angenommen, name ist ebenfalls in options gespeichert
-      // Weitere relevante Markerdaten können hier hinzugefügt werden
+      name: marker.options.name,
+      description: marker.options.description,
+    });
+    fetchPoiData(marker.options.id);
+
+    setShowPoiUpdateModal(true);
+  };
+
+  const fetchPoiData = async (idPoi) => {
+    const response = await fetch(`/api/getPoiById?idPoi=${idPoi}`);
+    if (!response.ok) {
+      console.error("Fehler beim Abrufen der POI-Daten");
+      return;
+    }
+    const data = await response.json();
+    setCurrentPoiData({
+      idPoi,
+      name: data.name,
+      description: data.description,
     });
     setShowPoiUpdateModal(true);
   };
@@ -877,8 +895,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       locations.forEach((location) => {
         const { latitude, longitude } = parsePoint(location.position);
         const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt ";
-        //console.log("poiTypName:", poiTypName);
-        //console.log("location.idPoiTyp:", location.idPoiTyp);
+        console.log("poiTypName in poiLayer:", poiTypName);
+        //console.log("location.idPoiTyp poiLayer:", location.idPoiTyp);
+        console.log("location.idPoiTyp poiLayer:", location);
+
         const marker = L.marker([latitude, longitude], {
           icon: L.icon({
             iconUrl: `/img/icons/pois/poi-marker-icon-${location.idPoiTyp}.png`,
@@ -900,7 +920,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
             },
           ],
         });
-        //console.log("location.idPoi:", location.idPoi);
+        console.log("location.idPoi:", location);
 
         // Popup konfigurieren
         marker.bindPopup(`

components/PoiUpdateModal.js

@@ -13,6 +13,52 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     poiData ? poiData.description : ""
   );
 
+  // Log the initial POI data
+  useEffect(() => {
+    if (poiData) {
+      setPoiId(poiData.idPoi);
+      setName(poiData.name);
+      setPoiTypeId(poiData.idPoiTyp);
+
+      setDescription(poiData.description);
+      console.log("Loaded POI Data for editing:", poiData);
+      console.log("POI ID:", poiData.idPoi);
+      console.log("POI Name:", poiData.name);
+      console.log("POI Typ ID:", poiData.idPoiTyp);
+      console.log("POI Beschreibung:", poiData.description);
+      console.log("POI Geräte-ID:", poiData.idLD);
+    }
+  }, [poiData]);
+
+  const fetchDeviceNameById = async (idLD) => {
+    try {
+      const response = await fetch(`/api/getDeviceNameById?idLD=${idLD}`);
+      const data = await response.json();
+      setDeviceName(data.deviceName);
+    } catch (error) {
+      console.error("Error fetching device name:", error);
+    }
+  };
+
+  // Beim Öffnen des Modals die Geräte-ID basierend auf dem Gerätenamen abrufen, wenn vorhanden
+  useEffect(() => {
+    const fetchDeviceId = async () => {
+      if (poiData && poiData.idLD) {
+        try {
+          const response = await fetch(
+            `/api/getDeviceIdById?idLD=${poiData.idLD}`
+          );
+          const data = await response.json();
+          if (data) setDeviceName(data.name);
+        } catch (error) {
+          console.error("Fehler beim Abrufen der Geräteinformation:", error);
+        }
+      }
+    };
+
+    fetchDeviceId();
+  }, [poiData]);
+
   // Function to handle deleting a POI
   const handleDeletePoi = async () => {
     if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
@@ -41,6 +87,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
       try {
         const response = await fetch("/api/readPoiTyp");
         const data = await response.json();
+        //console.log("POI Typ Daten:", data);
         setPoiTypData(data);
         if (data && data.length > 0) {
           setPoiTypeId(data[0].idPoiTyp); // Set the first type as default
@@ -58,6 +105,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
       try {
         const response = await fetch("/api/talas_v5/location_device");
         const data = await response.json();
+        //console.log("Standort- und Gerätedaten:", data);
         setLocationDeviceData(data);
         if (data.length > 0) {
           setDeviceName(data[0].name); // Set initial device name
@@ -95,8 +143,9 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
       });
 
       if (response.ok) {
-        alert("POI wurde erfolgreich aktualisiert.");
+        //alert("POI wurde erfolgreich aktualisiert.");
         onClose(); // Schließen des Modals und Aktualisieren der Ansicht
+        window.location.reload();
       } else {
         const errorResponse = await response.json();
         throw new Error(
@@ -119,7 +168,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
           type="text"
           id="name"
           name="name"
-          value={name}
+          value={poiData.description || name}
           onChange={(e) => setName(e.target.value)}
           placeholder="Name der Station"
           className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"

pages/api/getPoiById.js

@@ -0,0 +1,42 @@
+// pages/api/getPoiById.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,
+};
+
+export default function handler(req, res) {
+  if (req.method === "GET") {
+    const { idPoi } = req.query;
+    const connection = mysql.createConnection(dbConfig);
+
+    connection.connect((err) => {
+      if (err) {
+        console.error("Fehler beim Verbinden:", err.stack);
+        return res
+          .status(500)
+          .json({ error: "Verbindungsfehler zur Datenbank" });
+      }
+
+      const query = "SELECT description FROM poi WHERE idPoi = ?";
+      connection.query(query, [idPoi], (error, results) => {
+        connection.end();
+        if (error) {
+          console.error("Fehler bei der Abfrage:", error);
+          return res.status(500).json({ error: "Fehler bei der Abfrage" });
+        }
+        if (results.length === 0) {
+          return res.status(404).json({ error: "POI nicht gefunden" });
+        }
+        res.status(200).json(results[0]);
+      });
+    });
+  } else {
+    res.setHeader("Allow", ["GET"]);
+    res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}