diff --git a/components/MapComponent.js b/components/MapComponent.js index a1c6be2a6..6f3a61174 100644 --- a/components/MapComponent.js +++ b/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(` diff --git a/components/PoiUpdateModal.js b/components/PoiUpdateModal.js index 0f4caee53..f8541929b 100644 --- a/components/PoiUpdateModal.js +++ b/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" diff --git a/pages/api/getPoiById.js b/pages/api/getPoiById.js new file mode 100644 index 000000000..236a1845d --- /dev/null +++ b/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`); + } +}