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
|
import h, { classNames } from 'lib/h'
import * as dom from 'lib/dom'
import * as play from 'view/play'
import * as layout from 'view/layout'
import * as chord from 'chord'
import * as options from 'view/options'
// View
export function view(): Element[] {
let opts = options.load()
return layout.view(
h('form',
{
className: 'g-Form',
onsubmit
},
labelInput({ type: 'checkbox', name: 'major', label: 'Major', checked: opts.major }),
labelInput({ type: 'checkbox', name: 'minor', label: 'Minor', checked: opts.minor }),
labelInput({ type: 'number', name: 'bpm', label: 'BPM', value: opts.bpm.toString() }),
labelInput({ type: 'number', name: 'beatsPerChord', label: 'Beats per Chord', value: opts.beatsPerChord.toString() }),
h('input', { type: 'submit', value: 'Play' })
)
)
}
function onsubmit(event: Event): void {
event.preventDefault()
let input = (name: String) => document.querySelector(`input[name="${name}"]`) as HTMLInputElement
let opts = {
major: input('major').checked,
minor: input('minor').checked,
bpm: parseInt(input('bpm').value),
beatsPerChord: parseInt(input('beatsPerChord').value)
}
options.save(opts)
dom.show(play.view(opts))
}
type LabelInputParams = {
type: string,
name: string,
label: string,
checked?: boolean,
value?: string
}
function labelInput({ type, name, label, checked, value }: LabelInputParams) {
return h('label',
{},
h('input', { type, name, checked, value }),
label
)
}
|
