From 937fb20df3ad01291cc2eb72a6a91da5ba80bc2f Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 25 Jun 2024 10:54:53 +0200 Subject: [PATCH 1/2] edit: Lines Color red and yellow for screenshot, DB -> gis_lines or in /pages/api/linesColorApi.js change IdLD-> idLD and Modul -> idModul --- pages/api/linesColorApi.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/pages/api/linesColorApi.js b/pages/api/linesColorApi.js index 18cf42d99..be2c323fe 100644 --- a/pages/api/linesColorApi.js +++ b/pages/api/linesColorApi.js @@ -1,5 +1,6 @@ // /pages/api/linesColorApi.js // http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStatusDistrict +//In DB gis_lines idLD und idModul anpassen entsprechend export default function handler(req, res) { const response = { @@ -8,14 +9,14 @@ export default function handler(req, res) { IdMap: "10", Statis: [ { - IdLD: 25440, + IdLD: 50922, Modul: 1, DpName: "KUE01_Ausfall", ModulName: "42 Wippershain Sender", ModulTyp: "nicht vorhanden", Message: "KUEG 01: 42 Wippershain Sender Messwerkausfall kommend", Level: 4, - PrioColor: "#FF00FF", + PrioColor: "#FFFF00", PrioName: "system", Value: "?", }, @@ -27,7 +28,7 @@ export default function handler(req, res) { ModulTyp: "nicht vorhanden", Message: "KUEG 03: 42 Solz Sender Messwerkausfall kommend", Level: 4, - PrioColor: "#FF00FF", + PrioColor: "#FF0000", PrioName: "system", Value: "?", }, From 212293d9ead64f088773b11d4653df8f6eead2f8 Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 25 Jun 2024 13:38:49 +0200 Subject: [PATCH 2/2] edit: updateLineCoordinates and tooltip in MapComponent --- components/MapComponent.js | 53 +++++++++++++++---- ...teGisLines.js => updateLineCoordinates.js} | 0 2 files changed, 44 insertions(+), 9 deletions(-) rename pages/api/talas_v5_DB/gisLines/{updateGisLines.js => updateLineCoordinates.js} (100%) diff --git a/components/MapComponent.js b/components/MapComponent.js index 431a833e1..ac0cd6ef9 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -2211,11 +2211,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { // Initialisieren eines Zustands für die Speicherung der Polyline-Objekte const [polylines, setPolylines] = useState([]); const [markers, setMarkers] = useState([]); - useEffect(() => { if (!map) return; - // Entfernen alter Marker und Polylines + // Entfernen alter Marker und Polylinien markers.forEach((marker) => marker.remove()); polylines.forEach((polyline) => polyline.remove()); @@ -2224,7 +2223,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { linePositions.forEach((lineData, lineIndex) => { const lineMarkers = []; - const polylinePoints = lineData.coordinates.map((coord, index) => { + lineData.coordinates.forEach((coord, index) => { const marker = L.marker(coord, { icon: circleIcon, draggable: true, @@ -2234,11 +2233,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const newCoords = marker.getLatLng(); const newCoordinates = [...lineData.coordinates]; newCoordinates[index] = [newCoords.lat, newCoords.lng]; + + // Erstellen einer neuen Polyline nach dem Verschieben const updatedPolyline = L.polyline(newCoordinates, { color: lineColors[lineData.idModul] || "#000000", }).addTo(map); - // Event-Handler für mouseover und mouseout erneut einrichten + // Hinzufügen eines Tooltips + updatedPolyline.bindTooltip("Informationen oder Name der Linie", { + permanent: false, // true, wenn Sie möchten, dass der Tooltip immer sichtbar ist + direction: "auto", // Kann 'right', 'left', 'top' oder 'bottom' sein + }); + updatedPolyline.on("mouseover", () => { updatedPolyline.setStyle({ weight: 8 }); updatedPolyline.bringToFront(); @@ -2247,22 +2253,52 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { updatedPolyline.setStyle({ weight: 5 }); }); - // Ersetzen der alten Polyline durch die neue + // Entfernen der alten Polyline newPolylines[lineIndex].remove(); newPolylines[lineIndex] = updatedPolyline; lineData.coordinates = newCoordinates; + + // Aktualisieren des Polyline-Zustands + setPolylines([...newPolylines]); + + // 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({ + idModul: lineData.idModul, + newCoordinates, + }), + }) + .then((response) => { + if (!response.ok) { + throw new Error( + "Fehler beim Aktualisieren der Koordinaten in der Datenbank" + ); + } + return response.json(); + }) + .then((data) => { + console.log("Koordinaten erfolgreich aktualisiert:", data); + }) + .catch((error) => { + console.error( + "Fehler beim Aktualisieren der Koordinaten:", + error + ); + }); }); lineMarkers.push(marker); - return marker; }); - // Erstellen der Polyline und Einrichten eines Tooltips + // Erstellen der initialen Polyline und Einrichten eines Tooltips const polyline = L.polyline(lineData.coordinates, { color: lineColors[lineData.idModul] || "#000000", }).addTo(map); - // Hinzufügen eines Tooltips polyline.bindTooltip("Informationen oder Name der Linie", { permanent: false, // true, wenn Sie möchten, dass der Tooltip immer sichtbar ist direction: "auto", // Kann 'right', 'left', 'top' oder 'bottom' sein @@ -2283,7 +2319,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { setMarkers(newMarkers); setPolylines(newPolylines); }, [map, linePositions, lineColors]); - //--------------------------------------------------------- //--------------------------------------------------------- diff --git a/pages/api/talas_v5_DB/gisLines/updateGisLines.js b/pages/api/talas_v5_DB/gisLines/updateLineCoordinates.js similarity index 100% rename from pages/api/talas_v5_DB/gisLines/updateGisLines.js rename to pages/api/talas_v5_DB/gisLines/updateLineCoordinates.js