elm-javascript-minimal-interop-tutorial/FirstInterop.elm at master · wboumans/elm-javascript-minimal-interop-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
port module FirstInterop exposing (main)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)


port displayGreeting : String -> Cmd msg


port valentines : ({ from : String, content : String } -> msg) -> Sub msg


view : Model -> Html Msg
view model =
    let
        firstLine =
            if String.length model.valentine.from > 0 then
                "from: " ++ model.valentine.from

            else
                "I've not received anything from javascript yet."
    in
    div []
        [ h2 [] [ text "Send a greeting" ]
        , input
              [ onInput SendGreeting
              , value model.greeting
              ] []
        , hr [] []
        , h2 [] [ text <| "Look at what vanillajs sent!" ]
        , p [] [ text firstLine ]
        , p [] [ text model.valentine.content ]
        ]


type alias Model =
    { greeting : String
    , valentine : Valentine
    }


type alias Valentine =
    { from : String
    , content : String
    }


init : ( Model, Cmd Msg )
init =
    let
        firstModel =
            { greeting = ""
            , valentine =
                { from = ""
                , content = ""
                }
            }
    in
    ( firstModel, Cmd.none )


type Msg
    = SendGreeting String
    | ValentineReceived Valentine


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        SendGreeting greeting ->
            ( { model | greeting = greeting }, displayGreeting greeting )

        ValentineReceived received ->
            ( { model | valentine = received }, Cmd.none )


subscriptions : Model -> Sub Msg
subscriptions model =
    valentines ValentineReceived


main = Html.program
    { init = init, update = update, view = view, subscriptions = subscriptions }