From b6acf719ff86cf0acc8f16a0ebd9b6453c580be4 Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 26 May 2025 15:38:52 +0200 Subject: [PATCH] refactor(polylines): fetch-Aufruf in setupPolylines durch Redux-Thunk ersetzt MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - updatePolylineCoordinatesThunk verwendet - Service-Architektur mit Redux Toolkit umgesetzt - fetch entfernt, Version auf 1.1.181 erhöht --- CHANGELOG.md | 31 +++++++++++++ config/appVersion.js | 2 +- .../updatePolylineCoordinatesSlice.js | 34 ++++++++++++++ .../updatePolylineCoordinatesThunk.js | 8 ++++ .../updatePolylineCoordinatesService.js | 16 +++++++ utils/devices/createAndSetDevices.js | 5 +-- utils/polylines/setupPolylines.js | 45 +++++-------------- 7 files changed, 101 insertions(+), 40 deletions(-) create mode 100644 redux/slices/database/polylines/updatePolylineCoordinatesSlice.js create mode 100644 redux/thunks/database/polylines/updatePolylineCoordinatesThunk.js create mode 100644 services/database/polylines/updatePolylineCoordinatesService.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 193bdaa93..fe4cc6e39 100644 --- 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: diff --git a/config/appVersion.js b/config/appVersion.js index 6e1c2097a..57d3674a7 100644 --- 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"; diff --git a/redux/slices/database/polylines/updatePolylineCoordinatesSlice.js b/redux/slices/database/polylines/updatePolylineCoordinatesSlice.js new file mode 100644 index 000000000..b0c71a2f1 --- /dev/null +++ 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; diff --git a/redux/thunks/database/polylines/updatePolylineCoordinatesThunk.js b/redux/thunks/database/polylines/updatePolylineCoordinatesThunk.js new file mode 100644 index 000000000..8ea1e8618 --- /dev/null +++ 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); +}); diff --git a/services/database/polylines/updatePolylineCoordinatesService.js b/services/database/polylines/updatePolylineCoordinatesService.js new file mode 100644 index 000000000..18d39b1f7 --- /dev/null +++ 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(); +}; diff --git a/utils/devices/createAndSetDevices.js b/utils/devices/createAndSetDevices.js index 0f257afb7..b20f7b98c 100644 --- 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"; diff --git a/utils/polylines/setupPolylines.js b/utils/polylines/setupPolylines.js index 25f07a335..bfe197cc0 100644 --- 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 }); } });