From cfca18262c1ff48dcb683ddab7d03cf8e55573ff Mon Sep 17 00:00:00 2001 From: Joris Date: Fri, 24 Mar 2017 09:21:04 +0000 Subject: Features/categories --- src/client/elm/View/Form.elm | 89 ++++++++++++++++++++++++++++++++------------ 1 file changed, 66 insertions(+), 23 deletions(-) (limited to 'src/client/elm/View/Form.elm') diff --git a/src/client/elm/View/Form.elm b/src/client/elm/View/Form.elm index dcde47d..7a4965d 100644 --- a/src/client/elm/View/Form.elm +++ b/src/client/elm/View/Form.elm @@ -1,5 +1,7 @@ module View.Form exposing ( textInput + , colorInput + , selectInput , radioInputs , hiddenSubmit ) @@ -13,7 +15,7 @@ import View.Color as Color import Form exposing (Form, FieldState) import Form.Input as Input -import Form.Error as FormError exposing (Error(..)) +import Form.Error as FormError exposing (ErrorValue(..)) import Form.Field as Field import Msg exposing (Msg) @@ -27,6 +29,7 @@ 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) @@ -35,21 +38,39 @@ textInput translations form formName fieldName = ] [ Input.textInput field - [ id (formName ++ fieldName) + [ id fieldId , classList [ ("filled", isJust field.value) ] + , value (Maybe.withDefault "" field.value) ] , label - [ for (formName ++ fieldName) ] - [ text (Translations.getMessage translations (formName ++ fieldName)) ] + [ for fieldId ] + [ text (Translations.getMessage translations fieldId) ] , button - [ type' "button" - , onClick (Form.Input fieldName Field.EmptyField) + [ type_ "button" + , onClick (Form.Input fieldName Form.Text Field.EmptyField) , tabindex -1 ] [ FontAwesome.times Color.silver 15 ] - , case field.liveError of - Just error -> formError translations error - Nothing -> text "" + , 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 @@ -67,9 +88,7 @@ radioInputs translations form formName radioName fieldNames = , div [ class "radioInputs" ] (List.map (radioInput translations field formName) fieldNames) - , case field.liveError of - Just error -> formError translations error - Nothing -> text "" + , formError translations field ] radioInput : Translations -> FieldState String String -> String -> String -> Html Form.Msg @@ -89,17 +108,41 @@ radioInput translations field formName fieldName = ] ] -formError : Translations -> FormError.Error String -> Html msg -formError translations 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) [] +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 = -- cgit v1.2.3