Counter with input field

Counter.elm

module Counter (Model, init, Action, update, view) where

import Html exposing (..)
import Html.Attributes exposing (style, type', value)
import Html.Events exposing (onClick, on, targetValue)


--import Debug exposing (log)

import String


-- MODEL


type alias Model =
  Int


init : Int -> Model
init count =
  count



-- UPDATE


type Action
  = Increment
  | Decrement
  | Edit String


update : Action -> Model -> Model
update action model =
  case action of
    Increment ->
      model + 1

    Decrement ->
      model - 1

    Edit val ->
      case String.toInt val of
        Ok i ->
          i

        Err _ ->
          model



-- VIEW


view : Signal.Address Action -> Model -> Html
view address model =
  div
    []
    [ button [ onClick address Decrement ] [ text "-" ]
    , input [ type' "number", countStyle, on "input" targetValue (\v -> Signal.message address (Edit v)), value (toString model) ] []
    , button [ onClick address Increment ] [ text "+" ]
    ]


countStyle : Attribute
countStyle =
  style
    [ ( "font-size", "20px" )
    , ( "font-family", "monospace" )
    , ( "display", "inline-block" )
    , ( "width", "50px" )
    , ( "text-align", "center" )
    ]

CounterPair.elm

module CounterPair (..) where

import Counter
import Html exposing (..)
import Html.Events exposing (..)


-- MODEL


type alias Model =
  { topCounter : Counter.Model
  , bottomCounter : Counter.Model
  }


init : Int -> Int -> Model
init top bottom =
  { topCounter = Counter.init top
  , bottomCounter = Counter.init bottom
  }



-- UPDATE


type Action
  = Reset
  | Top Counter.Action
  | Bottom Counter.Action


update : Action -> Model -> Model
update action model =
  case action of
    Reset ->
      init 0 0

    Top act ->
      { model
        | topCounter = Counter.update act model.topCounter
      }

    Bottom act ->
      { model
        | bottomCounter = Counter.update act model.bottomCounter
      }



-- VIEW


view : Signal.Address Action -> Model -> Html
view address model =
  div
    []
    [ Counter.view (Signal.forwardTo address Top) model.topCounter
    , Counter.view (Signal.forwardTo address Bottom) model.bottomCounter
    , button [ onClick address Reset ] [ text "RESET" ]
    ]

main.elm

module Main (..) where

import CounterPair exposing (init, update, view)
import StartApp.Simple exposing (start)
import Html


main : Signal Html.Html
main =
  start
    { model = init 0 0
    , update = update
    , view = view
    }