feat: Geräte-Marker vollständig auf Redux umgestellt

- createAndSetDevices.js angepasst: Datenbezug jetzt nur noch über Redux-Store (Selectoren)
- fetch aus config.js entfernt (keine Verwendung von mapGisStationsStaticDistrictUrl mehr)
- MapComponent.js und useDynamicMarkerLayers.js entsprechend aktualisiert
- Fehlerbehandlung verbessert („Redux enthält keine gültigen Geräte-/Statusdaten“)
- CHANGELOG.md aktualisiert auf Version 1.1.139
This commit is contained in:
ISA
2025-05-22 07:58:55 +02:00
parent 5362cb2605
commit d1ef0b355d
3 changed files with 43 additions and 48 deletions

View File

@@ -2,12 +2,13 @@
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 "../polylines/setupPolylines.js";
import { store } from "../../redux/store.js";
import { updateLineStatus } from "../../redux/slices/lineVisibilitySlice.js";
import { setSelectedDevice, clearSelectedDevice } from "../../redux/slices/selectedDeviceSlice.js";
import { addContextMenuToMarker } from "../contextMenuUtils.js";
import { selectGisStationsStaticDistrict } from "../../redux/slices/webService/gisStationsStaticDistrictSlice.js";
import { selectGisStationsStatusDistrict } from "../../redux/slices/webService/gisStationsStatusDistrictSlice.js";
const determinePriority = (iconPath, priorityConfig) => {
for (let priority of priorityConfig) {
@@ -18,51 +19,27 @@ const determinePriority = (iconPath, priorityConfig) => {
return 5;
};
const fetchJsonSafely = async (url) => {
try {
const response = await fetch(url);
const text = await response.text(); // Erst als Text lesen
try {
return JSON.parse(text); // Falls es JSON ist, parsen
} catch (error) {
console.error(`❌ Fehler beim Parsen der JSON-Daten von ${url}. Antwort:`, text);
return null; // Falls die Antwort HTML ist, keine JSON-Verarbeitung versuchen
}
} catch (error) {
console.error(`❌ Fehler beim Abrufen der Daten von ${url}:`, error);
return null;
}
};
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
try {
let staticDistrictData, statusDistrictData;
const state = store.getState();
const staticDistrictData = selectGisStationsStaticDistrict(state); // { Points: [...] }
const statusDistrictData = selectGisStationsStatusDistrict(state); // [ ... ]
if (config.isMockMode()) {
console.log("⚠️ Mock-API: Geräte-Daten geladen");
staticDistrictData = await fetchJsonSafely(config.mapGisStationsStaticDistrictUrl);
statusDistrictData = await fetchJsonSafely(config.mapGisStationsStatusDistrictUrl);
} else {
staticDistrictData = await fetchJsonSafely(config.mapGisStationsStaticDistrictUrl);
statusDistrictData = await fetchJsonSafely(config.mapGisStationsStatusDistrictUrl);
}
if (!staticDistrictData?.Points || !statusDistrictData?.Statis) {
console.error("❌ Fehlende oder fehlerhafte Daten in API- oder Mock-Response!");
if (!staticDistrictData?.Points?.length || !statusDistrictData?.length) {
console.error("❌ Redux enthält keine gültigen Geräte-/Statusdaten!", {
staticDistrictData,
statusDistrictData,
});
return;
}
const statisMap = new Map(statusDistrictData.Statis.map((s) => [s.IdLD, s]));
const statisMap = new Map(statusDistrictData.map((s) => [s.IdLD, s]));
const allLines = staticDistrictData.Points.filter((station) => station.System === systemId).map((station) => {
store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active }));
return { idLD: station.IdLD, active: station.Active };
});
//console.log("🔄 Alle Linien gespeichert:", allLines);
const activeStations = staticDistrictData.Points.filter((station) => station.System === systemId && station.Active === 1);
const markersData = activeStations.map((station) => {
@@ -85,6 +62,7 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
deviceName: station.Device,
idDevice: station.IdLD, // ✅ Sicherstellen, dass `idDevice` existiert
});
const popupContent = `
<div class="bg-white rounded-lg">
<span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
@@ -92,7 +70,8 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
<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">
${statusDistrictData.Statis.filter((status) => status.IdLD === station.IdLD)
${statusDistrictData
.filter((status) => status.IdLD === station.IdLD)
.reverse()
.map(
(status) => `
@@ -108,18 +87,12 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
`;
marker.bindPopup(popupContent);
// Redux: Gerät setzen
marker.on("mouseover", () => {
//console.log("✅ Gerät erkannt:", station);
store.dispatch(setSelectedDevice({ id: station.IdLD, name: station.Device, area: station.Area_Name }));
marker.openPopup(); // Bestehender Code bleibt erhalten
marker.openPopup();
});
//-----------------------------------
//-----------------------------------
// Variable zum Speichern der hinzugefügten Menüeinträge
let contextMenuItemIds = new Set();
const addDeviceContextMenu = (map, marker) => {
if (map && map.contextmenu) {
if (contextMenuItemIds.size > 0) {
@@ -146,14 +119,12 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
}
};
// `contextmenu`-Event für Marker
marker.on("contextmenu", (event) => {
event.originalEvent?.preventDefault();
marker.openPopup();
addDeviceContextMenu(map, marker);
});
// Menü entfernen, wenn außerhalb des Markers geklickt wird
map.on("click", () => {
if (map.contextmenu && contextMenuItemIds.size > 0) {
contextMenuItemIds.forEach((id) => map.contextmenu.removeItem(id));
@@ -161,8 +132,6 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
}
});
//-----------------------------------
//-----------------------------------
if (typeof marker.bounce === "function" && statis) {
marker.on("add", () => marker.bounce(3));
}
@@ -172,6 +141,6 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
setMarkersFunction(markersData);
} catch (error) {
console.error("❌ Fehler beim Abrufen der Daten in createAndSetDevices.js: ", error);
console.error("❌ Fehler in createAndSetDevices.js (Redux-Version):", error);
}
};