diff --git a/components/MapComponent.js b/components/MapComponent.js index 7303ee5d2..bd7d29c23 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -2277,6 +2277,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { console.log("lineData:", linesData); }, [lineStatusData, linesData]); //--------------------------------------------------------- + const [newPoint, setNewPoint] = useState(null); + const [newCoords, setNewCoords] = useState(null); + const [tempMarker, setTempMarker] = useState(null); + useEffect(() => { if (!map) return; @@ -2307,6 +2311,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { marker.on("dragend", () => { const newCoords = marker.getLatLng(); + setNewCoords(newCoords); // Aktualisieren Sie den Zustand const newCoordinates = [...lineData.coordinates]; newCoordinates[index] = [newCoords.lat, newCoords.lng]; @@ -2403,12 +2408,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { { 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); }, }, ], @@ -2438,7 +2449,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { setMarkers(newMarkers); setPolylines(newPolylines); - }, [map, linePositions, lineColors, tooltipContents]); + }, [ + map, + linePositions, + lineColors, + tooltipContents, + newPoint, + newCoords, + tempMarker, + ]); //--------------------------------------------------------- //-------------------------Funktionen-------------------------------- @@ -2522,7 +2541,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } function insertNewMarker(closestPoints, newPoint, lineData, map) { - const newMarker = L.marker(newPoint, { draggable: true }).addTo(map); + const newMarker = L.marker(newPoint, { + icon: circleIcon, + draggable: true, + }).addTo(map); lineData.coordinates.splice(closestPoints[2], 0, [ newPoint.lat, newPoint.lng, diff --git a/components/MapCoomonentGPT.js b/components/MapCoomonentGPT.js new file mode 100644 index 000000000..125fc3c1a --- /dev/null +++ b/components/MapCoomonentGPT.js @@ -0,0 +1,237 @@ +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 }); + }); +}