Modal wird angezeigt, aber muss noch angepasst werden

components/MapComponent.js

@@ -26,7 +26,7 @@ import { fetchPoiData, fetchUserRights } from "../services/apiService.js";
 import { APP_VERSION } from "../config/appVersion";
 import * as layers from "../config/layers.js";
 import { initializeMap } from "../utils/initializeMap.js";
-import { addItemsToMapContextMenu } from "./useMapContextMenu.js";
+import addItemsToMapContextMenu from "./useMapContextMenu.js";
 import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook
 import useSmsfunkmodemMarkersLayer from "../hooks/layers/useSmsfunkmodemMarkersLayer.js";
 import useBereicheMarkersLayer from "../hooks/layers/useBereicheMarkersLayer.js";
@@ -63,6 +63,7 @@ import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleS
 import { useSelector, useDispatch } from "react-redux";
 import { selectCurrentPoi, setCurrentPoi, clearCurrentPoi } from "../redux/slices/currentPoiSlice";
 import CoordinateInput from "./CoordinateInput";
+import CoordinateModal from "./CoordinateModal";
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const dispatch = useDispatch();
@@ -76,6 +77,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [locationDeviceData, setLocationDeviceData] = useState([]);
   const [priorityConfig, setPriorityConfig] = useState([]);
   const [menuItemAdded, setMenuItemAdded] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const closeModal = () => setIsModalOpen(false);
+  const openModalWithCoordinates = (e) => {
+    const coordinates = `${e.latlng.lat.toFixed(5)}, ${e.latlng.lng.toFixed(5)}`;
+    setCurrentCoordinates(coordinates);
+    setIsModalOpen(true);
+  };
+  const [currentCoordinates, setCurrentCoordinates] = useState("");
   const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
   const [isRightsLoaded, setIsRightsLoaded] = useState(false);
   const [hasRights, setHasRights] = useState(false);
@@ -912,6 +921,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
   };
   //--------------------------------------------
+  useEffect(() => {
+    if (map && !menuItemAdded) {
+      addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, openModalWithCoordinates, hasRights, setShowPopup, setPopupCoordinates);
+    }
+  }, [map, menuItemAdded, hasRights]);
+  //--------------------------------------------
 
   return (
     <>
@@ -937,6 +952,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
       <CoordinateInput onCoordinatesSubmit={handleCoordinatesSubmit} />
       <div id="map" ref={mapRef} className="z-0" style={{ height: "100vh", width: "100vw" }}></div>
+      <CoordinateModal isOpen={isModalOpen} onClose={closeModal} coordinates={currentCoordinates} />
 
       <div className="absolute bottom-3 left-3 w-72 p-4 bg-white rounded-lg shadow-md z-50">
         <div className="flex justify-between items-center">