Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ISA
2025-05-21 13:42:00 +02:00
parent 067eba95b5
commit 230bededa0
6 changed files with 81 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
components/mainComponent/MapComponent.js
View File

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

2
config/appVersion.js
View File

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

29
redux/slices/database/gisLinesSlice.js Normal file
View File

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

2
redux/store.js
View File

@@ -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,
},
});

6
redux/thunks/database/fetchGisLinesThunk.js Normal file
View File

@@ -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();
});

7
services/database/fetchGisLinesService.js Normal file
View File

@@ -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();
};