nfp_sites/filadelfia_web/app/input.js

const m = require('mithril')
const api = require('./api')
const tempus = require('@eonasdan/tempus-dominus')

const tempusLocalization = {
  locale: 'is',
  startOfTheWeek: 0,
  hourCycle: 'h23',
  dateFormats: {
    LTS: 'H:mm:ss',
    LT: 'H:mm',
    L: 'dd.MM.yyyy',
    LL: 'd [de] MMMM [de] yyyy',
    LLL: 'd [de] MMMM [de] yyyy H:mm',
    LLLL: 'dddd, d [de] MMMM [de] yyyy H:mm',
  },
}

const Input = {
  oninit: function(vnode) {
    this.tempus = null
    this.subscription = null
    this.input = null
  },

  onremove: function(vnode) {
    if (!this.tempus) return
    if (this.subscription) this.subscription.unsubscribe()
    this.tempus.dispose()
    this.tempus = null
  },

  getInput: function(vnode) {
    switch (vnode.attrs.utility) {
      case 'file':
        return m('div.form-row', [
          m('input', {
            type: 'text',
            disabled: api.loading,
            value: vnode.attrs.form[vnode.attrs.formKey]?.name || '',
          }),
          m('button.fal', { class: vnode.attrs.button || 'file' }),
          m('input.cover', {
            type: 'file',
            accept: vnode.attrs.accept,
            disabled: api.loading,
            oninput: (e) => { vnode.attrs.form[vnode.attrs.formKey] = e.currentTarget.files?.[0] || null },
          }),
        ])
      case 'datetime':
        return m('div.form-row', [
          m('input', {
            type: 'text',
            disabled: api.loading,
            oncreate: (e) => {
              this.tempus = new tempus.TempusDominus(e.dom, {
                defaultDate: vnode.attrs.form[vnode.attrs.formKey],
                viewDate: vnode.attrs.form[vnode.attrs.formKey],
                localization: tempusLocalization,
              })
              this.subscription = this.tempus.subscribe(tempus.Namespace.events.change, (e) => {
                vnode.attrs.form[vnode.attrs.formKey] = e.date
              });
            },
          }),
          m('button.fal.fa-calendar', {
            onclick: () => { this.tempus.toggle(); return false },
          })
        ])
      default:
        return m('input', {
          disabled: api.loading,
          type: vnode.attrs.type || 'text',
          value: vnode.attrs.form[vnode.attrs.formKey],
          oninput: (e) => { vnode.attrs.form[vnode.attrs.formKey] = e.currentTarget.value },
        })
    }
  },

  view: function(vnode) {
    let input = m('input', {
      type: vnode.attrs.type || 'text',
      value: vnode.attrs.form[vnode.attrs.formKey],
      oninput: (e) => { vnode.attrs.form[vnode.attrs.formKey] = e.currentTarget.value },
    })

    if (vnode.attrs.utility === 'datetime') {

    }

    return [
      m('label', vnode.attrs.label),
      this.getInput(vnode),
    ]
  },
}

module.exports = Input