Vertrag ansehen bei Vertragsauswahl entfernt
This commit is contained in:
parent
03913c6680
commit
f7655f17ca
@ -48,13 +48,6 @@
|
|||||||
✅ Vertrag auswählen
|
✅ Vertrag auswählen
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Vertrag als PDF -->
|
|
||||||
<a
|
|
||||||
href="/contracts/pdf/<%= v.id %>"
|
|
||||||
class="btn btn-outline-primary">
|
|
||||||
📄 Vertrag ansehen (PDF)
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- NEU: Einverständniserklärung -->
|
<!-- NEU: Einverständniserklärung -->
|
||||||
<a
|
<a
|
||||||
href="/documents/Einverstaendniserklaerung.pdf"
|
href="/documents/Einverstaendniserklaerung.pdf"
|
||||||
|
|||||||
@ -32,20 +32,16 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
<div class="container-form">
|
<div class="container-form">
|
||||||
|
|
||||||
<% if(error){ %>
|
<% if (typeof error !== 'undefined') { %>
|
||||||
<div class="alert alert-danger">
|
<div class="alert alert-danger">
|
||||||
⚠️ <%= error %>
|
⚠️ <%= error %>
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
|
|
||||||
<h3 class="text-center mb-4">Mitglied werden</h3>
|
<h3 class="text-center mb-4">Mitglied werden</h3>
|
||||||
|
|
||||||
|
|
||||||
<!-- Progress -->
|
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div id="progressBar"
|
<div id="progressBar"
|
||||||
class="progress-bar bg-primary"
|
class="progress-bar bg-primary"
|
||||||
@ -53,19 +49,13 @@ style="width:33%">
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- Navigation -->
|
|
||||||
<div class="step-nav text-center mb-3">
|
<div class="step-nav text-center mb-3">
|
||||||
<span id="nav1">Daten</span>
|
<span id="nav1">Daten</span>
|
||||||
<span id="nav2">Bank</span>
|
<span id="nav2">Bank</span>
|
||||||
<span id="nav3">Prüfen</span>
|
<span id="nav3">Prüfen</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<form method="POST" action="/register/create" id="registerForm">
|
||||||
<form method="POST"
|
|
||||||
action="/register/create"
|
|
||||||
id="registerForm">
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ================= STEP 1 ================= -->
|
<!-- ================= STEP 1 ================= -->
|
||||||
<div class="step" id="step1">
|
<div class="step" id="step1">
|
||||||
@ -82,10 +72,8 @@ class="form-control mb-2"
|
|||||||
required>
|
required>
|
||||||
|
|
||||||
<input name="mobil" class="form-control mb-2" placeholder="Mobilnummer" required>
|
<input name="mobil" class="form-control mb-2" placeholder="Mobilnummer" required>
|
||||||
|
|
||||||
<input type="email" name="email" class="form-control mb-2" placeholder="E-Mail" required>
|
<input type="email" name="email" class="form-control mb-2" placeholder="E-Mail" required>
|
||||||
|
|
||||||
|
|
||||||
<h5 class="mt-3">Adresse</h5>
|
<h5 class="mt-3">Adresse</h5>
|
||||||
|
|
||||||
<input name="strasse" class="form-control mb-2" placeholder="Straße" required>
|
<input name="strasse" class="form-control mb-2" placeholder="Straße" required>
|
||||||
@ -94,17 +82,12 @@ required>
|
|||||||
<input name="ort" class="form-control mb-2" placeholder="Ort" required>
|
<input name="ort" class="form-control mb-2" placeholder="Ort" required>
|
||||||
<input name="land" class="form-control mb-2" value="Deutschland">
|
<input name="land" class="form-control mb-2" value="Deutschland">
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-primary mt-3" onclick="nextStep(2)">
|
||||||
<button type="button"
|
|
||||||
class="btn btn-primary mt-3"
|
|
||||||
onclick="nextStep(2)">
|
|
||||||
Weiter →
|
Weiter →
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ================= STEP 2 ================= -->
|
<!-- ================= STEP 2 ================= -->
|
||||||
<div class="step" id="step2">
|
<div class="step" id="step2">
|
||||||
|
|
||||||
@ -115,40 +98,29 @@ Weiter →
|
|||||||
<input name="iban" class="form-control mb-2" placeholder="IBAN" required>
|
<input name="iban" class="form-control mb-2" placeholder="IBAN" required>
|
||||||
<input name="bic" class="form-control mb-2" placeholder="BIC" required>
|
<input name="bic" class="form-control mb-2" placeholder="BIC" required>
|
||||||
|
|
||||||
|
|
||||||
<div class="form-check mt-2">
|
<div class="form-check mt-2">
|
||||||
<input class="form-check-input"
|
<input class="form-check-input"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="agreeSepa"
|
name="agreeSepa"
|
||||||
value="on"
|
value="on"
|
||||||
required>
|
required>
|
||||||
|
|
||||||
<label class="form-check-label">
|
<label class="form-check-label">
|
||||||
SEPA-Mandat erteilen
|
SEPA-Mandat erteilen
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="d-flex justify-content-between mt-4">
|
<div class="d-flex justify-content-between mt-4">
|
||||||
|
<button type="button" class="btn btn-secondary" onclick="nextStep(1)">
|
||||||
<button type="button"
|
|
||||||
class="btn btn-secondary"
|
|
||||||
onclick="nextStep(1)">
|
|
||||||
← Zurück
|
← Zurück
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button type="button"
|
<button type="button" class="btn btn-primary" onclick="nextStep(3)">
|
||||||
class="btn btn-primary"
|
|
||||||
onclick="nextStep(3)">
|
|
||||||
Weiter →
|
Weiter →
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ================= STEP 3 ================= -->
|
<!-- ================= STEP 3 ================= -->
|
||||||
<div class="step" id="step3">
|
<div class="step" id="step3">
|
||||||
|
|
||||||
@ -158,99 +130,63 @@ Weiter →
|
|||||||
<div id="summaryBox"></div>
|
<div id="summaryBox"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- Vertrag hidden -->
|
|
||||||
<input type="hidden"
|
|
||||||
name="vertragsvariante"
|
|
||||||
value="<%= selectedVertrag || '' %>">
|
|
||||||
|
|
||||||
|
|
||||||
<h5>Vertrag</h5>
|
<h5>Vertrag</h5>
|
||||||
|
|
||||||
<div class="alert alert-info">
|
<select name="vertragsvariante" class="form-select mb-3" required>
|
||||||
|
<option value="">Bitte wählen</option>
|
||||||
<b>
|
<% vertragsarten.forEach(v => { %>
|
||||||
<% if(selectedVertragData){ %>
|
<option value="<%= v.id %>">
|
||||||
<%= selectedVertragData.name %> –
|
<%= v.name %> – <%= v.betrag.toFixed(2) %> €
|
||||||
<%= selectedVertragData.betrag.toFixed(2) %> € / Monat
|
</option>
|
||||||
<% } else { %>
|
<% }) %>
|
||||||
Kein Vertrag gewählt
|
</select>
|
||||||
<% } %>
|
|
||||||
</b>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<h5>Rechtliches</h5>
|
<h5>Rechtliches</h5>
|
||||||
|
|
||||||
|
|
||||||
<!-- Eltern-Zustimmung -->
|
|
||||||
<div class="form-check mb-2 d-none" id="consentBox">
|
<div class="form-check mb-2 d-none" id="consentBox">
|
||||||
|
|
||||||
<input class="form-check-input"
|
<input class="form-check-input"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="agreeConsent"
|
name="agreeConsent"
|
||||||
id="agreeConsent"
|
id="agreeConsent"
|
||||||
value="on">
|
value="on">
|
||||||
|
|
||||||
<label class="form-check-label">
|
<label class="form-check-label">
|
||||||
Einverständnis der Erziehungsberechtigten
|
Einverständnis der Erziehungsberechtigten
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- AGB -->
|
|
||||||
<div class="form-check mb-3">
|
<div class="form-check mb-3">
|
||||||
|
|
||||||
<input class="form-check-input"
|
<input class="form-check-input"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="agreeAgb"
|
name="agreeAgb"
|
||||||
value="on"
|
value="on"
|
||||||
required>
|
required>
|
||||||
|
|
||||||
<label class="form-check-label">
|
<label class="form-check-label">
|
||||||
AGB akzeptiert
|
AGB akzeptiert
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="d-flex justify-content-between mt-4">
|
<div class="d-flex justify-content-between mt-4">
|
||||||
|
<button type="button" class="btn btn-secondary" onclick="nextStep(2)">
|
||||||
<button type="button"
|
|
||||||
class="btn btn-secondary"
|
|
||||||
onclick="nextStep(2)">
|
|
||||||
← Zurück
|
← Zurück
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button type="submit"
|
<button type="submit" class="btn btn-success btn-lg">
|
||||||
class="btn btn-success btn-lg">
|
|
||||||
Abschließen
|
Abschließen
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
window.fromServerError =
|
window.fromServerError = <%= typeof errorStep !== 'undefined' ? 'true' : 'false' %>;
|
||||||
<%= typeof errorStep !== 'undefined' ? 'true' : 'false' %>;
|
let currentStep = <%= typeof errorStep !== 'undefined' ? errorStep : 1 %>;
|
||||||
|
|
||||||
let currentStep =
|
|
||||||
<%= typeof errorStep !== 'undefined' ? errorStep : 1 %>;
|
|
||||||
|
|
||||||
const form = document.getElementById('registerForm');
|
const form = document.getElementById('registerForm');
|
||||||
|
|
||||||
|
|
||||||
function nextStep(step){
|
function nextStep(step){
|
||||||
|
|
||||||
if(step > currentStep && !window.fromServerError){
|
if(step > currentStep && !window.fromServerError){
|
||||||
@ -276,35 +212,25 @@ checkAgeAndConsent();
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function validateStep(step){
|
function validateStep(step){
|
||||||
|
const container = document.getElementById('step'+step);
|
||||||
const container =
|
const fields = container.querySelectorAll('input,select');
|
||||||
document.getElementById('step'+step);
|
|
||||||
|
|
||||||
const fields =
|
|
||||||
container.querySelectorAll('input,select');
|
|
||||||
|
|
||||||
for(let field of fields){
|
for(let field of fields){
|
||||||
|
|
||||||
if(!field.checkValidity()){
|
if(!field.checkValidity()){
|
||||||
field.reportValidity();
|
field.reportValidity();
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function updateProgress(){
|
function updateProgress(){
|
||||||
document.getElementById('progressBar')
|
document.getElementById('progressBar')
|
||||||
.style.width = (currentStep * 33) + '%';
|
.style.width = (currentStep * 33) + '%';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function updateNav(){
|
function updateNav(){
|
||||||
|
|
||||||
document.querySelectorAll('.step-nav span')
|
document.querySelectorAll('.step-nav span')
|
||||||
.forEach(n => n.classList.remove('active'));
|
.forEach(n => n.classList.remove('active'));
|
||||||
|
|
||||||
@ -312,85 +238,56 @@ document.getElementById('nav'+currentStep)
|
|||||||
.classList.add('active');
|
.classList.add('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function isUnder18(){
|
function isUnder18(){
|
||||||
|
const bday = document.getElementById('geburtsdatum').value;
|
||||||
const bday =
|
|
||||||
document.getElementById('geburtsdatum').value;
|
|
||||||
|
|
||||||
if(!bday) return false;
|
if(!bday) return false;
|
||||||
|
|
||||||
const birth = new Date(bday);
|
const birth = new Date(bday);
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
|
|
||||||
let age = today.getFullYear() - birth.getFullYear();
|
let age = today.getFullYear() - birth.getFullYear();
|
||||||
|
|
||||||
if(today.getMonth() < birth.getMonth() ||
|
if(today.getMonth() < birth.getMonth() ||
|
||||||
(today.getMonth() === birth.getMonth() &&
|
(today.getMonth() === birth.getMonth() &&
|
||||||
today.getDate() < birth.getDate())){
|
today.getDate() < birth.getDate())){
|
||||||
age--;
|
age--;
|
||||||
}
|
}
|
||||||
|
|
||||||
return age < 18;
|
return age < 18;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function checkAgeAndConsent(){
|
function checkAgeAndConsent(){
|
||||||
|
const box = document.getElementById('consentBox');
|
||||||
const box =
|
const checkbox = document.getElementById('agreeConsent');
|
||||||
document.getElementById('consentBox');
|
|
||||||
|
|
||||||
const checkbox =
|
|
||||||
document.getElementById('agreeConsent');
|
|
||||||
|
|
||||||
if(isUnder18()){
|
if(isUnder18()){
|
||||||
|
|
||||||
box.classList.remove('d-none');
|
box.classList.remove('d-none');
|
||||||
checkbox.required = true;
|
checkbox.required = true;
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
|
|
||||||
box.classList.add('d-none');
|
box.classList.add('d-none');
|
||||||
checkbox.required = false;
|
checkbox.required = false;
|
||||||
checkbox.checked = true;
|
checkbox.checked = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
form.addEventListener('input', saveForm);
|
form.addEventListener('input', saveForm);
|
||||||
|
|
||||||
|
|
||||||
function saveForm(){
|
function saveForm(){
|
||||||
|
|
||||||
const data = {};
|
const data = {};
|
||||||
|
|
||||||
Array.from(form.elements).forEach(el=>{
|
Array.from(form.elements).forEach(el=>{
|
||||||
|
|
||||||
if(!el.name) return;
|
if(!el.name) return;
|
||||||
|
|
||||||
if(el.type === 'checkbox'){
|
if(el.type === 'checkbox'){
|
||||||
data[el.name] = el.checked ? 'on' : '';
|
data[el.name] = el.checked ? 'on' : '';
|
||||||
}else{
|
}else{
|
||||||
data[el.name] = el.value;
|
data[el.name] = el.value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
localStorage.setItem('registerData', JSON.stringify(data));
|
||||||
localStorage.setItem(
|
|
||||||
'registerData',
|
|
||||||
JSON.stringify(data)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function loadForm(){
|
function loadForm(){
|
||||||
|
const data = JSON.parse(localStorage.getItem('registerData'));
|
||||||
const data =
|
|
||||||
JSON.parse(localStorage.getItem('registerData'));
|
|
||||||
|
|
||||||
if(!data) return;
|
if(!data) return;
|
||||||
|
|
||||||
Object.keys(data).forEach(key=>{
|
Object.keys(data).forEach(key=>{
|
||||||
|
|
||||||
const field = form.elements[key];
|
const field = form.elements[key];
|
||||||
if(!field) return;
|
if(!field) return;
|
||||||
|
|
||||||
@ -402,42 +299,27 @@ field.value=data[key];
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function buildSummary(){
|
function buildSummary(){
|
||||||
|
const data = JSON.parse(localStorage.getItem('registerData'));
|
||||||
const data =
|
|
||||||
JSON.parse(localStorage.getItem('registerData'));
|
|
||||||
|
|
||||||
if(!data) return;
|
if(!data) return;
|
||||||
|
|
||||||
document.getElementById('summaryBox')
|
document.getElementById('summaryBox').innerHTML = `
|
||||||
.innerHTML=`
|
|
||||||
|
|
||||||
<b>Name:</b> ${data.vorname} ${data.nachname}<br>
|
<b>Name:</b> ${data.vorname} ${data.nachname}<br>
|
||||||
<b>Geburtsdatum:</b> ${data.geburtsdatum}<br>
|
<b>Geburtsdatum:</b> ${data.geburtsdatum}<br>
|
||||||
<b>Email:</b> ${data.email}<br>
|
<b>Email:</b> ${data.email}<br>
|
||||||
<b>Mobil:</b> ${data.mobil}<br>
|
<b>Mobil:</b> ${data.mobil}<br>
|
||||||
<b>Adresse:</b>
|
<b>Adresse:</b> ${data.strasse} ${data.hausnummer}, ${data.plz} ${data.ort}<br>
|
||||||
${data.strasse} ${data.hausnummer},
|
|
||||||
${data.plz} ${data.ort}<br>
|
|
||||||
<b>IBAN:</b> ${data.iban}
|
<b>IBAN:</b> ${data.iban}
|
||||||
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
form.addEventListener('submit',()=>{
|
form.addEventListener('submit',()=>{
|
||||||
localStorage.removeItem('registerData');
|
localStorage.removeItem('registerData');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
loadForm();
|
loadForm();
|
||||||
|
setTimeout(()=>{ nextStep(currentStep); },100);
|
||||||
setTimeout(()=>{
|
|
||||||
nextStep(currentStep);
|
|
||||||
},100);
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<%- include('partials/footer') %>
|
<%- include('partials/footer') %>
|
||||||
Loading…
Reference in New Issue
Block a user