first commit

pages/KartenSeite.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import KartenKomponente from '../components/KartenKomponente'; // Passen Sie den Importpfad nach Bedarf an
+
+const KartenSeite = () => {
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="text-xl font-bold mb-4">Kartenansicht</h1>
+      <KartenKomponente />
+    </div>
+  );
+};
+
+export default KartenSeite;

pages/_app.js

@@ -0,0 +1,6 @@
+import "../styles/global.css"; // Pfad zur globalen CSS-Datei anpassen
+import React from "react";
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}

pages/api/addLocation.js

@@ -0,0 +1,37 @@
+// pages/api/addLocation.js
+import mysql from "mysql";
+
+const dbConfig = {
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASSWORD,
+  database: process.env.DB_NAME,
+  port: process.env.DB_PORT,
+};
+
+export default function handler(req, res) {
+  if (req.method === "POST") {
+    const { name, type, latitude, longitude } = req.body;
+    const connection = mysql.createConnection(dbConfig);
+
+    // Nutze ST_GeomFromText, um den Punkt zu erzeugen
+    const query =
+      "INSERT INTO poi (description, idPoiTyp, position) VALUES (?, ?, ST_GeomFromText(?))";
+    const point = `POINT(${longitude} ${latitude})`; // Achte auf die Reihenfolge: Längengrad (Longitude), Breitengrad (Latitude)
+    const values = [name, type, point];
+
+    connection.query(query, values, (error, results) => {
+      connection.end();
+
+      if (error) {
+        console.error("Fehler beim Einfügen des Standorts:", error);
+        return res.status(500).json({ error: "Ein Fehler ist aufgetreten" });
+      }
+
+      res.status(200).json({ id: results.insertId, message: "Standort erfolgreich hinzugefügt" });
+    });
+  } else {
+    res.setHeader("Allow", ["POST"]);
+    res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}

pages/api/locations.js

@@ -0,0 +1,44 @@
+// pages/api/locations.js
+import mysql from "mysql";
+
+
+const dbConfig = {
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASSWORD,
+  database: process.env.DB_NAME,
+  port: process.env.DB_PORT,
+};
+console.log("my dbconfig: ", dbConfig);
+export default function handler(req, res) {
+  
+  const connection = mysql.createConnection(dbConfig);
+
+  connection.connect((err) => {
+    if (err) {
+      console.error("Fehler beim Verbinden:", err.stack);
+      res.status(500).json({ error: "Verbindungsfehler zur Datenbank" });
+      return;
+    }
+
+    console.log("Verbunden als ID", connection.threadId);
+
+    connection.query(
+      "SELECT idPoi, description, idPoiTyp, ST_AsText(position) AS position FROM poi",
+      (error, results) => {
+        if (error) {
+          console.error("Fehler beim Abrufen der API",error);
+          res.status(500).json({ error: "Fehler bei der Abfrage" });
+          return;
+        }
+
+        // Wichtig: Senden Sie die Antwort zurück
+       res.status(200).json(results );
+       console.log( "--------------- location.js  ---------------","results in location.js : ",results, "---------------------- location.js end ---------------------------");
+        connection.end();
+      }
+    );
+  });
+
+  
+}

pages/api/updateLocation.js

@@ -0,0 +1,39 @@
+// pages/api/updateLocation.js
+import mysql from "mysql";
+import util from "util";
+
+const dbConfig = {
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASSWORD,
+  database: process.env.DB_NAME,
+  port: process.env.DB_PORT,
+  charset: "utf8mb4",
+};
+
+export default async function handler(req, res) {
+  if (req.method !== "POST") {
+    res.setHeader("Allow", ["POST"]);
+    return res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+
+  const { id, latitude, longitude } = req.body;
+
+  const connection = mysql.createConnection(dbConfig);
+  // Promisify the query method
+  const query = util.promisify(connection.query).bind(connection);
+
+  try {
+    await query("UPDATE poi SET position = POINT(?, ?) WHERE idPoi = ?", [
+      longitude,
+      latitude,
+      id,
+    ]);
+    res.status(200).json({ success: true });
+  } catch (error) {
+    console.error(error);
+    res.status(500).json({ error: "Ein Fehler ist aufgetreten" });
+  } finally {
+    connection.end();
+  }
+}

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>
+  );
+}