Created
April 15, 2021 21:59
-
-
Save shepelevstas/4b63e4176f0bbbc4004492790fb26fd8 to your computer and use it in GitHub Desktop.
Recursive widgets rendering from son
This file contains hidden or 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
| <html> | |
| <head> | |
| <style> | |
| .d-block {display: block;} | |
| .page { | |
| border: 1px solid gray; | |
| border-radius: 10px; | |
| margin: 4px; | |
| overflow: hidden; | |
| } | |
| .block { | |
| padding: 4px; | |
| background-color: lightgray; | |
| } | |
| .block:not(:last-child) { | |
| border-bottom: 1px solid gray; | |
| } | |
| .form-control > label {display: block;} | |
| </style> | |
| </head> | |
| <body> | |
| <main></main> | |
| <script> | |
| var app = Elm.Main.init({ | |
| node: document.querySelector('main'), | |
| /*flags: [ | |
| {t:'text', n:'name'}, | |
| {t:'block', n:'pasp', f:[{t:'text', n:'ser'}]}, | |
| {t:'page', n:'login', f:[{t:'text', n:'username'}, {t:'block', n:'pass', f:[{t:'text', n:'pass1'},{t:'text', n:'pass2'}]}]} | |
| ]*/ | |
| }) | |
| // you can use ports and stuff here | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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 (main) | |
| import Browser | |
| import Html exposing (Html, button, div, text, input, label, button) | |
| import Html.Attributes exposing (type_, class, value, name, checked) | |
| import Html.Events exposing (onClick) | |
| type alias Model = | |
| { count : Int, fields: List Field } | |
| type Field | |
| = Pg String (List Field) | |
| | Se String (List Field) | |
| | Bl String (List Field) | |
| | Tx String String | |
| | Nu String Int | |
| | Ch String Bool | |
| | Bt String String | |
| viewField f = | |
| case f of | |
| Pg n fs -> div [class "page"] ((div [] [text ( "Page " ++ n)]) :: (List.map viewField fs)) | |
| Se n fs -> div [class "section"] (List.map viewField fs) | |
| Bl n fs -> div [class "block"] (List.map viewField fs) | |
| Tx n v -> div [][ label [class "d-block"] [text n], input [type_ "text", value v, name n] []] | |
| Nu n v -> div [] [label[class "d-block"][],input[type_ "number", value <| String.fromInt v, name n][]] | |
| Ch n v -> div [] [label[][input[name n, checked v, type_ "checkbox"][], text n]] | |
| Bt n v -> button [name n, value v] [text n] | |
| initialModel : Model | |
| initialModel = | |
| { count = 0 | |
| , fields = | |
| [ Pg "1" | |
| [ Bl "Section 1" | |
| [ Tx "text 1" "" | |
| ] | |
| , Bl "Login" | |
| [ Tx "username" "" | |
| , Tx "password" "" | |
| , Bt "Login" "login" | |
| ] | |
| , Bl "Page 1-1" | |
| [ Pg "1-1" | |
| [ Bl "Block in Block" | |
| [ Ch "Yes" False | |
| , Ch "No" False | |
| ] | |
| ] | |
| ] | |
| ] | |
| ] | |
| } | |
| type Msg | |
| = NoOp | |
| update : Msg -> Model -> Model | |
| update msg model = | |
| case msg of | |
| NoOp -> model | |
| view : Model -> Html Msg | |
| view model = | |
| div [] (List.map viewField model.fields) | |
| main : Program () Model Msg | |
| main = | |
| Browser.sandbox | |
| { init = initialModel | |
| , view = view | |
| , update = update | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment