This commit is contained in:
2025-09-19 18:00:38 +02:00
commit 1f9f2dc21c
26 changed files with 1379 additions and 0 deletions
+464
View File
@@ -0,0 +1,464 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>20 Jahre Abitur 2007</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="/lib/axios.min.js"></script>
<script defer src="/lib/alpinejs.min.js"></script>
<link rel="stylesheet" href="/lib/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<div class="main-content">
<div class="container pt-5" x-data="app()">
<div class="mb-4">
<div class="text-center p-4" style>
<div class="d-flex justify-content-center align-items-center mb-2 flex-wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true" class="text-primary me-2">
<path
d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z">
</path>
<path d="M22 10v6"></path>
<path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"></path>
</svg>
<h1 class="h3 mb-0 fw-bold text-primary" style="vertical-align:middle; display:inline-block;">
20 Jahre Abitur 2007
</h1>
</div>
<p class="text-secondary mb-0">
Wir wollen 2027 ein Abi-Treffen organisieren und brauchen dafür deine Kontaktdaten und sag uns
bitte kurz, ob du dabei bist oder nicht.<br><br>Lukas, Michi &amp; Max
</p>
</div>
</div>
<!-- Stepper -->
<div class="d-flex justify-content-center align-items-center mb-4 flex-wrap">
<div class="d-flex align-items-center flex-wrap">
<div class="rounded-circle border border-2 d-flex justify-content-center align-items-center"
:class="step === 1 ? 'bg-primary text-white border-primary' : 'bg-light text-secondary border-secondary'"
style="width:32px;height:32px;font-weight:600;">1</div>
<div class="mx-1">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m9 18 6-6-6-6"></path>
</svg>
</div>
<div class="rounded-circle border border-2 d-flex justify-content-center align-items-center"
:class="step === 2 ? 'bg-primary text-white border-primary' : 'bg-light text-secondary border-secondary'"
style="width:32px;height:32px;font-weight:600;">2</div>
<div class="mx-1">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m9 18 6-6-6-6"></path>
</svg>
</div>
<div class="rounded-circle border border-2 d-flex justify-content-center align-items-center"
:class="step === 3 ? 'bg-primary text-white border-primary' : 'bg-light text-secondary border-secondary'"
style="width:32px;height:32px;font-weight:600;">3</div>
<div class="mx-1">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m9 18 6-6-6-6"></path>
</svg>
</div>
<div class="rounded-circle border border-2 d-flex justify-content-center align-items-center"
:class="step === 4 ? 'bg-primary text-white border-primary' : 'bg-light text-secondary border-secondary'"
style="width:32px;height:32px;font-weight:600;">4</div>
</div>
</div>
<div class="card shadow">
<div class="card-body">
<!-- Step 1 -->
<div id="step1" x-show="step === 1" x-transition>
<h2 class="h5 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true" class="text-primary me-2">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle>
</svg> Schritt 1: Dein Name
</h2>
<div x-show="!userName">
<form @submit.prevent="findSelf" class="d-flex flex-column gap-3 mb-3">
<div class="mb-3">
<label class="form-label">
Dein Name (wie auf dem Abi-T-Shirt)
</label>
<input type="text" x-model="yourName" required autocomplete="off"
class="form-control" autofocus />
</div>
<button type="submit" class="btn btn-primary flex-fill">Suchen</button>
</form>
</div>
<div id="step1Msg" class="alert py-2" :class="'alert-' + step1MsgType" x-text="step1Msg"
x-show="step1Msg"></div>
<div x-show="userName">
<form @submit.prevent="continueStep1">
<p>
Hallo <span x-text="altName || userName"></span>! Falls sich dein Name geändert hat,
kannst du ihn hier anpassen oder einfach direkt weitermachen.
</p>
<div id="altNameCheckboxDiv" class="form-check mt-3" x-show="userName" x-transition>
<input type="checkbox" x-model="altNameChecked" class="form-check-input"
id="altNameCheckbox" style="width:18px;height:18px;"
@change="$nextTick(() => { if(altNameChecked) $refs.altNameInput && $refs.altNameInput.focus(); else $refs.continueBtn && $refs.continueBtn.focus(); })" />
<label class="form-check-label" for="altNameCheckbox" style="font-size:1rem;">
Ich möchte meinen Namen aktualisieren.
</label>
</div>
<div id="altNameDiv" class="mt-2" x-show="altNameChecked && userName" x-transition>
<div class="mb-3">
<label class="form-label">Mein aktueller Name:</label>
<input type="text" x-model="altName" autocomplete="off" class="form-control"
x-ref="altNameInput" @keydown.enter.prevent="$refs.continueBtn.click()" />
</div>
</div>
<div id="step1ContinueDiv" class="d-flex gap-2 mt-3 justify-content-center"
:class="userName ? '' : 'd-none'" x-transition>
<button id="step1ContinueBtn" type="submit" class="btn btn-primary flex-fill"
x-ref="continueBtn">
Weiter <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
</div>
</form>
</div>
</div>
<!-- Step 2 -->
<div id="step2" x-show="step === 2" x-transition>
<h2 class="h5 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true" class="text-primary me-2">
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
<rect x="2" y="4" width="20" height="16" rx="2"></rect>
</svg> Schritt 2: Deine Kontaktdaten
</h2>
<div id="step2Msg" class="alert py-2" :class="'alert-' + step2MsgType" x-text="step2Msg"
x-show="step2Msg"></div>
<form @submit.prevent="submitContactData" class="mb-3" autocomplete="off">
<div class="mb-3">
<label class="form-label">E-Mail:</label>
<input type="email" x-model="email" required autocomplete="off" class="form-control"
autofocus />
</div>
<div class="mb-3">
<label class="form-label">Handynummer (optional):</label>
<input type="text" x-model="phone" autocomplete="off" class="form-control" />
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary flex-fill" @click="step = 1">
Zurück
</button>
<button type="submit" class="btn btn-primary flex-fill" autofocus>Weiter <svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></button>
</div>
</form>
</div>
<!-- Step 3 -->
<div id="step3" x-show="step === 3" x-transition>
<h2 class="h5 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true" class="text-primary me-2">
<path
d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384">
</path>
</svg> Schritt 3: Kennst du noch jemanden?
</h2>
<form @submit.prevent="findKnownContact" class="mb-3">
<div class="mb-3">
<label class="form-label">Name auf dem Abi-T-Shirt:</label>
<input type="text" x-model="knownContactName" required autocomplete="off"
class="form-control" autofocus />
</div>
<div class="d-flex gap-2">
<button type="submit" class="btn btn-outline-dark flex-fill" autofocus>Suchen</button>
</div>
</form>
<div id="step3Msg" class="alert py-2" :class="'alert-' + step3MsgType" x-text="step3Msg"
x-show="step3Msg"></div>
<div id="knownContactDataDiv" x-show="showKnownContactData" x-transition>
<form @submit.prevent="submitKnownContactData" class="mb-3">
<div class="mb-3">
<label class="form-label">E-Mail:</label>
<input type="email" x-model="knownContactEmail" required autocomplete="off"
class="form-control" autofocus />
</div>
<div class="mb-3">
<label class="form-label">Handynummer (optional):</label>
<input type="text" x-model="knownContactPhone" autocomplete="off"
class="form-control" />
</div>
<button type="submit" class="btn btn-outline-success flex-fill"
autofocus>Speichern</button>
</form>
</div>
<ul class="list-group mb-3" id="enteredContacts">
<template x-for="c in enteredContacts" :key="c.name">
<li class="list-group-item"
x-text="`${c.name} (${c.email}${c.phone ? ', ' + c.phone : ''})`"></li>
</template>
</ul>
<div class="d-flex gap-2 mt-3 justify-content-center">
<button type="button" class="btn btn-outline-secondary flex-fill" @click="step = 2">
Zurück
</button>
<button id="step3NextBtn" class="btn btn-primary flex-fill" @click="step = 4">Weiter <svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></button>
</div>
</div>
<!-- Step 4 -->
<div id="step4" x-show="step === 4" x-transition>
<h2 class="h5 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true" class="text-primary me-2">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg> Schritt 4: Bist du beim 20-Jahrestreffen am 13.11.2027 dabei?
</h2>
<div id="step4Msg" class="alert py-2" :class="'alert-' + step4MsgType" x-text="step4Msg"
x-show="step4Msg"></div>
<p>
Hast du Lust, am Samstag, den 13.11.2027, beim Nachtreffen dabei zu sein? Mehr Infos gibt's
dann hier und per Mail.
</p>
<div class="d-flex gap-2 mb-3">
<button id="commitYes" class="btn btn-success flex-fill" @click="submitCommit('YES')"
autofocus>Ja, ich bin dabei!</button>
<button id="commitNo" class="btn btn-danger flex-fill" @click="submitCommit('NO')">Nein, ich
kann leider nicht</button>
</div>
<div class="d-flex mt-2">
<button type="button" class="btn btn-outline-secondary flex-fill" @click="step = 3">
Zurück
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="text-center py-4 bg-light border-top">
<a href="/imprint" class="text-secondary" style="text-decoration: none;">Impressum &amp; Datenschutz</a>
</footer>
<script>
function app() {
return {
// Step state
step: 1,
// Step 1
yourName: '',
step1Msg: '',
step1MsgType: '',
altNameChecked: false,
altName: '[[${altName}]]',
showStep1Continue: false,
userName: '[[${userName}]]',
userToken: '[[${token}]]',
pendingUpdatedName: null,
// Step 2
email: '[[${email}]]',
phone: '[[${phone}]]',
step2Msg: '',
step2MsgType: '',
// Step 3
knownContactName: '',
knownContactEmail: '',
knownContactPhone: '',
showKnownContactData: false,
enteredContacts: [],
step3Msg: '',
step3MsgType: '',
foundKnownContactName: null, // <-- add this line
// Step 4
step4Msg: '',
step4MsgType: '',
// Methods
async findSelf() {
this.step1Msg = '';
this.step1MsgType = '';
this.altNameChecked = false;
this.altName = '';
this.pendingUpdatedName = null;
try {
const resp = await axios.get(`/api/v1/contact`, { params: { name: this.yourName.trim() }, validateStatus: () => true });
if (resp.status === 200) {
this.userName = resp.data.name;
this.userToken = resp.data.token || null;
} else if (resp.status === 404) {
this.step1Msg = 'Sorry, wir konnten dich nicht finden. Schreib deinen Namen bitte genau so, wie er auf dem Abi-T-Shirt stand!';
this.step1MsgType = 'warning';
} else if (resp.status === 208) {
this.step1Msg = 'Du hast deine Daten schon eingetragen. Danke dir!';
this.step1MsgType = 'info';
// Prevent showing greeting/alt name UI
this.userName = null;
} else {
this.step1Msg = 'Uups, da ist was schiefgelaufen. Versuch es gleich nochmal!';
this.step1MsgType = 'danger';
}
} catch {
this.step1Msg = 'Uups, da ist was schiefgelaufen. Versuch es gleich nochmal!';
this.step1MsgType = 'danger';
}
},
async continueStep1() {
this.pendingUpdatedName = this.altNameChecked ? this.altName.trim() : null;
if (this.pendingUpdatedName && !this.userToken) {
await axios.post('/api/v1/contact', {
name: this.userName,
updatedName: this.pendingUpdatedName
});
}
this.step = 2;
},
async submitContactData() {
this.step2Msg = '';
this.step2MsgType = '';
try {
const resp = await axios.post('/api/v1/contact/data', {
name: this.userName,
reportedBy: this.userName,
email: this.email.trim(),
phone: this.phone.trim()
}, { validateStatus: () => true });
if (resp.status === 200 || resp.status === 201) {
this.step = 3;
} else if (resp.status === 400) {
this.step2Msg = 'Bitte schau nochmal über deine Angaben da stimmt was nicht.';
this.step2MsgType = 'warning';
} else {
this.step2Msg = 'Da ist was schiefgelaufen. Versuch es bitte nochmal!';
this.step2MsgType = 'danger';
}
} catch {
this.step2Msg = 'Da ist was schiefgelaufen. Versuch es bitte nochmal!';
this.step2MsgType = 'danger';
}
},
async findKnownContact() {
this.step3Msg = '';
this.step3MsgType = '';
this.showKnownContactData = false;
this.knownContactEmail = '';
this.knownContactPhone = '';
this.foundKnownContactName = null; // reset
try {
const resp = await axios.get('/api/v1/contact', {
params: { name: this.knownContactName.trim() },
validateStatus: () => true
});
if (resp.status === 200) {
this.foundKnownContactName = resp.data.name.trim();
if (this.foundKnownContactName == this.yourName) {
this.step3Msg = 'Das bist du selbst deine Daten hast du ja schon eingetragen!';
this.step3MsgType = 'warning';
this.showKnownContactData = false;
this.knownContactName = ''
return;
}
this.knownContactName = this.foundKnownContactName;
this.step3Msg = 'Super, trag bitte die Kontaktdaten ein!';
this.step3MsgType = 'success';
this.showKnownContactData = true;
} else if (resp.status === 404) {
this.step3Msg = 'Diesen Namen gibt es leider nicht in unserer Liste.';
this.step3MsgType = 'warning';
} else if (resp.status === 208) {
this.step3Msg = 'Für diese Person haben wir schon Kontaktdaten. Danke trotzdem fürs Mitmachen!';
this.step3MsgType = 'info';
this.showKnownContactData = false;
} else {
this.step3Msg = 'Da ist was schiefgelaufen. Versuch es bitte nochmal!';
this.step3MsgType = 'danger';
}
} catch {
this.step3Msg = 'Da ist was schiefgelaufen. Versuch es bitte nochmal!';
this.step3MsgType = 'danger';
}
},
async submitKnownContactData() {
this.step3Msg = '';
this.step3MsgType = '';
try {
const resp = await axios.post('/api/v1/contact/data', {
name: this.foundKnownContactName,
reportedBy: this.userName,
email: this.knownContactEmail.trim(),
phone: this.knownContactPhone.trim()
}, { validateStatus: () => true });
if (resp.status === 200 || resp.status === 201) {
this.enteredContacts = this.enteredContacts.filter((c) => c.name !== this.foundKnownContactName);
this.enteredContacts.push({
name: this.foundKnownContactName,
email: this.knownContactEmail.trim(),
phone: this.knownContactPhone.trim()
});
this.step3Msg = 'Danke, die Kontaktdaten sind gespeichert! Du kannst noch mehr eintragen oder einfach weitermachen.';
this.step3MsgType = 'success';
this.showKnownContactData = false;
this.knownContactName = '';
this.foundKnownContactName = null;
} else if (resp.status === 400) {
this.step3Msg = 'Bitte prüfe die Angaben nochmal da stimmt was nicht.';
this.step3MsgType = 'warning';
} else {
this.step3Msg = 'Da ist was schiefgelaufen. Versuch es bitte nochmal!';
this.step3MsgType = 'danger';
}
} catch {
this.step3Msg = 'Da ist was schiefgelaufen. Versuch es bitte nochmal!';
this.step3MsgType = 'danger';
}
},
async submitCommit(committed) {
try {
await axios.post('/api/v1/contact', {
name: this.userName,
updatedName: this.pendingUpdatedName,
token: this.userToken,
committed: committed
}, {
headers: this.userToken ? { 'Authorization': this.userToken } : {}
});
if (committed == 'YES') {
this.step4Msg = 'Danke für deine Rückmeldung! Schön, dass du dabei bist! Wir melden uns rechtzeitig mit allen weiteren Infos.' + (this.userToken ? '' : ' Du solltest schon automatisch eine E-Mail mit einem Link bekommen haben, über den du deine Daten jederzeit anpassen kannst.');
this.step4MsgType = 'success';
} else {
this.step4Msg = 'Danke für deine Rückmeldung! Schade, dass du nicht dabei bist.' + (this.userToken ? '' : ' Du solltest trotzdem automatisch eine E-Mail mit einem Link bekommen haben, über den du deine Daten jederzeit anpassen kannst und auch noch zusagen kannst, solltest du doch noch kommen wollen.');
this.step4MsgType = 'info';
}
} catch {
this.step4Msg = 'Da ist was schiefgelaufen. Versuch es bitte nochmal!';
this.step4MsgType = 'danger';
}
}
}
}
</script>
</body>
</html>