From cc0e3e726aeab2876771c6b67f333aad68bb6fc8 Mon Sep 17 00:00:00 2001
From: ISA <ismail.ali@littwin-systemtechnik.de>
Date: Sun, 5 May 2024 16:33:49 +0200
Subject: [PATCH] =?UTF-8?q?F=C3=BCge:=20=20Funktion=20zum=20Schlie=C3=9Fen?=
 =?UTF-8?q?=20des=20Popups=20nach=20dem=20Hinzuf=C3=BCgen=20der=20Station?=
 =?UTF-8?q?=20hinzu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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        | 50 +++++++++++++++++++++----------
 components/ShowAddStationPopup.js |  3 +-
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/components/MapComponent.js b/components/MapComponent.js
index fc5ae4843..4112ccf6b 100644
--- a/components/MapComponent.js
+++ b/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={{
-            position: "fixed",
-            top: 0, left: 0, right: 0, bottom: 0,
-            backgroundColor: "rgba(0,0,0,0.5)",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            zIndex: 1000
-          }}>
-            <div style={{
-              backgroundColor: "white",
-              padding: "20px",
-              borderRadius: "10px",
-              boxShadow: "0 4px 8px rgba(0,0,0,0.2)"
-            }}>
+          <div
+            className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]"
+            onClick={closePopup} // 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={closePopup}
+                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 */}
               <ShowAddStationPopup
                 onClose={closePopup}
                 onSubmit={handleAddStation}
@@ -1555,6 +1571,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           </div>
         )}
       </div>
+
+
       <DataSheet className="z-50" />
 
       <div
diff --git a/components/ShowAddStationPopup.js b/components/ShowAddStationPopup.js
index 1c04ad057..43ef24407 100644
--- a/components/ShowAddStationPopup.js
+++ b/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 {