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

Das property poiTypeId in handleSubmit in der Console

Browse Source
This commit is contained in:
ISA
2024-05-02 19:48:26 +02:00
parent c9c9e5feb3
commit 31803907b9
3 changed files with 31 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
components/ShowAddStationPopup.js
View File

@@ -1,48 +1,40 @@
// components/ShowAddStationPopup.js:
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
const ShowAddStationPopup = ({ map, latlng }) => {
const [poiTypData2, setpoiTypData2] = useState(); // Recoil State verwenden
const [poiTypData2, setPoiTypData2] = useState(); // Recoil State verwenden
const [name, setName] = useState("");
const [poiTypeId, setPoiTypeId] = useState("");
const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string
const [latitude] = useState(latlng.lat.toFixed(5));
const [longitude] = useState(latlng.lng.toFixed(5));
// Effekt zum Ausgeben von poiTypData2 in der Konsole
useEffect(() => {
console.log("poiTypData2 in ShowAddStationPopup.js :", poiTypData2);
}, [poiTypData2]);
//------------------------------------------
// Funktion zum Abrufen der poiTyp Daten
useEffect(() => {
const fetchpoiTypData2 = async () => {
const fetchPoiTypData2 = async () => {
try {
const response = await fetch("/api/poiTyp");
const data = await response.json();
setpoiTypData2(data); // Daten im Recoil State speichern
setPoiTypData2(data);
if (data && data.length > 0) {
setPoiTypeId(data[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType
console.log("Initial poiTypeId set in ShowAddStationPopup.js :", data[0].idPoiTyp);
}
} catch (error) {
console.error("Fehler beim Abrufen der poiTyp Daten:", error);
}
};
fetchpoiTypData2();
fetchPoiTypData2();
}, []);
// Effekt zum Loggen der poiTypData2, wenn sie sich ändern
useEffect(() => {
console.log("poiTypData2 aktualisiert:", poiTypData2);
}, [poiTypData2]);
//----------------------------------------------------
const handleSubmit = (event) => {
event.preventDefault();
console.log({ name, poiTypeId, latitude, longitude });
map.closePopup();
console.log("Daten von ShowAddStationPopup: ", {
name, // Name der Station
poiTypeId, // Typ der Station, logged as idPoiTyp
latitude, // Breitengrad
longitude, // Längengrad
});
//map.closePopup();
};
return (
@@ -58,7 +50,7 @@ const ShowAddStationPopup = ({ map, latlng }) => {
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Name der Station"
className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" // Use w-full for full width
className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
/>
</div>
<div className="flex items-center mb-4">
@@ -70,17 +62,15 @@ const ShowAddStationPopup = ({ map, latlng }) => {
name="idPoiTyp2"
value={poiTypeId}
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"
>
{Array.isArray(poiTypData2) &&
poiTypData2.map((poiTyp, index) => (
<option key={poiTyp.id || index} value={poiTyp.id}>
{poiTypData2 && poiTypData2.map((poiTyp, index) => (
<option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
{poiTyp.name}
</option>
))}
</select>
</div>
<div className="flex items-center mb-4">
<label htmlFor="lat" className="block mr-2 flex-none">
Breitengrad:
@@ -91,7 +81,7 @@ const ShowAddStationPopup = ({ map, latlng }) => {
name="lat"
value={latitude}
readOnly
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"
/>
</div>
<div className="flex items-center mb-4">
@@ -104,7 +94,7 @@ const ShowAddStationPopup = ({ map, latlng }) => {
name="lng"
value={longitude}
readOnly
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"
/>
</div>
<button