Website

Check-in [114740dc32]
Login
Overview
Comment:Add feature to switch between different lessons in playground
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 114740dc32a92a6cc2eebdb5bdad273cab34a7e75bdc051e4e5086770abfba46
User & Date: robin.hansen on 2020-11-03 06:09:56
Other Links: manifest | tags
Context
2020-11-04
06:30
Repl now actually works! Code is executed and potential errors reported. check-in: 73f643169e user: robin.hansen tags: trunk
2020-11-03
06:09
Add feature to switch between different lessons in playground check-in: 114740dc32 user: robin.hansen tags: trunk
05:29
Playground now has a working textarea for editing source code. check-in: 8975f5e2dc user: robin.hansen tags: trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Modified playground/elm.json from [ae29f17b90] to [10df5d22af].

4
5
6
7
8
9
10
11

12
13
14

15
16
17
18
19
20
21
22
23
24
        "src"
    ],
    "elm-version": "0.19.1",
    "dependencies": {
        "direct": {
            "elm/browser": "1.0.2",
            "elm/core": "1.0.5",
            "elm/html": "1.0.0"

        },
        "indirect": {
            "elm/json": "1.1.3",

            "elm/time": "1.0.0",
            "elm/url": "1.0.0",
            "elm/virtual-dom": "1.0.2"
        }
    },
    "test-dependencies": {
        "direct": {},
        "indirect": {}
    }
}







|
>



>










4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
        "src"
    ],
    "elm-version": "0.19.1",
    "dependencies": {
        "direct": {
            "elm/browser": "1.0.2",
            "elm/core": "1.0.5",
            "elm/html": "1.0.0",
            "elm-community/string-extra": "4.0.1"
        },
        "indirect": {
            "elm/json": "1.1.3",
            "elm/regex": "1.0.0",
            "elm/time": "1.0.0",
            "elm/url": "1.0.0",
            "elm/virtual-dom": "1.0.2"
        }
    },
    "test-dependencies": {
        "direct": {},
        "indirect": {}
    }
}

Added playground/src/Lesson01.elm version [da64e366ea].







































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module Lesson01 exposing (contract)

import LessonContract exposing (LessonContract)
import String.Extra as String


contract : LessonContract
contract =
    { key = "L01"
    , label = "Lesson 1"
    , content = String.trim <| String.unindent content
    }


content : String
content =
    """
    # Welcome to the playground
    """

Added playground/src/Lesson02.elm version [34a3c501d7].







































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module Lesson02 exposing (contract)

import LessonContract exposing (LessonContract)
import String.Extra as String


contract : LessonContract
contract =
    { key = "L02"
    , label = "Lesson 2"
    , content = String.trim <| String.unindent content
    }


content : String
content =
    """
    # Welcome to Lesson 2
    """

Added playground/src/LessonContract.elm version [eda5b20e27].

































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module LessonContract exposing
    ( LessonContract
    , asDictEntry
    )


type alias LessonContract =
    { key : String
    , label : String
    , content : String
    }


asDictEntry : LessonContract -> ( String, LessonContract )
asDictEntry contract =
    ( contract.key, contract )

Modified playground/src/Playground.elm from [fa65de9674] to [027f165ed8].

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
module Playground exposing (main)

import Browser

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



















-- MODEL


type alias Model =

    { source : String }



init : flags -> ( Model, Cmd Msg )
init _ =

    ( { source = "" }

    , Cmd.none
    )



-- Update


type Msg
    = EditSource String



update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        EditSource newSource ->
            ( { model | source = newSource }
            , Cmd.none
            )
















-- VIEW


view : Model -> Html Msg
view model =
    Html.div
        [ Attributes.style "height" "100vh"
        ]
        [ Html.h1
            []
            [ Html.text "Playground" ]

        , Html.textarea
            [ Attributes.style "width" "50vw"
            , Attributes.style "height" "50%"
            , Events.onInput EditSource

            ]
            [ Html.text model.source ]


        ]

















-- MAIN


main : Program () Model Msg
main =
    Browser.element
        { init = init
        , update = update
        , view = view
        , subscriptions = always Sub.none
        }



>



>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







>
|
>




>
|
>










>










>
>
>
>
>
>
>
>
>
>
>
>
>













>
|
|
|
|
>
|
<
>
>
|
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>













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
85
86
87
88
89
90
91
92
93
94

95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
module Playground exposing (main)

import Browser
import Dict exposing (Dict)
import Html exposing (Html)
import Html.Attributes as Attributes
import Html.Events as Events
import Lesson01
import Lesson02
import LessonContract exposing (LessonContract)



-- LESSONS


lessons : Dict String LessonContract
lessons =
    [ Lesson01.contract
    , Lesson02.contract
    ]
        |> List.map LessonContract.asDictEntry
        |> Dict.fromList



-- MODEL


type alias Model =
    { activeLesson : LessonContract
    , source : String
    }


init : flags -> ( Model, Cmd Msg )
init _ =
    ( { activeLesson = Lesson01.contract
      , source = Lesson01.contract.content
      }
    , Cmd.none
    )



-- Update


type Msg
    = EditSource String
    | SwitchLesson String


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        EditSource newSource ->
            ( { model | source = newSource }
            , Cmd.none
            )

        SwitchLesson contractKey ->
            case Dict.get contractKey lessons of
                Just contract ->
                    ( { model
                        | activeLesson = contract
                        , source = contract.content
                      }
                    , Cmd.none
                    )

                Nothing ->
                    ( model, Cmd.none )



-- VIEW


view : Model -> Html Msg
view model =
    Html.div
        [ Attributes.style "height" "100vh"
        ]
        [ Html.h1
            []
            [ Html.text "Playground" ]
        , Html.div [ Attributes.style "height" "50%" ]
            [ Html.textarea
                [ Attributes.style "width" "50vw"
                , Attributes.style "height" "100%"
                , Events.onInput EditSource
                , Attributes.value model.source
                ]

                []
            , lessonSwitcher model
            ]
        ]


lessonSwitcher : Model -> Html Msg
lessonSwitcher model =
    Html.select
        [ Events.onInput SwitchLesson ]
        (List.map lessonSwitcherOption (Dict.values lessons))


lessonSwitcherOption : LessonContract -> Html Msg
lessonSwitcherOption contract =
    Html.option [ Attributes.value contract.key ]
        [ Html.text contract.label ]



-- MAIN


main : Program () Model Msg
main =
    Browser.element
        { init = init
        , update = update
        , view = view
        , subscriptions = always Sub.none
        }