mitgliedsantrag/src/js/script.js

'use strict'

const numSteps = 2
const dobOptions = {
  day: 'numeric',
  month: 'long',
  year: 'numeric'
}

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) {
      $('.download-wrapper button').prop('disabled', false)
      $('.download-wrapper button').remove('btn-danger')
      $('.download-wrapper button').addClass('btn-success')
    } else {
      $('.download-wrapper button').prop('disabled', true)
      $('.download-wrapper button').remove('btn-success')
      $('.download-wrapper button').addClass('btn-danger')
    }
    event.preventDefault()
  })
})

$('[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 => {
    console.log(value)
    if (!$('#step-' + (value + 1) + '-heading .step-number').hasClass('done')) {
      done = false
    }
  })
  return done
}

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), 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]
      }
    ],
    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')
})