130 lines
4.0 KiB
JavaScript
130 lines
4.0 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import ReactDOM from "react-dom";
|
|
|
|
const ShowAddStationPopup = ({ map, latlng }) => {
|
|
const [poiTypData2, setPoiTypData2] = useState(); // Recoil State verwenden
|
|
const [name, setName] = useState("");
|
|
const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string
|
|
const [latitude] = useState(latlng.lat.toFixed(5));
|
|
const [longitude] = useState(latlng.lng.toFixed(5));
|
|
|
|
useEffect(() => {
|
|
const fetchPoiTypData2 = async () => {
|
|
try {
|
|
const response = await fetch("/api/readPoiTyp");
|
|
const data = await response.json();
|
|
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();
|
|
}, []);
|
|
|
|
const handleSubmit = (event) => {
|
|
event.preventDefault();
|
|
const formData = {
|
|
name, // Name der Station
|
|
poiTypeId, // Typ der Station, logged as idPoiTyp
|
|
latitude, // Breitengrad
|
|
longitude, // Längengrad
|
|
};
|
|
|
|
fetch("/api/addLocation", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(formData),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => console.log(data)) // Handle the response data
|
|
.catch((error) => console.error(error)); // Handle any errors
|
|
|
|
// Check if map is not undefined and call closePopup
|
|
if (map && typeof map.closePopup === "function") {
|
|
map.closePopup();
|
|
} else {
|
|
console.error("Map object is undefined or closePopup is not a function");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="m-0 p-2 w-full ">
|
|
<div className="flex items-center mb-4">
|
|
<label htmlFor="name" className="block mr-2 flex-none">
|
|
Name:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
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"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center mb-4">
|
|
<label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
|
|
Typ:
|
|
</label>
|
|
<select
|
|
id="idPoiTyp2"
|
|
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"
|
|
>
|
|
{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:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="lat"
|
|
name="lat"
|
|
value={latitude}
|
|
readOnly
|
|
className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center mb-4">
|
|
<label htmlFor="lng" className="block mr-2 flex-none">
|
|
Längengrad:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="lng"
|
|
name="lng"
|
|
value={longitude}
|
|
readOnly
|
|
className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
|
|
>
|
|
Station hinzufügen
|
|
</button>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default ShowAddStationPopup;
|