-
Notifications
You must be signed in to change notification settings - Fork 4
/
view.js
109 lines (101 loc) · 3.2 KB
/
view.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/** @jsx */
import Cycle from 'cyclejs';
import _ from 'lodash';
function renderOptions(model) {
return [
Cycle.h('h2', 'Let\'s get one of these:'),
Cycle.h('table', [
Cycle.h('thead', [
Cycle.h('tr', [
Cycle.h('th', 'Pizzas'),
Cycle.h('th', {
attributes: {'data-order': 'total'},
className: model.sortBy === 'total' ? 'active' : ''
}, 'Leftovers'),
Cycle.h('th', {
attributes: {'data-order': 'cost'},
className: model.sortBy === 'cost' ? 'active' : ''
}, 'Cost'),
Cycle.h('th', {
attributes: {'data-order': 'rank'},
className: model.sortBy === 'rank' ? 'active' : ''
}, 'PizzaRank™'),
])
]),
Cycle.h('tbody', model.purchaseOptions.map(renderOption.bind(this, model.gathering.servingSize, model.numServings)))
])
];
}
function renderOption(servingSize, servings, option) {
return <tr>
<td>{_(option.pizzas)
.groupBy('name')
.map((arr, name) => `${arr.length} ${name}`)
.value()
.join(', ')}</td>
<td>
{option.mostPizza ? Cycle.h('span.most-pizza', {title: 'Most Pizza!'}) : null}
{Math.round((option.total / servingSize - servings) * 100) / 100 + ' slices'}
</td>
<td>
{option.cheapest ? Cycle.h('span.low-price', {title: 'Lowest Price!'}) : null}
${'' + Math.round(option.cost * 100) / 100}
</td>
<td>
{option.bestDeal ? Cycle.h('span.best-deal', {title: 'Best Deal!'}) : null}
{'' + option.rank}
</td>
</tr>
}
function renderMenuSelection(menus, gathering, numServings) {
return [
<h2>Where are we ordering {''+numServings} slices from?</h2>,
<select className='menu'>
{_.map(menus, (menu) =>
<option selected={gathering.menu === menu._id}>{menu.name}</option>
)}
</select>
];
}
function renderSave(gathering) {
return gathering._id ? [] : [
Cycle.h('button.save', 'Save this gathering')
];
}
function renderEaters(gathering) {
return [
<h2>Who's eating?</h2>,
<ul>
{gathering.eaters.map(renderEater)}
<li>
<input className="new-eater" />
</li>
</ul>
];
}
function renderEater(eater, index) {
function propHook(element) {
if (eater.editing) {
element.focus();
element.selectionStart = element.value.length;
}
}
return <li className={eater.editing ? 'editing' : ''}>
<span className='eater-name' attributes={{'data-index': index}}>{`${eater.name}: ${eater.servings} slice${eater.servings === 1 ? '' : 's'}`}</span>
<span className='init-edit' attributes={{'data-index': index}}> edit</span>
<input className='edit-eater' value={`${eater.name}: ${eater.servings}`} attributes={{'data-index': index}} vdomPropHook={Cycle.vdomPropHook(propHook)}/>
</li>
}
var View = Cycle.createView(Model =>
({
vtree$: Model.get('model$').map(model =>
Cycle.h('div', [
Cycle.h('h1', 'TODO: Order Minimum Viable Pizza'),
renderSave(model.gathering),
renderEaters(model.gathering),
renderMenuSelection(model.menus, model.gathering, model.numServings),
renderOptions(model)
]))
})
);
export default View;