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

_document.js for Next.js JavaScript-Datei einbinden Vorbereitung

Browse Source
This commit is contained in:
ISA
2024-04-15 16:06:17 +02:00
parent 06ca0b1ab1
commit de7b4d17a7
15 changed files with 338 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
components/MapComponent.js
View File

@@ -211,82 +211,130 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
loadData();
};
//-----Kontextmenu----ende------------
const showAddStationPopup = (e, map) => {
const popupContent = `
<form id="addStationForm" class="m-0 p-2 w-full">
<div class="flex items-center mb-4">
<label for="name" class="block mr-2 flex-none">Name:</label>
<input
type="text"
id="name"
name="name"
placeholder="Name der Station"
class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
/>
</div>
<div class="flex items-center mb-4">
<label for="type" class="block mr-3 flex-none">Type:</label>
<input
type="text"
id="type"
name="type"
placeholder="Typ der Station"
class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
/>
</div>
<div class="flex items-center mb-4">
<label for="lat" class="block mr-2 flex-none">Breitengrad:</label>
<input
type="text"
id="lat"
name="lat"
value="${e.latlng.lat.toFixed(5)}"
readonly
class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
/>
</div>
<div class="flex items-center mb-4">
<label for="lng" class="block mr-2 flex-none">Längengrad:</label>
<input
type="text"
id="lng"
name="lng"
value="${e.latlng.lng.toFixed(5)}"
readonly
class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
/>
</div>
<button
type="submit"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
>
Station hinzufügen
</button>
</form>
`;
console.log("intialMap in hinzufügen: ", initialMap);
L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(initialMap);
};
setTimeout(() => {
const form = document.getElementById("addStationForm");
if (form) {
form.addEventListener("submit", async (event) => {
event.preventDefault();
const name = event.target.description.value;
const type = event.target.position.value;
const lat = event.target.lat.value;
const lng = event.target.lng.value;
// Hier wird `onAddLocation` mit den Werten aufgerufen, die aus dem Formular gesammelt wurden
await onAddLocation(name, type, lat, lng);
map.closePopup();
});
// Ensure this function is only called when map is initialized and available
const showAddStationPopup = (e) => {
if (!initialMap) {
console.log("Map is not initialized.");
return;
}
}, 10);
const popupContent = L.DomUtil.create("div");
popupContent.innerHTML = `
<form id="addStationForm" class="m-0 p-2 w-full">
<div class="flex items-center mb-4">
<label for="name" class="block mr-2 flex-none">Name:</label>
<input
type="text"
id="name"
name="name"
placeholder="Name der Station"
class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
/>
</div>
<div class="flex items-center mb-4">
<label for="type" class="block mr-3 flex-none">Type:</label>
<input
type="text"
id="type"
name="type"
placeholder="Typ der Station"
class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
/>
</div>
<div class="flex items-center mb-4">
<label for="lat" class="block mr-2 flex-none">Breitengrad:</label>
<input
type="text"
id="lat"
name="lat"
value="${e.latlng.lat.toFixed(5)}"
readonly
class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
/>
</div>
<div class="flex items-center mb-4">
<label for="lng" class="block mr-2 flex-none">Längengrad:</label>
<input
type="text"
id="lng"
name="lng"
value="${e.latlng.lng.toFixed(5)}"
readonly
class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
/>
</div>
<button
type="submit"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
>
Station hinzufügen
</button>
</form>
`;
L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(initialMap);
// Attach event listener here
L.DomEvent.on(popupContent, "submit", handleSubmit);
};
/*
const handleSubmit = (event) => {
event.preventDefault();
const form = event.target;
const data = {
name: form.name.value,
type: form.type.value,
latitude: form.lat.value,
longitude: form.lng.value,
};
onAddLocation(name, type, lat, lng);
console.log("Name: ", name, "Type: ", type, "Lat: ", lat, "Lng: ", lng);
map.closePopup();
};
*/
// Funktion zum Hinzufügen eines neuen Standorts
async function handleSubmit(event) {
event.preventDefault();
const form = event.target;
const data = {
name: form.name.value,
type: form.type.value,
latitude: form.lat.value,
longitude: form.lng.value,
};
try {
const response = await fetch("/api/addLocation", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
const result = await response.json();
if (response.ok) {
console.log("Standort hinzugefügt:", result);
alert("Standort erfolgreich hinzugefügt!");
form.reset(); // Formular zurücksetzen
// Hier könntest du weitere Aktionen durchführen, wie das Schließen des Popups oder das Aktualisieren der Marker auf der Karte
} else {
throw new Error(
result.error || "Ein unbekannter Fehler ist aufgetreten."
);
}
} catch (error) {
console.error("Fehler beim Hinzufügen des Standorts:", error);
alert(error.message);
}
}
function fly(stationValue) {
var x = 51.41321407879154;