diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js index 6453c6635..e16a6f426 100644 --- a/components/mainComponent/MapComponent.js +++ b/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, diff --git a/config/appVersion.js b/config/appVersion.js index 3c64022da..a46797e97 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.129"; +export const APP_VERSION = "1.1.130"; diff --git a/redux/slices/database/gisLinesSlice.js b/redux/slices/database/gisLinesSlice.js new file mode 100644 index 000000000..e77147968 --- /dev/null +++ b/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; diff --git a/redux/store.js b/redux/store.js index 2b1e0cc58..8577fa1cb 100644 --- a/redux/store.js +++ b/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, }, }); diff --git a/redux/thunks/database/fetchGisLinesThunk.js b/redux/thunks/database/fetchGisLinesThunk.js new file mode 100644 index 000000000..7bc308315 --- /dev/null +++ b/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(); +}); diff --git a/services/database/fetchGisLinesService.js b/services/database/fetchGisLinesService.js new file mode 100644 index 000000000..3762f9a26 --- /dev/null +++ b/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(); +};