first commit

pages/index.js

@@ -0,0 +1,111 @@
+// 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/locations");
+    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>
+  );
+}