Modal für Poi zu updaten und zu löschen

components/MapComponent.js

@@ -20,6 +20,7 @@ import { poiTypState } from "../store/atoms/poiTypState.js";
 import ShowAddStationPopup from "./ShowAddStationPopup";
 import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
 import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
+import PoiUpdateModal from "./PoiUpdateModal.js";
 
 //import { createRoot } from "react-dom/client";
 
@@ -32,6 +33,22 @@ const plusRoundIcon = L.icon({
 });
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
+  const openPoiUpdateModal = () => setShowPoiUpdateModal(true);
+  const closePoiUpdateModal = () => setShowPoiUpdateModal(false);
+  const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false);
+  const [currentPoiData, setCurrentPoiData] = useState(null);
+
+  const handleEditPoi = (marker) => {
+    console.log("Gewählte Marker ID (idPoi):", marker.options.id);
+    // Setzen der aktuellen POI-Daten für die Übergabe an das Modal
+    setCurrentPoiData({
+      idPoi: marker.options.id,
+      //name: marker.options.name, // Angenommen, name ist ebenfalls in options gespeichert
+      // Weitere relevante Markerdaten können hier hinzugefügt werden
+    });
+    setShowPoiUpdateModal(true);
+  };
+
   const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
   const zoomTrigger = useRecoilValue(zoomTriggerState);
   const offlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
@@ -245,6 +262,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         className: "background-red",
         callback: addStationCallback,
       },
+
       {
         text: "Koordinaten anzeigen",
         icon: "img/not_listed_location.png",
@@ -835,6 +853,15 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     };
     console.log("trigger in MapComponent.js:", poiReadTrigger);
   }, [map, locations, poiReadTrigger]); // Dieser Effekt läuft nur, wenn sich `map` ändert
+  //------------------------------------------
+  function editPoi(marker) {
+    // Zugriff auf die Markerdaten
+    const markerId = marker.options.id;
+    console.log("Bearbeiten des POI mit ID:", markerId);
+
+    // Hier könnte ein Modal mit Formular geöffnet werden
+    // Beispiel: openEditModal(markerId);
+  }
 
   //------------------------------------------
   //          poiLayerRef(poiDbLayer)  POI   hinzufügen
@@ -861,7 +888,19 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           }),
           draggable: true,
           id: location.idPoi,
+        }).bindContextMenu({
+          contextmenu: true,
+          contextmenuWidth: 140,
+          contextmenuItems: [
+            {
+              text: "POI Bearbeiten", //git stash save "POI Bearbeiten"
+
+              icon: "/img/edit_icon.png",
+              callback: () => handleEditPoi(marker),
+            },
+          ],
         });
+        //console.log("location.idPoi:", location.idPoi);
 
         // Popup konfigurieren
         marker.bindPopup(`
@@ -891,16 +930,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         });
 
         marker.addTo(poiLayerRef.current);
-        /*       //--------------
-        const plusMarker = L.marker([latitude, longitude], {
-          icon: plusRoundIcon,
-          zIndexOffset: 1000, // Higher z-index for visibility
-        });
-
-        // Add to the poiLayer
-        plusMarker.addTo(poiLayerRef.current);
-        console.log("Adding plus icon marker at", [latitude, longitude]);
-        //------------ */
       });
     }
   }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded]);
@@ -1670,6 +1699,52 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
   return (
     <>
+      <div>
+        {/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
+        {showPoiUpdateModal && (
+          <div
+            className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]"
+            onClick={closePoiUpdateModal} // Schließt das Popup bei einem Klick außerhalb
+          >
+            <div
+              className="relative bg-white p-6 rounded-lg shadow-lg"
+              onClick={(e) => e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters
+            >
+              {/* Schließen-Button oben rechts */}
+              <button
+                onClick={closePoiUpdateModal}
+                className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600"
+                aria-label="Close"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+
+              {/* Formular-Komponente zum Hinzufügen einer Station */}
+              <PoiUpdateModal
+                onClose={() => setShowPoiUpdateModal(false)}
+                poiData={currentPoiData}
+                onSubmit={handleAddStation}
+                latlng={popupCoordinates}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Rest of your component */}
       <div>
         {/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
         {showPopup && (