Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- updatePolylineCoordinatesThunk in markerUtils.js und poiUtils.js eingebunden
- zentrale Hilfsfunktion savePolylineRedux erstellt
- fetch() entfernt, Version auf 1.1.183 erhöht
This commit is contained in:
ISA
2025-05-27 08:33:02 +02:00
parent 44cb27ce0f
commit 4c6386edea
9 changed files with 157 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
utils/handlePoiSelect.js
View File

@@ -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;

25
utils/mapUtils.js
View File

@@ -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");

85
utils/markerUtils.js
View File

@@ -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]);
// Hier direkt speichern nach Einfügen
saveLineData(lineData);
savePolylineRedux(lineData); // ✅ Nutzung der Hilfsfunktion
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();
// Save the updated line data
saveLineData(lineData);
// Refresh the browser
savePolylineRedux(lineData); // ✅ Wiederverwendung
window.location.reload();
}
};
export const handleEditPoi = (
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
export const handleEditPoi = (marker, userRights, setCurrentPoiData, setShowPoiUpdateModal, fetchPoiData, toast) => {
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; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt
return;
}
setCurrentPoiData({
@@ -111,6 +79,5 @@ export const handleEditPoi = (
});
fetchPoiData(marker.options.id);
setShowPoiUpdateModal(true);
};

122
utils/poiUtils.js
View File

@@ -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
saveLineData(lineData);
// Redux: Speichern der neuen Koordinaten
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);
saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben
redrawPolyline(lineData);
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();
// Save the updated line data
saveLineData(lineData);
// Refresh the browser
savePolylineRedux(lineData);
window.location.reload();
}
};
export const handleEditPoi = (
marker,
userRights,
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);
export const updateMarkerPosition = (newCoords, lineData, marker) => {
if (!marker) return;
marker.setLatLng([newCoords.lat, newCoords.lng]);
};
//-------------------------------------------------------------------