Commit dcd99d6227eb3ed81cda0e5550b37e159116ed64
initial entries/transactions table
austinfrey committed on 10/28/2018, 8:55:59 PMParent: 1739ab2f646d5e903603c2b7e59b6dee0c17fd3e
Files changed
package-lock.json | changed |
stores/ledger.js | changed |
views/main.js | changed |
package-lock.json | ||
---|---|---|
The diff is too large to show. Use a local git client to view these changes. Old file size: 353462 bytes New file size: 353759 bytes |
stores/ledger.js | ||
---|---|---|
@@ -3,48 +3,19 @@ | ||
3 | 3 … | const FlumeLog = require('flumelog-memory') |
4 | 4 … | |
5 | 5 … | function ledger (state, emitter) { |
6 | 6 … | state.accounts = {} |
7 | - state.transactions = [] | |
7 … | + state.entries = [] | |
8 | 8 … | |
9 | 9 … | const db = Flume(FlumeLog()) |
10 | - .use('transactions', Reduce( | |
11 | - 1, | |
12 | - transactionReducer, | |
13 | - null, | |
14 | - null, | |
15 | - state.transactions)) | |
16 | - .use('account', Reduce( | |
17 | - 1, | |
18 | - accountReducer, | |
19 | - null, | |
20 | - null, | |
21 | - state.accounts)) | |
10 … | + .use('entries', Reduce(1, entriesReducer, null, null, state.entries)) | |
11 … | + .use('accounts', Reduce(1, accountReducer, null, null, state.accounts)) | |
22 | 12 … | |
23 | 13 … | state.db = db |
24 | 14 … | |
25 | - function transactionReducer (acc, item) { | |
26 | - if (item.type !== 'transaction') return acc | |
27 | - acc.push(item) | |
28 | - return acc | |
29 | - } | |
30 | - | |
31 | - function accountReducer (acc, item) { | |
32 | - if (item.type !== 'accounts') return acc | |
33 | - const {msg} = item | |
34 | - switch (msg.type) { | |
35 | - case 'TOGGLE': | |
36 | - acc[msg.name].archived = !acc[msg.name].archived | |
37 | - return acc | |
38 | - default: | |
39 | - acc[msg.name] = msg | |
40 | - return acc | |
41 | - } | |
42 | - } | |
43 | - | |
44 | 15 … | function onLoad () { |
45 | - emitter.on('account', onEvent) | |
46 | - emitter.on('transaction:add', onEvent) | |
16 … | + emitter.on('accounts', onEvent) | |
17 … | + emitter.on('entries', onEvent) | |
47 | 18 … | } |
48 | 19 … | |
49 | 20 … | function onEvent (data) { |
50 | 21 … | db.append(data, (err, seq) => { |
@@ -55,5 +26,24 @@ | ||
55 | 26 … | |
56 | 27 … | emitter.on('DOMContentLoaded', onLoad) |
57 | 28 … | } |
58 | 29 … | |
30 … | +function entriesReducer (acc, item) { | |
31 … | + if (item.type !== 'entries') return acc | |
32 … | + acc.push(item) | |
33 … | + return acc | |
34 … | +} | |
35 … | + | |
36 … | +function accountReducer (acc, item) { | |
37 … | + if (item.type !== 'accounts') return acc | |
38 … | + const { msg } = item | |
39 … | + switch (msg.type) { | |
40 … | + case 'TOGGLE': | |
41 … | + acc[msg.name].archived = !acc[msg.name].archived | |
42 … | + return acc | |
43 … | + default: | |
44 … | + acc[msg.name] = msg | |
45 … | + return acc | |
46 … | + } | |
47 … | +} | |
48 … | + | |
59 | 49 … | module.exports = ledger |
views/main.js | ||
---|---|---|
@@ -4,21 +4,19 @@ | ||
4 | 4 … | |
5 | 5 … | function view (state, emit) { |
6 | 6 … | if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE) |
7 | 7 … | |
8 | - const {db} = state | |
9 | - | |
10 | 8 … | const form = html`<form class="pv3"> |
11 | 9 … | <div class="pb2"> |
12 | 10 … | <label>debit account</label><br> |
13 | - <select> | |
11 … | + <select id="debit"> | |
14 | 12 … | <option value="true">--- select debit account ---</option> |
15 | 13 … | ${generateAccountList()} |
16 | 14 … | </select> |
17 | 15 … | </div> |
18 | 16 … | <div class="pb2"> |
19 | 17 … | <label>credit account</label><br> |
20 | - <select> | |
18 … | + <select id="credit"> | |
21 | 19 … | <option value="true">--- select credit account ---</option> |
22 | 20 … | ${generateAccountList()} |
23 | 21 … | </select> |
24 | 22 … | </div> |
@@ -27,15 +25,40 @@ | ||
27 | 25 … | <input id="description" placeholder="description"/> |
28 | 26 … | </form>` |
29 | 27 … | |
30 | 28 … | const submit = html`<div class="pb6"> |
31 | - <button onclick=${handleTransaction}>submit</button> | |
29 … | + <button onclick=${handleEntry}>submit</button> | |
32 | 30 … | </div>` |
33 | 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 … | + | |
34 | 56 … | return html`<body class="code ph3 lh-copy"> |
35 | 57 … | <main> |
36 | 58 … | <div>double</div> |
37 | 59 … | ${form} |
60 … | + ${entries} | |
38 | 61 … | ${submit} |
39 | 62 … | </main> |
40 | 63 … | <div> |
41 | 64 … | <form class="pb3"> |
@@ -44,40 +67,41 @@ | ||
44 | 67 … | <button onclick=${handleAccountCreate}>create account</button> |
45 | 68 … | </div> |
46 | 69 … | <div> |
47 | 70 … | ${Object.keys(state.accounts).map(key => { |
48 | - if (state.accounts[key].archived) return html`<div class="strike" onclick=${handleAccountArchive}>${state.accounts[key].name}</div>` | |
49 | - return html`<div onclick=${handleAccountArchive}>${state.accounts[key].name}</div>` | |
50 | - })} | |
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 … | + })} | |
51 | 74 … | </div> |
52 | 75 … | </body>` |
53 | 76 … | |
54 | 77 … | function generateAccountList () { |
55 | 78 … | return Object.keys(state.accounts).map(key => { |
56 | 79 … | if (state.accounts[key].archived) return |
57 | - return html`<option value="true">${state.accounts[key].name}</option>` | |
80 … | + const name = state.accounts[key].name | |
81 … | + return html`<option value=${name}>${name}</option>` | |
58 | 82 … | }) |
59 | 83 … | } |
60 | 84 … | |
61 | - function handleTransaction () { | |
85 … | + function handleEntry () { | |
62 | 86 … | const amount = document.getElementById('amount').value |
63 | 87 … | const debit = document.getElementById('debit').value |
64 | 88 … | const credit = document.getElementById('credit').value |
65 | 89 … | const description = document.getElementById('description').value |
66 | 90 … | |
67 | - emit('transaction:add', {type: 'transaction', msg: { amount, debit, credit, description }}) | |
91 … | + emit('entries', { type: 'entries', msg: { amount, debit, credit, description } }) | |
68 | 92 … | } |
69 | 93 … | |
70 | 94 … | function handleAccountCreate () { |
71 | 95 … | const account = document.getElementById('account').value |
72 | 96 … | |
73 | - emit('account', { type: 'accounts', msg: { name: account, archived: false }}) | |
97 … | + emit('accounts', { type: 'accounts', msg: { name: account, archived: false } }) | |
74 | 98 … | } |
75 | 99 … | |
76 | 100 … | function handleAccountArchive () { |
77 | 101 … | const name = this.innerHTML |
78 | 102 … | |
79 | - emit('account', { type: 'accounts', msg: { name, type: 'TOGGLE' }}) | |
103 … | + emit('accounts', { type: 'accounts', msg: { name, type: 'TOGGLE' } }) | |
80 | 104 … | } |
81 | 105 … | } |
82 | 106 … | |
83 | 107 … | module.exports = view |
Built with git-ssb-web