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 }) => {
/>
-
+