Füge: Funktion zum Schließen des Popups nach dem Hinzufügen der Station hinzu

- Implementiere die Funktion `onClose` in der `ShowAddStationPopup`-Komponente, die als Prop übergeben wird.
- Rufe `onClose` in der `handleSubmit`-Funktion auf, damit das Popup-Fenster korrekt geschlossen wird, nachdem eine neue Station erfolgreich hinzugefügt wurde.
- Aktualisiere die Trigger-Logik, um sicherzustellen, dass neue Stationen korrekt geladen werden.

Diese Änderungen verbessern die Benutzererfahrung, indem das Popup-Fenster automatisch geschlossen wird und die Karte aktualisiert bleibt.

components/MapComponent.js

@@ -1529,23 +1529,39 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   return (
     <>
       <div>
-        {/* Popup als Modal anzeigen */}
+        {/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
         {showPopup && (
-          <div style={{
+          <div
-            position: "fixed",
+            className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]"
-            top: 0, left: 0, right: 0, bottom: 0,
+            onClick={closePopup} // Schließt das Popup bei einem Klick außerhalb
-            backgroundColor: "rgba(0,0,0,0.5)",
+          >
-            display: "flex",
+            <div
-            justifyContent: "center",
+              className="relative bg-white p-6 rounded-lg shadow-lg"
-            alignItems: "center",
+              onClick={(e) => e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters
-            zIndex: 1000
+            >
-          }}>
+              {/* Schließen-Button oben rechts */}
-            <div style={{
+              <button
-              backgroundColor: "white",
+                onClick={closePopup}
-              padding: "20px",
+                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"
-              borderRadius: "10px",
+                aria-label="Close"
-              boxShadow: "0 4px 8px rgba(0,0,0,0.2)"
+              >
-            }}>
+                <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 */}
               <ShowAddStationPopup
                 onClose={closePopup}
                 onSubmit={handleAddStation}
@@ -1555,6 +1571,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           </div>
         )}
       </div>
+
+
       <DataSheet className="z-50" />
 
       <div

components/ShowAddStationPopup.js

@@ -5,7 +5,7 @@ import { useRecoilValue ,useRecoilState, useSetRecoilState } from "recoil";
 import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore";
 import { poiReadFromDbTriggerAtom } from '../store/atoms/poiReadFromDbTriggerAtom';
 
-const ShowAddStationPopup = ({ map, latlng }) => {
+const ShowAddStationPopup = ({ onClose, map, latlng }) => {
  
   const [poiTypData2, setPoiTypData2] = useState(); // Recoil State verwenden
   const [name, setName] = useState("");
@@ -70,6 +70,7 @@ const handleSubmit = async (event) => {
           console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert
           const newTrigger = trigger + 1;
           console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert
+          onClose();
           return newTrigger;
       });
   } else {