refactor(polylines): fetch-Aufruf in setupPolylines durch Redux-Thunk ersetzt

- updatePolylineCoordinatesThunk verwendet - Service-Architektur mit Redux Toolkit umgesetzt - fetch entfernt, Version auf 1.1.181 erhöht
2025-05-26 15:38:52 +02:00
parent 5dea7f3e5d
commit b6acf719ff
7 changed files with 101 additions and 40 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,37 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie

 ---

+[1.1.181] – 2025-05-26
+♻️ Refactor
+setupPolylines.js von direktem fetch() auf sauberes Redux-Muster umgestellt:
+
+Statt fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates") wird jetzt updatePolylineCoordinatesThunk() verwendet
+
+Die Request-Daten werden an ein zentrales Service-Modul (updatePolylineCoordinatesService.js) übergeben
+
+Async-Handling erfolgt über .unwrap().then().catch() zur besseren Fehlerkontrolle
+
+🧠 Architektur
+Einheitliches Redux-Schema umgesetzt:
+
+Service: updatePolylineCoordinatesService.js
+
+Thunk: updatePolylineCoordinatesThunk.js
+
+(Optional) Status-Tracking über Slice: updatePolylineCoordinatesSlice.js
+
+Redux Toolkit-konforme store.dispatch(...)-Verwendung in Utility-Datei (außerhalb von React-Kontext)
+
+✅ Clean
+Alle direkten fetch-Aufrufe aus setupPolylines.js entfernt
+
+Kein hartcodiertes URL-Handling mehr – alles läuft über zentrale Redux-Logik
+
+🔧 Version
+📦 Version erhöht auf 1.1.181
+
+---
+
 [1.1.180] – 2025-05-26
 ♻️ Refactor
 poiTypesSlice.js wurde bereinigt:
--- a/config/appVersion.js
+++ b/config/appVersion.js
@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.181";
+export const APP_VERSION = "1.1.182";
--- a/redux/slices/database/polylines/updatePolylineCoordinatesSlice.js
+++ b/redux/slices/database/polylines/updatePolylineCoordinatesSlice.js
@@ -0,0 +1,34 @@
+// /redux/slices/database/polylines/updatePolylineCoordinatesSlice.js
+// Du brauchst diesen Slice nur, wenn du Ladezustand oder Fehler anzeigen möchtest (z. B. Ladeindikator).
+import { createSlice } from "@reduxjs/toolkit";
+import { updatePolylineCoordinatesThunk } from "../../../thunks/database/polylines/updatePolylineCoordinatesThunk";
+
+const slice = createSlice({
+  name: "updatePolylineCoordinates",
+  initialState: {
+    status: "idle",
+    error: null,
+  },
+  reducers: {
+    resetUpdateStatus: (state) => {
+      state.status = "idle";
+      state.error = null;
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(updatePolylineCoordinatesThunk.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(updatePolylineCoordinatesThunk.fulfilled, (state) => {
+        state.status = "succeeded";
+      })
+      .addCase(updatePolylineCoordinatesThunk.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.error.message;
+      });
+  },
+});
+
+export const { resetUpdateStatus } = slice.actions;
+export default slice.reducer;
--- a/redux/thunks/database/polylines/updatePolylineCoordinatesThunk.js
+++ b/redux/thunks/database/polylines/updatePolylineCoordinatesThunk.js
@@ -0,0 +1,8 @@
+// /redux/thunks/database/polylines/updatePolylineCoordinatesThunk.js
+
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { updatePolylineCoordinatesService } from "../../../../services/database/polylines/updatePolylineCoordinatesService";
+
+export const updatePolylineCoordinatesThunk = createAsyncThunk("polylines/updateCoordinates", async (requestData) => {
+  return await updatePolylineCoordinatesService(requestData);
+});
--- a/services/database/polylines/updatePolylineCoordinatesService.js
+++ b/services/database/polylines/updatePolylineCoordinatesService.js
@@ -0,0 +1,16 @@
+// /services/database/polylines/updatePolylineCoordinatesService.js
+
+export const updatePolylineCoordinatesService = async (data) => {
+  const response = await fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || "Fehler beim Aktualisieren der Polyline-Koordinaten");
+  }
+
+  return await response.json();
+};
--- a/utils/devices/createAndSetDevices.js
+++ b/utils/devices/createAndSetDevices.js
@@ -1,12 +1,9 @@
 // /utils/devices/createAndSetDevices.js
 import L from "leaflet";
 import "leaflet.smooth_marker_bouncing";
-import { toast } from "react-toastify";
-import { disablePolylineEvents, enablePolylineEvents } from "../polylines/setupPolylines.js";
 import { store } from "../../redux/store.js";
 import { updateLineStatus } from "../../redux/slices/lineVisibilitySlice.js";
-import { setSelectedDevice, clearSelectedDevice } from "../../redux/slices/selectedDeviceSlice.js";
-import { addContextMenuToMarker } from "../contextMenuUtils.js";
+import { setSelectedDevice } from "../../redux/slices/selectedDeviceSlice.js";
 import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice.js";
 import { selectGisStationsStatusDistrict } from "../../redux/slices/webservice/gisStationsStatusDistrictSlice.js";

--- a/utils/polylines/setupPolylines.js
+++ b/utils/polylines/setupPolylines.js
@@ -1,4 +1,4 @@
-// utils/polylines/setupPolylines.js
+// /utils/polylines/setupPolylines.js
 import { findClosestPoints } from "../geometryUtils";
 import { insertNewPOI, removePOI } from "../poiUtils";
 import circleIcon from "../../components/gisPolylines/icons/CircleIcon";
@@ -10,6 +10,7 @@ import { store } from "../../redux/store"; // Importiere den Store
 import { openPolylineContextMenu, closePolylineContextMenu } from "../../redux/slices/database/polylines/polylineContextMenuSlice";
 import { monitorContextMenu } from "./monitorContextMenu";
 import { forceCloseContextMenu } from "../../redux/slices/database/polylines/polylineContextMenuSlice";
+import { updatePolylineCoordinatesThunk } from "../../redux/thunks/database/polylines/updatePolylineCoordinatesThunk";

 //--------------------------------------------
 export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible) => {
@@ -59,10 +60,10 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
        }).addTo(map);

        marker.on("dragend", () => {
-          console.log("Marker wurde verschoben in setupPolylines.js");
          if (editMode) {
            const newCoords = marker.getLatLng();
            setNewCoords(newCoords);
+
            const newCoordinates = [...lineData.coordinates];
            newCoordinates[index] = [newCoords.lat, newCoords.lng];

@@ -70,19 +71,13 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
              color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
            }).addTo(map);

-            updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt setup 1", {
+            updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Tooltip", {
              permanent: false,
              direction: "auto",
            });

-            updatedPolyline.on("mouseover", () => {
-              updatedPolyline.setStyle({ weight: 20 });
-              updatedPolyline.bringToFront();
-            });
-
-            updatedPolyline.on("mouseout", () => {
-              updatedPolyline.setStyle({ weight: 3 });
-            });
+            updatedPolyline.on("mouseover", () => updatedPolyline.setStyle({ weight: 20 }));
+            updatedPolyline.on("mouseout", () => updatedPolyline.setStyle({ weight: 3 }));

            polylines[lineIndex].remove();
            polylines[lineIndex] = updatedPolyline;
@@ -94,21 +89,9 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
              newCoordinates,
            };

-            fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify(requestData),
-            })
-              .then((response) => {
-                if (!response.ok) {
-                  return response.json().then((data) => {
-                    throw new Error(data.error || "Unbekannter Fehler");
-                  });
-                }
-                return response.json();
-              })
+            store
+              .dispatch(updatePolylineCoordinatesThunk(requestData))
+              .unwrap()
              .then((data) => {
                console.log("Koordinaten erfolgreich aktualisiert:", data);
              })
@@ -116,15 +99,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
                console.error("Fehler beim Aktualisieren der Koordinaten:", error.message);
              });
          } else {
-            toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
-              position: "top-center",
-              autoClose: 5000,
-              hideProgressBar: false,
-              closeOnClick: true,
-              pauseOnHover: true,
-              draggable: true,
-              progress: undefined,
-            });
+            toast.error("Bearbeitung nicht erlaubt", { position: "top-center", autoClose: 4000 });
          }
        });