From b9093af7510b89f516b66b4fa70d84a54aaa2e75 Mon Sep 17 00:00:00 2001 From: Simon Bruder Date: Thu, 7 Jun 2018 16:28:10 +0000 Subject: [PATCH] add second step, company membership iban (and more) --- .eslintrc | 1 + src/index.html | 112 +++++++++++++++++++++++++--- src/js/script.js | 176 ++++++++++++++++++++++++++++++++++++++------ src/less/style.less | 24 ++++-- 4 files changed, 271 insertions(+), 42 deletions(-) diff --git a/.eslintrc b/.eslintrc index 2b85153..3b0480a 100644 --- a/.eslintrc +++ b/.eslintrc @@ -5,6 +5,7 @@ globals: $: true _: true pdfMake: true + IBAN: true parserOptions: # use ES6 diff --git a/src/index.html b/src/index.html index ae18d89..f034492 100644 --- a/src/index.html +++ b/src/index.html @@ -38,6 +38,16 @@
+
+
+ + + + +
+
+
+
@@ -45,6 +55,11 @@
+
+
+ +
+
@@ -52,12 +67,18 @@
- +
+
+
+ + +
+
+

+
+ 2 + ✓ +
+ +

+
+ +
+ +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ Jahresbeitrag: 60 +
+
+
+ +
+ +
+ + + + -
+

Sie haben erfolgreich Ihren Mitgliedsantrag ausgefüllt und können - diesen jetzt herunterladen und dann entweder per E-Mail an - membership@fablab-nea.de - schicken oder ausdrucken und per Post schicken: + diesen jetzt herunterladen und dann bei und vorbeibringen oder + ausdrucken und per Post schicken an: 

 FabLab Bad Windsheim
@@ -120,6 +207,9 @@ Spitalwall 16
     
     
 
+    
+    
+
     
   
 
diff --git a/src/js/script.js b/src/js/script.js
index 49571fc..77441e8 100644
--- a/src/js/script.js
+++ b/src/js/script.js
@@ -1,9 +1,17 @@
 'use strict'
 
-const numSteps = 1
+const numSteps = 2
+const dobOptions = {
+  day: 'numeric',
+  month: 'long',
+  year: 'numeric'
+}
 
-_.forEach(_.range(numSteps), function (value) {
-  $('#step-' + (value + 1) + ' form').submit(function (event) {
+const individualFields = '.individual-only'
+const companyFields = '.company-only'
+
+_.forEach(_.range(numSteps), value => {
+  $('#step-' + (value + 1) + ' form').submit(event => {
     $('#step-' + (value + 2)).collapse('show')
     $('#step-' + (value + 1) + '-heading .step-number').addClass('done')
     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 () {
   var done = true
-  _.forEach(_.range(numSteps), (value) => {
+  _.forEach(_.range(numSteps), value => {
     console.log(value)
     if (!$('#step-' + (value + 1) + '-heading .step-number').hasClass('done')) {
       done = false
@@ -30,38 +66,130 @@ function isDone () {
   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 = {}
-  _.forEach(_.range(numSteps), function (value) {
-    _.each($('#step-' + (value + 1) + ' form').serializeArray(), function (value) {
+  _.forEach(_.range(numSteps), value => {
+    _.each($('#step-' + (value + 1) + ' form').serializeArray(), value => {
       model[value.name] = value.value
     })
   })
+
+  console.log(model) // DEBUG!
+
   var docDefinition = {
     content: [
-      { text: 'Mitgliedsantrag FabLab Neustadt Aisch/Bad Windsheim', fontSize: 20, margin: [0, 0, 0, 20] },
       {
-        text: [
-          'Name: ',
-          { text: model.givenname + ' ' + model.surname, bold: true }
-        ]
-      },
-      {
-        text: [
-          'Adresse: ',
-          { text: model.address, bold: true }
-        ]
-      },
-      {
-        text: [
-          'PLZ + Ort: ',
-          { text: model.zip + ' ' + model.place, bold: true }
-        ]
+        text: 'Mitgliedsantrag FabLab Neustadt Aisch/Bad Windsheim',
+        fontSize: 20,
+        margin: [0, 0, 0, 20]
       }
     ],
     pageSize: 'A4',
     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')
 })
diff --git a/src/less/style.less b/src/less/style.less
index fbd37a2..b7d865d 100644
--- a/src/less/style.less
+++ b/src/less/style.less
@@ -134,7 +134,14 @@ header {
         border-radius: 6px;
         color: white; // (!)
         padding: 0.4em 0.6em;
-        width: 100%;
+
+        // lesshint-disable qualifyingElement
+        &[type='text'],
+        &[type='date'],
+        &[type='email'] {
+          width: 100%;
+        }
+        // lesshint-enable qualifyingElement
 
         &::placeholder {
           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,
-        &::-webkit-inner-spin-button {
-            -webkit-appearance: none;
+      label {
+        margin-right: 24px;
+      }
+
+      #contribution {
+        font-size: 1.5em;
+
+        &::after {
+          content: '€';
         }
       }
     }