views/main.jsView |
---|
1 | | -var html = require('choo/html') |
| 1 … | +const h = require('hyperscript') |
| 2 … | +const TITLE = 'double - main' |
2 | 3 … | |
3 | | -var TITLE = 'double - main' |
4 | | - |
5 | 4 … | function view (state, emit) { |
6 | 5 … | if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE) |
7 | 6 … | |
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>` |
| 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 … | + ]) |
27 | 25 … | |
28 | | - const submit = html`<div class="pb6"> |
29 | | - <button onclick=${handleEntry}>submit</button> |
30 | | - </div>` |
| 26 … | + const submit = h('div.pb3', h('button', {onclick: handleEntry}, 'submit')) |
31 | 27 … | |
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>` |
| 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 … | + ]) |
55 | 53 … | |
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>` |
| 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 … | + ]) |
76 | 79 … | |
| 80 … | + |
77 | 81 … | function generateAccountList () { |
78 | 82 … | return Object.keys(state.accounts).map(key => { |
79 | 83 … | if (state.accounts[key].archived) return |
80 | 84 … | const name = state.accounts[key].name |
81 | | - return html`<option value=${name}>${name}</option>` |
| 85 … | + return h('option', {value: name}, name) |
82 | 86 … | }) |
83 | 87 … | } |
84 | 88 … | |
85 | 89 … | function handleEntry () { |
86 | | - const amount = document.getElementById('amount').value |
| 90 … | + const amount = parseFloat(document.getElementById('amount').value) |
87 | 91 … | const debit = document.getElementById('debit').value |
88 | 92 … | const credit = document.getElementById('credit').value |
89 | 93 … | const description = document.getElementById('description').value |
90 | 94 … | |
91 | 95 … | emit('entries', { type: 'entries', msg: { amount, debit, credit, description } }) |
92 | 96 … | } |
93 | 97 … | |
94 | 98 … | function handleAccountCreate () { |
95 | | - const account = document.getElementById('account').value |
| 99 … | + const name = document.getElementById('account').value |
96 | 100 … | |
97 | | - emit('accounts', { type: 'accounts', msg: { name: account, archived: false } }) |
| 101 … | + emit('accounts', { type: 'accounts', msg: { name, debit: 0, credit: 0, archived: false } }) |
98 | 102 … | } |
99 | 103 … | |
100 | 104 … | function handleAccountArchive () { |
101 | 105 … | const name = this.innerHTML |
102 | 106 … | |
103 | | - emit('accounts', { type: 'accounts', msg: { name, type: 'TOGGLE' } }) |
| 107 … | + emit('accounts', { type: 'accounts', msg: { name, archived: true } }) |
104 | 108 … | } |
105 | 109 … | } |
106 | 110 … | |
107 | 111 … | module.exports = view |