POI hinzufügen auf die Kabelstrecken/Polylines ausgeblendert

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

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 (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50" onClick={() => dispatch(closeAddPoiOnPolylineModal())}>
+      <div className="bg-white p-6 rounded-lg shadow-lg w-96 max-w-full" onClick={(e) => e.stopPropagation()}>
+        <h2 className="text-lg font-bold mb-4">POI auf Polyline hinzufügen</h2>
+
+        <form onSubmit={handleSubmit}>
+          <div className="mb-4">
+            <label className="block">Name:</label>
+            <input type="text" value={name} onChange={(e) => setName(e.target.value)} className="border p-2 w-full" required />
+          </div>
+
+          <div className="mb-4">
+            <label className="block">Latitude:</label>
+            <input type="text" value={latitude} readOnly className="border p-2 w-full" />
+          </div>
+
+          <div className="mb-4">
+            <label className="block">Longitude:</label>
+            <input type="text" value={longitude} readOnly className="border p-2 w-full" />
+          </div>
+
+          <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white p-2 rounded w-full">
+            Speichern
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default AddPOIOnPolyline;

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) && <AddPOIOnPolyline />}
       {/* Zeigt das Koordinaten-Modal, wenn `showCoordinatesModal` true ist */}
       {showCoordinatesModal && <CoordinateModal latlng={popupCoordinates} onClose={() => setShowCoordinatesModal(false)} />}
 

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.40";
+export const APP_VERSION = "1.1.41";

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;

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

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));
           },
-        }
+        } */
       );
     }