Commit 6f9ed10872eb05dbde900a885c8e412c20447599
seperated styles into it
s own componentaustinfrey committed on 11/7/2018, 3:59:34 AM
Parent: 98f461d19e74598f16307611691908bfb204ccad
Files changed
components/nav.js | changed |
components/styles.js | added |
index.js | changed |
package-lock.json | changed |
package.json | changed |
stores/ledger.js | changed |
views/accounts.js | changed |
views/entries.js | changed |
views/transactions.js | changed |
views/404.js | deleted |
manifest.json | deleted |
components/nav.js | ||
---|---|---|
@@ -1,24 +1,22 @@ | ||
1 | 1 … | var Component = require('choo/component') |
2 | 2 … | const h = require('hyperscript') |
3 | -const style = require('../assets/styles') | |
4 | 3 … | |
5 | 4 … | class Nav extends Component { |
6 | 5 … | constructor (id, state, emit) { |
7 | 6 … | super(id) |
8 | 7 … | this.local = state.components[id] = {} |
9 | 8 … | } |
10 | 9 … | |
11 | 10 … | createElement () { |
12 | - return h('nav.pv3', [ | |
13 | - style, | |
14 | - h('a.link.dim.black.b.f6.f5-ns.dib.mr3', { | |
11 … | + return h('nav.tc.pv5', [ | |
12 … | + h('a.link.dim.black.b.f6.f5-ns.dib.mr5', { | |
15 | 13 … | href: '/' |
16 | 14 … | }, 'home'), |
17 | - h('a.link.dim.gray.f6.f5-ns.dib.mr3', { | |
15 … | + h('a.link.dim.gray.f6.f5-ns.dib.mr5', { | |
18 | 16 … | href: '/transactions' |
19 | 17 … | }, 'transactions'), |
20 | - h('a.link.dim.gray.f6.f5-ns.dib.mr3', { | |
18 … | + h('a.link.dim.gray.f6.f5-ns.dib', { | |
21 | 19 … | href: '/accounts' |
22 | 20 … | }, 'accounts') |
23 | 21 … | ]) |
24 | 22 … | } |
components/styles.js | ||
---|---|---|
@@ -1,0 +1,20 @@ | ||
1 … | +var Component = require('choo/component') | |
2 … | +const h = require('hyperscript') | |
3 … | +const stylesheet = require('../assets/styles') | |
4 … | + | |
5 … | +class Styles extends Component { | |
6 … | + constructor (id, state, emit) { | |
7 … | + super(id) | |
8 … | + this.local = state.components[id] = {} | |
9 … | + } | |
10 … | + | |
11 … | + createElement () { | |
12 … | + return h('div', stylesheet) | |
13 … | + } | |
14 … | + | |
15 … | + update () { | |
16 … | + return true | |
17 … | + } | |
18 … | +} | |
19 … | + | |
20 … | +module.exports = Styles |
index.js | ||
---|---|---|
@@ -1,9 +1,5 @@ | ||
1 | -var css = require('sheetify') | |
2 | 1 … | var choo = require('choo') |
3 | - | |
4 | -css('tachyons') | |
5 | - | |
6 | 2 … | var app = choo() |
7 | 3 … | |
8 | 4 … | if (process.env.NODE_ENV !== 'production') { |
9 | 5 … | app.use(require('choo-devtools')()) |
@@ -15,7 +11,6 @@ | ||
15 | 11 … | |
16 | 12 … | app.route('/', require('./views/entries')) |
17 | 13 … | app.route('/transactions', require('./views/transactions')) |
18 | 14 … | app.route('/accounts', require('./views/accounts')) |
19 | -app.route('/*', require('./views/404')) | |
20 | 15 … | |
21 | 16 … | module.exports = app.mount('body') |
package-lock.json | ||
---|---|---|
The diff is too large to show. Use a local git client to view these changes. Old file size: 384592 bytes New file size: 187662 bytes |
package.json | ||
---|---|---|
@@ -2,31 +2,24 @@ | ||
2 | 2 … | "name": "double", |
3 | 3 … | "version": "1.0.0", |
4 | 4 … | "private": true, |
5 | 5 … | "scripts": { |
6 | - "build": "bankai build index.js", | |
7 | 6 … | "create": "choo-scaffold", |
8 | 7 … | "electro": "electro .", |
9 | 8 … | "electro:clean": "rm .test.db accounts.json entries.json && electro .", |
10 | - "inspect": "bankai inspect index.js", | |
11 | - "start": "bankai start index.js", | |
12 | 9 … | "test": "standard && npm run test-deps", |
13 | 10 … | "test-deps": "dependency-check . && dependency-check . --extra --no-dev -i tachyons" |
14 | 11 … | }, |
15 | 12 … | "dependencies": { |
16 | 13 … | "choo": "^6.13.0", |
17 | - "choo-service-worker": "^2.4.0", | |
18 | 14 … | "flumecodec": "0.0.1", |
19 | 15 … | "flumedb": "^1.0.0", |
20 | 16 … | "flumelog-offset": "^3.3.2", |
21 | 17 … | "flumeview-reduce": "^1.3.14", |
22 | 18 … | "hyperscript": "^2.0.2", |
23 | - "pull-paramap": "^1.2.2", | |
24 | - "sheetify": "^7.3.3", | |
25 | - "tachyons": "^4.11.1" | |
19 … | + "pull-paramap": "^1.2.2" | |
26 | 20 … | }, |
27 | 21 … | "devDependencies": { |
28 | - "bankai": "^9.15.0", | |
29 | 22 … | "choo-devtools": "^2.5.1", |
30 | 23 … | "choo-scaffold": "^1.2.0", |
31 | 24 … | "dependency-check": "^3.2.1", |
32 | 25 … | "electro": "^2.1.1", |
stores/ledger.js | ||
---|---|---|
@@ -15,16 +15,20 @@ | ||
15 | 15 … | function ledgerStore (state, emitter) { |
16 | 16 … | state.accounts = {} |
17 | 17 … | state.entries = [] |
18 | 18 … | |
19 | - pull(db.accounts.stream(), drain(acctState => { | |
20 | - state.accounts = acctState | |
21 | - emitter.emit.RENDER | |
19 … | + pull( | |
20 … | + db.accounts.stream(), | |
21 … | + drain(acctState => { | |
22 … | + state.accounts = acctState | |
23 … | + emitter.emit.RENDER | |
22 | 24 … | }, onDone)) |
23 | 25 … | |
24 | - pull(db.entries.stream(), drain(entryState => { | |
25 | - state.entries = entryState | |
26 | - emitter.emit.RENDER | |
26 … | + pull( | |
27 … | + db.entries.stream(), | |
28 … | + drain(entryState => { | |
29 … | + state.entries = entryState | |
30 … | + emitter.emit.RENDER | |
27 | 31 … | }, onDone)) |
28 | 32 … | |
29 | 33 … | function onLoad () { |
30 | 34 … | emitter.on('accounts', onEvent) |
@@ -57,8 +61,9 @@ | ||
57 | 61 … | |
58 | 62 … | return acc |
59 | 63 … | } |
60 | 64 … | if (item.type !== 'accounts') return acc |
65 … | + | |
61 | 66 … | const { msg } = item |
62 | 67 … | |
63 | 68 … | if (!acc[msg.name]) { |
64 | 69 … | acc[msg.name] = msg |
views/accounts.js | ||
---|---|---|
@@ -1,31 +1,33 @@ | ||
1 | 1 … | const h = require('hyperscript') |
2 | 2 … | const TITLE = 'double - acounts' |
3 | 3 … | const Nav = require('../components/nav') |
4 … | +const Styles = require('../components/styles') | |
4 | 5 … | |
5 | 6 … | function accountsView (state, emit) { |
6 | 7 … | return h('body.code.ph3.lh-copy', [ |
8 … | + state.cache(Styles, 'styles').render(), | |
7 | 9 … | state.cache(Nav, 'nav').render(), |
8 | - h('table', [ | |
10 … | + h('table.center', [ | |
9 | 11 … | h('thead', h('tr', [ |
10 | 12 … | h('td.pr2.red', 'account'), |
11 | 13 … | h('td.pr2', 'balance') |
12 | 14 … | ])), |
13 | 15 … | h('tbody', Object.keys(state.accounts).map(key => { |
14 | 16 … | return state.accounts[key].archived |
15 | 17 … | ? h('tr', [ |
16 | - h('td.strike', state.accounts[key].name), | |
18 … | + h('td.strike', {onclick: handleAccountArchive}, state.accounts[key].name), | |
17 | 19 … | h('td.tr.strike', state.accounts[key].debit - state.accounts[key].credit) |
18 | 20 … | ]) |
19 | 21 … | : h('tr', [ |
20 | 22 … | h('td', {onclick: handleAccountArchive}, state.accounts[key].name), |
21 | 23 … | h('td.tr', state.accounts[key].debit - state.accounts[key].credit) |
22 | 24 … | ]) |
23 | 25 … | })) |
24 | 26 … | ]), |
25 | - h('div', [ | |
27 … | + h('div.tc', [ | |
26 | 28 … | h('div.pt4', 'create a new account'), |
27 | - h('form.pb3', h('input#account')), | |
29 … | + h('form.pb3', h('input#account', {placeholder: 'account name'})), | |
28 | 30 … | h('button', { onclick: handleAccountCreate }, 'create') |
29 | 31 … | ]) |
30 | 32 … | ]) |
31 | 33 … | |
@@ -36,9 +38,11 @@ | ||
36 | 38 … | } |
37 | 39 … | |
38 | 40 … | function handleAccountArchive () { |
39 | 41 … | const name = this.innerHTML |
40 | - | |
42 … | + if (state.accounts[name].archived) { | |
43 … | + return emit('accounts', { type: 'accounts', msg: { name, archived: false } }) | |
44 … | + } | |
41 | 45 … | emit('accounts', { type: 'accounts', msg: { name, archived: true } }) |
42 | 46 … | } |
43 | 47 … | } |
44 | 48 … |
views/entries.js | ||
---|---|---|
@@ -1,7 +1,8 @@ | ||
1 | 1 … | const h = require('hyperscript') |
2 | 2 … | const TITLE = 'double - entries' |
3 | 3 … | const Nav = require('../components/nav') |
4 … | +const Styles = require('../components/styles') | |
4 | 5 … | |
5 | 6 … | function view (state, emit) { |
6 | 7 … | if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE) |
7 | 8 … | |
@@ -26,10 +27,11 @@ | ||
26 | 27 … | |
27 | 28 … | const submit = h('div.pb3', h('button', { onclick: handleEntry }, 'submit')) |
28 | 29 … | |
29 | 30 … | return h('body.code.ph3.lh-copy', [ |
31 … | + state.cache(Styles, 'styles').render(), | |
30 | 32 … | state.cache(Nav, 'nav').render(), |
31 | - h('main', [ | |
33 … | + h('main.tc', [ | |
32 | 34 … | form, |
33 | 35 … | submit |
34 | 36 … | ]) |
35 | 37 … | ]) |
views/transactions.js | ||
---|---|---|
@@ -1,11 +1,12 @@ | ||
1 | 1 … | var h = require('hyperscript') |
2 | 2 … | const TITLE = 'double - transactions' |
3 | 3 … | const Nav = require('../components/nav') |
4 … | +const Styles = require('../components/styles') | |
4 | 5 … | |
5 | 6 … | function transactionsView (state, emit) { |
6 | - const entries = h('div.pb6', [ | |
7 | - h('table', [ | |
7 … | + const entries = h('div.tc.pb6', [ | |
8 … | + h('table.center', [ | |
8 | 9 … | h('thead', h('tr', [ |
9 | 10 … | h('td.pr2', 'account'), |
10 | 11 … | h('td.pr2', 'debit'), |
11 | 12 … | h('td.pr2', 'credit'), |
@@ -29,8 +30,9 @@ | ||
29 | 30 … | ]) |
30 | 31 … | ]) |
31 | 32 … | |
32 | 33 … | return h('body.code.ph3.lh-copy', [ |
34 … | + state.cache(Styles, 'styles').render(), | |
33 | 35 … | state.cache(Nav, 'nav').render(), |
34 | 36 … | entries |
35 | 37 … | ]) |
36 | 38 … | } |
views/404.js | ||
---|---|---|
@@ -1,15 +1,0 @@ | ||
1 | -var html = require('choo/html') | |
2 | - | |
3 | -var TITLE = 'double - route not found' | |
4 | - | |
5 | -module.exports = view | |
6 | - | |
7 | -function view (state, emit) { | |
8 | - if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE) | |
9 | - return html` | |
10 | - <body class="sans-serif pa3"> | |
11 | - <h1>Route not found.</h1> | |
12 | - <a class="pt2" href="/">Back to main.</a> | |
13 | - </body> | |
14 | - ` | |
15 | -} |
manifest.json | ||
---|---|---|
@@ -1,14 +1,0 @@ | ||
1 | -{ | |
2 | - "name": "double", | |
3 | - "short_name": "double", | |
4 | - "description": "double entry accounting app", | |
5 | - "start_url": "/", | |
6 | - "display": "standalone", | |
7 | - "background_color": "#000", | |
8 | - "theme_color": "#000", | |
9 | - "icons": [{ | |
10 | - "src": "/assets/icon.png", | |
11 | - "type": "image/png", | |
12 | - "sizes": "512x512" | |
13 | - }] | |
14 | -} |
Built with git-ssb-web