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

feat: WebSocket-Integration mit automatischer UI-Aktualisierung für alle Geräte-Daten

Browse Source 
- WebSocket sendet aktualisierte Webservice-Daten (GisLinesStatus, GisStationsStaticDistrict, GisStationsMeasurements)
- Redux-Thunk wird durch WebSocket ausgelöst → Redux Store aktualisiert
- `useDynamicDeviceLayers` & `createAndSetDevices` reagieren auf neue Redux-Daten
- UI wird nun zuverlässig neu gerendert, wenn sich Marker-Daten ändern
- Verbesserte Stabilität und Konsistenz zwischen Datenquelle, Redux und UI
This commit is contained in:
Ismail Ali
2025-06-09 09:18:43 +02:00
parent b067a4c97e
commit 074a89b77c
4 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/appVersion.js
View File

@@ -1,2 +1,2 @@
// /config/appVersion // /config/appVersion
export const APP_VERSION = "1.1.248"; export const APP_VERSION = "1.1.249";

4
hooks/useDynamicDeviceLayers.js
View File

@@ -6,6 +6,7 @@ import { checkOverlappingMarkers } from "../utils/mapUtils";
import plusRoundIcon from "@/components/icons/devices/overlapping/PlusRoundIcon"; import plusRoundIcon from "@/components/icons/devices/overlapping/PlusRoundIcon";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice.js"; import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice.js";
import { selectGisStationsMeasurements } from "@/redux/slices/webservice/gisStationsMeasurementsSlice.js";
/** /**
* Dynamisch GIS-System-Marker erstellen & Sichtbarkeit steuern. * Dynamisch GIS-System-Marker erstellen & Sichtbarkeit steuern.
@@ -16,6 +17,7 @@ import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisSt
* @returns {{ markerStates, layerRefs }} Alle Marker und Referenzen * @returns {{ markerStates, layerRefs }} Alle Marker und Referenzen
*/ */
const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, priorityConfig, oms) => { const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, priorityConfig, oms) => {
const measurements = useSelector(selectGisStationsMeasurements);
const staticDistrictData = useSelector(selectGisStationsStaticDistrict); const staticDistrictData = useSelector(selectGisStationsStaticDistrict);
const [markerStates, setMarkerStates] = useState({}); const [markerStates, setMarkerStates] = useState({});
const layerRefs = useRef({}); const layerRefs = useRef({});
@@ -57,7 +59,7 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
oms oms
); );
}); });
}, [map, GisSystemStatic, priorityConfig, staticDistrictData]); }, [map, GisSystemStatic, priorityConfig, staticDistrictData, measurements]);
// Sichtbarkeit nach Redux-Status steuern // Sichtbarkeit nach Redux-Status steuern
useEffect(() => { useEffect(() => {

2
utils/devices/createAndSetDevices.js
View File

@@ -32,7 +32,7 @@ export const createAndSetDevices = async (
const state = store.getState(); const state = store.getState();
const staticDistrictData = selectGisStationsStaticDistrict(state); const staticDistrictData = selectGisStationsStaticDistrict(state);
const statusDistrictData = selectGisStationsStatusDistrict(state); const statusDistrictData = selectGisStationsStatusDistrict(state);
const measurementData = measurements ?? selectGisStationsMeasurements(state); const measurementData = selectGisStationsMeasurements(state);
if (!staticDistrictData?.Points?.length || !statusDistrictData?.length) return; if (!staticDistrictData?.Points?.length || !statusDistrictData?.length) return;

2
websocketDump/GisStationsMeasurements.json
View File

@@ -4,7 +4,7 @@
"IdL": 24101, "IdL": 24101,
"IdDP": 3, "IdDP": 3,
"Na": "FBT", "Na": "FBT",
"Val": "7", "Val": "13",
"Unit": "°C", "Unit": "°C",
"Gr": "GMA", "Gr": "GMA",
"Area_Name": "Rastede" "Area_Name": "Rastede"