From 244f3b74b1bb07b21e7bc261ef2503ee249946a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Estelle=20K=C3=B6hler?= <estellekoehler37@gmail.com>
Date: Thu, 23 Apr 2026 11:00:33 +0200
Subject: [PATCH] =?UTF-8?q?Pop-Up=20f=C3=BCr=20ab=20und=20anmeldung.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 event_overview.html  | 32 ++++++++++++++++++++++
 js/event_overview.js | 64 +++++++++++++++++++++++++++++++-------------
 2 files changed, 77 insertions(+), 19 deletions(-)

diff --git a/event_overview.html b/event_overview.html
index 6be6d40..c1814a7 100644
--- a/event_overview.html
+++ b/event_overview.html
@@ -110,6 +110,38 @@
     </div>
 </div>
 
+<div id="register-confirm-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Ein Platz für dich am Tisch!</h2>
+            <button type="button" class="modal-close" onclick="closeRegisterModal()" aria-label="Popup schließen">&times;</button>
+        </div>
+        <div class="modal-body">
+            <p>Schön, dass du dich dazu gesellen möchtest! Da dein:e Gastgeber:in extra für dich einkauft und mit viel Liebe kocht, ist deine Anmeldung ein festes Versprechen. Bitte sag nur zu, wenn du an dem Tag wirklich Zeit hast. So zeigst du echte Wertschätzung für die Mühe und wir lassen niemanden auf vollen Töpfen sitzen.</p>
+        </div>
+        <div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
+            <button class="button-primary button--outline" type="button" onclick="closeRegisterModal()">Abbrechen</button>
+            <button class="button-primary" type="button" id="confirm-register-btn">Ja, ich bin dabei</button>
+        </div>
+    </div>
+</div>
+
+<div id="unregister-confirm-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Pläne haben sich geändert?</h2>
+            <button type="button" class="modal-close" onclick="closeUnregisterModal()" aria-label="Popup schließen">&times;</button>
+        </div>
+        <div class="modal-body">
+            <p>Schade, dass du nicht dabei sein kannst! Aber manchmal kommt einfach etwas dazwischen. Wenn du dich jetzt abmeldest, gibst du deinen Stuhl am Tisch für jemand anderen aus der Community frei. So hilfst du bei der Planung und ein anderer Feinschmecker freut sich über den freien Platz.</p>
+        </div>
+        <div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
+            <button class="button-primary button--outline" type="button" onclick="closeUnregisterModal()">Abbrechen</button>
+            <button class="button-primary button-primary-abmelden" type="button" id="confirm-unregister-btn">Ja, abmelden</button>
+        </div>
+    </div>
+</div>
+
 <!-- Snackbar: Feedback bei An-/Abmeldung -->
 <div class="snackbar" id="snackbar"></div>
 
diff --git a/js/event_overview.js b/js/event_overview.js
index 258ff11..be91f5d 100644
--- a/js/event_overview.js
+++ b/js/event_overview.js
@@ -536,29 +536,55 @@
                         : [];
                     const idSet = new Set(currentIds);
 
-                    // Abmeldung: Benutzer vom Event entfernen und Snackbar anzeigen.
-                    if (action === 'unregister') {
-                        idSet.delete(Number(event.id));
-                        const snackbar = document.getElementById('snackbar');
-                        if (snackbar) {
-                            snackbar.textContent = 'Du wurdest erfolgreich abgemeldet.';
-                            snackbar.classList.add('snackbar--danger', 'snackbar--visible');
-                            setTimeout(() => {
-                                snackbar.classList.remove('snackbar--visible');
-                                setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
-                            }, 3000);
+                    // Anmelde-Modal öffnen
+                    if (action === 'register' && !isFull && !isRegistrationClosed) {
+                        const modal = document.getElementById('register-confirm-modal');
+                        if (modal) {
+                            modal.classList.add('show');
+                            document.getElementById('confirm-register-btn').onclick = () => {
+                                modal.classList.remove('show');
+                                const map = getRegistrationMap();
+                                const ids = new Set((map[currentUser.email] || []).map(id => Number(id)));
+                                ids.add(Number(event.id));
+                                map[currentUser.email] = Array.from(ids);
+                                setRegistrationMap(map);
+                                const snackbar = document.getElementById('snackbar');
+                                if (snackbar) {
+                                    snackbar.textContent = 'Du wurdest erfolgreich angemeldet.';
+                                    snackbar.classList.add('snackbar--visible');
+                                    setTimeout(() => snackbar.classList.remove('snackbar--visible'), 3000);
+                                }
+                                applyFilters();
+                            };
                         }
+                        return;
                     }
 
-                    // Anmeldung: Benutzer zum Event hinzufügen und Snackbar anzeigen.
-                    if (action === 'register' && !isFull && !isRegistrationClosed) {
-                        idSet.add(Number(event.id));
-                        const snackbar = document.getElementById('snackbar');
-                        if (snackbar) {
-                            snackbar.textContent = 'Du wurdest erfolgreich angemeldet.';
-                            snackbar.classList.add('snackbar--visible');
-                            setTimeout(() => snackbar.classList.remove('snackbar--visible'), 3000);
+                    // Abmelde-Modal öffnen
+                    if (action === 'unregister') {
+                        const modal = document.getElementById('unregister-confirm-modal');
+                        if (modal) {
+                            modal.classList.add('show');
+                            document.getElementById('confirm-unregister-btn').onclick = () => {
+                                modal.classList.remove('show');
+                                const map = getRegistrationMap();
+                                const ids = new Set((map[currentUser.email] || []).map(id => Number(id)));
+                                ids.delete(Number(event.id));
+                                map[currentUser.email] = Array.from(ids);
+                                setRegistrationMap(map);
+                                const snackbar = document.getElementById('snackbar');
+                                if (snackbar) {
+                                    snackbar.textContent = 'Du wurdest erfolgreich abgemeldet.';
+                                    snackbar.classList.add('snackbar--danger', 'snackbar--visible');
+                                    setTimeout(() => {
+                                        snackbar.classList.remove('snackbar--visible');
+                                        setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
+                                    }, 3000);
+                                }
+                                applyFilters();
+                            };
                         }
+                        return;
                     }
 
                     nextRegistrationMap[currentUser.email] = Array.from(idSet);