1 files changed, 47 insertions, 0 deletions
diff --git a/src/view/form.ts b/src/view/form.ts
new file mode 100644
index 0000000..60e5f08
--- /dev/null
+++ b/src/view/form.ts
@@ -0,0 +1,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'))
+  )
+}