add second step, company membership iban (and more)

This commit is contained in:
Simon Bruder 2018-06-07 16:28:10 +00:00
parent 62609689e4
commit b9093af751
No known key found for this signature in database
GPG key ID: 6F03E0000CC5B62F
4 changed files with 271 additions and 42 deletions

View file

@ -5,6 +5,7 @@ globals:
$: true $: true
_: true _: true
pdfMake: true pdfMake: true
IBAN: true
parserOptions: parserOptions:
# use ES6 # use ES6

View file

@ -38,6 +38,16 @@
<div id="step-1" class="step collapse show" aria-labelledby="step-1-heading" data-parent="#steps"> <div id="step-1" class="step collapse show" aria-labelledby="step-1-heading" data-parent="#steps">
<form> <form>
<div class="row"> <div class="row">
<div class="col col-12">
<div class="form-check">
<input class="form-check-input" type="radio" name="entity-type" id="individual" value="individual" checked>
<label class="form-check-label" for="individual">Privatperson</label>
<input class="form-check-input" type="radio" name="entity-type" id="company" value="company">
<label class="form-check-label" for="company">Firma</label>
</div>
</div>
</div>
<div class="row individual-only">
<div class="col col-12 col-md-6"> <div class="col col-12 col-md-6">
<input type="text" name="givenname" placeholder="Vorname" required> <input type="text" name="givenname" placeholder="Vorname" required>
</div> </div>
@ -45,6 +55,11 @@
<input type="text" name="surname" placeholder="Nachname" required> <input type="text" name="surname" placeholder="Nachname" required>
</div> </div>
</div> </div>
<div class="row d-none company-only">
<div class="col col-12">
<input type="text" name="companyname" placeholder="Firmenname">
</div>
</div>
<div class="row"> <div class="row">
<div class="col col-12"> <div class="col col-12">
<input type="text" name="address" placeholder="Adresse" required> <input type="text" name="address" placeholder="Adresse" required>
@ -52,12 +67,18 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col col-12 col-md-4"> <div class="col col-12 col-md-4">
<input type="text" maxlength="5" name="zip" placeholder="Postleitzahl" required> <input type="text" minlength="5" maxlength="5" name="zip" placeholder="Postleitzahl" required>
</div> </div>
<div class="col col-12 col-md-8"> <div class="col col-12 col-md-8">
<input type="text" name="place" placeholder="Ort" required> <input type="text" name="place" placeholder="Ort" required>
</div> </div>
</div> </div>
<div class="row individual-only">
<div class="col col-12">
<label for="dob">Geburtsdatum</label>
<input type="date" id="dob" name="dob" min="1900-01-01" required>
</div>
</div>
<div class="next-wrapper"> <div class="next-wrapper">
<button type="submit"> <button type="submit">
<span>Weiter</span> <span>Weiter</span>
@ -68,30 +89,96 @@
</div> </div>
<!-- <!--
- mmmm mmmmmmm mmmmmm mmmmm mmmm - mmmm mmmmmmm mmmmmm mmmmm zwei
- #" " # # # "# " "# - #" " # # # "# zwei
- "#mmm # #mmmmm #mmm#" m" - "#mmm # #mmmmm #mmm#" zwei
- "# # # # m" - "# # # # zwei
- "mmm#" # #mmmmm # m#mmmm - "mmm#" # #mmmmm # zwei
--> -->
<div class="step-heading" id="step-2-heading"> <div class="step-heading" id="step-2-heading">
<h2>
<div class="step-number">
<span class="number">2</span>
<span class="check"></span>
</div>
<a data-toggle="collapse" data-target="#step-2" aria-expanded="false" aria-controls="step-2">
Zahlungsdaten
</a>
</h2>
</div>
<div id="step-2" class="step collapse" aria-labelledby="step-2-heading" data-parent="#steps">
<form>
<div class="row">
<div class="col col-12">
<input type="text" name="iban" placeholder="IBAN" required>
</div>
</div>
<div class="row">
<div class="col col-12">
<input type="text" name="bic" placeholder="BIC">
</div>
</div>
<div class="row">
<div class="col col-12">
<input type="email" name="email" placeholder="E-Mail-Adresse" required>
</div>
</div>
<div class="row">
<div class="col col-12">
<div class="form-check">
<input class="form-check-input" type="radio" name="membership" id="membership-single" data-contribution="60" value="single" checked required>
<label class="form-check-label" for="membership-single">Einzelmitgliedschaft</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="membership" id="membership-students" data-contribution="24" value="students" required>
<label class="form-check-label" for="membership-students">Mitgliedschaft für Schüler und Studenten</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="membership" id="membership-family" data-contribution="100" value="family" required>
<label class="form-check-label" for="membership-family">Familienmitgliedschaft (2 Erwachsene und Ihre Kinder)</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="membership" id="membership-support" data-contribution="300" value="support" required>
<label class="form-check-label" for="membership-support">Fördermitgliedschaft</label>
</div>
<span class="contribution">Jahresbeitrag: <span id="contribution">60</span></span>
</div>
</div>
<div class="next-wrapper">
<button type="submit">
<span>Weiter</span>
<i class="material-icons">keyboard_arrow_down</i>
</button>
</div>
</form>
</div>
<!--
- mmmm mmmmmmm mmmmmm mmmmm drei
- #" " # # # "# drei
- "#mmm # #mmmmm #mmm#" drei
- "# # # # drei
- "mmm#" # #mmmmm # drei
-->
<div class="step-heading" id="step-3-heading">
<h2> <h2>
<div class="step-number final done"> <div class="step-number final done">
<span class="check"></span> <span class="check"></span>
</div> </div>
<a data-toggle="collapse" data-target="#step-2" aria-expanded="true" aria-controls="step-2"> <a data-toggle="collapse" data-target="#step-3" aria-expanded="true" aria-controls="step-3">
Fertig Fertig
</a> </a>
</h2> </h2>
</div> </div>
<div id="step-2" class="step final collapse" aria-labelledby="step-2-heading" data-parent="#steps"> <div id="step-3" class="step final collapse" aria-labelledby="step-3-heading" data-parent="#steps">
<p> <p>
Sie haben erfolgreich Ihren Mitgliedsantrag ausgefüllt und können Sie haben erfolgreich Ihren Mitgliedsantrag ausgefüllt und können
diesen jetzt herunterladen und dann entweder per E-Mail an diesen jetzt herunterladen und dann bei und vorbeibringen oder
<a href="mailto:membership@fablab-nea.de">membership@fablab-nea.de ausdrucken und per Post schicken an:
</a> schicken oder ausdrucken und per Post schicken:
</p> </p>
<pre class="address"> <pre class="address">
FabLab Bad Windsheim FabLab Bad Windsheim
@ -120,6 +207,9 @@ Spitalwall 16
<script src="https://cdn.jsdelivr.net/npm/pdfmake@0.1.36/build/pdfmake.min.js" integrity="sha256-Bxopx5SriypS8eE5qr38Bvap2ZNx3CUl9HZ6sewBtfk=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/pdfmake@0.1.36/build/pdfmake.min.js" integrity="sha256-Bxopx5SriypS8eE5qr38Bvap2ZNx3CUl9HZ6sewBtfk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfmake@0.1.36/build/vfs_fonts.js" integrity="sha256-wvH/UThD/fVD6sz1bAWX7JDW5Nx1TBdhegX8IHX20hA=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/pdfmake@0.1.36/build/vfs_fonts.js" integrity="sha256-wvH/UThD/fVD6sz1bAWX7JDW5Nx1TBdhegX8IHX20hA=" crossorigin="anonymous"></script>
<!-- IBAN validation -->
<script src="https://cdn.jsdelivr.net/npm/iban@0.0.10/iban.js" integrity="sha256-80PEQmZm+hEjwSN98o0qEuBLCQXXVofrxhh24Kayk4E=" crossorigin="anonymous"></script>
<script src="js/script.min.js"></script> <script src="js/script.min.js"></script>
</body> </body>
</html> </html>

View file

@ -1,9 +1,17 @@
'use strict' 'use strict'
const numSteps = 1 const numSteps = 2
const dobOptions = {
day: 'numeric',
month: 'long',
year: 'numeric'
}
_.forEach(_.range(numSteps), function (value) { const individualFields = '.individual-only'
$('#step-' + (value + 1) + ' form').submit(function (event) { const companyFields = '.company-only'
_.forEach(_.range(numSteps), value => {
$('#step-' + (value + 1) + ' form').submit(event => {
$('#step-' + (value + 2)).collapse('show') $('#step-' + (value + 2)).collapse('show')
$('#step-' + (value + 1) + '-heading .step-number').addClass('done') $('#step-' + (value + 1) + '-heading .step-number').addClass('done')
if (isDone) { if (isDone) {
@ -19,9 +27,37 @@ _.forEach(_.range(numSteps), function (value) {
}) })
}) })
$('[name="membership"]').on('change', event => {
$('#contribution').text($(event.target).data('contribution'))
})
// TODO: validation
// this should be done in css, but css does not support such formatting
$('[name="iban"]').on('input', event => {
let iban = Array.from($(event.target).val().replace(/\s/g, ''))
if (IBAN.isValid(iban.join(''))) {
event.target.setCustomValidity('')
} else {
event.target.setCustomValidity('IBAN ungültig')
}
let prettyIban = ''
for (let i = 0; i < iban.length; i++) {
if (i % 4 === 0) {
prettyIban += iban.slice(i, i + 4).join('')
if (i + 4 < iban.length) {
prettyIban += ' '
}
}
}
$(event.target).val(prettyIban)
})
function isDone () { function isDone () {
var done = true var done = true
_.forEach(_.range(numSteps), (value) => { _.forEach(_.range(numSteps), value => {
console.log(value) console.log(value)
if (!$('#step-' + (value + 1) + '-heading .step-number').hasClass('done')) { if (!$('#step-' + (value + 1) + '-heading .step-number').hasClass('done')) {
done = false done = false
@ -30,38 +66,130 @@ function isDone () {
return done return done
} }
$('#generate').click(function () { function setEntityType (type) {
if (type === 'individual') {
$(companyFields).addClass('d-none')
$(individualFields).removeClass('d-none')
$(companyFields + ' input').removeAttr('required')
$(individualFields + ' input').attr('required', 'required')
} else {
$(companyFields).removeClass('d-none')
$(individualFields).addClass('d-none')
$(individualFields + ' input').removeAttr('required')
$(companyFields + ' input').attr('required', 'required')
}
}
$('form input[name="entity-type"]').on('change', () => {
setEntityType($('input[name="entity-type"]:checked').val())
})
$('#generate').click(() => {
var model = {} var model = {}
_.forEach(_.range(numSteps), function (value) { _.forEach(_.range(numSteps), value => {
_.each($('#step-' + (value + 1) + ' form').serializeArray(), function (value) { _.each($('#step-' + (value + 1) + ' form').serializeArray(), value => {
model[value.name] = value.value model[value.name] = value.value
}) })
}) })
console.log(model) // DEBUG!
var docDefinition = { var docDefinition = {
content: [ content: [
{ text: 'Mitgliedsantrag FabLab Neustadt Aisch/Bad Windsheim', fontSize: 20, margin: [0, 0, 0, 20] },
{ {
text: [ text: 'Mitgliedsantrag FabLab Neustadt Aisch/Bad Windsheim',
'Name: ', fontSize: 20,
{ text: model.givenname + ' ' + model.surname, bold: true } margin: [0, 0, 0, 20]
]
},
{
text: [
'Adresse: ',
{ text: model.address, bold: true }
]
},
{
text: [
'PLZ + Ort: ',
{ text: model.zip + ' ' + model.place, bold: true }
]
} }
], ],
pageSize: 'A4', pageSize: 'A4',
pageMargins: [ 62.3622, 60, 62.3622, 60 ] pageMargins: [ 62.3622, 60, 62.3622, 60 ]
} }
docDefinition.content.push({
text: [
'Name: ',
{
text: model['entity-type'] === 'individual' ? `${model.givenname} ${model.surname}` : model.companyname,
bold: true
}
]
})
docDefinition.content.push({
text: [
'Adresse: ',
{
text: model.address,
bold: true
}
]
})
docDefinition.content.push({
text: [
'PLZ + Ort: ',
{
text: `${model.zip} ${model.place}`,
bold: true
}
]
})
docDefinition.content.push({
text: [
'E-Mail-Adresse: ',
{
text: model.email,
bold: true
}
]
})
if (model['entity-type'] === 'individual') {
let dob = new Date(model.dob).toLocaleDateString('de-DE', dobOptions)
docDefinition.content.push({
text: [
'Geburtstag: ',
{
text: dob,
bold: true
}
]
})
}
docDefinition.content.push({
text: [
'IBAN: ',
{
text: model.iban,
bold: true
}
]
})
if (model.bic) {
docDefinition.content.push({
text: [
'BIC: ',
{
text: model.bic,
bold: true
}
]
})
}
docDefinition.content.push({
text: [
'Mitgliedschaft: ',
{
text: `${$(`[for="membership-${model.membership}"]`).text()} (${$(`#membership-${model.membership}`).data('contribution')} €)`,
bold: true
}
]
})
pdfMake.createPdf(docDefinition).download('Mitgliedsantrag FabLab NEA.pdf') pdfMake.createPdf(docDefinition).download('Mitgliedsantrag FabLab NEA.pdf')
}) })

View file

@ -134,7 +134,14 @@ header {
border-radius: 6px; border-radius: 6px;
color: white; // (!) color: white; // (!)
padding: 0.4em 0.6em; padding: 0.4em 0.6em;
width: 100%;
// lesshint-disable qualifyingElement
&[type='text'],
&[type='date'],
&[type='email'] {
width: 100%;
}
// lesshint-enable qualifyingElement
&::placeholder { &::placeholder {
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
@ -142,13 +149,16 @@ header {
} }
} }
/* do not show spin buttons */
input {
-moz-appearance: textfield;
&::-webkit-outer-spin-button, label {
&::-webkit-inner-spin-button { margin-right: 24px;
-webkit-appearance: none; }
#contribution {
font-size: 1.5em;
&::after {
content: '€';
} }
} }
} }