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 "+"]
]