diff --git a/components/DataSheet.js b/components/DataSheet.js index 81dafbcf3..8186faab4 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -1,11 +1,11 @@ //components/DataSheet.js import React, { useEffect, useState } from "react"; import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; -import { gisStationsStaticDistrictState } from "../store/gisStationState"; -import { gisSystemStaticState } from "../store/gisSystemState"; -import { mapLayersState } from "../store/mapLayersState"; -import { selectedAreaState } from "../store/selectedAreaState"; -import { zoomTriggerState } from "../store/zoomTriggerState"; +import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState"; +import { gisSystemStaticState } from "../store/atoms/gisSystemState"; +import { mapLayersState } from "../store/atoms/mapLayersState"; +import { selectedAreaState } from "../store/atoms/selectedAreaState"; +import { zoomTriggerState } from "../store/atoms/zoomTriggerState"; function DataSheet() { const setSelectedArea = useSetRecoilState(selectedAreaState); diff --git a/components/MapComponent.js b/components/MapComponent.js index 8606cd6b8..336bb9866 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -11,12 +11,12 @@ import "leaflet.smooth_marker_bouncing"; import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; import DataSheet from "./DataSheet.js"; import { useRecoilState, useRecoilValue, RecoilRoot } from "recoil"; -import { gisStationsStaticDistrictState } from "../store/gisStationState.js"; -import { gisSystemStaticState } from "../store/gisSystemState.js"; -import { mapLayersState } from "../store/mapLayersState.js"; -import { selectedAreaState } from "../store/selectedAreaState.js"; -import { zoomTriggerState } from "../store/zoomTriggerState.js"; -import { poiTypState } from "../store/poiTypState.js"; +import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState.js"; +import { gisSystemStaticState } from "../store/atoms/gisSystemState.js"; +import { mapLayersState } from "../store/atoms/mapLayersState.js"; +import { selectedAreaState } from "../store/atoms/selectedAreaState.js"; +import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js"; +import { poiTypState } from "../store/atoms/poiTypState.js"; import ShowAddStationPopup from "./ShowAddStationPopup"; //import { createRoot } from "react-dom/client"; @@ -415,7 +415,11 @@ 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 3f269adf9..c4fb871a5 100644 --- a/components/ShowAddStationPopup.js +++ b/components/ShowAddStationPopup.js @@ -1,7 +1,10 @@ +// components/ShowAddStationPopup.js import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; - +import { useRecoilValue } from "recoil"; +import { loadDataStore } from "../store/selectors/loadDataStore"; const ShowAddStationPopup = ({ map, latlng }) => { + const loadData = useRecoilValue(loadDataStore); const [poiTypData2, setPoiTypData2] = useState(); // Recoil State verwenden const [name, setName] = useState(""); const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string @@ -29,7 +32,7 @@ const ShowAddStationPopup = ({ map, latlng }) => { fetchPoiTypData2(); }, []); - const handleSubmit = (event) => { + const handleSubmit = async (event) => { event.preventDefault(); const formData = { name, // Name der Station @@ -46,6 +49,7 @@ const ShowAddStationPopup = ({ map, latlng }) => { .then((response) => response.json()) .then((data) => console.log(data)) // Handle the response data .catch((error) => console.error(error)); // Handle any errors + await loadData(); // Check if map is not undefined and call closePopup if (map && typeof map.closePopup === "function") { diff --git a/pages/index copy.js b/pages/index copy.js new file mode 100644 index 000000000..7b39873d0 --- /dev/null +++ b/pages/index copy.js @@ -0,0 +1,98 @@ +// pages/index.js +import { useEffect, useState } from "react"; +import dynamic from "next/dynamic"; +import { useSetRecoilState } from "recoil"; +import { loadDataStore } from "../store/selectors/loadDataStore"; +const MapComponentWithNoSSR = dynamic( + () => import("../components/MapComponent"), + { ssr: false } +); + +export default function Home() { + const setLoadData = useSetRecoilState(loadDataStore); + const [mParam, setMParam] = useState([""]); + const [uParam, setUParam] = useState([""]); + + const [locations, setLocations] = useState([]); + const [formData, setFormData] = useState({ + name: "", + longitude: "", + latitude: "", + type: "", + }); + + const loadData = async () => { + const response = await fetch("/api/readLocations"); + const data = await response.json(); + setLocations(data); + }; + useEffect(() => { + setLoadData(async () => { + const response = await fetch("/api/readLocations"); + const data = await response.json(); + setLocations(data); // Überlegungen für setLocations beachten + }); + }, []); + + useEffect(() => { + // Funktion, um URL-Parameter zu holen + function getURLParameter(name) { + // Nutze URLSearchParams, eine Web API für die Arbeit mit Query-Strings + const params = new URLSearchParams(window.location.search); + return params.get(name); // Holt den Wert des Parameternamens + } + + // Hole die Parameter 'm' und 'u' + setMParam(getURLParameter("m")); + setUParam(getURLParameter("u")); + + // Logge die Werte in der Konsole + console.log(`Parameter m: ${mParam}, Parameter u: ${uParam}`); + loadData(); + }, []); + const handleAddLocation = async (name, type, lat, lng) => { + const response = await fetch("/api/addLocation", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + name, + type, + latitude: lat, + longitude: lng, + }), + }); + + if (response.ok) { + console.log("Standort erfolgreich hinzugefügt"); + setFormData({ name: "", longitude: "", latitude: "", type: "" }); // Formular zurücksetzen + loadData(); // Daten erneut laden + } else { + console.error("Fehler beim Hinzufügen des Standorts"); + } + }; + + const handleLocationUpdate = (id, newLatitude, newLongitude) => { + setLocations((prevLocations) => { + return prevLocations.map((location) => { + if (location.idPoi === id) { + return { + ...location, + // Hier musst du ggf. die Formatierung anpassen, je nachdem wie du die Koordinaten speicherst + position: `POINT(${newLongitude} ${newLatitude})`, + }; + } + return location; + }); + }); + }; + return ( +
+ {/* Ihr Formular */} + +
+ ); +} diff --git a/pages/index.js b/pages/index.js index 284b9e8d9..7b39873d0 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,12 +1,15 @@ // pages/index.js import { useEffect, useState } from "react"; import dynamic from "next/dynamic"; +import { useSetRecoilState } from "recoil"; +import { loadDataStore } from "../store/selectors/loadDataStore"; const MapComponentWithNoSSR = dynamic( () => import("../components/MapComponent"), { ssr: false } ); export default function Home() { + const setLoadData = useSetRecoilState(loadDataStore); const [mParam, setMParam] = useState([""]); const [uParam, setUParam] = useState([""]); @@ -23,6 +26,13 @@ export default function Home() { const data = await response.json(); setLocations(data); }; + useEffect(() => { + setLoadData(async () => { + const response = await fetch("/api/readLocations"); + const data = await response.json(); + setLocations(data); // Überlegungen für setLocations beachten + }); + }, []); useEffect(() => { // Funktion, um URL-Parameter zu holen @@ -60,27 +70,7 @@ export default function Home() { console.error("Fehler beim Hinzufügen des Standorts"); } }; - const handleSubmit = async (event) => { - event.preventDefault(); - const response = await fetch("/api/addLocation", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify(formData), - }); - if (response.ok) { - console.log("Erfolg"); - setFormData({ name: "", longitude: "", latitude: "", type: "" }); // Formular zurücksetzen - loadData(); // Daten erneut laden - } else { - console.error("Fehler beim Speichern der Daten"); - } - }; - - const handleChange = (event) => { - const { name, value } = event.target; - setFormData((prevState) => ({ ...prevState, [name]: value })); - }; const handleLocationUpdate = (id, newLatitude, newLongitude) => { setLocations((prevLocations) => { return prevLocations.map((location) => { diff --git a/store/gisStationState.js b/store/atoms/gisStationState.js similarity index 84% rename from store/gisStationState.js rename to store/atoms/gisStationState.js index 2f4330bc1..057233e8e 100644 --- a/store/gisStationState.js +++ b/store/atoms/gisStationState.js @@ -1,4 +1,4 @@ -// Pfad: store/gisStationState.js +// Pfad: store/atoms/gisStationState.js import { atom } from "recoil"; export const gisStationsStaticDistrictState = atom({ diff --git a/store/gisSystemState.js b/store/atoms/gisSystemState.js similarity index 83% rename from store/gisSystemState.js rename to store/atoms/gisSystemState.js index 5abdb0987..784b41776 100644 --- a/store/gisSystemState.js +++ b/store/atoms/gisSystemState.js @@ -1,4 +1,4 @@ -// Pfad: store/gisStationState.js +// Pfad: store/atoms/gisStationState.js import { atom } from "recoil"; export const gisSystemStaticState = atom({ diff --git a/store/mapLayersState.js b/store/atoms/mapLayersState.js similarity index 100% rename from store/mapLayersState.js rename to store/atoms/mapLayersState.js diff --git a/store/poiTypState.js b/store/atoms/poiTypState.js similarity index 100% rename from store/poiTypState.js rename to store/atoms/poiTypState.js diff --git a/store/selectedAreaState.js b/store/atoms/selectedAreaState.js similarity index 100% rename from store/selectedAreaState.js rename to store/atoms/selectedAreaState.js diff --git a/store/zoomTriggerState.js b/store/atoms/zoomTriggerState.js similarity index 100% rename from store/zoomTriggerState.js rename to store/atoms/zoomTriggerState.js diff --git a/store/loadDataStore.js b/store/selectors/loadDataStore.js similarity index 100% rename from store/loadDataStore.js rename to store/selectors/loadDataStore.js