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

WIP: POI->contextmenu ->POI bearbeiten ->Gerät: Dropdown

Browse Source
This commit is contained in:
Ismail Ali
2025-03-07 18:13:09 +01:00
parent f98ee107aa
commit 5a27bc5d75
11 changed files with 82 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.local
View File

@@ -7,10 +7,10 @@ DB_NAME=talas_v5
DB_PORT=3306 DB_PORT=3306
# Public Settings (Client braucht IP/Domain) # 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_ENABLE_GEOCODER=true
NEXT_PUBLIC_USE_MOCK_API=true NEXT_PUBLIC_USE_MOCK_API=true
NEXT_PUBLIC_DEBUG_LOG=true NEXT_PUBLIC_DEBUG_LOG=true
# für Polylines/kabelstecken -> in Konextmenü "Station öffnen" " # 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/

6
components/DataSheet.js
View File

@@ -1,8 +1,8 @@
// /componentss/DataSheet.js // /componentss/DataSheet.js
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import { gisStationsStaticDistrictState } from "../redux/slices/gisStationsStaticDistrictSlice"; import { gisStationsStaticDistrictState } from "../redux/slices/webService/gisStationsStaticDistrictSlice";
import { gisSystemStaticState } from "../redux/slices/gisSystemStaticSlice"; import { gisSystemStaticState } from "../redux/slices/webService/gisSystemStaticSlice.js";
import { mapLayersState } from "../redux/slices/mapLayersSlice"; import { mapLayersState } from "../redux/slices/mapLayersSlice";
import { selectedAreaState } from "../redux/slices/selectedAreaSlice"; import { selectedAreaState } from "../redux/slices/selectedAreaSlice";
import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js"; import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js";
@@ -10,7 +10,7 @@ import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice";
import EditModeToggle from "./EditModeToggle"; import EditModeToggle from "./EditModeToggle";
import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice"; // Import für Polyline-Visibility import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice"; // Import für Polyline-Visibility
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import { selectGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice"; import { selectGisStationsStaticDistrict } from "../redux/slices/webService/gisStationsStaticDistrictSlice";
import { selectPolylineVisible, setPolylineVisible } from "../redux/slices/polylineLayerVisibleSlice"; import { selectPolylineVisible, setPolylineVisible } from "../redux/slices/polylineLayerVisibleSlice";
function DataSheet() { function DataSheet() {

6
components/MapComponent.js
View File

@@ -40,13 +40,13 @@ import { updateLocation } from "../utils/updateBereichUtil";
import { initGeocoderFeature } from "../components/features/GeocoderFeature"; import { initGeocoderFeature } from "../components/features/GeocoderFeature";
//-------------------------------------------- //--------------------------------------------
//import { currentPoiState } from "../redux/slices/currentPoiSlice.js"; //import { currentPoiState } from "../redux/slices/currentPoiSlice.js";
import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice"; import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../redux/slices/webService/gisStationsStaticDistrictSlice";
import { mapIdState, userIdState } from "../redux/slices/urlParameterSlice.js"; import { mapIdState, userIdState } from "../redux/slices/urlParameterSlice.js";
import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice.js"; import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice.js";
import { selectedPoiState } from "../redux/slices/selectedPoiSlice.js"; import { selectedPoiState } from "../redux/slices/selectedPoiSlice.js";
import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice"; import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice";
import { gisStationsStaticDistrictState } from "../redux/slices/gisStationsStaticDistrictSlice"; import { gisStationsStaticDistrictState } from "../redux/slices/webService/gisStationsStaticDistrictSlice";
import { gisSystemStaticState } from "../redux/slices/gisSystemStaticSlice"; import { gisSystemStaticState } from "../redux/slices/webService/gisSystemStaticSlice";
import { mapLayersState } from "../redux/slices/mapLayersSlice"; import { mapLayersState } from "../redux/slices/mapLayersSlice";
import { selectedAreaState } from "../redux/slices/selectedAreaSlice"; import { selectedAreaState } from "../redux/slices/selectedAreaSlice";
import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js"; import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js";

14
components/pois/PoiUpdateModal.js
View File

@@ -5,9 +5,11 @@ import { useRecoilState } from "recoil";
import { selectedPoiState } from "../../redux/slices/selectedPoiSlice"; import { selectedPoiState } from "../../redux/slices/selectedPoiSlice";
import { currentPoiState } from "../../redux/slices/currentPoiSlice"; import { currentPoiState } from "../../redux/slices/currentPoiSlice";
import { mapLayersState } from "../../redux/slices/mapLayersSlice"; import { mapLayersState } from "../../redux/slices/mapLayersSlice";
import { useSelector } from "react-redux";
import { selectCurrentPoi } from "../../redux/slices/currentPoiSlice";
const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
const currentPoi = useRecoilState(currentPoiState); const currentPoi = useSelector(selectCurrentPoi);
const selectedPoi = useRecoilState(selectedPoiState); const selectedPoi = useRecoilState(selectedPoiState);
const [mapLayersVisibility] = useRecoilState(mapLayersState); const [mapLayersVisibility] = useRecoilState(mapLayersState);
@@ -168,10 +170,12 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
}; };
// Erstelle Optionen für react-select // Erstelle Optionen für react-select
const poiTypeOptions = poiTypData.map((poiTyp) => ({ const poiTypeOptions = Array.isArray(poiTypData)
value: poiTyp.idPoiTyp, ? poiTypData.map((poiTyp) => ({
label: poiTyp.name, value: poiTyp.idPoiTyp,
})); label: poiTyp.name,
}))
: []; // Falls kein Array, dann leeres Array zurückgeben
const deviceOptions = filteredDevices.map((device) => ({ const deviceOptions = filteredDevices.map((device) => ({
value: device.name, value: device.name,

35
components/pois/PoiUpdateModalWrapper.js
View File

@@ -1,26 +1,17 @@
// components/pois/PoiUpdateModalWrapper.js // components/pois/PoiUpdateModalWrapper.js
import React, { useState } from "react"; import { useDispatch } from "react-redux";
import PoiUpdateModal from "./PoiUpdateModal"; import { setCurrentPoi } from "../../redux/slices/currentPoiSlice";
import { useRecoilValue, useSetRecoilState } from "recoil";
import { currentPoiState, selectedPoiState } from "../../redux/slices/currentPoiSlice";
import { poiReadFromDbTriggerAtom } from "../../redux/slices/poiReadFromDbTriggerSlice";
const PoiUpdateModalWrapper = ({ show, onClose, latlng }) => { const PoiUpdateModalWrapper = ({ show, onClose, latlng, poiData }) => {
const setSelectedPoi = useSetRecoilState(selectedPoiState); const dispatch = useDispatch();
const setCurrentPoi = useSetRecoilState(currentPoiState);
const currentPoi = useRecoilValue(currentPoiState);
const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom);
return ( useEffect(() => {
show && ( if (show && poiData) {
<PoiUpdateModal dispatch(setCurrentPoi(poiData));
onClose={onClose} }
poiData={currentPoi} }, [show, poiData, dispatch]);
onSubmit={() => {}} // Add your submit logic here
latlng={latlng} const currentPoi = useSelector(selectCurrentPoi); // Direkt aus Redux holen
/>
) return show && <PoiUpdateModal onClose={onClose} poiData={currentPoi} onSubmit={() => {}} latlng={latlng} />;
);
}; };
export default PoiUpdateModalWrapper;

2
config/appVersion.js
View File

@@ -1,2 +1,2 @@
// /config/appVersion // /config/appVersion
export const APP_VERSION = "1.1.21"; export const APP_VERSION = "1.1.22";

51
hooks/useMapComponentState.js
View File

@@ -1,12 +1,13 @@
// hooks/useMapComponentState.js // hooks/useMapComponentState.js
// POI -> Kontextmenü -> POI bearbeiten -> Dropdown Geräteauswahl
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import usePoiTypData from "./usePoiTypData";
import { useRecoilValue } from "recoil"; import { useRecoilValue } from "recoil";
import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice"; import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice";
import { isMockMode } from "../config/config"; import { isMockMode } from "../config/config";
export const useMapComponentState = () => { export const useMapComponentState = () => {
const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp"); const [poiTypData, setPoiTypData] = useState([]);
const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
const [deviceName, setDeviceName] = useState(""); const [deviceName, setDeviceName] = useState("");
const [locationDeviceData, setLocationDeviceData] = useState([]); const [locationDeviceData, setLocationDeviceData] = useState([]);
const [priorityConfig, setPriorityConfig] = useState([]); const [priorityConfig, setPriorityConfig] = useState([]);
@@ -14,11 +15,52 @@ export const useMapComponentState = () => {
const poiLayerVisible = useRecoilValue(poiLayerVisibleState); const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
useEffect(() => { useEffect(() => {
const fetchPoiTypData = async () => {
if (isMockMode()) {
console.log("⚠️ Mock-API: POI Typen geladen (Mock)");
const mockData = [
{ idPoiTyp: 1, name: "Mock Zähleranschlusskasten", icon: 4, onlySystemTyp: 0 },
{ idPoiTyp: 2, name: "Mock Geräteschrank", icon: 2, onlySystemTyp: 0 },
{ idPoiTyp: 4, name: "Mock Parkplatz", icon: 3, onlySystemTyp: 0 },
{ idPoiTyp: 6, name: "Mock Zufahrt", icon: 4, onlySystemTyp: 0 },
{ idPoiTyp: 20, name: "Mock Zählgerät", icon: 5, onlySystemTyp: 110 },
{ idPoiTyp: 21, name: "Mock Messschleife", icon: 6, onlySystemTyp: 110 },
{ idPoiTyp: 25, name: "Mock Sonstige", icon: 0, onlySystemTyp: 0 },
{ idPoiTyp: 33, name: "Mock Autobahnauffahrt", icon: 4, onlySystemTyp: null },
];
setPoiTypData(mockData);
setIsPoiTypLoaded(true);
return;
}
try {
const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
const data = await response.json();
setPoiTypData(data);
setIsPoiTypLoaded(true);
} catch (error) {
console.error("❌ Fehler beim Abrufen der POI-Typen:", error);
setPoiTypData([]);
setIsPoiTypLoaded(true);
}
};
const fetchDeviceData = async () => { const fetchDeviceData = async () => {
if (isMockMode()) { if (isMockMode()) {
console.log("⚠️ Mock-API: Gerätedaten geladen"); console.log("⚠️ Mock-API: Geräte für POI -> Kontextmenü -> POI bearbeiten -> Dropdown Geräteauswahl geladen (Mock)");
const mockData = [{ name: "Mock-Gerät 1" }, { name: "Mock-Gerät 2" }]; const mockData = [
{ idPoiTyp: 1, name: "Mock Zähleranschlusskasten", icon: 4, onlySystemTyp: 0 },
{ idPoiTyp: 2, name: "Mock Geräteschrank", icon: 2, onlySystemTyp: 0 },
{ idPoiTyp: 4, name: "Mock Parkplatz", icon: 3, onlySystemTyp: 0 },
{ idPoiTyp: 6, name: "Mock Zufahrt", icon: 4, onlySystemTyp: 0 },
{ idPoiTyp: 20, name: "Mock Zählgerät", icon: 5, onlySystemTyp: 110 },
{ idPoiTyp: 21, name: "Mock Messschleife", icon: 6, onlySystemTyp: 110 },
{ idPoiTyp: 25, name: "Mock Sonstige", icon: 0, onlySystemTyp: 0 },
{ idPoiTyp: 33, name: "Mock Autobahnauffahrt", icon: 4, onlySystemTyp: null },
];
setLocationDeviceData(mockData); setLocationDeviceData(mockData);
setDeviceName(mockData[0].name); setDeviceName(mockData[0].name);
return; return;
@@ -37,6 +79,7 @@ export const useMapComponentState = () => {
} }
}; };
fetchPoiTypData();
fetchDeviceData(); fetchDeviceData();
}, []); }, []);

2
redux/slices/gisStationsStaticDistrictSlice.js → redux/slices/webService/gisStationsStaticDistrictSlice.js
View File

@@ -1,4 +1,4 @@
// /redux/slices/gisStationsStaticDistrictSlice.js // /redux/slices/webService/gisStationsStaticDistrictSlice.js
import { createSlice } from "@reduxjs/toolkit"; import { createSlice } from "@reduxjs/toolkit";
const initialState = []; const initialState = [];

2
redux/slices/gisSystemStaticSlice.js → redux/slices/webService/gisSystemStaticSlice.js
View File

@@ -1,4 +1,4 @@
// /redux/slices/gisSystemStaticSlice.js // /redux/slices/webService/gisSystemStaticSlice.js
import { atom } from "recoil"; import { atom } from "recoil";
export const gisSystemStaticState = atom({ export const gisSystemStaticState = atom({

2
redux/store.js
View File

@@ -1,7 +1,7 @@
import { configureStore } from "@reduxjs/toolkit"; import { configureStore } from "@reduxjs/toolkit";
import lineVisibilityReducer from "./slices/lineVisibilitySlice"; import lineVisibilityReducer from "./slices/lineVisibilitySlice";
import currentPoiReducer from "./slices/currentPoiSlice"; import currentPoiReducer from "./slices/currentPoiSlice";
import gisStationsStaticDistrictReducer from "./slices/gisStationsStaticDistrictSlice"; import gisStationsStaticDistrictReducer from "./slices/webService/gisStationsStaticDistrictSlice";
import polylineLayerVisibleReducer from "./slices/polylineLayerVisibleSlice"; import polylineLayerVisibleReducer from "./slices/polylineLayerVisibleSlice";
export const store = configureStore({ export const store = configureStore({

2
services/api/fetchGisStationsStaticDistrict.js
View File

@@ -1,4 +1,4 @@
import { setGisStationsStaticDistrict } from "../../redux/slices/gisStationsStaticDistrictSlice"; import { setGisStationsStaticDistrict } from "../../redux/slices/webService/gisStationsStaticDistrictSlice";
export const fetchGisStationsStaticDistrict = async (url, dispatch, fetchOptions) => { export const fetchGisStationsStaticDistrict = async (url, dispatch, fetchOptions) => {
try { try {