diff --git a/components/DataSheet.js b/components/DataSheet.js index 1e5733729..784fe7e7b 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -20,8 +20,7 @@ function DataSheet() { const [mapLayersVisibility, setMapLayersVisibility] = useRecoilState(mapLayersState); const [stationListing, setStationListing] = useState([]); const [systemListing, setSystemListing] = useState([]); - //const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState); - const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict); + const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict) || []; const GisSystemStatic = useRecoilValue(gisSystemStaticState); const setZoomTrigger = useSetRecoilState(zoomTriggerState); const dispatch = useDispatch(); @@ -76,13 +75,15 @@ function DataSheet() { const allowedSystems = new Set(GisSystemStatic.filter((system) => system.Allow === 1).map((system) => system.IdSystem)); const seenNames = new Set(); - const filteredAreas = GisStationsStaticDistrict.filter((item) => { - const isUnique = !seenNames.has(item.Area_Name) && allowedSystems.has(item.System); - if (isUnique) { - seenNames.add(item.Area_Name); - } - return isUnique; - }); + const filteredAreas = Array.isArray(GisStationsStaticDistrict) + ? GisStationsStaticDistrict.filter((item) => { + const isUnique = !seenNames.has(item.Area_Name) && allowedSystems.has(item.System); + if (isUnique) { + seenNames.add(item.Area_Name); + } + return isUnique; + }) + : []; setStationListing( filteredAreas.map((area, index) => ({ diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js index 159960049..8fc400180 100644 --- a/components/mainComponent/MapComponent.js +++ b/components/mainComponent/MapComponent.js @@ -1,4 +1,4 @@ -// components/MapComponent.js +// components/mainComponent/MapComponent.js import React, { useEffect, useRef, useState, useCallback } from "react"; import L from "leaflet"; import "leaflet/dist/leaflet.css"; @@ -40,12 +40,11 @@ import { updateLocation } from "../../utils/updateBereichUtil.js"; import { initGeocoderFeature } from "../features/GeocoderFeature.js"; //-------------------------------------------- //import { currentPoiState } from "../redux/slices/currentPoiSlice.js"; -import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../../redux/slices/webService/gisStationsStaticDistrictSlice.js"; + import { mapIdState, userIdState } from "../../redux/slices/urlParameterSlice.js"; import { poiLayerVisibleState } from "../../redux/slices/poiLayerVisibleSlice.js"; import { selectedPoiState } from "../../redux/slices/selectedPoiSlice.js"; import { poiReadFromDbTriggerAtom } from "../../redux/slices/poiReadFromDbTriggerSlice.js"; -import { gisStationsStaticDistrictState } from "../../redux/slices/webService/gisStationsStaticDistrictSlice.js"; import { gisSystemStaticState } from "../../redux/slices/webService/gisSystemStaticSlice.js"; import { mapLayersState } from "../../redux/slices/mapLayersSlice.js"; import { selectedAreaState } from "../../redux/slices/selectedAreaSlice.js"; @@ -70,6 +69,8 @@ import { fetchGisSystemStatic } from "../../services/api/fetchGisSystemStatic.js import { usePolylineTooltipLayer } from "../../hooks/usePolylineTooltipLayer.js"; import { selectPolylineVisible, setPolylineVisible } from "../../redux/slices/polylineLayerVisibleSlice.js"; import { useInitLocationDevices } from "./hooks/useInitLocationDevices"; +import { useInitGisStationsStaticDistrict } from "./hooks/useInitGisStationsStaticDistrict"; +import { selectGisStationsStaticDistrict } from "../../redux/slices/webService/gisStationsStaticDistrictSlice"; const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const dispatch = useDispatch(); @@ -999,7 +1000,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { //---------------------------------------------- // speichere location devices in redux store useInitLocationDevices(); + useInitGisStationsStaticDistrict(); //-------------------------------------- + useEffect(() => { + console.log("GisStationsStaticDistrict aus Redux:", GisStationsStaticDistrict); + }, [GisStationsStaticDistrict]); + //--------------------------------------- return ( <> diff --git a/components/mainComponent/hooks/useAutoRefreshLocationDevices.js b/components/mainComponent/hooks/useAutoRefreshLocationDevices.js new file mode 100644 index 000000000..df25ec554 --- /dev/null +++ b/components/mainComponent/hooks/useAutoRefreshLocationDevices.js @@ -0,0 +1,38 @@ +// components/mainComponent/hooks/useAutoRefreshLocationDevices.js +/* + Das ist erstmal nur so da, falls es gebraucht wird +Diese datei ist zum automatischen aktualisieren der LocationDevices gedacht +jeder 20 Sekunden wird die Funktion fetchLocationDevicesFromDB() aufgerufen +Daten werden dann in der Redux State gespeichert +*/ + +import { useEffect } from "react"; +import { useDispatch } from "react-redux"; +import { fetchLocationDevicesFromDB } from "../../../redux/slices/db/locationDevicesFromDBSlice"; + +export const useAutoRefreshLocationDevices = (interval = 20000) => { + // alle 20 Sekunden + const dispatch = useDispatch(); + + useEffect(() => { + const fetchData = () => { + dispatch(fetchLocationDevicesFromDB()); + }; + + fetchData(); // Sofort beim Start holen + + const intervalId = setInterval(fetchData, interval); + + return () => clearInterval(intervalId); // Cleanup beim Unmount + }, [dispatch, interval]); +}; + +/* +In MapComponent.js einbinden +import { useAutoRefreshLocationDevices } from "./hooks/useAutoRefreshLocationDevices"; + +const MapComponent = () => { + useAutoRefreshLocationDevices(); + + +*/ diff --git a/components/mainComponent/hooks/useInitGisStationsStaticDistrict.js b/components/mainComponent/hooks/useInitGisStationsStaticDistrict.js new file mode 100644 index 000000000..b53d554ad --- /dev/null +++ b/components/mainComponent/hooks/useInitGisStationsStaticDistrict.js @@ -0,0 +1,12 @@ +// /components/mainComponent/hooks/useInitGisStationsStaticDistrict.js +import { useEffect } from "react"; +import { useDispatch } from "react-redux"; +import { fetchGisStationsStaticDistrictFromWebService } from "../../../redux/slices/webService/gisStationsStaticDistrictSlice"; + +export const useInitGisStationsStaticDistrict = () => { + const dispatch = useDispatch(); + + useEffect(() => { + dispatch(fetchGisStationsStaticDistrictFromWebService()); + }, [dispatch]); +}; diff --git a/components/mainComponent/hooks/useInitLocationDevices.js b/components/mainComponent/hooks/useInitLocationDevices.js index 3a5ce68dc..9e01183b4 100644 --- a/components/mainComponent/hooks/useInitLocationDevices.js +++ b/components/mainComponent/hooks/useInitLocationDevices.js @@ -1,3 +1,4 @@ +// /components/mainComponent/hooks/useInitLocationDevices.js import { useEffect } from "react"; import { useDispatch } from "react-redux"; import { fetchLocationDevicesFromDB } from "../../../redux/slices/db/locationDevicesFromDBSlice"; diff --git a/config/appVersion.js b/config/appVersion.js index 357f37596..7b2a28234 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.23"; +export const APP_VERSION = "1.1.24"; diff --git a/redux/api/fromDB/locationDevicesLoader.js b/redux/api/fromDB/fetchLocationDevices.js similarity index 84% rename from redux/api/fromDB/locationDevicesLoader.js rename to redux/api/fromDB/fetchLocationDevices.js index a7c4c5854..53595dbdb 100644 --- a/redux/api/fromDB/locationDevicesLoader.js +++ b/redux/api/fromDB/fetchLocationDevices.js @@ -1,4 +1,4 @@ -// /redux/api/fromDB/locationDevicesLoader.js +// /redux/api/fromDB/fetchLocationDevices.js export const fetchLocationDevices = async () => { const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices"); if (!response.ok) { diff --git a/redux/api/fromWebService/fetchGisStationsStaticDistrict.js b/redux/api/fromWebService/fetchGisStationsStaticDistrict.js new file mode 100644 index 000000000..d45e0b592 --- /dev/null +++ b/redux/api/fromWebService/fetchGisStationsStaticDistrict.js @@ -0,0 +1,10 @@ +// /redux/api/fromWebService/fetchGisStationsStaticDistrict.js +import { mapGisStationsStaticDistrictUrl } from "../../../config/config"; + +export const fetchGisStationsStaticDistrict = async () => { + const response = await fetch(mapGisStationsStaticDistrictUrl); + if (!response.ok) { + throw new Error("GisStationsStaticDistrict konnte nicht geladen werden"); + } + return await response.json(); +}; diff --git a/redux/slices/db/locationDevicesFromDBSlice.js b/redux/slices/db/locationDevicesFromDBSlice.js index efff363f9..bc36b7b70 100644 --- a/redux/slices/db/locationDevicesFromDBSlice.js +++ b/redux/slices/db/locationDevicesFromDBSlice.js @@ -1,6 +1,6 @@ // /redux/slices/db/locationDevicesFromDBSlice.js import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; -import { fetchLocationDevices } from "../../api/fromDB/locationDevicesLoader"; +import { fetchLocationDevices } from "../../api/fromDB/fetchLocationDevices"; export const fetchLocationDevicesFromDB = createAsyncThunk("locationDevicesFromDB/fetchLocationDevicesFromDB", async () => { return fetchLocationDevices(); diff --git a/redux/slices/webService/gisStationsStaticDistrictSlice.js b/redux/slices/webService/gisStationsStaticDistrictSlice.js index 13986b547..7c7780cd6 100644 --- a/redux/slices/webService/gisStationsStaticDistrictSlice.js +++ b/redux/slices/webService/gisStationsStaticDistrictSlice.js @@ -1,23 +1,35 @@ // /redux/slices/webService/gisStationsStaticDistrictSlice.js -import { createSlice } from "@reduxjs/toolkit"; +import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; +import { fetchGisStationsStaticDistrict } from "../../api/fromWebService/fetchGisStationsStaticDistrict"; -const initialState = []; +export const fetchGisStationsStaticDistrictFromWebService = createAsyncThunk("gisStationsStaticDistrict/fetchGisStationsStaticDistrictFromWebService", async () => { + return fetchGisStationsStaticDistrict(); +}); const gisStationsStaticDistrictSlice = createSlice({ name: "gisStationsStaticDistrict", - initialState, - reducers: { - setGisStationsStaticDistrict: (state, action) => { - return action.payload; - }, - clearGisStationsStaticDistrict: () => { - return []; - }, + initialState: { + data: [], + status: "idle", + error: null, + }, + reducers: {}, + extraReducers: (builder) => { + builder + .addCase(fetchGisStationsStaticDistrictFromWebService.pending, (state) => { + state.status = "loading"; + }) + .addCase(fetchGisStationsStaticDistrictFromWebService.fulfilled, (state, action) => { + state.status = "succeeded"; + state.data = action.payload; + }) + .addCase(fetchGisStationsStaticDistrictFromWebService.rejected, (state, action) => { + state.status = "failed"; + state.error = action.error.message; + }); }, }); -export const { setGisStationsStaticDistrict, clearGisStationsStaticDistrict } = gisStationsStaticDistrictSlice.actions; - -export const selectGisStationsStaticDistrict = (state) => state.gisStationsStaticDistrict; +export const selectGisStationsStaticDistrict = (state) => state.gisStationsStaticDistrict.data; export default gisStationsStaticDistrictSlice.reducer; diff --git a/redux/store.js b/redux/store.js index 5894f6049..742678a30 100644 --- a/redux/store.js +++ b/redux/store.js @@ -1,16 +1,16 @@ import { configureStore } from "@reduxjs/toolkit"; import lineVisibilityReducer from "./slices/lineVisibilitySlice"; import currentPoiReducer from "./slices/currentPoiSlice"; -import gisStationsStaticDistrictReducer from "./slices/webService/gisStationsStaticDistrictSlice"; import polylineLayerVisibleReducer from "./slices/polylineLayerVisibleSlice"; import locationDevicesFromDBReducer from "./slices/db/locationDevicesFromDBSlice"; +import gisStationsStaticDistrictReducer from "./slices/webService/gisStationsStaticDistrictSlice"; export const store = configureStore({ reducer: { lineVisibility: lineVisibilityReducer, currentPoi: currentPoiReducer, - gisStationsStaticDistrict: gisStationsStaticDistrictReducer, polylineLayerVisible: polylineLayerVisibleReducer, locationDevicesFromDB: locationDevicesFromDBReducer, + gisStationsStaticDistrict: gisStationsStaticDistrictReducer, }, });