diff options
Diffstat (limited to 'js/content.ml')
| -rw-r--r-- | js/content.ml | 122 |
1 files changed, 90 insertions, 32 deletions
diff --git a/js/content.ml b/js/content.ml index 7096524..62d4444 100644 --- a/js/content.ml +++ b/js/content.ml @@ -1,10 +1,10 @@ module OptionInfix = Operators.Binding (Option) module State = struct - type t = { word : string; len : int; counter : int } + type t = { word : string; len : int; counter : int; selected : Jstr.t } let repr_html : t -> Brr.El.t list = - fun { word; len; counter } -> + fun { word; len; counter; selected } -> [ Brr.El.div ~at:Brr.At.[ class' (Jstr.v "card") ] @@ -25,12 +25,14 @@ module State = struct [ Brr.El.form [ - Elements.input_field ~label:(Jstr.v "Word received") + Elements.Form.input_field ~label:(Jstr.v "Word received") ~value':(Jstr.v word) (); - Elements.input_field ~label:(Jstr.v "Nb of car") + Elements.Form.input_field ~label:(Jstr.v "Nb of car") ~value':(Jstr.of_int len) (); - Elements.input_field ~label:(Jstr.v "Request sent") + Elements.Form.input_field ~label:(Jstr.v "Request sent") ~value':(Jstr.of_int counter) (); + Elements.Form.input_field ~label:(Jstr.v "Selected method") + ~value':selected (); ]; ]; ]; @@ -49,12 +51,33 @@ module WordCount = struct ]; State. { + state with counter = state.counter + 1; word = response.Services_impl.Nb_car.value; len = Int64.to_int response.Services_impl.Nb_car.nbcar; } end +module Capitalize = struct + type t = Services_impl.Capitalize.response + + let process response state = + Brr.Console.log [ Jstr.v response.Services_impl.Capitalize.value ]; + State. + { + state with + counter = state.counter + 1; + word = response.Services_impl.Capitalize.value; + } +end + +(** Show how to react to a user event *) +module SelectOption = struct + type t = Jstr.t + + let process v state = State.{ state with selected = v } +end + module App = Application.Make (State) let main () = @@ -63,29 +86,48 @@ let main () = Brr.Document.find_el_by_id Brr.G.document (Jstr.v "content") in + let radio = + Elements.Form.radio ~label:(Jstr.v "Method") ~name:(Jstr.v "method") + ~values: + [ + { + id' = None; + label = Jstr.v "Count the letters"; + value = Jstr.v "count"; + checked = true; + }; + { + id' = None; + label = Jstr.v "Capitalize"; + value = Jstr.v "capitalize"; + checked = false; + }; + ] + () + in + + (* Catch the change event from the radio button list. + + Each radio button triggers it’s own event when selected, but the event + bubbles, so we just listen the parent, and target the event source for + reading the value. *) + let radio_value = + Note_brr.Evr.on_el Brr.Ev.change + (fun evt -> + let target_as_element : Brr.El.t = Brr.Ev.target evt |> Obj.magic in + + let raw_value = Brr.El.prop Brr.El.Prop.value target_as_element in + App.dispatch (module SelectOption) raw_value) + radio + in + let form = Brr.El.form [ - Elements.input_field ~name:(Jstr.v "text") ~id':(Jstr.v "text") + Elements.Form.input_field ~name:(Jstr.v "text") ~id':(Jstr.v "text") ~label:(Jstr.v "Text") (); - 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 (Jstr.v "Count"); - ] - (); - ]; - ]; + radio; + Elements.Form.submit ~value':(Jstr.v "Send") (); ] in @@ -110,12 +152,28 @@ let main () = | _ -> "" in - (* Send the request *) - Js_handler.send (module Services_impl.Nb_car) () { value } - |> Note_brr.Futr.to_event - |> Note.E.map (function - | Error _ -> App.dispatch (module App.ID) () - | Ok response -> App.dispatch (module WordCount) response)) + let service_name = + Option.bind + (Brr_io.Form.Data.find data (Jstr.v "method")) + (function `String s -> Some (Jstr.to_string s) | _ -> None) + in + + match service_name with + | Some "count" -> + (* Send the request *) + Js_handler.send (module Services_impl.Nb_car) () { value } + |> Note_brr.Futr.to_event + |> Note.E.map (function + | Error _ -> App.dispatch (module App.ID) () + | Ok response -> App.dispatch (module WordCount) response) + | Some "capitalize" -> + (* Send the request *) + Js_handler.send (module Services_impl.Capitalize) () { value } + |> Note_brr.Futr.to_event + |> Note.E.map (function + | Error _ -> App.dispatch (module App.ID) () + | Ok response -> App.dispatch (module Capitalize) response) + | _ -> Note.E.never) form in let bottom = Brr.El.div [] in @@ -143,8 +201,8 @@ let main () = let state = App.run - { word = ""; len = 0; counter = 0 } - (Note.E.select [ post_event form ]) + { word = ""; len = 0; counter = 0; selected = Jstr.v "count" } + (Note.E.select [ post_event form; radio_value ]) in Note_brr.Elr.def_children bottom (Note.S.map State.repr_html state); |