Overview
Comment: | Add feature to switch between different lessons in playground |
---|---|
Timelines: | family | ancestors | descendants | both | trunk |
Files: | files | file ages | folders |
SHA3-256: |
114740dc32a92a6cc2eebdb5bdad273c |
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
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 } |