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
|
import * as Config from 'config'
import h from 'h'
import * as Router from 'router'
import * as Duration from 'duration'
function labelledInput(
labelValue: string,
min: number,
value: number,
update: (n: number) => void
): Element {
return h('label',
{ className: 'g-Form__Label',
oninput: (e: Event) => {
if (e.target !== null) {
const target = e.target as HTMLInputElement
update(parseInt(target.value) || 0)
}
}
},
labelValue,
h('input', { className: 'g-Form__Input', type: 'number', min, value }))
}
export function view(config: Config.Config, showPage: (route: Router.Route) => void) {
const duration = document.createTextNode(Duration.prettyPrint(Config.getDuration(config)))
const wd = () => duration.textContent = Duration.prettyPrint(Config.getDuration(config))
return h('div',
{ className: 'g-Layout__Page' },
h('header', { className: 'g-Layout__Header' }, 'Tabata timer'),
h('form',
{ className: 'g-Form'
, onsubmit: (e: Event) => {
e.preventDefault()
const timerRoute = { kind: Router.Kind.Timer, config }
history.pushState({}, '', Router.toString(timerRoute))
showPage(timerRoute)
}},
labelledInput('prepare', 0, config.prepare, n => { config.prepare = n; wd()}),
labelledInput('tabatas', 1, config.tabatas, n => { config.tabatas = n; wd()}),
labelledInput('cycles', 1, config.cycles, n => { config.cycles = n; wd()}),
labelledInput('work', 5, config.work, n => { config.work = n; wd()}),
labelledInput('rest', 5, config.rest, n => { config.rest = n; wd()}),
h('div', { className: 'g-Form__Duration' }, 'duration', h('div', {}, duration)),
h('button', { className: 'g-Form__Start' }, 'start'))
)
}
|
