From 8262857efd7b72f874ad1ca0aab98928b4aceaa7 Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Sun, 21 Apr 2024 19:33:33 +0200 Subject: [PATCH] useEffect von Marker MySQL Datenbank und APIs in einzige useEffect --- components/MapComponent.js | 218 +++++++++++++++++++++++++++++++++---- 1 file changed, 199 insertions(+), 19 deletions(-) diff --git a/components/MapComponent.js b/components/MapComponent.js index 8d92a88d5..607a75529 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -279,14 +279,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }, [mapRef, map]); // Abhängigkeiten prüfen // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs - useEffect(() => { +/* useEffect(() => { // Remove old markers if (map) { - /* map.eachLayer((layer) => { + map.eachLayer((layer) => { if (layer instanceof L.Marker) { map.removeLayer(layer); } - }); */ + }); // Add new markers locations.forEach((location) => { @@ -302,10 +302,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => { id: location.idPoi, }); - /* marker.bindPopup( + marker.bindPopup( `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, { permanent: false, closeButton: true } - ); */ + ); marker.bindTooltip( `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, { permanent: false, direction: "top", offset: [0, -30] } @@ -323,7 +323,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { marker.addTo(map); }); } - }, [map, locations, onLocationUpdate]); + }, [map, locations, onLocationUpdate]); */ //------------------------------------------ function parsePoint(pointString) { @@ -549,7 +549,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // minor-marker-icon-23.png // Marker hinzufügen für GisStationsStaticDistrict - useEffect(() => { + /* useEffect(() => { // Stellen Sie sicher, dass sowohl `map` als auch `oms` initialisiert sind if (!map || !oms) { console.error("Map or OMS is not initialized"); @@ -668,22 +668,202 @@ const MapComponent = ({ locations, onLocationUpdate }) => { ${statusInfo}
`); let LocID = station.IdLocation; - /* marker - .bindTooltip( - `
${LocID}
`, - { - permanent: true, - direction: "right", - opacity: 0, - offset: L.point({ x: 10, y: 0 }), - } - ) - .addTo(GMA); */ + }); }, [map, oms, GisStationsStaticDistrict, GisStationsStatusDistrict]); - //------------------------------------------ + //------------------------------------------ */ + //------------------------------------------ */ + //useEffect zusammen von MySQL Daten bank und von APIs + useEffect(() => { + const fetchData = async () => { + try { + const responses = await Promise.all([ + fetch(mapGisStationsStaticDistrictUrl), + fetch(mapGisStationsStatusDistrictUrl), + // Andere relevante API-Anfragen + ]); + const data = await Promise.all(responses.map(res => res.json())); + + if (data[0] && data[0].Points) { + setGisStationsStaticDistrict(data[0].Points); + } else { + console.error('Daten für GisStationsStaticDistrict nicht gefunden'); + setGisStationsStaticDistrict([]); + } + + if (data[1] && data[1].Statis) { + setGisStationsStatusDistrict(data[1].Statis); + } else { + console.error('Daten für GisStationsStatusDistrict nicht gefunden'); + setGisStationsStatusDistrict([]); + } + + // Weitere Datenverarbeitung... + + } catch (error) { + console.error("Fehler beim Laden der Daten: ", error); + // Setzen Sie Zustände auf leere Arrays oder Fehlerzustände + } + }; + + fetchData(); + }, []); + + useEffect(() => { + if (!map) return; + map.eachLayer((layer) => { + if (layer instanceof L.Marker) { + map.removeLayer(layer); + } + }); + + // Marker für lokale MySQL-Daten + locations.forEach((location) => { + const { latitude, longitude } = parsePoint(location.position); + const marker = L.marker([latitude, longitude], { + icon: L.icon({ + iconUrl: "/location.svg", + iconSize: [34, 34], + iconAnchor: [17, 34], + popupAnchor: [0, -34], + }), + draggable: true, + id: location.idPoi, + }); + + marker.bindPopup( + `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, + { permanent: false, closeButton: true } + ); + marker.bindTooltip( + `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, + { permanent: false, direction: "top", offset: [0, -30] } + ); + + marker.on("dragend", function (e) { + const newLat = e.target.getLatLng().lat; + const newLng = e.target.getLatLng().lng; + const markerId = e.target.options.id; + updateLocationInDatabase(markerId, newLat, newLng).then(() => { + onLocationUpdate(markerId, newLat, newLng); + }); + }); + + marker.addTo(map); + }); + + // Marker für GisStationsStaticDistrict + GisStationsStaticDistrict.forEach((station) => { + // Filter für Statusobjekte dieser spezifischen Station + const matchingStatuses = GisStationsStatusDistrict.filter( + (status) => status.IdLD === station.IdLD + ); + + const marker = L.marker([station.X, station.Y], { + icon: L.icon({ + iconUrl: "default-icon.png", // Default, wird geändert + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + shadowSize: [41, 41], + }), + }).addTo(map); + + // Popup beim Überfahren mit der Maus öffnen + marker.on("mouseover", function (e) { + this.openPopup(); + }); + + // Popup schließen, wenn die Maus den Marker verlässt + marker.on("mouseout", function (e) { + this.closePopup(); + }); + + // String-Zusammenstellung für das Popup-Infofenster + let statusInfo = matchingStatuses + .reverse() + .map( + (status) => ` +
+
+ ${status.Me} (${status.Na}) +
+ ` + ) + .join(""); + + // Bestimmen des Icons basierend auf dem Status + let iconPath = getIconPath( + matchingStatuses[0]?.Na || "", + station.Icon, + marker + ); + + marker.setIcon( + L.icon({ + iconUrl: iconPath, + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + shadowSize: [41, 41], + }) + ); + // Check if the icon path includes 'critical' and initiate bouncing + if ( + iconPath.includes("critical") || + iconPath.includes("major") || + iconPath.includes("minor") || + iconPath.includes("system") + ) { + marker.setBouncingOptions({ + bounceHeight: 15, + contractHeight: 12, + bounceSpeed: 52, + contractSpeed: 52, + shadowAngle: null, + }); + marker.bounce(3); + } + // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht + if (station.LD_Name === "GMA Littwin (TEST)") { + marker.bindTooltip( + `
${station.Area_Name}
`, + { + permanent: true, + direction: "right", + opacity: 1, // Tooltip immer sichtbar + offset: L.point({ x: 10, y: 0 }), + } + ).addTo(GMA); + } else { + marker.bindTooltip( + `
${station.LD_Name}
`, + { + permanent: false, + direction: "right", + opacity: 0, + offset: L.point({ x: 10, y: 0 }), + } + ).addTo(GMA); + } + // Marker zu OMS und der Karte hinzufügen + oms.addMarker(marker); + marker.addTo(map).bindPopup(` + ${station.LD_Name}
+ ${station.Device}
+ ${station.Area_Short} (${station.Area_Name})
+ ${station.Location_Short} (${station.Location_Name})
+ ${statusInfo}
+ `); + let LocID = station.IdLocation; + + }); + }, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich + + + //------------------------------------------ */ let uniqueIdLDsData = []; let Tooltip = [];