git ssb

0+

punkmonk / double



Tree: 144d08f547a26de56fd10b542128be8b56af51b3

Files: 144d08f547a26de56fd10b542128be8b56af51b3 / views / main.js

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

Built with git-ssb-web