tshm
1/28/2015 - 6:55 AM

Elm component template

Elm component template

module App (main) where
{-| template
-}

import Counter

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Signal exposing (Signal, Address)

main: Signal Html
main = Signal.map (view actions.address) model

-- Model
type alias Model =
  { top: Counter.Model
  , bottom: Counter.Model
  }

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

model: Signal Model
model = Signal.foldp update (init 0) actions.signal

-- Action
type Action
  = NoOp
  | ResetAll
  | Top Counter.Action
  | Bottom Counter.Action

update: Action -> Model -> Model
update action model =
  case action of
    NoOp -> model
    ResetAll -> { model | top = Counter.update Counter.reset model.top
                        , bottom = Counter.update Counter.reset model.bottom }
    Top action -> { model | top = Counter.update action model.top }
    Bottom action -> { model | bottom = Counter.update action model.bottom }

actions: Signal.Mailbox Action
actions =
  Signal.mailbox NoOp

-- View
view: Address Action -> Model -> Html
view address model =
  div []
    [ div []
        [ text "top: "
        , Counter.view (Signal.forwardTo address Top) model.top
        ]
    , div []
        [ text "bottom: "
        , Counter.view (Signal.forwardTo address Bottom) model.bottom
        ]
    , button [onClick address ResetAll] [text "reset"]
    ]
  
module Counter (Model, init, Action, reset, update, view) where
{-| template
-}

import Html exposing (Html, span, input, button, text)
import Html.Attributes exposing (disabled, value)
import Html.Events exposing (onClick)
import Signal exposing (Signal, Address)

-- Model
type alias Model = Int

init: Int -> Model
init val = val

-- Action
type Action
  = NoOp
  | Reset
  | Increment
  | Decrement

reset = Reset

update: Action -> Model -> Model
update action model =
  case action of
    NoOp -> model
    Reset -> 0
    Increment -> model + 1
    Decrement -> model - 1

-- View
view: Address Action -> Model -> Html
view address model =
  span []
    [ button [onClick address Decrement] [text "-"]
    , input [disabled True, value (toString model)] []
    , button [onClick address Increment] [text "+"]
    ]