views/main.jsView |
---|
1 | 1 … | var html = require('choo/html') |
2 | 2 … | |
3 | 3 … | var TITLE = 'double - main' |
4 | 4 … | |
5 | | -module.exports = view |
6 | | - |
7 | 5 … | function view (state, emit) { |
8 | 6 … | if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE) |
9 | 7 … | |
10 | | - return html` |
11 | | - <body class="code lh-copy"> |
12 | | - <main class="pa3 cf center"> |
13 | | - <section class="fl mw6 w-50-m w-third-l pa3"> |
14 | | - <h2>1.</h2> |
15 | | - <p> |
16 | | - Welcome to your new Choo application. |
17 | | - We're very happy you've made it this far. |
18 | | - </p> |
| 8 … | + const {db} = state |
19 | 9 … | |
20 | | - <p> |
21 | | - You're now in control of your own Choo app. The moment you decide to |
22 | | - deploy it, it'll work offline and on any device. |
23 | | - </p> |
| 10 … | + const form = html`<form class="pv3"> |
| 11 … | + <div class="pb2"> |
| 12 … | + <label>debit account</label><br> |
| 13 … | + <select> |
| 14 … | + <option value="true">--- select debit account ---</option> |
| 15 … | + ${generateAccountList()} |
| 16 … | + </select> |
| 17 … | + </div> |
| 18 … | + <div class="pb2"> |
| 19 … | + <label>credit account</label><br> |
| 20 … | + <select> |
| 21 … | + <option value="true">--- select credit account ---</option> |
| 22 … | + ${generateAccountList()} |
| 23 … | + </select> |
| 24 … | + </div> |
| 25 … | + <div> |
| 26 … | + <input class="mb2" id="amount" placeholder="amount"/><br> |
| 27 … | + <input id="description" placeholder="description"/> |
| 28 … | + </form>` |
24 | 29 … | |
25 | | - <br> |
26 | | - </section> |
| 30 … | + const submit = html`<div class="pb6"> |
| 31 … | + <button onclick=${handleTransaction}>submit</button> |
| 32 … | + </div>` |
27 | 33 … | |
28 | | - <section class="fl mw6 w-50-m w-third-l pa3"> |
29 | | - <h2>2.</h2> |
| 34 … | + return html`<body class="code ph3 lh-copy"> |
| 35 … | + <main> |
| 36 … | + <div>double</div> |
| 37 … | + ${form} |
| 38 … | + ${submit} |
| 39 … | + </main> |
| 40 … | + <div> |
| 41 … | + <form class="pb3"> |
| 42 … | + <input id="account"/> |
| 43 … | + </form> |
| 44 … | + <button onclick=${handleAccountCreate}>create account</button> |
| 45 … | + </div> |
| 46 … | + <div> |
| 47 … | + ${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 … | + })} |
| 51 … | + </div> |
| 52 … | + </body>` |
30 | 53 … | |
31 | | - <p> |
32 | | - We've outfitted your project with a small selection of commands to |
33 | | - help you achieve results faster: |
34 | | - </p> |
| 54 … | + function generateAccountList () { |
| 55 … | + return Object.keys(state.accounts).map(key => { |
| 56 … | + if (state.accounts[key].archived) return |
| 57 … | + return html`<option value="true">${state.accounts[key].name}</option>` |
| 58 … | + }) |
| 59 … | + } |
35 | 60 … | |
36 | | - <ul> |
37 | | - <li class="mb3"> |
38 | | - <strong>npm start</strong><br> |
39 | | - start your project for local development. |
40 | | - </li> |
41 | | - <li class="mb3"> |
42 | | - <strong>npm run build</strong><br> |
43 | | - compile your project for production. |
44 | | - </li> |
45 | | - <li class="mb3"> |
46 | | - <strong>npm run inspect</strong><br> |
47 | | - visualize your project's dependencies. |
48 | | - </li> |
49 | | - <li class="mb3"> |
50 | | - <strong>npm run create</strong><br> |
51 | | - scaffold a new file. |
52 | | - </li> |
53 | | - </ul> |
| 61 … | + function handleTransaction () { |
| 62 … | + const amount = document.getElementById('amount').value |
| 63 … | + const debit = document.getElementById('debit').value |
| 64 … | + const credit = document.getElementById('credit').value |
| 65 … | + const description = document.getElementById('description').value |
54 | 66 … | |
55 | | - <br> |
56 | | - </section> |
| 67 … | + emit('transaction:add', {type: 'transaction', msg: { amount, debit, credit, description }}) |
| 68 … | + } |
57 | 69 … | |
58 | | - <section class="fl mw6 w-50-m w-third-l pa3"> |
59 | | - <h2>3.</h2> |
| 70 … | + function handleAccountCreate () { |
| 71 … | + const account = document.getElementById('account').value |
60 | 72 … | |
61 | | - <p> |
62 | | - Your project also comes with a few directories. These names have |
63 | | - special meanings for the build tool, so it's good to know what they |
64 | | - do. |
65 | | - </p> |
| 73 … | + emit('account', { type: 'accounts', msg: { name: account, archived: false }}) |
| 74 … | + } |
66 | 75 … | |
67 | | - <ul> |
68 | | - <li class="mb3"> |
69 | | - <strong>assets/</strong><br> |
70 | | - Static files that can be served up, such as images and fonts. |
71 | | - </li> |
72 | | - <li class="mb3"> |
73 | | - <strong>components/</strong><br> |
74 | | - Reusable fragments that can be composed into views. |
75 | | - </li> |
76 | | - <li class="mb3"> |
77 | | - <strong>stores/</strong><br> |
78 | | - Pieces of logic that are shared by multiple components. |
79 | | - </li> |
80 | | - <li class="mb3"> |
81 | | - <strong>views/</strong><br> |
82 | | - Combinations of components that are mapped to routes. |
83 | | - </li> |
84 | | - </ul> |
| 76 … | + function handleAccountArchive () { |
| 77 … | + const name = this.innerHTML |
85 | 78 … | |
86 | | - <br> |
87 | | - </section> |
88 | | - |
89 | | - <section class="fl mw6 w-50-m w-third-l pa3"> |
90 | | - <h2>4.</h2> |
91 | | - |
92 | | - <p> |
93 | | - So far we've provided you with one base view, <a |
94 | | - href="/oh-no">one fallback view</a>, and one store. This serves |
95 | | - as an example. A place to start from. It's your project now, so |
96 | | - go ahead and delete them once you know how they work. |
97 | | - </p> |
98 | | - |
99 | | - <p>Number of clicks stored: ${state.totalClicks}</p> |
100 | | - |
101 | | - <button class="dim ph3 ba bw1 pv2 b--black pointer bg-white" |
102 | | - onclick=${handleClick}> |
103 | | - Emit a click event |
104 | | - </button> |
105 | | - |
106 | | - <br><br> |
107 | | - </section> |
108 | | - |
109 | | - <section class="fl mw6 w-50-m w-third-l pa3"> |
110 | | - <h2>5.</h2> |
111 | | - |
112 | | - <p> |
113 | | - To make your development journey more pleasant, we've also |
114 | | - included <a |
115 | | - href="https://github.com/choojs/choo-devtools">devtools</a>. If |
116 | | - you open your browser console, here's a selection of the |
117 | | - commands that are at your disposal: |
118 | | - |
119 | | - <ul> |
120 | | - <li class="mb3"> |
121 | | - <strong>choo.state</strong><br> |
122 | | - Log the current application state. |
123 | | - </li> |
124 | | - <li class="mb3"> |
125 | | - <strong>choo.log</strong><br> |
126 | | - Log the last 150 events received by the event bus. |
127 | | - </li> |
128 | | - <li class="mb3"> |
129 | | - <strong>choo.emit</strong><br> |
130 | | - Emit an event inside the application event bus. |
131 | | - </li> |
132 | | - <li class="mb3"> |
133 | | - <strong>choo.help</strong><br> |
134 | | - See an overview of all available commands. |
135 | | - </li> |
136 | | - </ul> |
137 | | - </p> |
138 | | - </section> |
139 | | - |
140 | | - <section class="fl mw6 w-50-m w-third-l pa3"> |
141 | | - <h2>6.</h2> |
142 | | - |
143 | | - <p> |
144 | | - And that's about it! Thanks for reading. If you have any |
145 | | - questions, check out the <a href="https://choo.io">docs</a> or reach |
146 | | - out on <a href="https://github.com/choojs/choo">GitHub</a> or <a |
147 | | - href="https://www.irccloud.com/irc/freenode/channel/choo">IRC</a>. |
148 | | - We're online everyday, and always around to help. Happy hacking! |
149 | | - </p> |
150 | | - </section> |
151 | | - </main> |
152 | | - </body> |
153 | | - ` |
154 | | - |
155 | | - function handleClick () { |
156 | | - emit('clicks:add', 1) |
| 79 … | + emit('account', { type: 'accounts', msg: { name, type: 'TOGGLE' }}) |
157 | 80 … | } |
158 | 81 … | } |
| 82 … | + |
| 83 … | +module.exports = view |