From 9c125db92d67c825d70b8e4d98f2073cbd3eec78 Mon Sep 17 00:00:00 2001
From: Lurkars <lurkars@we.bstly.de>
Date: Sat, 15 Nov 2025 20:43:18 +0100
Subject: [PATCH] improve final

---
 pom.xml                                 |  2 +-
 src/main/resources/templates/index.html | 79 +++++++++++++++----------
 2 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/pom.xml b/pom.xml
index fd49002..2f9c89d 100644
--- a/pom.xml
+++ b/pom.xml
@@ -4,7 +4,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>de.champonthis</groupId>
   <artifactId>abi</artifactId>
-  <version>0.3.2</version>
+  <version>0.3.3</version>
   <name>abi</name>
 
   <parent>
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 4bae28e..b1076e9 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -201,12 +201,13 @@
                             </div>
                         </form>
                         <div class="alert py-2" :class="'alert-' + stepMsgType" x-text="stepMsg" x-show="stepMsg"></div>
-                        <ul class="list-group mb-3" id="enteredContacts" x-show="enteredContacts && enteredContacts.length > 0">
+                        <ul class="list-group mb-3" id="enteredContacts"
+                            x-show="enteredContacts && enteredContacts.length > 0">
                             <template x-for="(c, index) in enteredContacts || []" :key="c.name + '_' + index">
                                 <li class="list-group-item">
                                     <!-- Normal view -->
                                     <div x-show="editingContactIndex !== index"
-                                         :class="editingContactIndex === index ? 'd-none' : 'd-flex justify-content-between align-items-center'">
+                                        :class="editingContactIndex === index ? 'd-none' : 'd-flex justify-content-between align-items-center'">
                                         <div>
                                             <strong x-text="c.name"></strong><br>
                                             <small class="text-muted">
@@ -214,35 +215,46 @@
                                                 <span x-show="c.phone" x-text="', ' + c.phone"></span>
                                             </small>
                                         </div>
-                                        <button class="btn btn-sm btn-outline-primary" @click="startEdit(index)" :disabled="working">
-                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                                <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708L4.707 14.707a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168L12.146.146zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293L12.793 5.5z"/>
+                                        <button class="btn btn-sm btn-outline-primary" @click="startEdit(index)"
+                                            :disabled="working">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                                fill="currentColor" viewBox="0 0 16 16">
+                                                <path
+                                                    d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708L4.707 14.707a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168L12.146.146zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293L12.793 5.5z" />
                                             </svg>
                                         </button>
                                     </div>
-                                    
+
                                     <!-- Edit view - fully inline -->
                                     <div x-show="editingContactIndex === index"
-                                         :class="editingContactIndex === index ? 'row g-2 align-items-start' : 'd-none'">
+                                        :class="editingContactIndex === index ? 'row g-2 align-items-start' : 'd-none'">
                                         <div class="col-12">
                                             <strong x-text="c.name"></strong>
                                         </div>
                                         <div class="col-12 col-md">
-                                            <input type="email" class="form-control form-control-sm" x-model="editingContactData.email" placeholder="E-Mail" required>
+                                            <input type="email" class="form-control form-control-sm"
+                                                x-model="editingContactData.email" placeholder="E-Mail" required>
                                         </div>
                                         <div class="col-12 col-md">
-                                            <input type="text" class="form-control form-control-sm" x-model="editingContactData.phone" placeholder="Telefon (optional)">
+                                            <input type="text" class="form-control form-control-sm"
+                                                x-model="editingContactData.phone" placeholder="Telefon (optional)">
                                         </div>
                                         <div class="col-12 col-md-auto">
                                             <div class="d-flex gap-1">
-                                                <button class="btn btn-sm btn-outline-danger" @click="cancelEdit()" :disabled="working">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
-                                                        <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
+                                                <button class="btn btn-sm btn-outline-danger" @click="cancelEdit()"
+                                                    :disabled="working">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
+                                                        fill="currentColor" viewBox="0 0 16 16">
+                                                        <path
+                                                            d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
                                                     </svg>
                                                 </button>
-                                                <button class="btn btn-sm btn-success" @click="saveContactData(index)" :disabled="working">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
-                                                        <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
+                                                <button class="btn btn-sm btn-success" @click="saveContactData(index)"
+                                                    :disabled="working">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                                                        fill="currentColor" viewBox="0 0 16 16">
+                                                        <path
+                                                            d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z" />
                                                     </svg>
                                                 </button>
                                             </div>
@@ -281,21 +293,24 @@
                             Hast du Lust, am Samstag, den 13.11.2027, beim Nachtreffen in Gevelsberg dabei zu sein?
                             Genauere Infos und Details gibt's dann später hier und per Mail.
                         </p>
-                        <p x-show="!stepMsg && committed === 'YES'">
-                            Du hast bereits für Samstag, den 13.11.2027, <strong>zugesagt</strong>. Genauere Infos und Details gibt's dann später hier und per Mail. Falls du deine Meinung ändern möchtest, kannst du hier nochmal wählen.
+                        <p x-show="committed === 'YES'">
+                            Du hast für Samstag, den 13.11.2027, <strong class="text-success">zugesagt</strong>.
+                            Genauere Infos und
+                            Details gibt's dann später hier und per Mail. Falls du deine Meinung ändern möchtest, kannst
+                            du hier nochmal wählen.
                         </p>
-                        <p x-show="!stepMsg && committed === 'NO'">
-                            Du hast bereits für Samstag, den 13.11.2027, <strong>abgesagt</strong>. Falls du deine Meinung ändern möchtest, kannst du hier nochmal wählen.
+                        <p x-show="committed === 'NO'">
+                            Du hast für Samstag, den 13.11.2027, <strong class="text-danger">abgesagt</strong>. Falls du
+                            deine
+                            Meinung ändern möchtest, kannst du hier nochmal wählen.
                         </p>
                         <div class="d-flex gap-2 mb-3">
-                            <button x-show="!stepMsg" id="commitYes" class="btn flex-fill"
-                                :class="{'btn-success': committed != 'NO',  'btn-outline-secondary' : committed == 'NO', 'disabled': working}"
+                            <button id="commitYes" class="btn flex-fill"
+                                :class="{'btn-success disabled': committed != 'NO',  'btn-outline-success opacity-75' : committed == 'NO', 'disabled': working}"
                                 @click="submitCommit('YES')" autofocus>Ja, ich bin dabei!</button>
-                            <button x-show="!stepMsg" id="commitNo" class="btn flex-fill"
-                                :class="{'btn-danger' : committed != 'YES','btn-outline-secondary' : committed == 'YES', 'disabled': working}"
-                                @click="submitCommit('NO')">Nein,
-                                ich
-                                kann leider nicht</button>
+                            <button id="commitNo" class="btn flex-fill"
+                                :class="{'btn-danger disabled' : committed != 'YES','btn-outline-danger opacity-75' : committed == 'YES', 'disabled': working}"
+                                @click="submitCommit('NO')">Nein, ich bin nicht dabei</button>
                         </div>
                         <div class="d-flex mt-2">
                             <button type="button" class="btn btn-outline-secondary flex-fill"
@@ -474,11 +489,11 @@
                     this.stepMsg = '';
                     this.stepMsgType = '';
                     this.step = step;
-                    
+
                     if (!this.enteredContacts) {
                         this.enteredContacts = [];
                     }
-                    
+
                     if (step === 3 && this.userToken) {
                         this.loadPendingContacts();
                     }
@@ -490,7 +505,7 @@
                             headers: { 'Authorization': this.userToken },
                             validateStatus: () => true
                         });
-                        
+
                         if (resp.status === 200) {
                             this.enteredContacts = (this.enteredContacts || []).filter((c) => c.isNew);
                             resp.data.forEach(contact => {
@@ -655,7 +670,7 @@
                         email: this.enteredContacts[index].email,
                         phone: this.enteredContacts[index].phone || ''
                     };
-                    
+
                     // Focus the email input of the specific contact being edited
                     setTimeout(() => {
                         // Find all email inputs and select the one that's currently visible (not d-none)
@@ -676,7 +691,7 @@
                     if (this.editingContactIndex >= 0 && this.enteredContacts[this.editingContactIndex].isNew) {
                         this.enteredContacts.splice(this.editingContactIndex, 1);
                     }
-                    
+
                     this.editingContactIndex = -1;
                     this.editingContactData = { email: '', phone: '' };
                 },
@@ -701,7 +716,7 @@
                             this.enteredContacts[index].phone = this.editingContactData.phone.trim();
                             // Remove the isNew flag since it's now saved
                             delete this.enteredContacts[index].isNew;
-                            
+
                             this.stepMsg = 'Kontakt erfolgreich gespeichert!';
                             this.stepMsgType = 'success';
                             this.editingContactIndex = -1;