Reactive input

namespace ReactiveInput

open WebSharper
open WebSharper.UI.Next
open WebSharper.UI.Next.Html
open WebSharper.UI.Next.Client

[<JavaScript>]
module InputTransform =

let Main =
        let cls s = attr.``class`` s
        let rvText = Var.Create ""
        let inputField =
            divAttr [cls "panel panel-default"] [
                divAttr [cls "panel-heading"] [
                    h3Attr [cls "panel-title"] [
                        text "Input"
                    ]
                ]
                divAttr [cls "panel-body"] [
                    formAttr [cls "form-horizontal"; Attr.Create "role" "form"] [
                        divAttr [cls "form-group"] [
                            labelAttr [cls "col-sm-4 control-label"; attr.``for`` "inputBox"] [
                                Doc.TextNode "Write something: "
                            ]
                            divAttr [cls "col-sm-8"] [
                                Doc.Input [cls "form-control"; attr.id "inputBox"] rvText
                            ]
                        ]
                    ]
                ]
            ]

let view = View.FromVar rvText

let viewCaps =
            view |> View.Map (fun s -> s.ToUpper())
        let viewReverse =
            view |> View.Map (fun s -> new string(Array.rev(s.ToCharArray())))
        let viewWordCount =
            view |> View.Map (fun s -> s.Split([| ' ' |]).Length)
        let viewWordCountStr =
            View.Map string viewWordCount
        let viewWordOddEven =
            View.Map (fun i -> if i % 2 = 0 then "Even" else "Odd") viewWordCount
        let viewMouseCoordinates =
            Input.Mouse.Position.Map (fun (x,y) -> sprintf "%d:%d" y x)
            
        let views =
            [
                ("Entered Text", view)
                ("Capitalised", viewCaps)
                ("Reversed", viewReverse)
                ("Word Count", viewWordCountStr)
                ("Word count odd or even?", viewWordOddEven)
                ("Mouse coordinates", viewMouseCoordinates)
            ]

let tableRow (lbl, view) =
            tr [
                td [text lbl]
                tdAttr [attr.style "width:66%"] [
                    textView view
                ]
            ] :> Doc

let tbl =
            divAttr [cls "panel panel-default"] [
                divAttr [cls "panel-heading"] [
                    h3Attr [cls "panel-title"] [
                        text "Output"
                    ]
                ]
                divAttr [cls "panel-body"] [
                    tableAttr [cls "table"] [
                        tbody [
                            List.map tableRow views |> Doc.Concat
                        ]
                    ]
                ]
            ]

let content =
            div [
                inputField
                tbl
            ]

Doc.RunById "main" content