From 5a27bc5d757b303027675512c6a1024966dca651 Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Fri, 7 Mar 2025 18:13:09 +0100 Subject: [PATCH] =?UTF-8?q?WIP:=20POI->contextmenu=20->POI=20bearbeiten=20?= =?UTF-8?q?->Ger=C3=A4t:=20Dropdown?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.local | 4 +- components/DataSheet.js | 6 +-- components/MapComponent.js | 6 +-- components/pois/PoiUpdateModal.js | 14 +++-- components/pois/PoiUpdateModalWrapper.js | 35 +++++-------- config/appVersion.js | 2 +- hooks/useMapComponentState.js | 51 +++++++++++++++++-- .../gisStationsStaticDistrictSlice.js | 2 +- .../{ => webService}/gisSystemStaticSlice.js | 2 +- redux/store.js | 2 +- .../api/fetchGisStationsStaticDistrict.js | 2 +- 11 files changed, 82 insertions(+), 44 deletions(-) rename redux/slices/{ => webService}/gisStationsStaticDistrictSlice.js (91%) rename redux/slices/{ => webService}/gisSystemStaticSlice.js (79%) diff --git a/.env.local b/.env.local index 7bc6bdd83..0eede7565 100644 --- a/.env.local +++ b/.env.local @@ -7,10 +7,10 @@ DB_NAME=talas_v5 DB_PORT=3306 # 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_USE_MOCK_API=true NEXT_PUBLIC_DEBUG_LOG=true # für Polylines/kabelstecken -> in Konextmenü "Station öffnen" " -NEXT_PUBLIC_BASE_URL=http://10.10.0.70/talas5/devices/ \ No newline at end of file +NEXT_PUBLIC_BASE_URL=http://192.168.10.33/talas5/devices/ \ No newline at end of file diff --git a/components/DataSheet.js b/components/DataSheet.js index 9d5c2f81b..1e5733729 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -1,8 +1,8 @@ // /componentss/DataSheet.js import React, { useEffect, useState } from "react"; import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; -import { gisStationsStaticDistrictState } from "../redux/slices/gisStationsStaticDistrictSlice"; -import { gisSystemStaticState } from "../redux/slices/gisSystemStaticSlice"; +import { gisStationsStaticDistrictState } from "../redux/slices/webService/gisStationsStaticDistrictSlice"; +import { gisSystemStaticState } from "../redux/slices/webService/gisSystemStaticSlice.js"; import { mapLayersState } from "../redux/slices/mapLayersSlice"; import { selectedAreaState } from "../redux/slices/selectedAreaSlice"; import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js"; @@ -10,7 +10,7 @@ import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice"; import EditModeToggle from "./EditModeToggle"; import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice"; // Import für Polyline-Visibility 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"; function DataSheet() { diff --git a/components/MapComponent.js b/components/MapComponent.js index 7e587c405..38eaacd33 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -40,13 +40,13 @@ import { updateLocation } from "../utils/updateBereichUtil"; import { initGeocoderFeature } from "../components/features/GeocoderFeature"; //-------------------------------------------- //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 { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice.js"; import { selectedPoiState } from "../redux/slices/selectedPoiSlice.js"; import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice"; -import { gisStationsStaticDistrictState } from "../redux/slices/gisStationsStaticDistrictSlice"; -import { gisSystemStaticState } from "../redux/slices/gisSystemStaticSlice"; +import { gisStationsStaticDistrictState } from "../redux/slices/webService/gisStationsStaticDistrictSlice"; +import { gisSystemStaticState } from "../redux/slices/webService/gisSystemStaticSlice"; import { mapLayersState } from "../redux/slices/mapLayersSlice"; import { selectedAreaState } from "../redux/slices/selectedAreaSlice"; import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js"; diff --git a/components/pois/PoiUpdateModal.js b/components/pois/PoiUpdateModal.js index 87979cdda..801b81d22 100644 --- a/components/pois/PoiUpdateModal.js +++ b/components/pois/PoiUpdateModal.js @@ -5,9 +5,11 @@ import { useRecoilState } from "recoil"; import { selectedPoiState } from "../../redux/slices/selectedPoiSlice"; import { currentPoiState } from "../../redux/slices/currentPoiSlice"; import { mapLayersState } from "../../redux/slices/mapLayersSlice"; +import { useSelector } from "react-redux"; +import { selectCurrentPoi } from "../../redux/slices/currentPoiSlice"; const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { - const currentPoi = useRecoilState(currentPoiState); + const currentPoi = useSelector(selectCurrentPoi); const selectedPoi = useRecoilState(selectedPoiState); const [mapLayersVisibility] = useRecoilState(mapLayersState); @@ -168,10 +170,12 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { }; // Erstelle Optionen für react-select - const poiTypeOptions = poiTypData.map((poiTyp) => ({ - value: poiTyp.idPoiTyp, - label: poiTyp.name, - })); + const poiTypeOptions = Array.isArray(poiTypData) + ? poiTypData.map((poiTyp) => ({ + value: poiTyp.idPoiTyp, + label: poiTyp.name, + })) + : []; // Falls kein Array, dann leeres Array zurückgeben const deviceOptions = filteredDevices.map((device) => ({ value: device.name, diff --git a/components/pois/PoiUpdateModalWrapper.js b/components/pois/PoiUpdateModalWrapper.js index 4916c9cd6..7a2273b6e 100644 --- a/components/pois/PoiUpdateModalWrapper.js +++ b/components/pois/PoiUpdateModalWrapper.js @@ -1,26 +1,17 @@ // components/pois/PoiUpdateModalWrapper.js -import React, { useState } from "react"; -import PoiUpdateModal from "./PoiUpdateModal"; -import { useRecoilValue, useSetRecoilState } from "recoil"; -import { currentPoiState, selectedPoiState } from "../../redux/slices/currentPoiSlice"; -import { poiReadFromDbTriggerAtom } from "../../redux/slices/poiReadFromDbTriggerSlice"; +import { useDispatch } from "react-redux"; +import { setCurrentPoi } from "../../redux/slices/currentPoiSlice"; -const PoiUpdateModalWrapper = ({ show, onClose, latlng }) => { - const setSelectedPoi = useSetRecoilState(selectedPoiState); - const setCurrentPoi = useSetRecoilState(currentPoiState); - const currentPoi = useRecoilValue(currentPoiState); - const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom); +const PoiUpdateModalWrapper = ({ show, onClose, latlng, poiData }) => { + const dispatch = useDispatch(); - return ( - show && ( - {}} // Add your submit logic here - latlng={latlng} - /> - ) - ); + useEffect(() => { + if (show && poiData) { + dispatch(setCurrentPoi(poiData)); + } + }, [show, poiData, dispatch]); + + const currentPoi = useSelector(selectCurrentPoi); // Direkt aus Redux holen + + return show && {}} latlng={latlng} />; }; - -export default PoiUpdateModalWrapper; diff --git a/config/appVersion.js b/config/appVersion.js index 9eb9a0c22..478b913dd 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.21"; +export const APP_VERSION = "1.1.22"; diff --git a/hooks/useMapComponentState.js b/hooks/useMapComponentState.js index 043239c51..ed677c13f 100644 --- a/hooks/useMapComponentState.js +++ b/hooks/useMapComponentState.js @@ -1,12 +1,13 @@ // hooks/useMapComponentState.js +// POI -> Kontextmenü -> POI bearbeiten -> Dropdown Geräteauswahl import { useState, useEffect } from "react"; -import usePoiTypData from "./usePoiTypData"; import { useRecoilValue } from "recoil"; import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice"; import { isMockMode } from "../config/config"; 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 [locationDeviceData, setLocationDeviceData] = useState([]); const [priorityConfig, setPriorityConfig] = useState([]); @@ -14,11 +15,52 @@ export const useMapComponentState = () => { const poiLayerVisible = useRecoilValue(poiLayerVisibleState); 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 () => { 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); setDeviceName(mockData[0].name); return; @@ -37,6 +79,7 @@ export const useMapComponentState = () => { } }; + fetchPoiTypData(); fetchDeviceData(); }, []); diff --git a/redux/slices/gisStationsStaticDistrictSlice.js b/redux/slices/webService/gisStationsStaticDistrictSlice.js similarity index 91% rename from redux/slices/gisStationsStaticDistrictSlice.js rename to redux/slices/webService/gisStationsStaticDistrictSlice.js index 793160377..13986b547 100644 --- a/redux/slices/gisStationsStaticDistrictSlice.js +++ b/redux/slices/webService/gisStationsStaticDistrictSlice.js @@ -1,4 +1,4 @@ -// /redux/slices/gisStationsStaticDistrictSlice.js +// /redux/slices/webService/gisStationsStaticDistrictSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = []; diff --git a/redux/slices/gisSystemStaticSlice.js b/redux/slices/webService/gisSystemStaticSlice.js similarity index 79% rename from redux/slices/gisSystemStaticSlice.js rename to redux/slices/webService/gisSystemStaticSlice.js index ad4fb3774..1eaa77a0d 100644 --- a/redux/slices/gisSystemStaticSlice.js +++ b/redux/slices/webService/gisSystemStaticSlice.js @@ -1,4 +1,4 @@ -// /redux/slices/gisSystemStaticSlice.js +// /redux/slices/webService/gisSystemStaticSlice.js import { atom } from "recoil"; export const gisSystemStaticState = atom({ diff --git a/redux/store.js b/redux/store.js index 7c4c501b5..1544c7275 100644 --- a/redux/store.js +++ b/redux/store.js @@ -1,7 +1,7 @@ import { configureStore } from "@reduxjs/toolkit"; import lineVisibilityReducer from "./slices/lineVisibilitySlice"; import currentPoiReducer from "./slices/currentPoiSlice"; -import gisStationsStaticDistrictReducer from "./slices/gisStationsStaticDistrictSlice"; +import gisStationsStaticDistrictReducer from "./slices/webService/gisStationsStaticDistrictSlice"; import polylineLayerVisibleReducer from "./slices/polylineLayerVisibleSlice"; export const store = configureStore({ diff --git a/services/api/fetchGisStationsStaticDistrict.js b/services/api/fetchGisStationsStaticDistrict.js index 4c933ed9d..d11652bce 100644 --- a/services/api/fetchGisStationsStaticDistrict.js +++ b/services/api/fetchGisStationsStaticDistrict.js @@ -1,4 +1,4 @@ -import { setGisStationsStaticDistrict } from "../../redux/slices/gisStationsStaticDistrictSlice"; +import { setGisStationsStaticDistrict } from "../../redux/slices/webService/gisStationsStaticDistrictSlice"; export const fetchGisStationsStaticDistrict = async (url, dispatch, fetchOptions) => { try {