From 33cef4fa97428b0b947095cedd9e687e57dc9071 Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 8 Jul 2024 13:36:44 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20St=C3=BCtzpunkte=20entfernen=20und=20Br?= =?UTF-8?q?owser=20aktualissieren?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/MapComponent.js | 120 ++++++++++++++--- components/MapCoomonentGPT.js | 237 ---------------------------------- 2 files changed, 101 insertions(+), 256 deletions(-) delete mode 100644 components/MapCoomonentGPT.js diff --git a/components/MapComponent.js b/components/MapComponent.js index bd7d29c23..6e78094e7 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -26,23 +26,32 @@ import { mapLayersState } from "../store/atoms/mapLayersState.js"; import { selectedAreaState } from "../store/atoms/selectedAreaState.js"; import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js"; import { poiTypState } from "../store/atoms/poiTypState.js"; -import ShowAddStationPopup from "./ShowAddStationPopup"; -import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom"; +import ShowAddStationPopup from "./ShowAddStationPopup.js"; +import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom.js"; import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline' import PoiUpdateModal from "./PoiUpdateModal.js"; import { selectedPoiState } from "../store/atoms/poiState.js"; -import { currentPoiState } from "../store/atoms/currentPoiState"; +import { currentPoiState } from "../store/atoms/currentPoiState.js"; import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; -import { mapIdState, userIdState } from "../store/atoms/urlParameterState"; +import { mapIdState, userIdState } from "../store/atoms/urlParameterState.js"; import { set } from "lodash"; -import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible"; +import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible.js"; import { data } from "autoprefixer"; import plusRoundIcon from "./PlusRoundIcon.js"; //--------------------------------------------------------------------- //-------------------- MapComponent ----------------------------------- const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { + // Get current zoom and center + //const currentZoom = map.getZoom(); + const [currentZoom, setCurrentZoom] = useState(12); + //const currentCenter = map.getCenter(); + const [currentCenter, setCurrentCenter] = useState(() => { + const storedCenter = localStorage.getItem("mapCenter"); + return storedCenter ? JSON.parse(storedCenter) : [53.111111, 8.4625]; + }); + const [priorityConfig, setPriorityConfig] = useState([]); const fetchPriorityConfig = async () => { @@ -973,8 +982,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { useEffect(() => { if (mapRef.current && !map) { initMap = L.map(mapRef.current, { - center: [53.111111, 8.4625], - zoom: 8, + //center: [53.111111, 8.4625], + center: currentCenter, + //zoom: 8, + zoom: currentZoom, layers: [ TALAS, ECI, @@ -2479,25 +2490,62 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { color: "red", }).addTo(map); } - + //--------------------------------------------------------- function removeMarker(marker, lineData) { + // 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) { - lineData.coordinates.splice(index, 1); // Entferne die Koordinaten des Markers - redrawPolyline(lineData); // Neuzeichnen der Polylinie - marker.remove(); // Entferne den Marker von der Karte - saveLineData(lineData); // Speichern der neuen Linienkoordinaten + // 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 + window.location.reload(); } } + // Call this function on page load to restore zoom and center + function restoreMapSettings() { + const savedZoom = localStorage.getItem("mapZoom"); + const savedCenter = localStorage.getItem("mapCenter"); + + if (savedZoom && savedCenter) { + const centerCoords = JSON.parse(savedCenter); + map.setView(centerCoords, parseInt(savedZoom)); + } + } + + // Call restoreMapSettings when the map is initialized + useEffect(() => { + if (map) { + restoreMapSettings(); + } + }, [map]); + + //--------------------------------------------------------- + function redrawPolyline(lineData) { - const polyline = L.polyline(lineData.coordinates, { + if (lineData.polyline) map.removeLayer(lineData.polyline); + lineData.polyline = L.polyline(lineData.coordinates, { color: lineColors[lineData.idModul] || "#000000", }).addTo(map); - polyline.bindTooltip( + lineData.polyline.bindTooltip( tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt", { permanent: false, @@ -2505,12 +2553,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } ); - polyline.on("mouseover", () => { - polyline.setStyle({ weight: 10 }); - polyline.bringToFront(); + lineData.polyline.on("mouseover", () => { + lineData.polyline.setStyle({ weight: 10 }); + lineData.polyline.bringToFront(); }); - polyline.on("mouseout", () => { - polyline.setStyle({ weight: 5 }); + lineData.polyline.on("mouseout", () => { + lineData.polyline.setStyle({ weight: 5 }); }); } @@ -2557,6 +2605,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { // 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); + updateMarkerPosition(newMarker.getLatLng(), lineData, newMarker); saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben }); @@ -2589,6 +2644,33 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } return closestPair; } + //--------------------------------------------------------- + useEffect(() => { + if (map) { + const handleMapMoveEnd = (event) => { + const newCenter = map.getCenter(); + const newZoom = map.getZoom(); + + setCurrentCenter([newCenter.lat, newCenter.lng]); + setCurrentZoom(newZoom); + + // Save to localStorage + localStorage.setItem( + "mapCenter", + JSON.stringify([newCenter.lat, newCenter.lng]) + ); + localStorage.setItem("mapZoom", newZoom); + }; + + map.on("moveend", handleMapMoveEnd); + map.on("zoomend", handleMapMoveEnd); + + return () => { + map.off("moveend", handleMapMoveEnd); + map.off("zoomend", handleMapMoveEnd); + }; + } + }, [map]); //--------------------------------------------------------- //--------------------------------------------------------- diff --git a/components/MapCoomonentGPT.js b/components/MapCoomonentGPT.js deleted file mode 100644 index 125fc3c1a..000000000 --- a/components/MapCoomonentGPT.js +++ /dev/null @@ -1,237 +0,0 @@ -const [newPoint, setNewPoint] = useState(null); -const [newCoords, setNewCoords] = useState(null); -const [tempMarker, setTempMarker] = useState(null); // Hinzufügen eines Zustands für den temporären Marker - -useEffect(() => { - if (!map) return; - - // Entfernen alter Marker und Polylines - markers.forEach((marker) => marker.remove()); - polylines.forEach((polyline) => polyline.remove()); - - const newMarkers = []; - const newPolylines = []; - - linePositions.forEach((lineData, lineIndex) => { - const lineMarkers = []; - lineData.coordinates.forEach((coord, index) => { - let icon = circleIcon; // Standard-Icon für mittlere Punkte - if (index === 0) { - icon = startIcon; // Start-Icon für den ersten Punkt - } else if (index === lineData.coordinates.length - 1) { - icon = endIcon; // End-Icon für den letzten Punkt - } - - const marker = L.marker(coord, { - icon: icon, - draggable: true, - contextmenu: true, - contextmenuInheritItems: false, - contextmenuItems: [], // Starte mit einem leeren Menü - }).addTo(map); - - marker.on("dragend", () => { - const newCoords = marker.getLatLng(); - setNewCoords(newCoords); // Aktualisieren Sie den Zustand - const newCoordinates = [...lineData.coordinates]; - newCoordinates[index] = [newCoords.lat, newCoords.lng]; - - const updatedPolyline = L.polyline(newCoordinates, { - color: lineColors[lineData.idModul] || "#000000", - }).addTo(map); - - updatedPolyline.bindTooltip( - tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt", - { - permanent: false, - direction: "auto", - } - ); - - updatedPolyline.on("mouseover", () => { - updatedPolyline.setStyle({ weight: 10 }); - updatedPolyline.bringToFront(); - }); - updatedPolyline.on("mouseout", () => { - updatedPolyline.setStyle({ weight: 5 }); - }); - - newPolylines[lineIndex].remove(); - newPolylines[lineIndex] = updatedPolyline; - lineData.coordinates = newCoordinates; - - const requestData = { - idModul: lineData.idModul, - idLD: lineData.idLD, - newCoordinates, - }; - - console.log("Sending to API:", requestData); - // API-Aufruf, um die neuen Koordinaten zu speichern - 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(); - }) - .then((data) => { - console.log("Koordinaten erfolgreich aktualisiert:", data); - }) - .catch((error) => { - console.error( - "Fehler beim Aktualisieren der Koordinaten:", - error.message - ); - }); - }); - - // Füge die Option zum Entfernen nur hinzu, wenn der Benutzer mit der Maus über dem Marker ist - marker.on("mouseover", function () { - this.bindContextMenu({ - contextmenuItems: [ - { - text: "Marker entfernen", - callback: () => { - const newCoords = marker.getLatLng(); - const newCoordinates = [...lineData.coordinates]; - newCoordinates[index] = [newCoords.lat, newCoords.lng]; - - removeMarker(marker, lineData); - newPolylines[lineIndex].remove(); - lineData.coordinates = newCoordinates; - }, - }, - ], - }); - }); - - // Entferne die Option, wenn der Benutzer den Mausbereich des Markers verlässt - marker.on("mouseout", function () { - this.unbindContextMenu(); - }); - - lineMarkers.push(marker); - }); - - const polyline = L.polyline(lineData.coordinates, { - color: lineColors[lineData.idModul] || "#000000", - contextmenu: true, - contextmenuItems: [ - { - text: "Marker hier hinzufügen", - callback: (e) => { - if (tempMarker) { - tempMarker.remove(); // Entfernen des Platzhalter-Icons - } - const newPoint = e.latlng; - setNewPoint(newPoint); // Aktualisieren Sie den Zustand - const closestPoints = findClosestPoints( - lineData.coordinates, - newPoint - ); - insertNewMarker(closestPoints, newPoint, lineData, map); - redrawPolyline(lineData); - }, - }, - ], - }).addTo(map); - - polyline.on("mouseover", (e) => { - // Optional: Visualisiere, dass die Linie interaktiv ist - polyline.setStyle({ color: "blue", weight: 10 }); - }); - - polyline.on("mouseout", (e) => { - // Setze die ursprüngliche Farbe zurück - polyline.setStyle({ color: lineColors[lineData.idModul] || "#000000" }); - }); - - polyline.bindTooltip( - tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt", - { - permanent: false, - direction: "auto", - } - ); - - newPolylines.push(polyline); - newMarkers.push(...lineMarkers); - }); - - setMarkers(newMarkers); - setPolylines(newPolylines); -}, [ - map, - linePositions, - lineColors, - tooltipContents, - newPoint, - newCoords, - tempMarker, -]); - -function 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, - ]); - - 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); - }); - - setNewCoords(null); // Setzen Sie newCoords auf null, um den Platzhalter-Icon zu entfernen - setTempMarker(null); // Entfernen Sie den temporären Marker -} - -function removeMarker(marker, lineData) { - const index = lineData.coordinates.findIndex((coord) => - L.latLng(coord[0], coord[1]).equals(marker.getLatLng()) - ); - if (index !== -1) { - lineData.coordinates.splice(index, 1); // Entferne die Koordinaten des Markers - redrawPolyline(lineData); // Neuzeichnen der Polylinie - marker.remove(); // Entferne den Marker von der Karte - } -} - -function redrawPolyline(lineData) { - if (lineData.polyline) map.removeLayer(lineData.polyline); - lineData.polyline = L.polyline(lineData.coordinates, { - color: lineColors[lineData.idModul] || "#000000", - }).addTo(map); - - lineData.polyline.bindTooltip( - tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt", - { - permanent: false, - direction: "auto", - } - ); - - lineData.polyline.on("mouseover", () => { - lineData.polyline.setStyle({ weight: 10 }); - lineData.polyline.bringToFront(); - }); - lineData.polyline.on("mouseout", () => { - lineData.polyline.setStyle({ weight: 5 }); - }); -}