Elm example

Counter.elm

module Main exposing (..)

{- This file re-implements the Elm Counter example (1 counter) with elm-mdl
   buttons. Use this as a starting point for using elm-mdl components in your own
   app.
-}

import Html.App as App
import Html exposing (..)
import Html.Attributes exposing (href, class, style)
import Material
import Material.Scheme
import Material.Button as Button
import Material.Options exposing (css)
import Material.Layout as Layout


-- MODEL


type alias Model =
    { count : Int
    , mdl :
        Material.Model
        -- Boilerplate: model store for any and all Mdl components you use.
    , selectedTab : Int
    }


init : Model
init =
    { count = 0
    , mdl =
        Material.model
        -- Boilerplate: Always use this initial Mdl model store.
    , selectedTab = 0
    }



-- ACTION, UPDATE


type Msg
    = Increase
    | Reset
    | Mdl (Material.Msg Msg)
    | SelectTab Int



-- Boilerplate: Msg clause for internal Mdl messages.


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Increase ->
            let
                _ =
                    Debug.log "Increase"
            in
                ( { model | count = model.count + 1 }, Cmd.none )

        Reset ->
            let
                _ =
                    Debug.log "Reset"
            in
                ( { model | count = 0 }, Cmd.none )

        -- Boilerplate: Mdl action handler.
        Mdl msg' ->
            let
                _ =
                    Debug.log "Mdl msg'"
            in
                Material.update msg' model

        SelectTab num ->
            let
                _ =
                    Debug.log "SelectTab"
            in
                { model | selectedTab = num } ! []



-- VIEW


type alias Mdl =
    Material.Model


view : Model -> Html Msg
view model =
    Material.Scheme.top <|
        Layout.render Mdl
            model.mdl
            [ Layout.fixedHeader
            , Layout.selectedTab model.selectedTab
            , Layout.onSelectTab SelectTab
            ]
            { header = [ h4 [ style [ ( "padding-left", "2rem" ) ] ] [ text "Counter" ] ]
            , drawer = []
            , tabs = ( [ text "Search", text "Read" ], [] )
            , main = [ viewBody model ]
            }


viewBody : Model -> Html Msg
viewBody model =
    let
        _ =
            Debug.log "selectedTab:"
    in
        case model.selectedTab of
            0 ->
                viewCounter model

            1 ->
                text "Something else"

            _ ->
                text "404"


viewCounter : Model -> Html Msg
viewCounter model =
    div
        [ style [ ( "padding", "2rem" ) ] ]
        [ text ("Count: " ++ toString model.count)
        , Button.render Mdl
            [ 0 ]
            model.mdl
            [ Button.onClick Increase
            , css "margin" "0 24px"
            ]
            [ text "Increase" ]
        , Button.render Mdl
            [ 1 ]
            model.mdl
            [ Button.onClick Reset ]
            [ text "Reset" ]
        , text ("selectedTab: " ++ toString model.selectedTab)
        ]



-- Load Google Mdl CSS. You'll likely want to do that not in code as we
-- do here, but rather in your master .html file. See the documentation
-- for the `Material` module for details.


main : Program Never
main =
    App.program
        { init = ( init, Cmd.none )
        , view = view
        , subscriptions = always Sub.none
        , update = update
        }