feat: WebSocket-Integration mit UI-Reaktivierung für GisStationsStaticDistrict

- WebSocket-Trigger implementiert, der `fetchGisStationsStaticDistrictThunk` ausführt.
- Trigger-Mechanismus über `useState` (`triggerUpdate`) sorgt für gezielten UI-Re-Render.
- Problem gelöst, dass Redux-Store zwar neue Daten enthielt, aber die UI nicht aktualisiert wurde.
- MapComponent.js und useDynamicDeviceLayers.js entsprechend angepasst.
This commit is contained in:
Ismail Ali
2025-06-09 00:24:33 +02:00
parent fbffc82e1b
commit b067a4c97e
12 changed files with 113 additions and 66 deletions

View File

@@ -82,11 +82,14 @@ import { cleanupMarkers } from "@/utils/common/cleanupMarkers";
import { monitorHeapAndReload } from "@/utils/common/monitorMemory";
import { monitorHeapWithRedux } from "@/utils/common/monitorMemory";
import { io } from "socket.io-client";
import { setGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice.js";
//-----------------------------------------------------------------------------------------------------
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
//-------------------------------
const dispatch = useDispatch();
// useDataUpdater();
const [triggerUpdate, setTriggerUpdate] = useState(false);
const countdown = useSelector(state => state.polylineContextMenu.countdown);
const countdownActive = useSelector(state => state.polylineContextMenu.countdownActive);
@@ -818,9 +821,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
socket.on("GisStationsMeasurementsUpdated", data => {
dispatch(fetchGisStationsMeasurementsThunk(data));
});
socket.on("GisStationsStaticDistrictUpdated", data => {
dispatch(fetchGisStationsStaticDistrictThunk(data));
socket.on("GisStationsStaticDistrictUpdated", () => {
console.log("🛰 WebSocket-Trigger empfangen → Thunk wird erneut ausgeführt");
dispatch(fetchGisStationsStaticDistrictThunk());
console.log("🛰 WebSocket-Trigger empfangen → Trigger wird gesetzt");
setTriggerUpdate(prev => !prev); // Trigger toggeln
});
socket.on("GisStationsStatusDistrictUpdated", data => {
@@ -835,7 +840,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
socket.disconnect();
};
}, [dispatch]);
//--------------------------------------------
useEffect(() => {
console.log("📦 Neue Daten empfangen:", GisStationsStaticDistrict);
}, [GisStationsStaticDistrict]);
const { Points = [] } = useSelector(selectGisStationsStaticDistrict);
useEffect(() => {}, [triggerUpdate]);
//---------------------------------------------
//--------------------------------------------
return (