From c9c9e5feb3972d5ba8014bce15072c3b65bdaaa2 Mon Sep 17 00:00:00 2001 From: ISA Date: Thu, 2 May 2024 14:26:36 +0200 Subject: [PATCH] =?UTF-8?q?DropDownmen=C3=BC=20Element=20von=20API=20aufru?= =?UTF-8?q?fen=20in=20Kontextmen=C3=BC=20->Popup->=20Station=20hinzuf?= =?UTF-8?q?=C3=BCgen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/MapComponent.js | 8 +-- components/ShowAddStationPopup.js | 53 ++++++++++++++----- package-lock.json | 88 +++++++++++++++---------------- package.json | 2 +- store/poiTypState.js | 4 +- 5 files changed, 88 insertions(+), 67 deletions(-) diff --git a/components/MapComponent.js b/components/MapComponent.js index ed39dc167..63ba08810 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -21,7 +21,7 @@ import ShowAddStationPopup from "./ShowAddStationPopup"; //import { createRoot } from "react-dom/client"; const MapComponent = ({ locations, onLocationUpdate }) => { - const [poiTypData, setPoiTypData] = useRecoilState(poiTypState); // Recoil State verwenden + const [poiTypData, setPoiTypData] = useState(poiTypState); // Recoil State verwenden const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte const [map, setMap] = useState(null); // Zustand der Karteninstanz @@ -415,11 +415,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // Create a root container for the React component inside the popup const root = ReactDOM.createRoot(container); - root.render( - - - - ); + root.render(); // Create and configure the popup L.popup().setLatLng(e.latlng).setContent(container).openOn(initMap); diff --git a/components/ShowAddStationPopup.js b/components/ShowAddStationPopup.js index c1095f6d5..79769c20d 100644 --- a/components/ShowAddStationPopup.js +++ b/components/ShowAddStationPopup.js @@ -1,20 +1,43 @@ // components/ShowAddStationPopup.js: import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; -import { useRecoilState } from "recoil"; -import { poiTypState } from "../store/poiTypState"; const ShowAddStationPopup = ({ map, latlng }) => { - const [poiTypData, setPoiTypData] = useRecoilState(poiTypState); + const [poiTypData2, setpoiTypData2] = useState(); // Recoil State verwenden + const [name, setName] = useState(""); const [poiTypeId, setPoiTypeId] = useState(""); const [latitude] = useState(latlng.lat.toFixed(5)); const [longitude] = useState(latlng.lng.toFixed(5)); - // Effekt zum Ausgeben von poiTypData in der Konsole + // Effekt zum Ausgeben von poiTypData2 in der Konsole useEffect(() => { - console.log("poiTypData in ShowAddStationPopup.js :", poiTypData); - }, [poiTypData]); + console.log("poiTypData2 in ShowAddStationPopup.js :", poiTypData2); + }, [poiTypData2]); + + //------------------------------------------ + // Funktion zum Abrufen der poiTyp Daten + + useEffect(() => { + const fetchpoiTypData2 = async () => { + try { + const response = await fetch("/api/poiTyp"); + const data = await response.json(); + setpoiTypData2(data); // Daten im Recoil State speichern + } catch (error) { + console.error("Fehler beim Abrufen der poiTyp Daten:", error); + } + }; + + fetchpoiTypData2(); + }, []); + + // Effekt zum Loggen der poiTypData2, wenn sie sich ändern + useEffect(() => { + console.log("poiTypData2 aktualisiert:", poiTypData2); + }, [poiTypData2]); + + //---------------------------------------------------- const handleSubmit = (event) => { event.preventDefault(); @@ -39,23 +62,25 @@ const ShowAddStationPopup = ({ map, latlng }) => { />
-
+