git ssb

1
const h = require('hyperscript')
2
const TITLE = 'double - main'
3
4
function view (state, emit) {
5
  if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE)
6
7
  const form = h('form.pv3', [
8
    h('div.pb2', [
9
      h('label', 'debit account'),
10
      h('div', h('select#debit', [
11
        h('option', {value: 'true'},'select'),
12
        generateAccountList()
13
      ]))
14
    ]),
15
    h('div.pb2', [
16
      h('label', 'credit account'),
17
      h('div', h('select#credit', [
18
        h('option', {value: 'true'},'select'),
19
        generateAccountList()
20
      ]))
21
    ]),
22
    h('div', h('input#amount.mb2', {placeholder: 'amount'})),
23
    h('div', h('input#description', {placeholder: 'description'}))
24
  ])
25
26
  const submit = h('div.pb3', h('button', {onclick: handleEntry}, 'submit'))
27
28
  const entries = h('div.pb6', [
29
    h('table', [
30
      h('thead', h('tr', [
31
        h('td.pr2', 'account'),
32
        h('td.pr2', 'debit'),
33
        h('td.pr2', 'credit'),
34
        h('td.pr2', 'description')
35
      ])),
36
      h('tbody', state.entries.map(entry => ['debit', 'credit'].map(i => {
37
        return i === 'debit'
38
          ? h('tr', [
39
            h('td', entry.msg.debit),
40
            h('td', entry.msg.amount),
41
            h('td', '-'),
42
            h('td', entry.msg.description)
43
          ])
44
          : h('tr', [
45
            h('td', entry.msg.credit),
46
            h('td', '-'),
47
            h('td', entry.msg.amount),
48
            h('td', entry.msg.description)
49
          ])
50
      })))
51
    ])
52
  ])
53
54
  return h('body.code.ph3.lh-copy', [
55
    h('main', [
56
      h('div', 'double'),
57
      form,
58
      submit,
59
      entries
60
    ]),
61
    h('div', [
62
      h('form.pb3', h('input#account')),
63
      h('button', {onclick: handleAccountCreate}, 'create account')
64
    ]),
65
    h('div.pv2', 'account balances'),
66
    Object.keys(state.accounts).map(key => {
67
      if (state.accounts[key].archived) {
68
        return h('div', [
69
          h('div.dib.strike', {onclick: handleAccountArchive}, state.accounts[key].name),
70
          h('div.dib.pr2.strike', state.accounts[key].debit - state.accounts[key].credit)
71
        ])
72
      }
73
      return h('div', [
74
        h('div.dib.pr2', {onclick: handleAccountArchive}, state.accounts[key].name),
75
        h('div.dib', state.accounts[key].debit - state.accounts[key].credit)
76
      ])
77
    })
78
  ])
79
80
81
  function generateAccountList () {
82
    return Object.keys(state.accounts).map(key => {
83
      if (state.accounts[key].archived) return
84
      const name = state.accounts[key].name
85
      return h('option', {value: name}, name)
86
    })
87
  }
88
89
  function handleEntry () {
90
    const amount = parseFloat(document.getElementById('amount').value)
91
    const debit = document.getElementById('debit').value
92
    const credit = document.getElementById('credit').value
93
    const description = document.getElementById('description').value
94
95
    emit('entries', { type: 'entries', msg: { amount, debit, credit, description } })
96
  }
97
98
  function handleAccountCreate () {
99
    const name = document.getElementById('account').value
100
101
    emit('accounts', { type: 'accounts', msg: { name, debit: 0, credit: 0, archived: false } })
102
  }
103
104
  function handleAccountArchive () {
105
    const name = this.innerHTML
106
107
    emit('accounts', { type: 'accounts', msg: { name, archived: true } })
108
  }
109
}
110
111
module.exports = view
112