refactor: Recoil durch Redux ersetzt und Fehler behoben

- Entfernt `useRecoilState(mapLayersState)` und durch `useSelector(selectMapLayersState)` ersetzt.
- Alle `setMapLayersVisibility` durch `dispatch(setLayerVisibility(...))` ersetzt.
- LocalStorage-Handling für `mapLayersVisibility` mit Redux umgesetzt.
- Fehler "setMapLayersVisibility is not defined" behoben, indem `dispatch` verwendet wurde.
- Sicherstellung, dass `mapLayersSlice` im Redux-Store registriert ist.

.env.local

@@ -7,12 +7,12 @@ DB_NAME=talas_v5
 DB_PORT=3306
 
 # Public Settings (Client braucht IP/Domain)
-NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"   # oder evtl. später https://nodemap.firma.de
+NEXT_PUBLIC_SERVER_URL="http://192.168.10.33"   # oder evtl. später https://nodemap.firma.de
 NEXT_PUBLIC_ENABLE_GEOCODER=true
 NEXT_PUBLIC_USE_MOCK_API=false
 NEXT_PUBLIC_DEBUG_LOG=true
 
 # für Polylines/kabelstecken -> in Konextmenü "Station öffnen" "
-NEXT_PUBLIC_BASE_URL=http://10.10.0.70/talas5/devices/
+NEXT_PUBLIC_BASE_URL=http://192.168.10.33/talas5/devices/
-NEXT_PUBLIC_API_BASE_URL=http://10.10.0.70/talas5/ClientData/WebServiceMap.asmx
+NEXT_PUBLIC_API_BASE_URL=http://192.168.10.33/talas5/ClientData/WebServiceMap.asmx
-NEXT_PUBLIC_API_PORT_3000=http://10.10.0.70:3000
+NEXT_PUBLIC_API_PORT_3000=http://192.168.10.33:3000

components/DataSheet.js

@@ -17,11 +17,13 @@ import { useInitGisStationsStatic } from "../components/mainComponent/hooks/webS
 import { fetchGisStationsStatic, selectGisStationsStatic } from "../redux/slices/webService/gisStationsStaticSlice";
 import { selectGisStationsStaticDistrict } from "../redux/slices/webService/gisStationsStaticDistrictSlice";
 
+import { selectMapLayersState, setLayerVisibility } from "../redux/slices/mapLayersSlice";
+
 function DataSheet() {
   const [editMode, setEditMode] = useState(false); // Zustand für editMode
   const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
   const setSelectedArea = useSetRecoilState(selectedAreaState);
-  const [mapLayersVisibility, setMapLayersVisibility] = useRecoilState(mapLayersState);
+  const mapLayersVisibility = useSelector(selectMapLayersState);
   const [stationListing, setStationListing] = useState([]);
   const [systemListing, setSystemListing] = useState([]);
   const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict) || [];
@@ -38,13 +40,8 @@ function DataSheet() {
     localStorage.setItem("polylineVisible", checked);
 
     if (checked) {
-      // Wenn Kabelstrecken aktiviert wird, TALAS automatisch auch aktivieren
+      dispatch(setLayerVisibility({ layer: "TALAS", visibility: true }));
-      const newMapLayersVisibility = {
+      localStorage.setItem("mapLayersVisibility", JSON.stringify({ ...mapLayersVisibility, TALAS: true }));
-        ...mapLayersVisibility,
-        TALAS: true,
-      };
-      setMapLayersVisibility(newMapLayersVisibility);
-      localStorage.setItem("mapLayersVisibility", JSON.stringify(newMapLayersVisibility));
     }
   };
 
@@ -61,15 +58,19 @@ function DataSheet() {
       dispatch(setPolylineVisible(storedPolylineVisible === "true"));
     }
 
+    // Layer-Sichtbarkeiten aus localStorage laden
     const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility");
     if (storedMapLayersVisibility) {
-      setMapLayersVisibility(JSON.parse(storedMapLayersVisibility));
+      const parsedVisibility = JSON.parse(storedMapLayersVisibility);
+      Object.keys(parsedVisibility).forEach((key) => {
+        dispatch(setLayerVisibility({ layer: key, visibility: parsedVisibility[key] }));
+      });
     }
 
     // EditMode lesen
     const storedEditMode = localStorage.getItem("editMode");
     setEditMode(storedEditMode === "true");
-  }, [setPoiVisible, setMapLayersVisibility]);
+  }, [setPoiVisible, dispatch]); // ✅ `setMapLayersVisibility` entfernt
 
   const handleAreaChange = (event) => {
     const selectedIndex = event.target.options.selectedIndex;
@@ -122,11 +123,8 @@ function DataSheet() {
     if (editMode) return;
     const { checked } = event.target;
 
-    setMapLayersVisibility((prev) => {
+    dispatch(setLayerVisibility({ layer: key, visibility: checked }));
-      const newState = { ...prev, [key]: checked };
+    localStorage.setItem("mapLayersVisibility", JSON.stringify({ ...mapLayersVisibility, [key]: checked }));
-      localStorage.setItem("mapLayersVisibility", JSON.stringify(newState));
-      return newState;
-    });
 
     setTimeout(() => {
       const event = new Event("visibilityChanged");

components/mainComponent/MapComponent.js

@@ -44,7 +44,7 @@ import { poiLayerVisibleState } from "../../redux/slices/poiLayerVisibleSlice.js
 import { selectedPoiState } from "../../redux/slices/selectedPoiSlice.js";
 import { poiReadFromDbTriggerAtom } from "../../redux/slices/poiReadFromDbTriggerSlice.js";
 import { gisSystemStaticState } from "../../redux/slices/webService/gisSystemStaticSlice.js";
-import { mapLayersState } from "../../redux/slices/mapLayersSlice.js";
+import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
 import { selectedAreaState } from "../../redux/slices/selectedAreaSlice.js";
 import { zoomTriggerState } from "../../redux/slices/zoomTriggerSlice.js";
 import { polylineEventsDisabledState } from "../../redux/slices/polylineEventsDisabledSlice.js";
@@ -181,7 +181,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //--------------------------------------------
   const [lineStatusData, setLineStatusData] = useState([]);
   const [linesData, setLinesData] = useState([]);
-  const mapLayersVisibility = useRecoilValue(mapLayersState);
+  const mapLayersVisibility = useSelector(selectMapLayersState) || {};
   const selectedArea = useRecoilValue(selectedAreaState);
 
   const [linePositions, setLinePositions] = useState([]);

components/pois/PoiUpdateModal.js

@@ -5,16 +5,19 @@ import { useRecoilState } from "recoil";
 import { selectedPoiState } from "../../redux/slices/selectedPoiSlice";
 import { currentPoiState } from "../../redux/slices/currentPoiSlice";
 import { mapLayersState } from "../../redux/slices/mapLayersSlice";
-import { selectCurrentPoi } from "../../redux/slices/currentPoiSlice";
+
 import { fetchLocationDevicesFromDB } from "../../redux/slices/db/locationDevicesFromDBSlice";
 import { useSelector, useDispatch } from "react-redux";
 
+import { selectCurrentPoi } from "../../redux/slices/currentPoiSlice";
+import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
+
 const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
   const dispatch = useDispatch();
 
   const currentPoi = useSelector(selectCurrentPoi);
-  const selectedPoi = useRecoilState(selectedPoiState);
+  const selectedPoi = useSelector(selectCurrentPoi);
-  const [mapLayersVisibility] = useRecoilState(mapLayersState);
+  const mapLayersVisibility = useSelector(selectMapLayersState);
 
   const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
   const [name, setName] = useState(poiData ? poiData.name : "");

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.54";
+export const APP_VERSION = "1.1.55";

redux/slices/mapLayersSlice.js

@@ -1,24 +1,43 @@
 // redux/slices/mapLayersSlice.js
-import { atom } from "recoil";
+import { createSlice } from "@reduxjs/toolkit";
 
-export const mapLayersState = atom({
+const initialState = {
-  key: "mapLayersState", // Eindeutiger Schlüssel für das Atom
+  TALAS: true,
-  default: {
+  ECI: true,
-    // Standardwerte für jeden Layer
+  ULAF: true,
-    TALAS: true,
+  GSMModem: true,
-    ECI: true,
+  CiscoRouter: true,
-    ULAF: true,
+  WAGO: true,
-    GSMModem: true,
+  Siemens: true,
-    CiscoRouter: true,
+  OTDR: true,
-    WAGO: true,
+  WDM: true,
-    Siemens: true,
+  GMA: true,
-    OTDR: true,
+  Messstellen: true,
-    WDM: true,
+  TALASICL: true,
-    GMA: true,
+  DAUZ: true,
-    Messstellen: true,
+  SMSFunkmodem: true,
-    TALASICL: true,
+  Sonstige: true,
-    DAUZ: true,
+};
-    SMSFunkmodem: true,
+
-    Sonstige: true,
+const mapLayersSlice = createSlice({
+  name: "mapLayers",
+  initialState,
+  reducers: {
+    toggleLayer: (state, action) => {
+      const layer = action.payload;
+      if (state[layer] !== undefined) {
+        state[layer] = !state[layer]; // Toggle Sichtbarkeit
+      }
+    },
+    setLayerVisibility: (state, action) => {
+      const { layer, visibility } = action.payload;
+      if (state[layer] !== undefined) {
+        state[layer] = visibility;
+      }
+    },
   },
 });
+
+export const { toggleLayer, setLayerVisibility } = mapLayersSlice.actions;
+export const selectMapLayersState = (state) => state.mapLayers || initialState;
+export default mapLayersSlice.reducer;

redux/store.js

@@ -14,6 +14,7 @@ import addPoiOnPolylineReducer from "./slices/addPoiOnPolylineSlice";
 import polylineContextMenuReducer from "./slices/polylineContextMenuSlice";
 import selectedPoiReducer from "./slices/selectedPoiSlice";
 import selectedDeviceReducer from "./slices/selectedDeviceSlice";
+import mapLayersReducer from "./slices/mapLayersSlice";
 
 export const store = configureStore({
   reducer: {
@@ -31,5 +32,6 @@ export const store = configureStore({
     polylineContextMenu: polylineContextMenuReducer,
     selectedPoi: selectedPoiReducer,
     selectedDevice: selectedDeviceReducer,
+    mapLayers: mapLayersReducer,
   },
 });

utils/createAndSetDevices.js

@@ -129,31 +129,22 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
           }
 
           // Menüeinträge hinzufügen
-          const editItem = map.contextmenu.addItem({
-            text: "Gerät bearbeiten",
-            icon: "img/edit.png",
-            callback: () => console.log(`Bearbeite Gerät: ${marker.options.deviceName}`),
-          });
-
-          const deleteItem = map.contextmenu.addItem({
-            text: "Gerät entfernen",
-            icon: "img/delete.png",
-            callback: () => console.log(`Entferne Gerät: ${marker.options.deviceName}`),
-          });
 
           const separator = map.contextmenu.addItem({ separator: true });
 
           const detailsItem = map.contextmenu.addItem({
-            text: "Details anzeigen",
+            text: "Station öffnen (Tab)",
-            icon: "img/details.png",
+            icon: "/img/screen_new.png",
-            callback: () => console.log(`Details für Gerät: ${marker.options.deviceName}`),
+            callback: (e) => {
+              const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${station.IdLD}`;
+              window.open(link, "_blank");
+            },
           });
 
           // IDs speichern
-          contextMenuItemIds.add(editItem);
-          contextMenuItemIds.add(deleteItem);
-          contextMenuItemIds.add(separator);
           contextMenuItemIds.add(detailsItem);
+
+          contextMenuItemIds.add(separator);
         }
       };