cay/Vertragsverwaltung_Plusfit24
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vertrag ansehen bei Vertragsauswahl entfernt

Browse Source
This commit is contained in:
Cay 2026-02-28 09:06:45 +00:00
parent 03913c6680
commit f7655f17ca
2 changed files with 152 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
views/contractsSelect.ejs
View File

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

422
views/register.ejs
View File

@ -1,29 +1,29 @@
<%- include('partials/header') %> <%- include('partials/header') %>
<style> <style>
.step { display:none; } .step { display: none; }
.step.active { display:block; } .step.active { display: block; }
.container-form{ .container-form {
max-width:700px; max-width: 700px;
margin:auto; margin: auto;
} }
.progress{ .progress {
height:10px; height: 10px;
margin-bottom:30px; margin-bottom: 30px;
} }
.step-nav{ .step-nav {
display:flex; display: flex;
justify-content:space-between; justify-content: space-between;
font-size:14px; font-size: 14px;
margin-bottom:20px; margin-bottom: 20px;
} }
.step-nav span.active{ .step-nav span.active {
font-weight:bold; font-weight: bold;
color:#3b3be3; color: #3b3be3;
} }
@media(max-width:768px){ @media(max-width:768px){
@ -32,40 +32,30 @@
} }
</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"
style="width:33%"> 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">
@ -76,16 +66,14 @@ id="registerForm">
<input name="nachname" class="form-control mb-2" placeholder="Nachname" required> <input name="nachname" class="form-control mb-2" placeholder="Nachname" required>
<input type="date" <input type="date"
name="geburtsdatum" name="geburtsdatum"
id="geburtsdatum" id="geburtsdatum"
class="form-control mb-2" 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,286 +130,196 @@ 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){
if(!validateStep(currentStep)) return; if(!validateStep(currentStep)) return;
}
saveForm();
currentStep = step;
document.querySelectorAll('.step')
.forEach(s => s.classList.remove('active'));
document.getElementById('step'+step)
.classList.add('active');
updateNav();
updateProgress();
if(step === 3){
buildSummary();
checkAgeAndConsent();
}
} }
saveForm();
currentStep = step;
document.querySelectorAll('.step')
.forEach(s=>s.classList.remove('active'));
document.getElementById('step'+step)
.classList.add('active');
updateNav();
updateProgress();
if(step === 3){
buildSummary();
checkAgeAndConsent();
}
}
function validateStep(step){ function validateStep(step){
const container = document.getElementById('step'+step);
const fields = container.querySelectorAll('input,select');
const container = for(let field of fields){
document.getElementById('step'+step); if(!field.checkValidity()){
field.reportValidity();
const fields = return false;
container.querySelectorAll('input,select'); }
}
for(let field of fields){ return true;
if(!field.checkValidity()){
field.reportValidity();
return false;
} }
}
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')
.forEach(n => n.classList.remove('active'));
document.querySelectorAll('.step-nav span') document.getElementById('nav'+currentStep)
.forEach(n=>n.classList.remove('active')); .classList.add('active');
document.getElementById('nav'+currentStep)
.classList.add('active');
} }
function isUnder18(){ function isUnder18(){
const bday = document.getElementById('geburtsdatum').value;
if(!bday) return false;
const bday = const birth = new Date(bday);
document.getElementById('geburtsdatum').value; const today = new Date();
if(!bday) return false; let age = today.getFullYear() - birth.getFullYear();
if(today.getMonth() < birth.getMonth() ||
const birth = new Date(bday); (today.getMonth() === birth.getMonth() &&
const today = new Date(); today.getDate() < birth.getDate())){
age--;
let age = today.getFullYear()-birth.getFullYear(); }
return age < 18;
if(today.getMonth()<birth.getMonth() ||
(today.getMonth()===birth.getMonth() &&
today.getDate()<birth.getDate())){
age--;
} }
return age<18;
}
function checkAgeAndConsent(){ function checkAgeAndConsent(){
const box = document.getElementById('consentBox');
const checkbox = document.getElementById('agreeConsent');
const box = if(isUnder18()){
document.getElementById('consentBox'); box.classList.remove('d-none');
checkbox.required = true;
const checkbox = }else{
document.getElementById('agreeConsent'); box.classList.add('d-none');
checkbox.required = false;
if(isUnder18()){ checkbox.checked = true;
}
box.classList.remove('d-none');
checkbox.required=true;
}else{
box.classList.add('d-none');
checkbox.required=false;
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=>{
if(!el.name) return;
Array.from(form.elements).forEach(el=>{ if(el.type === 'checkbox'){
data[el.name] = el.checked ? 'on' : '';
if(!el.name) return; }else{
data[el.name] = el.value;
if(el.type==='checkbox'){ }
data[el.name]=el.checked?'on':''; });
}else{ localStorage.setItem('registerData', JSON.stringify(data));
data[el.name]=el.value;
} }
});
localStorage.setItem(
'registerData',
JSON.stringify(data)
);
}
function loadForm(){ function loadForm(){
const data = JSON.parse(localStorage.getItem('registerData'));
if(!data) return;
const data = Object.keys(data).forEach(key=>{
JSON.parse(localStorage.getItem('registerData')); const field = form.elements[key];
if(!field) return;
if(!data) return; if(field.type === 'checkbox'){
field.checked = data[key] === 'on';
Object.keys(data).forEach(key=>{ }else{
field.value = data[key];
const field=form.elements[key]; }
if(!field) return; });
if(field.type==='checkbox'){
field.checked=data[key]==='on';
}else{
field.value=data[key];
} }
});
}
function buildSummary(){ function buildSummary(){
const data = JSON.parse(localStorage.getItem('registerData'));
if(!data) return;
const data = document.getElementById('summaryBox').innerHTML = `
JSON.parse(localStorage.getItem('registerData')); <b>Name:</b> ${data.vorname} ${data.nachname}<br>
<b>Geburtsdatum:</b> ${data.geburtsdatum}<br>
if(!data) return; <b>Email:</b> ${data.email}<br>
<b>Mobil:</b> ${data.mobil}<br>
document.getElementById('summaryBox') <b>Adresse:</b> ${data.strasse} ${data.hausnummer}, ${data.plz} ${data.ort}<br>
.innerHTML=` <b>IBAN:</b> ${data.iban}
`;
<b>Name:</b> ${data.vorname} ${data.nachname}<br>
<b>Geburtsdatum:</b> ${data.geburtsdatum}<br>
<b>Email:</b> ${data.email}<br>
<b>Mobil:</b> ${data.mobil}<br>
<b>Adresse:</b>
${data.strasse} ${data.hausnummer},
${data.plz} ${data.ort}<br>
<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') %>