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)} />}