blob: 5db6ea542e9703c8f8290ddea469f4299ecafb36 (
plain)
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
|
open CreateElement
open Config
let labelledInput labelValue minValue inputValue update writeDuration =
label
~attributes:[| className "g-Form__Label" |]
~eventListeners:
[|
onInput (fun e ->
match
EventTarget.value (Event.target e)
|> Option.flatMap Belt.Int.fromString
with
| Some n ->
let () = update n in
writeDuration ()
| None -> ());
|]
~children:
[|
text labelValue;
input_
~attributes:
[|
className "g-Form__Input";
type_ "number";
min_ (Js.Int.toString minValue);
value (Js.Int.toString inputValue);
|]
();
|]
()
let render initialConfig onStart =
let config = ref initialConfig in
let duration = text (Duration.prettyPrint (getDuration !config)) in
let wd () =
Element.setTextContent duration (Duration.prettyPrint (getDuration !config))
in
div
~children:
[|
header
~attributes:[| className "g-Layout__Header" |]
~children:[| text "Tabata timer" |]
();
form
~attributes:[| className "g-Form" |]
~eventListeners:
[|
onSubmit (fun e ->
let () = Event.preventDefault e in
onStart !config);
|]
~children:
[|
labelledInput "prepare" 0 !config.prepare
(fun n -> config := { !config with prepare = n })
wd;
labelledInput "tabatas" 1 !config.tabatas
(fun n -> config := { !config with tabatas = n })
wd;
labelledInput "cycles" 1 !config.cycles
(fun n -> config := { !config with cycles = n })
wd;
labelledInput "work" 5 !config.work
(fun n -> config := { !config with work = n })
wd;
labelledInput "rest" 5 !config.rest
(fun n -> config := { !config with rest = n })
wd;
div
~attributes:[| className "g-Form__Duration" |]
~children:[| text "duration"; div ~children:[| duration |] () |]
();
button
~attributes:[| className "g-Form__Start" |]
~children:[| text "start" |]
();
|]
();
|]
()
|
