-
Notifications
You must be signed in to change notification settings - Fork 1
/
Main.elm
125 lines (102 loc) · 3.63 KB
/
Main.elm
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 Main exposing (Model, Msg(..), main)
import Browser
import Html exposing (Html)
import Html.Attributes
import Html.Events
import Html.Form
import Signup
main : Program () Model Msg
main =
Browser.element
{ init = always init
, view = view
, update = update
, subscriptions = always Sub.none
}
type alias Model =
{ signupForm : Html.Form.Model Signup.Editor }
type Msg
= GotSignupMsg (Html.Form.Msg Signup.Editor)
| GotSignupOnSubmit (Result (List Signup.Error) Signup.Record)
| GotPropagatedEvent String
signupModule : Html.Form.Module String Signup.Editor Model (Signup.Fieldset Msg) Msg
signupModule =
Signup.form { toMsg = GotSignupMsg, onSubmit = GotSignupOnSubmit }
init : ( Model, Cmd Msg )
init =
signupModule.init
( \sf -> { signupForm = sf }, Cmd.none )
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
GotSignupMsg signupMsg ->
signupModule.update signupMsg model
GotSignupOnSubmit record ->
let
_ =
Debug.log "GotSignupOnSubmit" record
in
( model, Cmd.none )
GotPropagatedEvent value ->
let
_ =
Debug.log "GotPropagatedEvent" value
in
( model, Cmd.none )
view : Model -> Html Msg
view model =
let
fieldset : Signup.Fieldset Msg
fieldset =
signupModule.fieldset model
margin : Int -> Html.Attribute msg
margin i =
String.fromInt i
++ "px"
|> Html.Attributes.style "margin"
withLabel l field =
Html.div [ margin 12 ]
[ Html.label [ margin 4 ]
[ Html.text l
, field
]
]
withCallback field =
Html.div [ Html.Events.onInput GotPropagatedEvent ] [ field ]
withErrors field attrs =
let
showErrors =
not <| List.isEmpty field.errors
in
Html.div []
[ field.element <|
if showErrors then
Html.Attributes.style "text-decoration-style" "wavy"
:: Html.Attributes.style "text-decoration-line" "underline"
:: Html.Attributes.style "text-decoration-color" "red"
:: attrs
else
attrs
, if showErrors then
Html.div [] [ Html.ul [] <| Html.h4 [] [ Html.text "Errors" ] :: List.map (\err -> Html.li [] [ Html.text err ]) field.errors ]
else
Html.text ""
]
in
Html.div []
[ Html.div []
[ Html.div []
[ withErrors fieldset.name [ margin 12 ] |> withLabel "Name"
, Html.input (fieldset.age.toAttrs [ margin 12 ]) [] |> withLabel "Age"
, withErrors fieldset.emailAddress [ margin 12 ] |> withLabel "Email Address"
, fieldset.subscribe.element [ Html.Attributes.style "margin" "4px" ] |> withLabel "Subscribe"
]
, Html.button [ Html.Events.onClick signupModule.submitMsg ] [ Html.text "Submit" ]
, Html.hr [] []
, Debug.toString model |> Html.text
, Html.hr [] []
, Debug.toString (signupModule.errors model) |> Html.text
, Html.hr [] []
, Debug.toString (signupModule.errors model |> Signup.fromErrors) |> Html.text
]
]