109 lines
3.1 KiB
JavaScript
109 lines
3.1 KiB
JavaScript
// pages/index.js
|
|
import { useEffect, useState } from "react";
|
|
import dynamic from "next/dynamic";
|
|
const MapComponentWithNoSSR = dynamic(
|
|
() => import("../components/MapComponent"),
|
|
{ ssr: false }
|
|
);
|
|
|
|
export default function Home() {
|
|
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(() => {
|
|
// 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 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) => {
|
|
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 (
|
|
<div>
|
|
{/* Ihr Formular */}
|
|
<MapComponentWithNoSSR
|
|
locations={locations}
|
|
onAddLocation={handleAddLocation}
|
|
onLocationUpdate={handleLocationUpdate}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|