Created
October 25, 2016 21:08
-
-
Save SuperManEver/fb39754333fd185c808987b6123dca50 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Html exposing (..) | |
import Html.Attributes exposing (class) | |
import Html.App exposing (program) | |
import Html.Events exposing (onClick) | |
import Random | |
main = | |
program | |
{ init = init | |
, view = view | |
, update = update | |
, subscriptions = subscriptions | |
} | |
init : (Model, Cmd Msg) | |
init = | |
let | |
counters = [ { id = 1, value = 0 }, { id = 2, value = 0 } ] | |
in | |
(counters, Cmd.none) | |
-- Type Declarations | |
type alias CounterModel = | |
{ id : Int | |
, value : Int | |
} | |
type alias Model = List CounterModel | |
type Msg = Increment Int | Decrement Int | AddCounter Int | RemoveCounter | CreateCounter | |
-- Type Declarations | |
update : Msg -> Model -> (Model, Cmd Msg) | |
update msg model = | |
let | |
updateItem operand id model = | |
List.map | |
(\item -> if item.id == id then { item | value = operand item.value 1 } else item ) | |
model | |
increaseItem = updateItem (+) | |
decreaseItem = updateItem (-) | |
tl = List.drop 1 | |
in | |
case msg of | |
Increment id -> | |
(increaseItem id model, Cmd.none) | |
Decrement id -> | |
(decreaseItem id model, Cmd.none) | |
AddCounter id -> | |
((CounterModel id 0)::model, Cmd.none) | |
RemoveCounter -> | |
(tl model, Cmd.none) | |
CreateCounter -> | |
(model, Random.generate AddCounter (Random.int 1 100000)) | |
subscriptions : Model -> Sub Msg | |
subscriptions model = | |
Sub.none | |
counterView : CounterModel -> Html Msg | |
counterView {id, value} = | |
div [ class "counter" ] | |
[ p [ class "counter-value" ] [ text (toString value) ] | |
, button [ onClick <| Increment id ] [ text "+" ] | |
, button [ onClick <| Decrement id ] [ text "-" ] | |
] | |
countersDisplay : Model -> Html Msg | |
countersDisplay model = | |
let | |
counters = List.map counterView model | |
in | |
case counters of | |
[] -> | |
div [] [ text "No counters" ] | |
_ -> | |
div [ class "counters-holder" ] counters | |
view : Model -> Html Msg | |
view model = | |
div [] | |
[ button [ onClick CreateCounter ] [ text "Add" ] | |
, button [ onClick RemoveCounter] [ text "Remove" ] | |
, countersDisplay model | |
] | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment