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:
26
CHANGELOG.md
26
CHANGELOG.md
@@ -4,6 +4,32 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## [1.1.139] – 2025-05-22
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
|
||||||
|
- 🔁 Geräte-/Stationsanzeige vollständig auf **Redux-Store** umgestellt:
|
||||||
|
- `createAndSetDevices.js` verwendet jetzt nur noch Redux-Selectoren (`selectGisStationsStaticDistrict`, `selectGisStationsStatusDistrict`)
|
||||||
|
- Entfernt: direkter `fetch(...)`-Zugriff über `config.js`
|
||||||
|
- Kein Zugriff mehr auf `mapGisStationsStaticDistrictUrl` / `StatusDistrictUrl`
|
||||||
|
|
||||||
|
### Fixed
|
||||||
|
|
||||||
|
- ✅ Fehler "❌ Redux enthält keine gültigen Geräte-/Statusdaten!" gelöst durch korrekte Abfrage `state.gisStationsStaticDistrict.data.Points`
|
||||||
|
- ✅ Marker erscheinen wieder zuverlässig durch saubere Trennung von Datenquelle und Darstellung
|
||||||
|
|
||||||
|
### Architecture
|
||||||
|
|
||||||
|
- 🧠 Marker-Erstellung erfolgt über `createAndSetDevices()` → Redux-Daten → Leaflet Marker
|
||||||
|
- 🔁 `MapComponent.js` und `useDynamicMarkerLayers.js` angepasst auf neue Redux-Architektur
|
||||||
|
- 🎯 Reduziert doppelte Datenhaltung, zentralisiert Geräte-Logik
|
||||||
|
|
||||||
|
### Version
|
||||||
|
|
||||||
|
- 📦 Version erhöht auf **1.1.139**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## [1.1.136] – 2025-05-21
|
## [1.1.136] – 2025-05-21
|
||||||
|
|
||||||
### Fixed
|
### Fixed
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
// /config/appVersion
|
// /config/appVersion
|
||||||
export const APP_VERSION = "1.1.139";
|
export const APP_VERSION = "1.1.140";
|
||||||
|
|||||||
@@ -2,12 +2,13 @@
|
|||||||
import L from "leaflet";
|
import L from "leaflet";
|
||||||
import "leaflet.smooth_marker_bouncing";
|
import "leaflet.smooth_marker_bouncing";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
import * as config from "../../config/config.js";
|
|
||||||
import { disablePolylineEvents, enablePolylineEvents } from "../polylines/setupPolylines.js";
|
import { disablePolylineEvents, enablePolylineEvents } from "../polylines/setupPolylines.js";
|
||||||
import { store } from "../../redux/store.js";
|
import { store } from "../../redux/store.js";
|
||||||
import { updateLineStatus } from "../../redux/slices/lineVisibilitySlice.js";
|
import { updateLineStatus } from "../../redux/slices/lineVisibilitySlice.js";
|
||||||
import { setSelectedDevice, clearSelectedDevice } from "../../redux/slices/selectedDeviceSlice.js";
|
import { setSelectedDevice, clearSelectedDevice } from "../../redux/slices/selectedDeviceSlice.js";
|
||||||
import { addContextMenuToMarker } from "../contextMenuUtils.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) => {
|
const determinePriority = (iconPath, priorityConfig) => {
|
||||||
for (let priority of priorityConfig) {
|
for (let priority of priorityConfig) {
|
||||||
@@ -18,51 +19,27 @@ const determinePriority = (iconPath, priorityConfig) => {
|
|||||||
return 5;
|
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) => {
|
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
|
||||||
try {
|
try {
|
||||||
let staticDistrictData, statusDistrictData;
|
const state = store.getState();
|
||||||
|
const staticDistrictData = selectGisStationsStaticDistrict(state); // { Points: [...] }
|
||||||
|
const statusDistrictData = selectGisStationsStatusDistrict(state); // [ ... ]
|
||||||
|
|
||||||
if (config.isMockMode()) {
|
if (!staticDistrictData?.Points?.length || !statusDistrictData?.length) {
|
||||||
console.log("⚠️ Mock-API: Geräte-Daten geladen");
|
console.error("❌ Redux enthält keine gültigen Geräte-/Statusdaten!", {
|
||||||
|
staticDistrictData,
|
||||||
staticDistrictData = await fetchJsonSafely(config.mapGisStationsStaticDistrictUrl);
|
statusDistrictData,
|
||||||
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!");
|
|
||||||
return;
|
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) => {
|
const allLines = staticDistrictData.Points.filter((station) => station.System === systemId).map((station) => {
|
||||||
store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active }));
|
store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active }));
|
||||||
return { 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 activeStations = staticDistrictData.Points.filter((station) => station.System === systemId && station.Active === 1);
|
||||||
|
|
||||||
const markersData = activeStations.map((station) => {
|
const markersData = activeStations.map((station) => {
|
||||||
@@ -85,6 +62,7 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
|
|||||||
deviceName: station.Device,
|
deviceName: station.Device,
|
||||||
idDevice: station.IdLD, // ✅ Sicherstellen, dass `idDevice` existiert
|
idDevice: station.IdLD, // ✅ Sicherstellen, dass `idDevice` existiert
|
||||||
});
|
});
|
||||||
|
|
||||||
const popupContent = `
|
const popupContent = `
|
||||||
<div class="bg-white rounded-lg">
|
<div class="bg-white rounded-lg">
|
||||||
<span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
|
<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.Area_Short}</strong> (${station.Area_Name})</span><br>
|
||||||
<span class="text-gray-800"><strong>${station.Location_Short}</strong> (${station.Location_Name})</span>
|
<span class="text-gray-800"><strong>${station.Location_Short}</strong> (${station.Location_Name})</span>
|
||||||
<div class="mt-2">
|
<div class="mt-2">
|
||||||
${statusDistrictData.Statis.filter((status) => status.IdLD === station.IdLD)
|
${statusDistrictData
|
||||||
|
.filter((status) => status.IdLD === station.IdLD)
|
||||||
.reverse()
|
.reverse()
|
||||||
.map(
|
.map(
|
||||||
(status) => `
|
(status) => `
|
||||||
@@ -108,18 +87,12 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
|
|||||||
`;
|
`;
|
||||||
marker.bindPopup(popupContent);
|
marker.bindPopup(popupContent);
|
||||||
|
|
||||||
// Redux: Gerät setzen
|
|
||||||
marker.on("mouseover", () => {
|
marker.on("mouseover", () => {
|
||||||
//console.log("✅ Gerät erkannt:", station);
|
|
||||||
store.dispatch(setSelectedDevice({ id: station.IdLD, name: station.Device, area: station.Area_Name }));
|
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();
|
let contextMenuItemIds = new Set();
|
||||||
|
|
||||||
const addDeviceContextMenu = (map, marker) => {
|
const addDeviceContextMenu = (map, marker) => {
|
||||||
if (map && map.contextmenu) {
|
if (map && map.contextmenu) {
|
||||||
if (contextMenuItemIds.size > 0) {
|
if (contextMenuItemIds.size > 0) {
|
||||||
@@ -146,14 +119,12 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// `contextmenu`-Event für Marker
|
|
||||||
marker.on("contextmenu", (event) => {
|
marker.on("contextmenu", (event) => {
|
||||||
event.originalEvent?.preventDefault();
|
event.originalEvent?.preventDefault();
|
||||||
marker.openPopup();
|
marker.openPopup();
|
||||||
addDeviceContextMenu(map, marker);
|
addDeviceContextMenu(map, marker);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Menü entfernen, wenn außerhalb des Markers geklickt wird
|
|
||||||
map.on("click", () => {
|
map.on("click", () => {
|
||||||
if (map.contextmenu && contextMenuItemIds.size > 0) {
|
if (map.contextmenu && contextMenuItemIds.size > 0) {
|
||||||
contextMenuItemIds.forEach((id) => map.contextmenu.removeItem(id));
|
contextMenuItemIds.forEach((id) => map.contextmenu.removeItem(id));
|
||||||
@@ -161,8 +132,6 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
//-----------------------------------
|
|
||||||
//-----------------------------------
|
|
||||||
if (typeof marker.bounce === "function" && statis) {
|
if (typeof marker.bounce === "function" && statis) {
|
||||||
marker.on("add", () => marker.bounce(3));
|
marker.on("add", () => marker.bounce(3));
|
||||||
}
|
}
|
||||||
@@ -172,6 +141,6 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
|
|||||||
|
|
||||||
setMarkersFunction(markersData);
|
setMarkersFunction(markersData);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("❌ Fehler beim Abrufen der Daten in createAndSetDevices.js: ", error);
|
console.error("❌ Fehler in createAndSetDevices.js (Redux-Version):", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user