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

Redux: alle Active 1 und 0 speichern

Browse Source
This commit is contained in:
ISA
2025-02-03 13:15:59 +01:00
parent 3fb5e54af7
commit e03dff4814
3 changed files with 91 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
utils/createAndSetDevices.js
View File

@@ -1,26 +1,26 @@
// /utils/createAndSetDevices.js
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import { saveLineData, redrawPolyline } from "./mapUtils";
import L from "leaflet";
import "leaflet.smooth_marker_bouncing";
import { toast } from "react-toastify";
import * as config from "../config/config.js";
import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines";
import { store } from "../redux/store"; // Redux-Store importieren
import { updateLineStatus } from "../redux/slices/lineVisibilitySlice"; // Redux-Slice importieren
import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState";
import { store } from "../redux/store";
import { updateLineStatus } from "../redux/slices/lineVisibilitySlice";
// Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad
const determinePriority = (iconPath, priorityConfig) => {
for (let priority of priorityConfig) {
if (iconPath.includes(priority.name.toLowerCase())) {
return priority.level;
}
}
return 5; // Standardpriorität (niedrigste)
return 5;
};
// **Funktion zum Erstellen und Setzen von Markern**
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
try {
// API-Daten abrufen
const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
const jsonResponse = await response1.json();
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
@@ -33,12 +33,31 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
console.log("✅ API-Daten geladen:", jsonResponse.Points.length, "Punkte gefunden.");
// **Filter: Nur Stationen mit `Active === 1`**
const activeStations = jsonResponse.Points.filter((station) => station.System === systemId && station.Active === 1);
console.log("🔍 Gefilterte aktive Stationen:", activeStations.length, activeStations);
// Erstelle eine Map für Statusinformationen
const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s]));
// Speichere `idLD` und `Active` Werte in Redux
const allLines = jsonResponse.Points.filter((station) => station.System === systemId).map((station) => {
console.log("------------------------");
console.log("station.IdLD: ", station.IdLD);
console.log("station.Active: ", station.Active);
console.log("------------------------");
// Redux: Aktualisiere `idLD` und `Active` Werte
store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active }));
return {
idLD: station.IdLD,
active: station.Active,
};
});
console.log("🔄 Alle Linien gespeichert:", allLines);
// Filtere nur aktive Stationen für Marker
const activeStations = jsonResponse.Points.filter((station) => station.System === systemId && station.Active === 1);
console.log("🔍 Gefilterte aktive Stationen:", activeStations);
let markersData = activeStations.map((station) => {
const statis = statisMap.get(station.IdLD);
const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`;
@@ -53,9 +72,8 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
iconAnchor: [12, 41],
popupAnchor: [1, -34],
}),
title: station.LD_Name,
contextmenu: true,
data: { Active: station.Active, idLD: station.IdLD }, // Speichere Active & idLD
areaName: station.Area_Name,
link: station.Link,
zIndexOffset: zIndexOffset,
});
@@ -65,26 +83,52 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
<span class="text-md font-bold text-gray-800"> ${station.Device}</span><br>
<span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
<span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
<div class="mt-2">
${statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
.reverse()
.map(
(status) => `
<div class="flex items-center my-1">
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
</div>
`
)
.join("")}
</div>
</div>
`);
// **Speichere `idLD` und `Active` in Redux**
store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active }));
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
marker.on("contextmenu", function (event) {
if (event && event.preventDefault) event.preventDefault();
this.openPopup();
});
document.addEventListener("mouseout", function (event) {
if (event.relatedTarget === null || event.relatedTarget.nodeName === "BODY") {
enablePolylineEvents(window.polylines, window.lineColors);
}
});
if (typeof marker.bounce === "function" && statis) {
marker.on("add", () => marker.bounce(3));
}
return marker;
});
console.log("📌 Marker erstellt:", markersData.length, markersData);
// **Sicherstellen, dass vorhandene Marker nicht überschrieben werden**
setMarkersFunction((prevMarkers) => [...prevMarkers, ...markersData]);
// **Debugging: Alle Marker in der Konsole anzeigen**
console.log(
"📌 Alle Marker (Debugging):",
markersData.map((m) => m.options.title)
);
setMarkersFunction(markersData);
} catch (error) {
console.error("❌ Fehler beim Abrufen der Daten: ", error);
console.error("❌ Fehler beim Abrufen der Daten in createAndSetDevices.js: ", error);
}
};