From 07eb6ee34a194fae06711270981a26510546d1c6 Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 21 May 2024 15:17:48 +0200 Subject: [PATCH] =?UTF-8?q?Modal=20f=C3=BCr=20Poi=20zu=20updaten=20und=20z?= =?UTF-8?q?u=20l=C3=B6schen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/MapComponent.js | 95 +++++++++++++-- components/PoiUpdateModal.js | 225 +++++++++++++++++++++++++++++++++++ pages/api/updatePoi.js | 39 ++++++ 3 files changed, 349 insertions(+), 10 deletions(-) create mode 100644 components/PoiUpdateModal.js create mode 100644 pages/api/updatePoi.js diff --git a/components/MapComponent.js b/components/MapComponent.js index 655a70ff0..a1c6be2a6 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -20,6 +20,7 @@ import { poiTypState } from "../store/atoms/poiTypState.js"; import ShowAddStationPopup from "./ShowAddStationPopup"; import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom"; import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline' +import PoiUpdateModal from "./PoiUpdateModal.js"; //import { createRoot } from "react-dom/client"; @@ -32,6 +33,22 @@ const plusRoundIcon = L.icon({ }); const MapComponent = ({ locations, onLocationUpdate }) => { + const openPoiUpdateModal = () => setShowPoiUpdateModal(true); + const closePoiUpdateModal = () => setShowPoiUpdateModal(false); + const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false); + 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 + 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 + }); + setShowPoiUpdateModal(true); + }; + const [showVersionInfoModal, setShowVersionInfoModal] = useState(false); const zoomTrigger = useRecoilValue(zoomTriggerState); const offlineTileLayer = "/mapTiles/{z}/{x}/{y}.png"; @@ -245,6 +262,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { className: "background-red", callback: addStationCallback, }, + { text: "Koordinaten anzeigen", icon: "img/not_listed_location.png", @@ -835,6 +853,15 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }; console.log("trigger in MapComponent.js:", poiReadTrigger); }, [map, locations, poiReadTrigger]); // Dieser Effekt läuft nur, wenn sich `map` ändert + //------------------------------------------ + function editPoi(marker) { + // Zugriff auf die Markerdaten + const markerId = marker.options.id; + console.log("Bearbeiten des POI mit ID:", markerId); + + // Hier könnte ein Modal mit Formular geöffnet werden + // Beispiel: openEditModal(markerId); + } //------------------------------------------ // poiLayerRef(poiDbLayer) POI hinzufügen @@ -861,7 +888,19 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }), draggable: true, id: location.idPoi, + }).bindContextMenu({ + contextmenu: true, + contextmenuWidth: 140, + contextmenuItems: [ + { + text: "POI Bearbeiten", //git stash save "POI Bearbeiten" + + icon: "/img/edit_icon.png", + callback: () => handleEditPoi(marker), + }, + ], }); + //console.log("location.idPoi:", location.idPoi); // Popup konfigurieren marker.bindPopup(` @@ -891,16 +930,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }); marker.addTo(poiLayerRef.current); - /* //-------------- - const plusMarker = L.marker([latitude, longitude], { - icon: plusRoundIcon, - zIndexOffset: 1000, // Higher z-index for visibility - }); - - // Add to the poiLayer - plusMarker.addTo(poiLayerRef.current); - console.log("Adding plus icon marker at", [latitude, longitude]); - //------------ */ }); } }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded]); @@ -1670,6 +1699,52 @@ const MapComponent = ({ locations, onLocationUpdate }) => { return ( <> +
+ {/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */} + {showPoiUpdateModal && ( +
+
e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters + > + {/* Schließen-Button oben rechts */} + + + {/* Formular-Komponente zum Hinzufügen einer Station */} + setShowPoiUpdateModal(false)} + poiData={currentPoiData} + onSubmit={handleAddStation} + latlng={popupCoordinates} + /> +
+
+ )} +
+ + {/* Rest of your component */}
{/* 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 ( +
+
+ + setName(e.target.value)} + placeholder="Name der Station" + className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" + /> +
+ + {/* {locationDeviceData.----------------------------------------------*/} +
+ + +
+ {/* {locationDeviceData.----------------------------------------------*/} +
+ + +
+
+
+ +
+
+ +
+
+ + + +
+ ); +}; + +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(); + } +}