Files: dcd99d6227eb3ed81cda0e5550b37e159116ed64 / views / main.js
3075 bytesRaw
1 | var html = require('choo/html') |
2 | |
3 | var TITLE = 'double - main' |
4 | |
5 | function 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 | |
107 | module.exports = view |
108 |
Built with git-ssb-web