refactor(utils): saveLineData entfernt und durch Redux-Thunk ersetzt

- updatePolylineCoordinatesThunk in markerUtils.js und poiUtils.js eingebunden
- zentrale Hilfsfunktion savePolylineRedux erstellt
- fetch() entfernt, Version auf 1.1.183 erhöht

CHANGELOG.md

@@ -4,6 +4,43 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
 
 ---
 
+📦 [1.1.183] – 2025-05-27
+♻️ Refactor
+Die Hilfsfunktion saveLineData() wurde vollständig entfernt:
+
+In markerUtils.js und poiUtils.js ersetzt durch updatePolylineCoordinatesThunk via Redux
+
+Zentrale Dispatch-Hilfsfunktion savePolylineRedux() erstellt für alle Linienaktionen (Einfügen, Verschieben, Entfernen)
+
+Einheitliche Verwendung des Redux-Dispatch in Utility-Dateien:
+
+Kein direktes fetch() mehr
+
+Fehlerbehandlung über .unwrap().catch(...) integriert
+
+Map-Utilities und POI-Utilities sind nun Redux-kompatibel und testbar
+
+✅ Clean
+saveLineData aus mapUtils.js gelöscht
+
+Alle Marker-Operationen speichern ihre Koordinaten ausschließlich über Redux
+
+🧠 Architektur
+Redux-Toolkit Standardstruktur umgesetzt:
+
+updatePolylineCoordinatesService.js
+
+updatePolylineCoordinatesThunk.js
+
+Nutzung außerhalb React-Komponenten über store.dispatch(...)
+
+Leaflet-Logik (z. B. marker.setLatLng(), map.removeLayer()) bleibt in Utility-Dateien – Redux kümmert sich nur um Daten
+
+🔧 Version
+📦 Version erhöht auf 1.1.183
+
+---
+
 ## [1.1.182] – 2025-05-27
 
 ### ♻️ Refactor

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.183";
+export const APP_VERSION = "1.1.184";

redux/slices/database/locationDevice/locationDevicesSlice.js

@@ -0,0 +1,41 @@
+// /redux/slices/database/locationDevice/locationDevicesSlice.js
+
+import { createSlice } from "@reduxjs/toolkit";
+import { fetchLocationDevicesThunk } from "../../../thunks/database/locationDevice/fetchLocationDevicesThunk";
+
+const locationDevicesSlice = createSlice({
+  name: "locationDevices",
+  initialState: {
+    data: [],
+    status: "idle",
+    error: null,
+  },
+  reducers: {
+    clearLocationDevices: (state) => {
+      state.data = [];
+      state.status = "idle";
+      state.error = null;
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchLocationDevicesThunk.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchLocationDevicesThunk.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.data = action.payload;
+      })
+      .addCase(fetchLocationDevicesThunk.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.error.message;
+      });
+  },
+});
+
+export const { clearLocationDevices } = locationDevicesSlice.actions;
+
+export const selectLocationDevices = (state) => state.locationDevices.data;
+export const selectLocationDeviceStatus = (state) => state.locationDevices.status;
+
+export default locationDevicesSlice.reducer;

redux/thunks/database/locationDevice/fetchLocationDevicesThunk.js

@@ -0,0 +1,8 @@
+// /redux/thunks/database/locationDevice/fetchLocationDevicesThunk.js
+
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { fetchLocationDevicesService } from "../../../services/database/locationDevice/fetchLocationDevicesService";
+
+export const fetchLocationDevicesThunk = createAsyncThunk("locationDevices/fetchAll", async () => {
+  return await fetchLocationDevicesService();
+});

services/database/locationDevice/fetchLocationDevicesService.js

@@ -0,0 +1,12 @@
+// /services/database/locationDevice/fetchLocationDevicesService.js
+
+export const fetchLocationDevicesService = async () => {
+  const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices");
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.message || "Fehler beim Abrufen der Gerätedaten");
+  }
+
+  return await response.json();
+};

utils/handlePoiSelect.js

@@ -1,37 +0,0 @@
-// utils/handlePoiSelect.js
-const handlePoiSelect = async (poiData, setSelectedPoi, setLocationDeviceData, setDeviceName, poiLayerRef, poiTypMap) => {
-  setSelectedPoi(poiData); // Setzt das ausgewählte POI
-
-  try {
-    const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices");
-    const data = await response.json();
-    setLocationDeviceData(data);
-
-    const currentDevice = data.find((device) => device.idLD === poiData.deviceId);
-    if (currentDevice) {
-      setDeviceName(currentDevice.name);
-
-      // Hier speichern wir den POI-Typ im localStorage
-      const poiTypeName = poiTypMap.get(poiData.idPoiTyp);
-      localStorage.setItem("selectedPoiType", poiTypeName);
-
-      // Optional: Update des Markers mit dem POI-Typ
-      const marker = poiLayerRef.current.getLayers().find((m) => m.options.id === poiData.id);
-      if (marker) {
-        marker.setPopupContent(`
-          <div>
-            <b class="text-xl text-black-700">${poiData.description || "Unbekannt"}</b><br>
-            ${currentDevice.name}<br>
-            ${poiTypeName || "Unbekannt"}<br>
-          </div>
-        `);
-        marker.openPopup();
-      }
-    }
-  } catch (error) {
-    console.error("Fehler beim Abrufen der Gerätedaten:", error);
-    setLocationDeviceData([]);
-  }
-};
-
-export default handlePoiSelect;

utils/mapUtils.js

@@ -1,31 +1,6 @@
 // /utils/mapUtils.js
 import L from "leaflet";
 
-export const saveLineData = (lineData) => {
-  fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      idModul: lineData.idModul,
-      idLD: lineData.idLD,
-      newCoordinates: lineData.coordinates,
-    }),
-  })
-    .then((response) => {
-      if (!response.ok) {
-        throw new Error("Fehler beim Speichern der Linienänderungen");
-      }
-      return response.json();
-    })
-    .then((data) => {
-      //console.log("Linienänderungen gespeichert:", data);
-    })
-    .catch((error) => {
-      console.error("Fehler beim Speichern der Linienänderungen:", error);
-    });
-};
 // Call this function on page load to restore zoom and center
 export const restoreMapSettings = (map) => {
   const savedZoom = localStorage.getItem("mapZoom");

utils/markerUtils.js

@@ -1,107 +1,75 @@
 // /utils/markerUtils.js
-import circleIcon from "../components/CircleIcon";
-import { saveLineData } from "./mapUtils";
-import { redrawPolyline } from "./mapUtils";
 import L from "leaflet";
 import { toast } from "react-toastify";
+import circleIcon from "../components/CircleIcon";
+import { store } from "../redux/store";
+import { updatePolylineCoordinatesThunk } from "../redux/thunks/database/polylines/updatePolylineCoordinatesThunk";
+import { redrawPolyline } from "./mapUtils";
+
+const savePolylineRedux = (lineData) => {
+  return store
+    .dispatch(
+      updatePolylineCoordinatesThunk({
+        idModul: lineData.idModul,
+        idLD: lineData.idLD,
+        newCoordinates: lineData.coordinates,
+      })
+    )
+    .unwrap()
+    .catch((error) => {
+      console.error("Fehler beim Speichern der Linienkoordinaten:", error.message);
+    });
+};
 
 export const insertNewMarker = (closestPoints, newPoint, lineData, map) => {
   const newMarker = L.marker(newPoint, {
     icon: circleIcon,
     draggable: true,
   }).addTo(map);
+
   lineData.coordinates.splice(closestPoints[2], 0, [newPoint.lat, newPoint.lng]);
-
+  savePolylineRedux(lineData); // ✅ Nutzung der Hilfsfunktion
-  // Hier direkt speichern nach Einfügen
-  saveLineData(lineData);
-
   redrawPolyline(lineData);
 
-  // Event-Listener für das Verschieben des Markers hinzufügen
   newMarker.on("dragend", () => {
     const newCoords = newMarker.getLatLng();
-    setNewCoords(newCoords);
     const newCoordinates = [...lineData.coordinates];
     newCoordinates[closestPoints[2]] = [newCoords.lat, newCoords.lng];
     lineData.coordinates = newCoordinates;
-    redrawPolyline(lineData);
 
+    redrawPolyline(lineData);
     updateMarkerPosition(newMarker.getLatLng(), lineData, newMarker);
-    saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben
+    savePolylineRedux(lineData); // ✅ Wiederverwendung
   });
 };
 
 export const removeMarker = (marker, lineData, currentZoom, currentCenter) => {
-  // Save zoom and center to localStorage
-  //localStorage.setItem("mapZoom", currentZoom);
-  //localStorage.setItem("mapCenter", JSON.stringify(currentCenter));
-
-  // Find the index of the coordinate that matches the marker's position
   const index = lineData.coordinates.findIndex((coord) => L.latLng(coord[0], coord[1]).equals(marker.getLatLng()));
 
   if (index !== -1) {
-    // Remove the coordinate from the line data
     lineData.coordinates.splice(index, 1);
-
-    // Redraw the polyline with the updated coordinates
     redrawPolyline(lineData);
-
-    // Remove the marker from the map
     marker.remove();
-
+    savePolylineRedux(lineData); // ✅ Wiederverwendung
-    // Save the updated line data
-    saveLineData(lineData);
-
-    // Refresh the browser
     window.location.reload();
   }
 };
 
-export const handleEditPoi = (
+export const handleEditPoi = (marker, userRights, setCurrentPoiData, setShowPoiUpdateModal, fetchPoiData, toast) => {
-  marker,
-  userRights,
-  setCurrentPoiData,
-  setShowPoiUpdateModal,
-  fetchPoiData,
-  toast // Hier toast als Parameter erhalten
-) => {
-  console.log("Selected Marker ID (idPoi):", marker.options.id);
-  console.log("Selected Marker Description:", marker.options.description);
-  console.log("User Rights:", userRights);
-
-  // Sicherstellen, dass userRights ein Array ist
   if (!Array.isArray(userRights)) {
-    console.error("User Rights is not an array:", userRights);
     toast.error("Benutzerrechte sind ungültig.", {
       position: "top-center",
       autoClose: 5000,
-      hideProgressBar: false,
-      closeOnClick: true,
-      pauseOnHover: true,
-      draggable: true,
-      progress: undefined,
     });
     return;
   }
 
-  console.log(
-    "User Rights include 56:",
-    userRights.some((r) => r.IdRight === 56)
-  );
-
-  // Prüfung, ob der Benutzer die notwendigen Rechte hat
   if (!userRights.some((r) => r.IdRight === 56)) {
     toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
       position: "top-center",
       autoClose: 5000,
-      hideProgressBar: false,
-      closeOnClick: true,
-      pauseOnHover: true,
-      draggable: true,
-      progress: undefined,
     });
-    console.log("Benutzer hat keine Berechtigung zum Bearbeiten.");
+    return;
-    return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt
   }
 
   setCurrentPoiData({
@@ -111,6 +79,5 @@ export const handleEditPoi = (
   });
 
   fetchPoiData(marker.options.id);
-
   setShowPoiUpdateModal(true);
 };

utils/poiUtils.js

@@ -1,124 +1,66 @@
 // /utils/poiUtils.js
-import circleIcon from "../components/gisPolylines/icons/CircleIcon.js";
-import { saveLineData } from "./mapUtils.js";
-import { redrawPolyline } from "./polylines/redrawPolyline.js";
 import L from "leaflet";
-import "leaflet.smooth_marker_bouncing";
 import { toast } from "react-toastify";
+import circleIcon from "../components/gisPolylines/icons/CircleIcon.js";
+import { redrawPolyline } from "./polylines/redrawPolyline.js";
+
+import { store } from "../redux/store";
+import { updatePolylineCoordinatesThunk } from "../redux/thunks/database/polylines/updatePolylineCoordinatesThunk";
+
+// 🧠 Zentrale Redux-Dispatch-Hilfsfunktion
+const savePolylineRedux = (lineData) => {
+  return store
+    .dispatch(
+      updatePolylineCoordinatesThunk({
+        idModul: lineData.idModul,
+        idLD: lineData.idLD,
+        newCoordinates: lineData.coordinates,
+      })
+    )
+    .unwrap()
+    .catch((error) => {
+      console.error("Fehler beim Speichern der Linienkoordinaten:", error.message);
+    });
+};
 
 export const insertNewPOI = (closestPoints, newPoint, lineData, map) => {
   const newMarker = L.marker(newPoint, {
     icon: circleIcon,
     draggable: true,
   }).addTo(map);
+
+  // Stützpunkt in Koordinatenliste einfügen
   lineData.coordinates.splice(closestPoints[2], 0, [newPoint.lat, newPoint.lng]);
 
-  // Hier direkt speichern nach Einfügen
+  // Redux: Speichern der neuen Koordinaten
-  saveLineData(lineData);
+  savePolylineRedux(lineData);
-
   redrawPolyline(lineData);
 
-  // Event-Listener für das Verschieben des Markers hinzufügen
   newMarker.on("dragend", () => {
-    console.log("Marker wurde verschoben in insertNewPOI");
     const newCoords = newMarker.getLatLng();
-    setNewCoords(newCoords);
     const newCoordinates = [...lineData.coordinates];
     newCoordinates[closestPoints[2]] = [newCoords.lat, newCoords.lng];
     lineData.coordinates = newCoordinates;
-    redrawPolyline(lineData);
 
-    updateMarkerPosition(newMarker.getLatLng(), lineData, newMarker);
+    redrawPolyline(lineData);
-    saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben
+    updateMarkerPosition(newCoords, lineData, newMarker);
+    savePolylineRedux(lineData);
   });
 };
 
 export const removePOI = (marker, lineData, currentZoom, currentCenter) => {
-  // Save zoom and center to localStorage
-  //localStorage.setItem("mapZoom", currentZoom);
-  //localStorage.setItem("mapCenter", JSON.stringify(currentCenter));
-
-  // Find the index of the coordinate that matches the marker's position
   const index = lineData.coordinates.findIndex((coord) => L.latLng(coord[0], coord[1]).equals(marker.getLatLng()));
 
   if (index !== -1) {
-    // Remove the coordinate from the line data
     lineData.coordinates.splice(index, 1);
-
-    // Redraw the polyline with the updated coordinates
     redrawPolyline(lineData);
-
-    // Remove the marker from the map
     marker.remove();
-
+    savePolylineRedux(lineData);
-    // Save the updated line data
-    saveLineData(lineData);
-
-    // Refresh the browser
     window.location.reload();
   }
 };
 
-export const handleEditPoi = (
+export const updateMarkerPosition = (newCoords, lineData, marker) => {
-  marker,
+  if (!marker) return;
-  userRights,
+  marker.setLatLng([newCoords.lat, newCoords.lng]);
-  setCurrentPoiData,
-  setShowPoiUpdateModal,
-  fetchPoiData,
-  toast // Hier toast als Parameter erhalten
-) => {
-  const editMode = localStorage.getItem("editMode") === "true";
-  userRights = editMode ? userRights : undefined;
-  //console.log("Selected Marker ID (idPoi):", marker.options.id);
-  //console.log("Selected Marker Description:", marker.options.description);
-  //console.log("User Rights:", userRights);
-
-  // Sicherstellen, dass userRights ein Array ist
-  if (!userRights.some((r) => r.IdRight === 56)) {
-    console.error("User Rights is not an array:", userRights);
-    toast.error("Benutzerrechte sind ungültig.", {
-      position: "top-center",
-      autoClose: 5000,
-      hideProgressBar: false,
-      closeOnClick: true,
-      pauseOnHover: true,
-      draggable: true,
-      progress: undefined,
-    });
-    return;
-  }
-
-  console.log(
-    "User Rights include 56:",
-    userRights.some((r) => r.IdRight === 56)
-  );
-
-  // Prüfung, ob der Benutzer die notwendigen Rechte hat
-  if (!userRights.some((r) => r.IdRight === 56)) {
-    toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
-      position: "top-center",
-      autoClose: 5000,
-      hideProgressBar: false,
-      closeOnClick: true,
-      pauseOnHover: true,
-      draggable: true,
-      progress: undefined,
-    });
-    console.log("Benutzer hat keine Berechtigung zum Bearbeiten.");
-    return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt
-  }
-
-  setCurrentPoiData({
-    idPoi: marker.options.id,
-    name: marker.options.name,
-    description: marker.options.description,
-    idLD: marker.options.idLD,
-    idPoiTyp: marker.options.idPoiTyp,
-  });
-
-  fetchPoiData(marker.options.id);
-
-  setShowPoiUpdateModal(true);
-  console.log("POI option idPoiTyp:", marker.options.idPoiTyp);
 };
-//-------------------------------------------------------------------