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

edit: Lines update ->ok ,tooltip->ok

Browse Source
This commit is contained in:
ISA
2024-06-26 08:31:15 +02:00
parent c350aa5395
commit 559442e740
3 changed files with 2649 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
components/MapComponent.js
View File

@@ -2141,6 +2141,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
return { return {
coordinates: item.points.map((point) => [point.x, point.y]), coordinates: item.points.map((point) => [point.x, point.y]),
idModul: item.idModul, idModul: item.idModul,
idLD: item.idLD,
}; };
} else { } else {
throw new Error("Points missing or not an array"); throw new Error("Points missing or not an array");
@@ -2154,7 +2155,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}, []); }, []);
//--------------------------- Linien färben ------------------------------ //--------------------------- Linien färben ------------------------------
const [lineColors, setLineColors] = useState({}); const [lineColors, setLineColors] = useState({});
const [tooltipContent, setTooltipContent] = useState(""); const [tooltipContents, setTooltipContents] = useState({});
const [polylines, setPolylines] = useState([]);
const [markers, setMarkers] = useState([]);
// API-Aufruf, um Farben der Linien abzurufen // API-Aufruf, um Farben der Linien abzurufen
@@ -2163,28 +2166,19 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
try { try {
const response1 = await fetch(webserviceGisLinesStatusUrl); const response1 = await fetch(webserviceGisLinesStatusUrl);
const data1 = await response1.json(); const data1 = await response1.json();
console.log("data1 webserviceGisLinesStatusUrl: ", data1.Statis);
const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines"); const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
const data2 = await response2.json(); const data2 = await response2.json();
const colorsByModule = {}; const colorsByModule = {};
const newTooltipContents = {};
data1.Statis.forEach((stat) => { data1.Statis.forEach((stat) => {
const matchingLine = data2.find( const matchingLine = data2.find(
(item) => item.idLD === stat.IdLD && item.idModul === stat.Modul (item) => item.idLD === stat.IdLD && item.idModul === stat.Modul
); );
if (matchingLine) { if (matchingLine) {
colorsByModule[matchingLine.idModul] = stat.PrioColor; colorsByModule[matchingLine.idModul] = stat.PrioColor;
console.log("Übereinstimmung gefunden für", stat); newTooltipContents[matchingLine.idModul] = `
console.log(
"stat color",
stat.PrioColor,
"matchingLine",
matchingLine.idModul,
"matchingLine",
matchingLine.idLD
);
setLineColors(colorsByModule);
setTooltipContent(`
<div class="p-0 rounded-lg bg-white bg-opacity-90"> <div class="p-0 rounded-lg bg-white bg-opacity-90">
<div class="font-bold text-sm text-black"> <div class="font-bold text-sm text-black">
<span>DpName: ${stat.DpName || "Unknown"}</span> <span>DpName: ${stat.DpName || "Unknown"}</span>
@@ -2196,13 +2190,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
<span>Message : ${stat.Message || "N/A"}</span> <span>Message : ${stat.Message || "N/A"}</span>
</div> </div>
</div> </div>
`); `;
//console.log("colorsByModule: ", colorsByModule);
//console.log("lineColors: ", lineColors);
} else {
//console.log("Keine Übereinstimmung gefunden für", stat);
} }
}); });
setLineColors(colorsByModule);
setTooltipContents(newTooltipContents);
} catch (error) { } catch (error) {
console.error("Error fetching data:", error); console.error("Error fetching data:", error);
} }
@@ -2265,13 +2258,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
//--------------------------------------------------------- //---------------------------------------------------------
// Function to initialize markers and polylines // Function to initialize markers and polylines
// Initialisieren eines Zustands für die Speicherung der Polyline-Objekte // Initialisieren eines Zustands für die Speicherung der Polyline-Objekte
const [polylines, setPolylines] = useState([]);
const [markers, setMarkers] = useState([]);
useEffect(() => { useEffect(() => {
if (!map) return; if (!map) return;
// Entfernen alter Marker und Polylinien // Entfernen alter Marker und Polylines
markers.forEach((marker) => marker.remove()); markers.forEach((marker) => marker.remove());
polylines.forEach((polyline) => polyline.remove()); polylines.forEach((polyline) => polyline.remove());
@@ -2281,7 +2271,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
linePositions.forEach((lineData, lineIndex) => { linePositions.forEach((lineData, lineIndex) => {
const lineMarkers = []; const lineMarkers = [];
lineData.coordinates.forEach((coord, index) => { lineData.coordinates.forEach((coord, index) => {
console.log("lineData coord", lineData);
const marker = L.marker(coord, { const marker = L.marker(coord, {
icon: circleIcon, icon: circleIcon,
draggable: true, draggable: true,
@@ -2291,72 +2280,50 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const newCoords = marker.getLatLng(); const newCoords = marker.getLatLng();
const newCoordinates = [...lineData.coordinates]; const newCoordinates = [...lineData.coordinates];
newCoordinates[index] = [newCoords.lat, newCoords.lng]; newCoordinates[index] = [newCoords.lat, newCoords.lng];
// Erstellen einer neuen Polyline nach dem Verschieben
const updatedPolyline = L.polyline(newCoordinates, { const updatedPolyline = L.polyline(newCoordinates, {
color: lineColors[lineData.idModul] || "#000000", color: lineColors[lineData.idModul] || "#000000",
}).addTo(map); }).addTo(map);
// Dynamisch generierter Tooltip-Inhalt updatedPolyline.bindTooltip(
const matchingStatus = lineStatusData.find( tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
(stat) => {
stat.IdLD === lineData.idLD && stat.Modul === lineData.idModul permanent: false,
direction: "auto",
}
); );
const dynamicTooltipContent = matchingStatus
? `
<div class="p-0 rounded-lg bg-white bg-opacity-90">
<div class="font-bold text-sm text-black">
<span>DpName: ${matchingStatus.DpName || "Unknown"}</span>
</div>
<div class="font-bold text-xxs text-blue-700">
<span>ModulName: ${matchingStatus.ModulName || "N/A"}</span>
</div>
<div class="font-bold text-xxs text-red-700">
<span>Message: ${matchingStatus.Message || "N/A"}</span>
</div>
</div>
`
: "Informationen oder Name der Linie";
// Hinzufügen eines Tooltips
updatedPolyline.bindTooltip(dynamicTooltipContent, {
permanent: false,
direction: "auto",
});
updatedPolyline.on("mouseover", () => { updatedPolyline.on("mouseover", () => {
updatedPolyline.setStyle({ weight: 8 }); updatedPolyline.setStyle({ weight: 12 });
updatedPolyline.bringToFront(); updatedPolyline.bringToFront();
}); });
updatedPolyline.on("mouseout", () => { updatedPolyline.on("mouseout", () => {
updatedPolyline.setStyle({ weight: 5 }); updatedPolyline.setStyle({ weight: 5 });
}); });
// Entfernen der alten Polyline
newPolylines[lineIndex].remove(); newPolylines[lineIndex].remove();
newPolylines[lineIndex] = updatedPolyline; newPolylines[lineIndex] = updatedPolyline;
lineData.coordinates = newCoordinates; lineData.coordinates = newCoordinates;
// Aktualisieren des Polyline-Zustands const requestData = {
setPolylines([...newPolylines]); idModul: lineData.idModul,
idLD: lineData.idLD,
newCoordinates,
};
console.log("Sending to API:", requestData);
// API-Aufruf, um die neuen Koordinaten zu speichern // API-Aufruf, um die neuen Koordinaten zu speichern
fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", { fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify({ body: JSON.stringify(requestData),
idModul: lineData.idModul,
newCoordinates,
}),
}) })
.then((response) => { .then((response) => {
if (!response.ok) { if (!response.ok) {
throw new Error( return response.json().then((data) => {
"Fehler beim Aktualisieren der Koordinaten in der Datenbank" throw new Error(data.error || "Unbekannter Fehler");
); });
} }
return response.json(); return response.json();
}) })
@@ -2366,7 +2333,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
.catch((error) => { .catch((error) => {
console.error( console.error(
"Fehler beim Aktualisieren der Koordinaten:", "Fehler beim Aktualisieren der Koordinaten:",
error error.message
); );
}); });
}); });
@@ -2374,40 +2341,26 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
lineMarkers.push(marker); lineMarkers.push(marker);
}); });
// Dynamisch generierter Tooltip-Inhalt
const matchingStatus = lineStatusData.find(
(stat) => stat.IdLD === lineData.idLD && stat.Modul === lineData.idModul
);
const dynamicTooltipContent = matchingStatus
? `
<div class="p-0 rounded-lg bg-white bg-opacity-90">
<div class="font-bold text-sm text-black">
<span>DpName: ${matchingStatus.DpName || "Unknown"}</span>
</div>
<div class="font-bold text-xxs text-blue-700">
<span>ModulName: ${matchingStatus.ModulName || "N/A"}</span>
</div>
<div class="font-bold text-xxs text-red-700">
<span>Message: ${matchingStatus.Message || "N/A"}</span>
</div>
</div>
`
: "Informationen oder Name der Linie";
// Erstellen der initialen Polyline und Einrichten eines Tooltips
const polyline = L.polyline(lineData.coordinates, { const polyline = L.polyline(lineData.coordinates, {
color: lineColors[lineData.idModul] || "#000000", color: lineColors[lineData.idModul] || "#000000",
}).addTo(map); }).addTo(map);
polyline.bindTooltip(dynamicTooltipContent, { polyline.bindTooltip(
permanent: false, tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
direction: "auto", {
}); permanent: false,
direction: "auto",
}
);
polyline.on("mouseover", () => { polyline.on("mouseover", () => {
polyline.setStyle({ weight: 8 }); polyline.setStyle({ weight: 12 });
polyline.bringToFront(); polyline.bringToFront();
console.log(
`polyline with idLD : ${lineData.idLD}, idModul: ${lineData.idModul}`,
"lineData : ",
lineData
);
}); });
polyline.on("mouseout", () => { polyline.on("mouseout", () => {
polyline.setStyle({ weight: 5 }); polyline.setStyle({ weight: 5 });
@@ -2419,7 +2372,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
setMarkers(newMarkers); setMarkers(newMarkers);
setPolylines(newPolylines); setPolylines(newPolylines);
}, [map, linePositions, lineColors]); }, [map, linePositions, lineColors, tooltipContents]);
//--------------------------------------------------------- //---------------------------------------------------------
//--------------------------------------------------------- //---------------------------------------------------------

2594
components/MapComponent2.js Normal file
View File

File diff suppressed because it is too large Load Diff

14
pages/api/talas_v5_DB/gisLines/updateLineCoordinates.js
View File

@@ -1,4 +1,4 @@
// /pages/api/talas_v5_DB/gisLines/updateGisLines.js // /pages/api/talas_v5_DB/gisLines/updateLineCoordinates.js
import mysql from "mysql"; import mysql from "mysql";
const dbConfig = { const dbConfig = {
@@ -23,18 +23,24 @@ export default function handler(req, res) {
return res.status(405).json({ error: "Nur POST Methode erlaubt" }); return res.status(405).json({ error: "Nur POST Methode erlaubt" });
} }
const { idModul, newCoordinates } = req.body; const { idLD, idModul, newCoordinates } = req.body;
const newLineString = `LINESTRING(${newCoordinates.map((coord) => `${coord[0]} ${coord[1]}`).join(",")})`; const newLineString = `LINESTRING(${newCoordinates.map((coord) => `${coord[0]} ${coord[1]}`).join(",")})`;
// Aktualisiere die Abfrage, um sowohl idLD als auch idModul zu berücksichtigen
const query = const query =
"UPDATE talas_v5.gis_lines SET points = ST_GeomFromText(?) WHERE idModul = ?;"; "UPDATE talas_v5.gis_lines SET points = ST_GeomFromText(?) WHERE idLD = ? AND idModul = ?;";
connection.query(query, [newLineString, idModul], (error, results) => { connection.query(query, [newLineString, idLD, idModul], (error, results) => {
if (error) { if (error) {
console.error("Fehler beim Aktualisieren der gis_lines:", error); console.error("Fehler beim Aktualisieren der gis_lines:", error);
return res return res
.status(500) .status(500)
.json({ error: "Fehler beim Aktualisieren der gis_lines" }); .json({ error: "Fehler beim Aktualisieren der gis_lines" });
} }
if (results.affectedRows === 0) {
return res
.status(404)
.json({ error: "Keine Daten gefunden zum Aktualisieren" });
}
res.status(200).json({ success: "Updated successfully." }); res.status(200).json({ success: "Updated successfully." });
}); });
} }