aboutsummaryrefslogtreecommitdiff
path: root/src/client/elm/View/Form.elm
blob: 7a4965d5c02a9956a7abdc7cd0ef6821b1357a8e (plain)
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
module View.Form exposing
  ( textInput
  , colorInput
  , selectInput
  , radioInputs
  , hiddenSubmit
  )

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

import FontAwesome
import View.Color as Color

import Form exposing (Form, FieldState)
import Form.Input as Input
import Form.Error as FormError exposing (ErrorValue(..))
import Form.Field as Field

import Msg exposing (Msg)

import LoggedData exposing (LoggedData)

import Model.Translations as Translations exposing (Translations)

import Utils.Maybe exposing (isJust)

textInput : Translations -> Form String a -> String -> String -> Html Form.Msg
textInput translations form formName fieldName =
  let field = Form.getFieldAsString fieldName form
      fieldId = formName ++ fieldName
  in  div
        [ classList
            [ ("textInput", True)
            , ("error", isJust field.liveError)
            ]
        ]
        [ Input.textInput
            field
            [ id fieldId
            , classList [ ("filled", isJust field.value) ]
            , value (Maybe.withDefault "" field.value)
            ]
        , label
            [ for fieldId ]
            [ text (Translations.getMessage translations fieldId) ]
        , button
            [ type_ "button"
            , onClick (Form.Input fieldName Form.Text Field.EmptyField)
            , tabindex -1
            ]
            [ FontAwesome.times Color.silver 15 ]
        , formError translations field
        ]

colorInput : Translations -> Form String a -> String -> String -> Html Form.Msg
colorInput translations form formName fieldName =
  let field = Form.getFieldAsString fieldName form
  in  div
        [ classList
            [ ("colorInput", True)
            , ("error", isJust field.liveError)
            ]
        ]
        [ label
            [ for (formName ++ fieldName) ]
            [ text (Translations.getMessage translations (formName ++ fieldName)) ]
        , Input.textInput
            field
            [ id (formName ++ fieldName)
            , type_ "color"
            ]
        ]

radioInputs : Translations -> Form String a -> String -> String -> List String -> Html Form.Msg
radioInputs translations form formName radioName fieldNames =
  let field = Form.getFieldAsString radioName form
  in  div
        [ classList
            [ ("radioGroup", True)
            , ("error", isJust field.liveError)
            ]
        ]
        [ div
            [ class "title" ]
            [ text (Translations.getMessage translations (formName ++ radioName) ) ]
        , div
            [ class "radioInputs" ]
            (List.map (radioInput translations field formName) fieldNames)
        , formError translations field
        ]

radioInput : Translations -> FieldState String String -> String -> String -> Html Form.Msg
radioInput translations field formName fieldName =
  div
    [ class "radioInput" ]
    [ Input.radioInput
        field.path
        field
        [ id (formName ++ fieldName)
        , value fieldName
        , checked (field.value == Just fieldName)
        ]
    , label
        [ for (formName ++ fieldName) ]
        [ text (Translations.getMessage translations (formName ++ fieldName))
        ]
    ]

selectInput : Translations -> Form String a -> String -> String -> List (String, String) -> Html Form.Msg
selectInput translations form formName selectName options =
  let field = Form.getFieldAsString selectName form
      fieldId = formName ++ selectName
  in  div
        [ classList
            [ ("selectInput", True)
            , ("error", isJust field.liveError)
            ]
        ]
        [ label
            [ for fieldId ]
            [ text (Translations.getMessage translations fieldId) ]
        , Input.selectInput
            (("", "") :: options)
            field
            [ id fieldId ]
        , formError translations field
        ]

formError : Translations -> FieldState String a -> Html msg
formError translations field =
  case field.liveError of
    Just error ->
      let errorElement error params =
            div
              [ class "errorMessage" ]
              [ text (Translations.getParamMessage params translations error) ]
      in  case error of
            CustomError key -> errorElement key []
            SmallerIntThan n -> errorElement "SmallerIntThan" [toString n]
            GreaterIntThan n -> errorElement "GreaterIntThan" [toString n]
            error -> errorElement (toString error) []
    Nothing ->
      text ""

hiddenSubmit : msg -> Html msg
hiddenSubmit msg =
  button
    [ style [ ("display", "none") ]
    , onClick msg
    ]
    []