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