Created
November 18, 2016 10:02
-
-
Save rommsen/8a0d4b1737a763c3dd4e68b3a74be7af to your computer and use it in GitHub Desktop.
Elm-Select Box.
Json-Decode-map
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
module Main exposing (..) | |
import Html exposing (..) | |
import Html.Events exposing (on, targetValue) | |
import Html.Attributes exposing (..) | |
import Json.Decode as Json | |
import Date | |
type alias Model = | |
{ month : Date.Month } | |
initModel : Model | |
initModel = | |
{ month = Date.Jan } | |
months : List Date.Month | |
months = | |
[ Date.Jan, Date.Feb, Date.Mar, Date.Apr, Date.May, Date.Jun, Date.Jul, Date.Aug, Date.Sep, Date.Oct, Date.Nov, Date.Dec ] | |
type Msg | |
= SetMonth Date.Month | |
update : Msg -> Model -> Model | |
update msg model = | |
case msg of | |
SetMonth month -> | |
{ model | month = month } | |
monthOption : a -> Html msg | |
monthOption month = | |
option [ value (toString month) ] [ text (toString month) ] | |
view : Model -> Html Msg | |
view model = | |
Html.div [] | |
[ h2 [] [ text "Month selector" ] | |
, select [ on "change" (Json.map SetMonth monthDecoder) ] (List.map monthOption months) | |
, div [] [ text <| "Selected: " ++ (toString model.month) ] | |
] | |
{- | |
I dont understand Json.Decode.map and the on change Event = on "change" (Json.map SetMonth monthDecoder) | |
on : String -> Decoder a -> (a -> Message) -> Attribute | |
on = change (Json.map SetMonth monthDecoder) -> who is filling this function? beginnerProgram? | |
map : (a -> value) -> Decoder a -> Decoder value | |
SetMonth -> monthDecoder | |
what are a and value? Is a: Date.Month, if yes value: ? | |
why is SetMonth: (a -> value)? | |
-} | |
monthDecoder : Json.Decoder Date.Month | |
monthDecoder = | |
-- Html.Events.targetValue: Decoder String | |
-- so we try to decode the string and put the result into stringToMonthDecoder | |
targetValue | |
|> Json.andThen stringToMonthDecoder | |
stringToMonthDecoder : String -> Json.Decoder Date.Month | |
stringToMonthDecoder string = | |
case string of | |
"Jan" -> | |
Json.succeed Date.Jan | |
"Feb" -> | |
Json.succeed Date.Feb | |
"Mar" -> | |
Json.succeed Date.Mar | |
"Apr" -> | |
Json.succeed Date.Apr | |
"May" -> | |
Json.succeed Date.May | |
"Jun" -> | |
Json.succeed Date.Jun | |
"Jul" -> | |
Json.succeed Date.Jul | |
"Aug" -> | |
Json.succeed Date.Aug | |
"Sep" -> | |
Json.succeed Date.Sep | |
"Oct" -> | |
Json.succeed Date.Oct | |
"Nov" -> | |
Json.succeed Date.Nov | |
"Dec" -> | |
Json.succeed Date.Dec | |
_ -> | |
Json.fail "month not available" | |
main : Program Never Model Msg | |
main = | |
beginnerProgram | |
{ model = initModel | |
, view = view | |
, update = update | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
awesome thank you. That makes much more sense now. Especially with your type annotation for on. I think I would not have so many problems with this annotation. I copied the annotation from: http://package.elm-lang.org/packages/evancz/elm-html/4.0.2/Html-Events#on which is totally outdated. Dont know how I got there.