Linien werden angezeigt aber noch nicht mit Daten von Redux Store sondern direkt fetch Aufruf

components/mainComponent/MapComponent.js

@@ -61,26 +61,54 @@ import { fetchGisStationsStatusDistrictThunk } from "../../redux/thunks/webservi
 import { fetchLocationDevicesThunk } from "../../redux/thunks/database/fetchLocationDevicesThunk";
 import { fetchPriorityConfigThunk } from "../../redux/thunks/database/fetchPriorityConfigThunk";
 import { selectPriorityConfig } from "../../redux/slices/database/priorityConfigSlice";
+import { fetchGisLinesThunk } from "../../redux/thunks/database/fetchGisLinesThunk";
+import { selectGisLines } from "../../redux/slices/database/gisLinesSlice";
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
+  //-------------------------------
   const dispatch = useDispatch();
   const countdown = useSelector((state) => state.polylineContextMenu.countdown);
   const countdownActive = useSelector((state) => state.polylineContextMenu.countdownActive);
   const isPolylineContextMenuOpen = useSelector((state) => state.polylineContextMenu.isOpen);
   const polylineVisible = useSelector(selectPolylineVisible);
-  const { deviceName, setDeviceName } = useMapComponentState();
   const poiTypStatus = useSelector((state) => state.poiTypes.status);
   const isPoiTypLoaded = useSelector((state) => state.poiTypes.status === "succeeded");
-  const [locationDeviceData, setLocationDeviceData] = useState([]);
-
-  const [menuItemAdded, setMenuItemAdded] = useState(false);
-  const [isPopupOpen, setIsPopupOpen] = useState(false);
-
   const statusMeasurements = useSelector((state) => state.gisStationsMeasurements.status);
   const statusSystem = useSelector((state) => state.gisSystemStatic.status);
   const statusStaticDistrict = useSelector((state) => state.gisStationsStaticDistrict.status);
   const statusStatusDistrict = useSelector((state) => state.gisStationsStatusDistrict.status);
   const priorityConfig = useSelector(selectPriorityConfig);
+  const poiLayerVisible = useSelector((state) => state.poiLayerVisible.visible);
+  const zoomTrigger = useSelector((state) => state.zoomTrigger.trigger);
+  const poiReadTrigger = useSelector((state) => state.poiReadFromDbTrigger.trigger);
+  const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict);
+  const GisSystemStatic = useSelector(selectGisSystemStatic);
+  const gisSystemStaticStatus = useSelector((state) => state.gisSystemStatic.status);
+  const polylineEventsDisabled = useSelector((state) => state.polylineEventsDisabled.disabled);
+  const mapLayersVisibility = useSelector(selectMapLayersState) || {};
+  const selectedArea = useSelector((state) => state.selectedArea.area);
+  const linesData = useSelector(selectGisLines);
+  //-------------------------------
+  const { deviceName, setDeviceName } = useMapComponentState();
+  const [locationDeviceData, setLocationDeviceData] = useState([]);
+  const [menuItemAdded, setMenuItemAdded] = useState(false);
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const closePopup = () => setIsPopupOpen(false);
+  const [currentCoordinates, setCurrentCoordinates] = useState("");
+  const [isRightsLoaded, setIsRightsLoaded] = useState(false);
+  const [hasRights, setHasRights] = useState(false);
+  const [AddPoiModalWindowState, setAddPoiModalWindowState] = useState(false);
+  const [userRights, setUserRights] = useState(null);
+  const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false);
+  const [currentPoiData, setCurrentPoiData] = useState(null);
+  const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
+  const [poiTypMap, setPoiTypMap] = useState(new Map());
+  const [showPopup, setShowPopup] = useState(false);
+  const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
+  const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
+  const [map, setMap] = useState(null); // Zustand der Karteninstanz
+  const [oms, setOms] = useState(null); // State für OMS-Instanz
+  const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten
 
   const openPopupWithCoordinates = (e) => {
     const coordinates = `${e.latlng.lat.toFixed(5)}, ${e.latlng.lng.toFixed(5)}`;
@@ -90,29 +118,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     setPopupVisible(true);
   };
 
-  const closePopup = () => setIsPopupOpen(false);
-  const [currentCoordinates, setCurrentCoordinates] = useState("");
-  const poiLayerVisible = useSelector((state) => state.poiLayerVisible.visible);
-  const [isRightsLoaded, setIsRightsLoaded] = useState(false);
-  const [hasRights, setHasRights] = useState(false);
-  const [AddPoiModalWindowState, setAddPoiModalWindowState] = useState(false);
-  const [userRights, setUserRights] = useState(null);
-  const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false);
-  const [currentPoiData, setCurrentPoiData] = useState(null);
-  const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
-  const zoomTrigger = useSelector((state) => state.zoomTrigger.trigger);
-
-  const [poiTypMap, setPoiTypMap] = useState(new Map());
-  const [showPopup, setShowPopup] = useState(false);
-  const poiReadTrigger = useSelector((state) => state.poiReadFromDbTrigger.trigger);
-  const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
-  const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
-  const [map, setMap] = useState(null); // Zustand der Karteninstanz
-  const [oms, setOms] = useState(null); // State für OMS-Instanz
-  const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict);
-  const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten
-  const GisSystemStatic = useSelector(selectGisSystemStatic);
-  const gisSystemStaticStatus = useSelector((state) => state.gisSystemStatic.status);
   // Konstanten für die URLs
   const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl;
   const webserviceGisLinesStatusUrl = config.webserviceGisLinesStatusUrl;
@@ -136,9 +141,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [tkComponentsMarkers, setTkComponentsMarkers] = useState([]);
   //--------------------------------------------
   const [lineStatusData, setLineStatusData] = useState([]);
-  const [linesData, setLinesData] = useState([]);
+
-  const mapLayersVisibility = useSelector(selectMapLayersState) || {};
-  const selectedArea = useSelector((state) => state.selectedArea.area);
   const [linePositions, setLinePositions] = useState([]);
   const { lineColors, tooltipContents } = useLineData(webserviceGisLinesStatusUrl, setLineStatusData);
   const [polylines, setPolylines] = useState([]);
@@ -170,7 +173,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       return [53.111111, 8.4625];
     }
   });
-  const polylineEventsDisabled = useSelector((state) => state.polylineEventsDisabled.disabled);
+
   const allMarkers = [
     ...talasMarkers,
     ...eciMarkers,

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.129";
+export const APP_VERSION = "1.1.130";

redux/slices/database/gisLinesSlice.js

@@ -0,0 +1,29 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { fetchGisLinesThunk } from "../../thunks/database/fetchGisLinesThunk";
+
+const gisLinesSlice = createSlice({
+  name: "gisLines",
+  initialState: {
+    data: [],
+    status: "idle",
+    error: null,
+  },
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchGisLinesThunk.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchGisLinesThunk.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.data = action.payload;
+      })
+      .addCase(fetchGisLinesThunk.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.error.message;
+      });
+  },
+});
+
+export default gisLinesSlice.reducer;
+export const selectGisLines = (state) => state.gisLines.data;

redux/store.js

@@ -23,6 +23,7 @@ import selectedAreaReducer from "./slices/selectedAreaSlice";
 import zoomTriggerReducer from "./slices/zoomTriggerSlice";
 import urlParameterReducer from "./slices/urlParameterSlice";
 import priorityConfigReducer from "./slices/database/priorityConfigSlice";
+import gisLinesReducer from "./slices/database/gisLinesSlice";
 
 export const store = configureStore({
   reducer: {
@@ -48,5 +49,6 @@ export const store = configureStore({
     zoomTrigger: zoomTriggerReducer,
     urlParameter: urlParameterReducer,
     priorityConfig: priorityConfigReducer,
+    gisLines: gisLinesReducer,
   },
 });

redux/thunks/database/fetchGisLinesThunk.js

@@ -0,0 +1,6 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { fetchGisLinesService } from "../../../services/database/fetchGisLinesService";
+
+export const fetchGisLinesThunk = createAsyncThunk("gisLines/fetch", async () => {
+  return await fetchGisLinesService();
+});

services/database/fetchGisLinesService.js

@@ -0,0 +1,7 @@
+// /services/database/fetchLocationDevicesService.js
+
+export const fetchGisLinesService = async () => {
+  const response = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
+  if (!response.ok) throw new Error("Fehler beim Laden der Linien-Daten");
+  return await response.json();
+};