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.
This commit is contained in:
ISA
2024-05-05 16:33:49 +02:00
parent 17f3025523
commit cc0e3e726a
2 changed files with 36 additions and 17 deletions

View File

@@ -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