1 files changed, 83 insertions, 0 deletions
diff --git a/src/View/configView.ml b/src/View/configView.ml
new file mode 100644
index 0000000..5db6ea5
--- /dev/null
+++ b/src/View/configView.ml
@@ -0,0 +1,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" |]
+                ();
+            |]
+          ();
+      |]
+    ()