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.

components/mainComponent/MapComponent.js

@@ -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 (

components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js

@@ -178,6 +178,19 @@ function MapLayersControlPanel() {
       console.log("📌 stationListing aktualisiert:", filteredAreas);
     }
   }, [GisStationsStaticDistrict, GisSystemStatic]);
+  //---------------------------
+  useEffect(() => {
+    const next = (GisStationsStaticDistrict.Points || []).map(p => p.Area_Name).join("|");
+    const current = stationListing.map(s => s.name).join("|");
+    if (next !== current) {
+      setStationListing(
+        GisStationsStaticDistrict.Points.map((area, index) => ({
+          id: index + 1,
+          name: area.Area_Name,
+        }))
+      );
+    }
+  }, [GisStationsStaticDistrict]);
 
   //---------------------------
   return (
@@ -194,9 +207,9 @@ function MapLayersControlPanel() {
             style={{ minWidth: "150px", maxWidth: "200px" }}
           >
             <option value="Station wählen">Station wählen</option>
-            {stationListing.map(station => (
-              <option key={station.id} value={station.id}>
-                {station.name}
+            {(GisStationsStaticDistrict.Points || []).map((item, index) => (
+              <option key={index} value={item.IdLD}>
+                {item.Area_Name}
               </option>
             ))}
           </select>