diff options
Diffstat (limited to 'js/content.ml')
| -rw-r--r-- | js/content.ml | 121 |
1 files changed, 91 insertions, 30 deletions
diff --git a/js/content.ml b/js/content.ml index f41bc46..b666c37 100644 --- a/js/content.ml +++ b/js/content.ml @@ -1,15 +1,29 @@ module OptionInfix = Operators.Binding (Option) -let add_field : - label:Jstr.t -> - id':Jstr.t -> - value':Jstr.t -> - Brr.El.t list -> - Brr.El.t list = - fun ~label ~id' ~value' elt -> - Brr.El.label ~at:Brr.At.[ for' id' ] [ Brr.El.txt label ] - :: Brr.El.input ~at:Brr.At.[ type' (Jstr.v "text"); id id'; value value' ] () - :: elt +let add_field : label:Jstr.t -> id':Jstr.t -> value':Jstr.t -> Brr.El.t = + fun ~label ~id' ~value' -> + Brr.El.div + ~at:Brr.At.[ class' (Jstr.v "field is-horizontal") ] + [ + Brr.El.label + ~at:Brr.At.[ for' id'; class' (Jstr.v "field-label is-normal") ] + [ Brr.El.txt label ]; + Brr.El.div + ~at:Brr.At.[ class' (Jstr.v "field-body") ] + [ + Brr.El.input + ~at: + Brr.At. + [ + class' (Jstr.v "input"); + type' (Jstr.v "text"); + name id'; + id id'; + value value'; + ] + (); + ]; + ] module State = struct type t = { word : string; len : int; counter : int } @@ -17,13 +31,34 @@ module State = struct let repr_html : t -> Brr.El.t list = fun { word; len; counter } -> [ - Brr.El.form - @@ add_field ~id':(Jstr.v "text_state") ~label:(Jstr.v "Word received") - ~value':(Jstr.v word) - @@ add_field ~id':(Jstr.v "nbcar_state") ~label:(Jstr.v "Nb of car") - ~value':(Jstr.of_int len) - @@ add_field ~id':(Jstr.v "counter_state") ~label:(Jstr.v "Request sent") - ~value':(Jstr.of_int counter) []; + Brr.El.div + ~at:Brr.At.[ class' (Jstr.v "card") ] + [ + Brr.El.div + ~at:Brr.At.[ class' (Jstr.v "card-header") ] + [ + Brr.El.header + ~at:Brr.At.[ class' (Jstr.v "card-header") ] + [ + Brr.El.p + ~at:Brr.At.[ class' (Jstr.v "card-header-title") ] + [ Brr.El.txt' "Response from the server" ]; + ]; + ]; + Brr.El.div + ~at:Brr.At.[ class' (Jstr.v "card-content") ] + [ + Brr.El.form + [ + add_field ~id':(Jstr.v "text_state") + ~label:(Jstr.v "Word received") ~value':(Jstr.v word); + add_field ~id':(Jstr.v "nbcar_state") + ~label:(Jstr.v "Nb of car") ~value':(Jstr.of_int len); + add_field ~id':(Jstr.v "counter_state") + ~label:(Jstr.v "Request sent") ~value':(Jstr.of_int counter); + ]; + ]; + ]; ] end @@ -56,19 +91,25 @@ let main () = let form = Brr.El.form [ - Brr.El.label - ~at:Brr.At.[ for' (Jstr.v "text") ] - [ Brr.El.txt (Jstr.v "Text") ]; - Brr.El.input - ~at: - Brr.At. + add_field ~id':(Jstr.v "text") ~label:(Jstr.v "Text") ~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") ] [ - type' (Jstr.v "text"); id (Jstr.v "text"); name (Jstr.v "text"); - ] - (); - Brr.El.input - ~at:Brr.At.[ type' (Jstr.v "submit"); value (Jstr.v "Count") ] - (); + Brr.El.input + ~at: + Brr.At. + [ + class' (Jstr.v "button is-primary"); + type' (Jstr.v "submit"); + value (Jstr.v "Count"); + ] + (); + ]; + ]; ] in @@ -102,7 +143,27 @@ let main () = form in let bottom = Brr.El.div [] in - Brr.El.append_children content_div [ form; Brr.El.hr (); bottom ]; + Brr.El.append_children content_div + [ + Brr.El.div + ~at:Brr.At.[ class' (Jstr.v "card") ] + [ + Brr.El.div + ~at:Brr.At.[ class' (Jstr.v "card-header") ] + [ + Brr.El.header + ~at:Brr.At.[ class' (Jstr.v "card-header") ] + [ + Brr.El.p + ~at:Brr.At.[ class' (Jstr.v "card-header-title") ] + [ Brr.El.txt' "Request to the server" ]; + ]; + ]; + Brr.El.div ~at:Brr.At.[ class' (Jstr.v "card-content") ] [ form ]; + ]; + Brr.El.hr (); + bottom; + ]; let state = App.run |