From 185d9348ea024e0eaa3a0602667f13da6bad9314 Mon Sep 17 00:00:00 2001 From: ISA Date: Wed, 22 May 2024 06:53:21 +0200 Subject: [PATCH] =?UTF-8?q?Poi=20l=C3=B6schen=20funktioniert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/PoiUpdateModal.js | 169 +++------ package-lock.json | 715 ++++++++++++++++++++++++++++++++++- package.json | 1 + pages/api/deletePoi.js | 45 +++ 4 files changed, 805 insertions(+), 125 deletions(-) create mode 100644 pages/api/deletePoi.js diff --git a/components/PoiUpdateModal.js b/components/PoiUpdateModal.js index f2eab3c39..bed6e3814 100644 --- a/components/PoiUpdateModal.js +++ b/components/PoiUpdateModal.js @@ -1,84 +1,61 @@ -// 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"; +// pages/api/poiUpdateModal.js +import React, { useState, useEffect } from "react"; -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 PoiUpdateModal = ({ onClose, poiData }) => { + const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : ""); + const [name, setName] = useState(poiData ? poiData.name : ""); + const [poiTypData, setPoiTypData] = useState([]); + const [poiTypeId, setPoiTypeId] = useState(""); const [locationDeviceData, setLocationDeviceData] = useState([]); const [deviceName, setDeviceName] = useState(""); - //--------------------------------------------------------------------------------------- - - useEffect(() => { - const fetchpoiData = async () => { + // Function to handle deleting a POI + const handleDeletePoi = async () => { + if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) { 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 - ); */ + const response = await fetch(`/api/deletePoi?id=${poiId}`, { + method: "DELETE", + }); + if (response.ok) { + alert("POI wurde erfolgreich gelöscht."); + onClose(); // Close the modal + } else { + throw new Error("Fehler beim Löschen des POI."); } } catch (error) { - console.error("Fehler beim Abrufen der poi Tabelle Daten:", error); + console.error("Fehler beim Löschen des POI:", error); + alert("Fehler beim Löschen des POI."); } - }; - - fetchpoiData(); - }, []); - - //------------------------------------------------------------------------------------ + } + }; + // Fetch POI types useEffect(() => { - const fetchpoiTypData = async () => { + const fetchPoiTypData = async () => { try { const response = await fetch("/api/readPoiTyp"); const data = await response.json(); - setpoiTypData(data); + 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 - ); */ + setPoiTypeId(data[0].idPoiTyp); // Set the first type as default } } catch (error) { console.error("Fehler beim Abrufen der poiTyp Daten:", error); } }; - - fetchpoiTypData(); + fetchPoiTypData(); }, []); - //------------------------------------------------------------------------------------------ + + // Fetch device data 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 + setDeviceName(data[0].name); // Set initial device name } - //console.log("Abgerufene Standort- und Gerätedaten:", data); } catch (error) { console.error( "Fehler beim Abrufen der Standort- und Gerätedaten:", @@ -86,62 +63,20 @@ const PoiUpdateModal = ({ onClose, map, poiData }) => { ); } }; - fetchData(); }, []); - //------------------------------------------------------------------------------------------ - - //-----------------handleSubmit------------------- + // Form submission handler 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(); - } + event.preventDefault(); // Prevent the form from submitting + // Perform update operation here }; - //-----------------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 ( -
+
{ />
- {/* {locationDeviceData.----------------------------------------------*/}
- {/* {locationDeviceData.----------------------------------------------*/} +
-
-
- -
-
- -
-
+