module View.Form exposing ( textInput , colorInput , selectInput , radioInputs , hiddenSubmit ) import Html exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (..) import Maybe.Extra as Maybe 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) 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", Maybe.isJust field.liveError) ] ] [ Input.textInput field [ id fieldId , classList [ ("filled", Maybe.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", Maybe.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", Maybe.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", Maybe.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 ] []