diff --git a/components/AddPOIModal.js b/components/AddPOIModal.js index 9841d0078..23f747e26 100644 --- a/components/AddPOIModal.js +++ b/components/AddPOIModal.js @@ -10,11 +10,13 @@ import { fetchPoiTypes } from "../redux/slices/db/poiTypesSlice"; const ShowAddStationPopup = ({ onClose, map, latlng }) => { const dispatch = useDispatch(); + const poiTypData = useSelector((state) => state.poiTypes.data); const [name, setName] = useState(""); const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string const [poiTypeName, setPoiTypeName] = useState(""); // Initialize as string + const [latitude] = useState(latlng.lat.toFixed(5)); const [longitude] = useState(latlng.lng.toFixed(5)); const setLoadData = useSetRecoilState(readPoiMarkersStore); diff --git a/components/AddPOIOnPolyline.js b/components/AddPOIOnPolyline.js new file mode 100644 index 000000000..904333c8f --- /dev/null +++ b/components/AddPOIOnPolyline.js @@ -0,0 +1,61 @@ +import React, { useState, useEffect } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { closeAddPoiOnPolylineModal } from "../redux/slices/addPoiOnPolylineSlice"; + +const AddPOIOnPolyline = () => { + const dispatch = useDispatch(); + const { isOpen, latlng } = useSelector((state) => state.addPoiOnPolyline); + + const [name, setName] = useState(""); + const [latitude, setLatitude] = useState(""); + const [longitude, setLongitude] = useState(""); + + useEffect(() => { + if (latlng) { + setLatitude(latlng.lat.toFixed(5)); + setLongitude(latlng.lng.toFixed(5)); + } + }, [latlng]); + + if (!isOpen) return null; + + const handleSubmit = async (event) => { + event.preventDefault(); + + const formData = { name, latitude, longitude }; + console.log("Neuer POI auf Polyline:", formData); + + dispatch(closeAddPoiOnPolylineModal()); // Schließt das Modal nach dem Speichern + }; + + return ( +
dispatch(closeAddPoiOnPolylineModal())}> +
e.stopPropagation()}> +

POI auf Polyline hinzufügen

+ +
+
+ + setName(e.target.value)} className="border p-2 w-full" required /> +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+ ); +}; + +export default AddPOIOnPolyline; diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js index f6ef66dcb..ed275ee99 100644 --- a/components/mainComponent/MapComponent.js +++ b/components/mainComponent/MapComponent.js @@ -77,9 +77,12 @@ import { useInitGisSystemStatic } from "./hooks/useInitGisSystemStatic"; import { selectGisSystemStatic, setGisSystemStatic } from "../../redux/slices/webService/gisSystemStaticSlice"; import ShowAddStationPopup from "../AddPOIModal.js"; import { useInitGisStationsStatic } from "../mainComponent/hooks/useInitGisStationsStatic"; +import { closeAddPoiModal } from "../../redux/slices/addPoiOnPolylineSlice.js"; +import AddPOIOnPolyline from "../AddPOIOnPolyline"; const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const dispatch = useDispatch(); + const currentPoi = useSelector(selectCurrentPoi); //const setCurrentPoi = useSetRecoilState(currentPoiState); const polylineVisible = useSelector(selectPolylineVisible); @@ -1053,6 +1056,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { return ( <> + {useSelector((state) => state.addPoiOnPolyline.isOpen) && } {/* Zeigt das Koordinaten-Modal, wenn `showCoordinatesModal` true ist */} {showCoordinatesModal && setShowCoordinatesModal(false)} />} diff --git a/config/appVersion.js b/config/appVersion.js index 01e16d777..850178464 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.40"; +export const APP_VERSION = "1.1.41"; diff --git a/redux/slices/addPoiOnPolylineSlice.js b/redux/slices/addPoiOnPolylineSlice.js new file mode 100644 index 000000000..567ce9bb0 --- /dev/null +++ b/redux/slices/addPoiOnPolylineSlice.js @@ -0,0 +1,24 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + isOpen: false, + latlng: null, +}; + +const addPoiOnPolylineSlice = createSlice({ + name: "addPoiOnPolyline", + initialState, + reducers: { + openAddPoiOnPolylineModal: (state, action) => { + state.isOpen = true; + state.latlng = action.payload; + }, + closeAddPoiOnPolylineModal: (state) => { + state.isOpen = false; + state.latlng = null; + }, + }, +}); + +export const { openAddPoiOnPolylineModal, closeAddPoiOnPolylineModal } = addPoiOnPolylineSlice.actions; +export default addPoiOnPolylineSlice.reducer; diff --git a/redux/store.js b/redux/store.js index 552457811..6958b1da9 100644 --- a/redux/store.js +++ b/redux/store.js @@ -10,6 +10,7 @@ import gisStationsMeasurementsReducer from "./slices/webService/gisStationsMeasu import gisSystemStaticReducer from "./slices/webService/gisSystemStaticSlice"; import gisStationsStaticReducer from "./slices/webService/gisStationsStaticSlice"; import poiTypesReducer from "./slices/db/poiTypesSlice"; +import addPoiOnPolylineReducer from "./slices/addPoiOnPolylineSlice"; export const store = configureStore({ reducer: { @@ -23,5 +24,6 @@ export const store = configureStore({ gisSystemStatic: gisSystemStaticReducer, gisStationsStatic: gisStationsStaticReducer, poiTypes: poiTypesReducer, + addPoiOnPolyline: addPoiOnPolylineReducer, }, }); diff --git a/utils/setupPolylines.js b/utils/setupPolylines.js index 9a50800a4..e40b96f95 100644 --- a/utils/setupPolylines.js +++ b/utils/setupPolylines.js @@ -14,6 +14,7 @@ import { toast } from "react-toastify"; import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice"; import { useRecoilValue } from "recoil"; import { store } from "../redux/store"; // Importiere den Store +import { openAddPoiOnPolylineModal } from "../redux/slices/addPoiOnPolylineSlice"; // Funktion zum Deaktivieren der Polyline-Ereignisse export function disablePolylineEvents(polylines) { @@ -284,14 +285,14 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, callback: (e) => map.panTo(e.latlng), }, { separator: true }, - { + /* { text: "POI hinzufügen", icon: "/img/add_station.png", callback: (e) => { - // Hier kannst du die Logik für das Hinzufügen eines POIs implementieren - alert("POI hinzufügen an: " + e.latlng); + store.dispatch(openAddPoiOnPolylineModal(e.latlng)); }, }, + */ { text: "Stützpunkt hinzufügen", icon: "/img/icons/gisLines/add-support-point.svg", @@ -343,15 +344,14 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, icon: "/img/center_focus.png", callback: (e) => map.panTo(e.latlng), }, - { separator: true }, - { + { separator: true } + /* { text: "POI hinzufügen", icon: "/img/add_station.png", callback: (e) => { - // Hier kannst du die Logik für das Hinzufügen eines POIs implementieren - alert("POI hinzufügen an: " + e.latlng); + store.dispatch(openAddPoiOnPolylineModal(e.latlng)); }, - } + } */ ); }