1 files changed, 126 insertions, 26 deletions
diff --git a/js/elements.ml b/js/elements.ml
index b3c07a2..783f791 100644
--- a/js/elements.ml
+++ b/js/elements.ml
@@ -1,25 +1,8 @@
-let input_field :
-    ?name:Jstr.t ->
-    ?id':Jstr.t ->
-    ?value':Jstr.t ->
-    label:Jstr.t ->
-    unit ->
-    Brr.El.t =
- fun ?name ?id' ?(value' = Jstr.empty) ~label () ->
-  let name' = name in
-  let input =
-    Brr.El.input
-      ~at:
-        Brr.At.
-          [
-            if_some (Option.map Brr.At.id id');
-            if_some (Option.map Brr.At.name name');
-            class' (Jstr.v "input");
-            type' (Jstr.v "text");
-            value value';
-          ]
-      ()
-  and label =
+open StdLabels
+
+module Form = struct
+  let label_for_field : ?id':Jstr.t -> Jstr.t -> Brr.El.t =
+   fun ?id' label ->
     Brr.El.label
       ~at:
         Brr.At.
@@ -28,8 +11,125 @@ let input_field :
             class' (Jstr.v "field-label is-normal");
           ]
       [ Brr.El.txt label ]
-  in
 
-  Brr.El.div
-    ~at:Brr.At.[ class' (Jstr.v "field is-horizontal") ]
-    [ label; Brr.El.div ~at:Brr.At.[ class' (Jstr.v "field-body") ] [ input ] ]
+  let input_field :
+      ?name:Jstr.t ->
+      ?id':Jstr.t ->
+      ?value':Jstr.t ->
+      label:Jstr.t ->
+      unit ->
+      Brr.El.t =
+   fun ?name ?id' ?(value' = Jstr.empty) ~label () ->
+    let name' = name in
+    let input =
+      Brr.El.input
+        ~at:
+          Brr.At.
+            [
+              if_some (Option.map Brr.At.id id');
+              if_some (Option.map Brr.At.name name');
+              class' (Jstr.v "input");
+              type' (Jstr.v "text");
+              value value';
+            ]
+        ()
+    and label = label_for_field ?id' label in
+
+    Brr.El.div
+      ~at:Brr.At.[ class' (Jstr.v "field is-horizontal") ]
+      [
+        label; Brr.El.div ~at:Brr.At.[ class' (Jstr.v "field-body") ] [ input ];
+      ]
+
+  type choice_value = {
+    id' : Jstr.t option;
+    label : Jstr.t;
+    value : Jstr.t;
+    checked : bool;
+  }
+
+  let radio :
+      ?name:Jstr.t ->
+      ?values:choice_value list ->
+      label:Jstr.t ->
+      unit ->
+      Brr.El.t =
+   fun ?name ?(values = []) ~label () ->
+    let name' = name in
+    let label = label_for_field label in
+
+    let radios =
+      List.map values ~f:(fun entry ->
+          (* This is the element receiving the events *)
+          let input =
+            Brr.El.input
+              ~at:
+                Brr.At.
+                  [
+                    if_some (Option.map Brr.At.name name');
+                    if_some (Option.map Brr.At.id entry.id');
+                    if' entry.checked Brr.At.checked;
+                    type' (Jstr.v "radio");
+                    value entry.value;
+                  ]
+              ()
+          in
+
+          Brr.El.label
+            ~at:Brr.At.[ class' (Jstr.v "radio") ]
+            [
+              input;
+              Brr.El.span
+                ~at:Brr.At.[ class' (Jstr.v "control-label") ]
+                [ Brr.El.nbsp (); Brr.El.txt entry.label ];
+            ])
+    in
+
+    let form_entry =
+      Brr.El.div
+        ~at:Brr.At.[ class' (Jstr.v "field has-check is-horizontal") ]
+        [
+          label;
+          Brr.El.div
+            ~at:Brr.At.[ class' (Jstr.v "field-body") ]
+            [
+              Brr.El.div
+                ~at:Brr.At.[ class' (Jstr.v "field") ]
+                [
+                  Brr.El.div
+                    ~at:
+                      Brr.At.
+                        [
+                          class' (Jstr.v "field is-grouped-multine is-grouped");
+                        ]
+                    [
+                      Brr.El.div ~at:Brr.At.[ class' (Jstr.v "radios") ] radios;
+                    ];
+                ];
+            ];
+        ]
+    in
+    (* Report each change_event to the main html element  *)
+    form_entry
+
+  let submit : ?value':Jstr.t -> unit -> Brr.El.t =
+   fun ?(value' = Jstr.empty) () ->
+    Brr.El.div
+      ~at:Brr.At.[ class' (Jstr.v "field is-horizontal") ]
+      [
+        Brr.El.div ~at:Brr.At.[ class' (Jstr.v "field-label") ] [];
+        Brr.El.div
+          ~at:Brr.At.[ class' (Jstr.v "field-body") ]
+          [
+            Brr.El.input
+              ~at:
+                Brr.At.
+                  [
+                    class' (Jstr.v "button is-primary");
+                    type' (Jstr.v "submit");
+                    value value';
+                  ]
+              ();
+          ];
+      ]
+end