Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DropDownmenü Element von API aufrufen in Kontextmenü ->Popup-> Station hinzufügen

Browse Source
This commit is contained in:
ISA
2024-05-02 14:26:36 +02:00
parent 7465069e44
commit c9c9e5feb3
5 changed files with 88 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/MapComponent.js
View File

@@ -21,7 +21,7 @@ import ShowAddStationPopup from "./ShowAddStationPopup";
//import { createRoot } from "react-dom/client"; //import { createRoot } from "react-dom/client";
const MapComponent = ({ locations, onLocationUpdate }) => { 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 poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
const [map, setMap] = useState(null); // Zustand der Karteninstanz 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 // Create a root container for the React component inside the popup
const root = ReactDOM.createRoot(container); const root = ReactDOM.createRoot(container);
root.render( root.render(<ShowAddStationPopup map={map} latlng={e.latlng} />);
<RecoilRoot>
<ShowAddStationPopup map={map} latlng={e.latlng} />
</RecoilRoot>
);
// Create and configure the popup // Create and configure the popup
L.popup().setLatLng(e.latlng).setContent(container).openOn(initMap); L.popup().setLatLng(e.latlng).setContent(container).openOn(initMap);

53
components/ShowAddStationPopup.js
View File

@@ -1,20 +1,43 @@
// components/ShowAddStationPopup.js: // components/ShowAddStationPopup.js:
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { useRecoilState } from "recoil";
import { poiTypState } from "../store/poiTypState";
const ShowAddStationPopup = ({ map, latlng }) => { const ShowAddStationPopup = ({ map, latlng }) => {
const [poiTypData, setPoiTypData] = useRecoilState(poiTypState); const [poiTypData2, setpoiTypData2] = useState(); // Recoil State verwenden
const [name, setName] = useState(""); const [name, setName] = useState("");
const [poiTypeId, setPoiTypeId] = useState(""); const [poiTypeId, setPoiTypeId] = useState("");
const [latitude] = useState(latlng.lat.toFixed(5)); const [latitude] = useState(latlng.lat.toFixed(5));
const [longitude] = useState(latlng.lng.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(() => { useEffect(() => {
console.log("poiTypData in ShowAddStationPopup.js :", poiTypData); console.log("poiTypData2 in ShowAddStationPopup.js :", poiTypData2);
}, [poiTypData]); }, [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) => { const handleSubmit = (event) => {
event.preventDefault(); event.preventDefault();
@@ -39,23 +62,25 @@ const ShowAddStationPopup = ({ map, latlng }) => {
/> />
</div> </div>
<div className="flex items-center mb-4"> <div className="flex items-center mb-4">
<label htmlFor="idPoiTyp" className="block mr-2 flex-none"> <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
Typ: Typ:
</label> </label>
<select <select
id="idPoiTyp" id="idPoiTyp2"
name="idPoiTyp" name="idPoiTyp2"
value={poiTypeId} value={poiTypeId}
onChange={(e) => setPoiTypeId(e.target.value)} onChange={(e) => setPoiTypeId(e.target.value)}
className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" // Adjusted width className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" // Adjusted width
> >
{poiTypData.map((poiTyp) => ( {Array.isArray(poiTypData2) &&
<option key={poiTyp.id} value={poiTyp.id}> poiTypData2.map((poiTyp, index) => (
{poiTyp.name} <option key={poiTyp.id || index} value={poiTyp.id}>
</option> {poiTyp.name}
))} </option>
))}
</select> </select>
</div> </div>
<div className="flex items-center mb-4"> <div className="flex items-center mb-4">
<label htmlFor="lat" className="block mr-2 flex-none"> <label htmlFor="lat" className="block mr-2 flex-none">
Breitengrad: Breitengrad:

88
package-lock.json generated
View File

@@ -10,7 +10,7 @@
"leaflet-contextmenu": "^1.4.0", "leaflet-contextmenu": "^1.4.0",
"leaflet.smooth_marker_bouncing": "^3.0.3", "leaflet.smooth_marker_bouncing": "^3.0.3",
"mysql": "^2.18.1", "mysql": "^2.18.1",
"next": "^14.2.0", "next": "^14.2.3",
"overlapping-marker-spiderfier-leaflet": "^0.2.7", "overlapping-marker-spiderfier-leaflet": "^0.2.7",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
@@ -106,14 +106,14 @@
} }
}, },
"node_modules/@next/env": { "node_modules/@next/env": {
"version": "14.2.0", "version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.0.tgz", "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz",
"integrity": "sha512-4+70ELtSbRtYUuyRpAJmKC8NHBW2x1HMje9KO2Xd7IkoyucmV9SjgO+qeWMC0JWkRQXgydv1O7yKOK8nu/rITQ==" "integrity": "sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA=="
}, },
"node_modules/@next/swc-darwin-arm64": { "node_modules/@next/swc-darwin-arm64": {
"version": "14.2.0", "version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.0.tgz", "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
"integrity": "sha512-kHktLlw0AceuDnkVljJ/4lTJagLzDiO3klR1Fzl2APDFZ8r+aTxNaNcPmpp0xLMkgRwwk6sggYeqq0Rz9K4zzA==", "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@@ -126,9 +126,9 @@
} }
}, },
"node_modules/@next/swc-darwin-x64": { "node_modules/@next/swc-darwin-x64": {
"version": "14.2.0", "version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.0.tgz", "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
"integrity": "sha512-HFSDu7lb1U3RDxXNeKH3NGRR5KyTPBSUTuIOr9jXoAso7i76gNYvnTjbuzGVWt2X5izpH908gmOYWtI7un+JrA==", "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@@ -141,9 +141,9 @@
} }
}, },
"node_modules/@next/swc-linux-arm64-gnu": { "node_modules/@next/swc-linux-arm64-gnu": {
"version": "14.2.0", "version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.0.tgz", "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
"integrity": "sha512-iQsoWziO5ZMxDWZ4ZTCAc7hbJ1C9UDj/gATSqTaMjW2bJFwAsvf9UM79AKnljBl73uPZ+V0kH4rvnHTco4Ps2w==", "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@@ -156,9 +156,9 @@
} }
}, },
"node_modules/@next/swc-linux-arm64-musl": { "node_modules/@next/swc-linux-arm64-musl": {
"version": "14.2.0", "version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.0.tgz", "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
"integrity": "sha512-0JOk2uzLUt8fJK5LpsKKZa74zAch7bJjjgJzR9aOMs231AlE4gPYzsSm430ckZitjPGKeH5bgDZjqwqJQKIS2w==", "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@@ -171,9 +171,9 @@
} }
}, },
"node_modules/@next/swc-linux-x64-gnu": { "node_modules/@next/swc-linux-x64-gnu": {
"version": "14.2.0", "version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.0.tgz", "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
"integrity": "sha512-uYHkuTzX0NM6biKNp7hdKTf+BF0iMV254SxO0B8PgrQkxUBKGmk5ysHKB+FYBfdf9xei/t8OIKlXJs9ckD943A==", "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@@ -186,9 +186,9 @@
} }
}, },
"node_modules/@next/swc-linux-x64-musl": { "node_modules/@next/swc-linux-x64-musl": {
"version": "14.2.0", "version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.0.tgz", "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
"integrity": "sha512-paN89nLs2dTBDtfXWty1/NVPit+q6ldwdktixYSVwiiAz647QDCd+EIYqoiS+/rPG3oXs/A7rWcJK9HVqfnMVg==", "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@@ -201,9 +201,9 @@
} }
}, },
"node_modules/@next/swc-win32-arm64-msvc": { "node_modules/@next/swc-win32-arm64-msvc": {
"version": "14.2.0", "version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.0.tgz", "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
"integrity": "sha512-j1oiidZisnymYjawFqEfeGNcE22ZQ7lGUaa4pGOCVWrWeIDkPSj8zYgS9TzMNlg17Q3wSWCQC/F5uJAhSh7qcA==", "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@@ -216,9 +216,9 @@
} }
}, },
"node_modules/@next/swc-win32-ia32-msvc": { "node_modules/@next/swc-win32-ia32-msvc": {
"version": "14.2.0", "version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.0.tgz", "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
"integrity": "sha512-6ff6F4xb+QGD1jhx/dOT9Ot7PQ/GAYekV9ykwEh2EFS/cLTyU4Y3cXkX5cNtNIhpctS5NvyjW9gIksRNErYE0A==", "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
"cpu": [ "cpu": [
"ia32" "ia32"
], ],
@@ -231,9 +231,9 @@
} }
}, },
"node_modules/@next/swc-win32-x64-msvc": { "node_modules/@next/swc-win32-x64-msvc": {
"version": "14.2.0", "version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.0.tgz", "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
"integrity": "sha512-09DbG5vXAxz0eTFSf1uebWD36GF3D5toynRkgo2AlSrxwGZkWtJ1RhmrczRYQ17eD5bdo4FZ0ibiffdq5kc4vg==", "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@@ -1213,11 +1213,11 @@
} }
}, },
"node_modules/next": { "node_modules/next": {
"version": "14.2.0", "version": "14.2.3",
"resolved": "https://registry.npmjs.org/next/-/next-14.2.0.tgz", "resolved": "https://registry.npmjs.org/next/-/next-14.2.3.tgz",
"integrity": "sha512-2T41HqJdKPqheR27ll7MFZ3gtTYvGew7cUc0PwPSyK9Ao5vvwpf9bYfP4V5YBGLckHF2kEGvrLte5BqLSv0s8g==", "integrity": "sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==",
"dependencies": { "dependencies": {
"@next/env": "14.2.0", "@next/env": "14.2.3",
"@swc/helpers": "0.5.5", "@swc/helpers": "0.5.5",
"busboy": "1.6.0", "busboy": "1.6.0",
"caniuse-lite": "^1.0.30001579", "caniuse-lite": "^1.0.30001579",
@@ -1232,15 +1232,15 @@
"node": ">=18.17.0" "node": ">=18.17.0"
}, },
"optionalDependencies": { "optionalDependencies": {
"@next/swc-darwin-arm64": "14.2.0", "@next/swc-darwin-arm64": "14.2.3",
"@next/swc-darwin-x64": "14.2.0", "@next/swc-darwin-x64": "14.2.3",
"@next/swc-linux-arm64-gnu": "14.2.0", "@next/swc-linux-arm64-gnu": "14.2.3",
"@next/swc-linux-arm64-musl": "14.2.0", "@next/swc-linux-arm64-musl": "14.2.3",
"@next/swc-linux-x64-gnu": "14.2.0", "@next/swc-linux-x64-gnu": "14.2.3",
"@next/swc-linux-x64-musl": "14.2.0", "@next/swc-linux-x64-musl": "14.2.3",
"@next/swc-win32-arm64-msvc": "14.2.0", "@next/swc-win32-arm64-msvc": "14.2.3",
"@next/swc-win32-ia32-msvc": "14.2.0", "@next/swc-win32-ia32-msvc": "14.2.3",
"@next/swc-win32-x64-msvc": "14.2.0" "@next/swc-win32-x64-msvc": "14.2.3"
}, },
"peerDependencies": { "peerDependencies": {
"@opentelemetry/api": "^1.1.0", "@opentelemetry/api": "^1.1.0",

2
package.json
View File

@@ -5,7 +5,7 @@
"leaflet-contextmenu": "^1.4.0", "leaflet-contextmenu": "^1.4.0",
"leaflet.smooth_marker_bouncing": "^3.0.3", "leaflet.smooth_marker_bouncing": "^3.0.3",
"mysql": "^2.18.1", "mysql": "^2.18.1",
"next": "^14.2.0", "next": "^14.2.3",
"overlapping-marker-spiderfier-leaflet": "^0.2.7", "overlapping-marker-spiderfier-leaflet": "^0.2.7",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",

4
store/poiTypState.js
View File

@@ -1,7 +1,7 @@
// store/poiTypState.js // store/poiTypState.js
import { atom } from 'recoil'; import { atom } from "recoil";
export const poiTypState = atom({ export const poiTypState = atom({
key: 'poiTypState', // eindeutiger Schlüssel key: "poiTypState", // eindeutiger Schlüssel
default: [], // Initialer Standardwert, leeres Array default: [], // Initialer Standardwert, leeres Array
}); });