| 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 |