add second step, company membership iban (and more)

.eslintrc

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

src/index.html

@@ -38,6 +38,16 @@
       <div id="step-1" class="step collapse show" aria-labelledby="step-1-heading" data-parent="#steps">
         <form>
           <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">
               <input type="text" name="givenname" placeholder="Vorname" required>
             </div>
@@ -45,6 +55,11 @@
               <input type="text" name="surname" placeholder="Nachname" required>
             </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="col col-12">
               <input type="text" name="address" placeholder="Adresse" required>
@@ -52,12 +67,18 @@
           </div>
           <div class="row">
             <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 class="col col-12 col-md-8">
               <input type="text" name="place" placeholder="Ort" required>
             </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">
             <button type="submit">
               <span>Weiter</span>
@@ -68,30 +89,96 @@
       </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">
+        <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>
           <div class="step-number final done">
             <span class="check">✓</span>
           </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
           </a>
         </h2>
       </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>
           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>
         <pre class="address">
 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/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>
   </body>
 </html>

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) {
+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 + 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) {
+  _.forEach(_.range(numSteps), value => {
-    _.each($('#step-' + (value + 1) + ' form').serializeArray(), function (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: [
+        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',
     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')
 })

src/less/style.less

@@ -134,7 +134,14 @@ header {
         border-radius: 6px;
         color: white; // (!)
         padding: 0.4em 0.6em;
+
+        // 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,
+      label {
-        &::-webkit-inner-spin-button {
+        margin-right: 24px;
-            -webkit-appearance: none;
+      }
+
+      #contribution {
+        font-size: 1.5em;
+
+        &::after {
+          content: '€';
         }
       }
     }