64 lines
2.2 KiB
JavaScript
64 lines
2.2 KiB
JavaScript
// /components/AddPOIOnPolyline.js
|
|
import React, { useState, useEffect } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { closeAddPoiOnPolylineModal } from "../redux/slices/addPoiOnPolylineSlice";
|
|
|
|
const AddPOIOnPolyline = () => {
|
|
const dispatch = useDispatch();
|
|
const { isOpen, latlng } = useSelector((state) => state.addPoiOnPolyline);
|
|
|
|
const [name, setName] = useState("");
|
|
const [latitude, setLatitude] = useState("");
|
|
const [longitude, setLongitude] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (latlng) {
|
|
setLatitude(latlng.lat.toFixed(5));
|
|
setLongitude(latlng.lng.toFixed(5));
|
|
}
|
|
}, [latlng]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const handleSubmit = async (event) => {
|
|
alert("POI auf Polyline hinzufügen");
|
|
event.preventDefault();
|
|
|
|
const formData = { name, latitude, longitude };
|
|
console.log("Neuer POI auf Polyline:", formData);
|
|
|
|
dispatch(closeAddPoiOnPolylineModal()); // Schließt das Modal nach dem Speichern
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50" onClick={() => dispatch(closeAddPoiOnPolylineModal())}>
|
|
<div className="bg-white p-6 rounded-lg shadow-lg w-96 max-w-full" onClick={(e) => e.stopPropagation()}>
|
|
<h2 className="text-lg font-bold mb-4">POI auf Polyline hinzufügen</h2>
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="mb-4">
|
|
<label className="block">Name:</label>
|
|
<input type="text" value={name} onChange={(e) => setName(e.target.value)} className="border p-2 w-full" required />
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<label className="block">Latitude:</label>
|
|
<input type="text" value={latitude} readOnly className="border p-2 w-full" />
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<label className="block">Longitude:</label>
|
|
<input type="text" value={longitude} readOnly className="border p-2 w-full" />
|
|
</div>
|
|
|
|
<button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white p-2 rounded w-full">
|
|
Speichern
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AddPOIOnPolyline;
|