| views/show.jsView |
|---|
| 1 | 1 … | const { h, Struct, computed, resolve } = require('mutant') |
| 2 | 2 … | const pull = require('pull-stream') |
| 3 | 3 … | const printTime = require('../lib/print-time') |
| 4 | 4 … | |
| 5 | | -const YES = '✔' |
| 6 | | -const EDIT_YES = '☑' |
| 7 | | -const EDIT_NO = '☐' |
| 8 | | - |
| 9 | 5 … | module.exports = function ScryShow (opts) { |
| 10 | 6 … | const { |
| 11 | 7 … | poll, |
| 12 | 8 … | myFeedId, |
| 13 | 9 … | scuttle, |
| 14 | | - name = k => k.slice(0, 9) |
| 15 | | - |
| 10 … | + name = k => k.slice(0, 9), |
| 11 … | + avatar = k => h('img'), |
| 12 … | + testing = false |
| 16 | 13 … | } = opts |
| 17 | 14 … | |
| 18 | | - console.log(opts) |
| 19 | | - |
| 20 | 15 … | const state = Struct(initialState()) |
| 21 | 16 … | fetchState() |
| 22 | 17 … | watchForUpdates(fetchState) |
| 23 | 18 … | |
| 63 | 58 … | function ScryShowResults () { |
| 64 | 59 … | return computed(state.now, ({ title, closesAt, times, rows }) => { |
| 65 | 60 … | const style = { |
|
| 66 | 61 … | display: 'grid', |
| 67 | | - 'grid-template-columns': `minmax(8rem, auto) repeat(${times.length}, 4rem)` |
| 62 … | + 'grid-template-columns': `minmax(10rem, auto) repeat(${times.length}, 4rem)` |
| 68 | 63 … | } |
| 69 | 64 … | |
| 70 | 65 … | return [ |
| 71 | 66 … | h('ScryShowResults', { style }, [ |
| 78 | 73 … | |
| 79 | 74 … | function ScryShowRow ({ author, position }) { |
| 80 | 75 … | if (author !== myFeedId) { |
| 81 | 76 … | return [ |
| 82 | | - h('div.name', name(author)), |
| 77 … | + h('div.about', [ |
| 78 … | + avatar(author), |
| 79 … | + name(author) |
| 80 … | + ]), |
| 83 | 81 … | position.map(pos => pos |
| 84 | | - ? h('div.position.-yes', YES) |
| 82 … | + ? h('div.position.-yes', tick()) |
| 85 | 83 … | : h('div.position.-no') |
| 86 | 84 … | ) |
| 87 | 85 … | ] |
| 88 | 86 … | } |
| 92 | 90 … | state.next.isEditing.set(isEditing) |
| 93 | 91 … | } |
| 94 | 92 … | |
| 95 | 93 … | return [ |
| 96 | | - h('div.name', [ |
| 94 … | + h('div.about', [ |
| 95 … | + avatar(author), |
| 97 | 96 … | name(author), |
| 98 | 97 … | h('i.fa.fa-pencil', { 'ev-click': toggleEditing }) |
| 99 | 98 … | ]), |
| 100 | | - computed(state.next, ({ isEditing, position }) => { |
| 99 … | + computed([state.next, state.now.position], ({ isEditing, position }, currentPosition) => { |
| 101 | 100 … | if (isEditing) { |
| 102 | 101 … | return position.map((pos, i) => { |
| 103 | 102 … | return h('div.position.-edit', |
| 104 | 103 … | { |
| 107 | 106 … | nextPosition[i] = !pos |
| 108 | 107 … | state.next.position.set(nextPosition) |
| 109 | 108 … | } |
| 110 | 109 … | }, |
| 111 | | - pos ? EDIT_YES : EDIT_NO |
| 110 … | + pos ? checkedBox() : uncheckedBox() |
| 112 | 111 … | ) |
| 113 | 112 … | }) |
| 114 | 113 … | } |
| 115 | 114 … | |
| 116 | | - return position.map(pos => pos |
| 117 | | - ? h('div.position.-yes', '✔') |
| 115 … | + return currentPosition.map(pos => pos |
| 116 … | + ? h('div.position.-yes', tick()) |
| 118 | 117 … | : h('div.position.-no') |
| 119 | 118 … | ) |
| 120 | 119 … | }) |
| 121 | 120 … | ] |
| 176 | 175 … | cb() |
| 177 | 176 … | }) |
| 178 | 177 … | ) |
| 179 | 178 … | } |
| 179 … | + |
| 180 … | + function tick () { return '✔' } |
| 181 … | + function checkedBox () { return testing ? '☑' : h('i.fa.fa-check-square-o') } |
| 182 … | + function uncheckedBox () { return testing ? '☐' : h('i.fa.fa-square-o') } |
| 180 | 183 … | } |
| 181 | 184 … | |
| 182 | 185 … | function initialState () { |
| 183 | 186 … | return { |