feat: add API endpoint for updating line geometries, but need fix bugs

components/MapComponent.js

@@ -2171,14 +2171,40 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
       // Draw polyline
       const polyline = L.polyline(lineData.coordinates, { color }).addTo(map);
-
+      //---------------------------
       // Function to update the polyline when markers are dragged
-      markers.forEach((marker) => {
-        marker.on("drag", () => {
-          const newCoords = markers.map((marker) => marker.getLatLng());
-          polyline.setLatLngs(newCoords);
+      markers.forEach((marker, index) => {
+        marker.on("dragend", () => {
+          const newCoords = marker.getLatLng();
+          lineData.coordinates[index] = [newCoords.lat, newCoords.lng];
+          polyline.setLatLngs(lineData.coordinates);
+
+          // Senden der aktualisierten Koordinaten an den Server
+          fetch("/api/talas_v5_DB/gisLines/updateGisLines", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              idModul: lineData.idModul,
+              newCoordinates: lineData.coordinates,
+            }),
+          })
+            .then((response) => {
+              if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+              }
+              return response.json();
+            })
+            .then((data) => {
+              console.log("Update erfolgreich:", data);
+            })
+            .catch((error) => {
+              console.error("Error updating data:", error.message);
+            });
         });
       });
+      //---------------------------
 
       // Fit map to show all markers and polylines
       const group = new L.featureGroup([...markers, polyline]);

pages/api/talas_v5_DB/gisLines/updateGisLines.js

@@ -0,0 +1,39 @@
+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,
+};
+
+const connection = mysql.createConnection(dbConfig);
+connection.connect((err) => {
+  if (err) {
+    console.error("Fehler beim Verbinden:", err.stack);
+    return;
+  }
+  console.log("Database connected successfully.");
+});
+
+export default function handler(req, res) {
+  if (req.method !== "POST") {
+    return res.status(405).json({ error: "Nur POST Methode erlaubt" });
+  }
+
+  const { idModul, newCoordinates } = req.body;
+  const newLineString = `LINESTRING(${newCoordinates.map((coord) => `${coord[1]} ${coord[0]}`).join(",")})`;
+
+  const query =
+    "UPDATE talas_v5.gis_lines SET points = ST_GeomFromText(?) WHERE idModul = ?;";
+  connection.query(query, [newLineString, idModul], (error, results) => {
+    if (error) {
+      console.error("Fehler beim Aktualisieren der gis_lines:", error);
+      return res
+        .status(500)
+        .json({ error: "Fehler beim Aktualisieren der gis_lines" });
+    }
+    res.status(200).json({ success: "Updated successfully." });
+  });
+}