edit: Lines update ->ok ,tooltip->ok
This commit is contained in:
ISA
@@ -2141,6 +2141,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
return {
|
||||
coordinates: item.points.map((point) => [point.x, point.y]),
|
||||
idModul: item.idModul,
|
||||
idLD: item.idLD,
|
||||
};
|
||||
} else {
|
||||
throw new Error("Points missing or not an array");
|
||||
@@ -2154,7 +2155,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
}, []);
|
||||
//--------------------------- Linien färben ------------------------------
|
||||
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
|
||||
|
||||
@@ -2163,28 +2166,19 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
try {
|
||||
const response1 = await fetch(webserviceGisLinesStatusUrl);
|
||||
const data1 = await response1.json();
|
||||
console.log("data1 webserviceGisLinesStatusUrl: ", data1.Statis);
|
||||
const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
|
||||
const data2 = await response2.json();
|
||||
|
||||
const colorsByModule = {};
|
||||
const newTooltipContents = {};
|
||||
|
||||
data1.Statis.forEach((stat) => {
|
||||
const matchingLine = data2.find(
|
||||
(item) => item.idLD === stat.IdLD && item.idModul === stat.Modul
|
||||
);
|
||||
if (matchingLine) {
|
||||
colorsByModule[matchingLine.idModul] = stat.PrioColor;
|
||||
console.log("Übereinstimmung gefunden für", stat);
|
||||
console.log(
|
||||
"stat color",
|
||||
stat.PrioColor,
|
||||
"matchingLine",
|
||||
matchingLine.idModul,
|
||||
"matchingLine",
|
||||
matchingLine.idLD
|
||||
);
|
||||
setLineColors(colorsByModule);
|
||||
setTooltipContent(`
|
||||
newTooltipContents[matchingLine.idModul] = `
|
||||
<div class="p-0 rounded-lg bg-white bg-opacity-90">
|
||||
<div class="font-bold text-sm text-black">
|
||||
<span>DpName: ${stat.DpName || "Unknown"}</span>
|
||||
@@ -2196,13 +2190,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
<span>Message : ${stat.Message || "N/A"}</span>
|
||||
</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) {
|
||||
console.error("Error fetching data:", error);
|
||||
}
|
||||
@@ -2265,13 +2258,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
//---------------------------------------------------------
|
||||
// Function to initialize markers and polylines
|
||||
// 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 Polylinien
|
||||
// Entfernen alter Marker und Polylines
|
||||
markers.forEach((marker) => marker.remove());
|
||||
polylines.forEach((polyline) => polyline.remove());
|
||||
|
||||
@@ -2281,7 +2271,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
linePositions.forEach((lineData, lineIndex) => {
|
||||
const lineMarkers = [];
|
||||
lineData.coordinates.forEach((coord, index) => {
|
||||
console.log("lineData coord", lineData);
|
||||
const marker = L.marker(coord, {
|
||||
icon: circleIcon,
|
||||
draggable: true,
|
||||
@@ -2291,72 +2280,50 @@ 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);
|
||||
|
||||
// Dynamisch generierter Tooltip-Inhalt
|
||||
const matchingStatus = lineStatusData.find(
|
||||
(stat) =>
|
||||
stat.IdLD === lineData.idLD && stat.Modul === lineData.idModul
|
||||
updatedPolyline.bindTooltip(
|
||||
tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
|
||||
{
|
||||
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.setStyle({ weight: 8 });
|
||||
updatedPolyline.setStyle({ weight: 12 });
|
||||
updatedPolyline.bringToFront();
|
||||
});
|
||||
updatedPolyline.on("mouseout", () => {
|
||||
updatedPolyline.setStyle({ weight: 5 });
|
||||
});
|
||||
|
||||
// Entfernen der alten Polyline
|
||||
newPolylines[lineIndex].remove();
|
||||
newPolylines[lineIndex] = updatedPolyline;
|
||||
lineData.coordinates = newCoordinates;
|
||||
|
||||
// Aktualisieren des Polyline-Zustands
|
||||
setPolylines([...newPolylines]);
|
||||
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({
|
||||
idModul: lineData.idModul,
|
||||
newCoordinates,
|
||||
}),
|
||||
body: JSON.stringify(requestData),
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
"Fehler beim Aktualisieren der Koordinaten in der Datenbank"
|
||||
);
|
||||
return response.json().then((data) => {
|
||||
throw new Error(data.error || "Unbekannter Fehler");
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
@@ -2366,7 +2333,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
.catch((error) => {
|
||||
console.error(
|
||||
"Fehler beim Aktualisieren der Koordinaten:",
|
||||
error
|
||||
error.message
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -2374,40 +2341,26 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
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, {
|
||||
color: lineColors[lineData.idModul] || "#000000",
|
||||
}).addTo(map);
|
||||
|
||||
polyline.bindTooltip(dynamicTooltipContent, {
|
||||
permanent: false,
|
||||
direction: "auto",
|
||||
});
|
||||
polyline.bindTooltip(
|
||||
tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
|
||||
{
|
||||
permanent: false,
|
||||
direction: "auto",
|
||||
}
|
||||
);
|
||||
|
||||
polyline.on("mouseover", () => {
|
||||
polyline.setStyle({ weight: 8 });
|
||||
polyline.setStyle({ weight: 12 });
|
||||
polyline.bringToFront();
|
||||
console.log(
|
||||
`polyline with idLD : ${lineData.idLD}, idModul: ${lineData.idModul}`,
|
||||
"lineData : ",
|
||||
lineData
|
||||
);
|
||||
});
|
||||
polyline.on("mouseout", () => {
|
||||
polyline.setStyle({ weight: 5 });
|
||||
@@ -2419,7 +2372,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
|
||||
setMarkers(newMarkers);
|
||||
setPolylines(newPolylines);
|
||||
}, [map, linePositions, lineColors]);
|
||||
}, [map, linePositions, lineColors, tooltipContents]);
|
||||
|
||||
//---------------------------------------------------------
|
||||
//---------------------------------------------------------
|
||||
|
||||
|
||||
2594
components/MapComponent2.js
Normal file
2594
components/MapComponent2.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,4 @@
|
||||
// /pages/api/talas_v5_DB/gisLines/updateGisLines.js
|
||||
// /pages/api/talas_v5_DB/gisLines/updateLineCoordinates.js
|
||||
import mysql from "mysql";
|
||||
|
||||
const dbConfig = {
|
||||
@@ -23,18 +23,24 @@ export default function handler(req, res) {
|
||||
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(",")})`;
|
||||
|
||||
// Aktualisiere die Abfrage, um sowohl idLD als auch idModul zu berücksichtigen
|
||||
const query =
|
||||
"UPDATE talas_v5.gis_lines SET points = ST_GeomFromText(?) WHERE idModul = ?;";
|
||||
connection.query(query, [newLineString, idModul], (error, results) => {
|
||||
"UPDATE talas_v5.gis_lines SET points = ST_GeomFromText(?) WHERE idLD = ? AND idModul = ?;";
|
||||
connection.query(query, [newLineString, idLD, idModul], (error, results) => {
|
||||
if (error) {
|
||||
console.error("Fehler beim Aktualisieren der gis_lines:", error);
|
||||
return res
|
||||
.status(500)
|
||||
.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." });
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user