diff options
Diffstat (limited to 'src/client/elm/LoggedIn/AddPayment/View.elm')
| -rw-r--r-- | src/client/elm/LoggedIn/AddPayment/View.elm | 127 | 
1 files changed, 127 insertions, 0 deletions
| diff --git a/src/client/elm/LoggedIn/AddPayment/View.elm b/src/client/elm/LoggedIn/AddPayment/View.elm new file mode 100644 index 0000000..50f7708 --- /dev/null +++ b/src/client/elm/LoggedIn/AddPayment/View.elm @@ -0,0 +1,127 @@ +module LoggedIn.AddPayment.View +  ( view +  ) where + +import Result exposing (..) +import Signal exposing (Address) + +import Html as H exposing (..) +import Html.Attributes exposing (..) +import Html.Events exposing (..) + +import LoggedIn.Action as LoggedInAction +import LoggedIn.Model as LoggedInModel + +import LoggedIn.AddPayment.Action as AddPaymentAction +import LoggedIn.AddPayment.Model as AddPaymentModel + +import Model exposing (Model) +import Model.Payment exposing (PaymentFrequency(..)) +import Model.Translations exposing (getMessage) +import Model.Action as Action exposing (..) + +import View.Events exposing (onSubmitPrevDefault) +import View.Icon exposing (..) + +import Utils.Maybe exposing (isJust) +import Utils.Either exposing (toMaybeError) + +view : Address Action -> Model -> LoggedInModel.Model -> Html +view address model loggedInModel = +  H.form +    [ let update = +            if loggedInModel.add.waitingServer +              then +                Action.NoOp +              else +                UpdateLoggedIn <| LoggedInAction.AddPayment loggedInModel.add.name loggedInModel.add.cost loggedInModel.add.frequency +      in  onSubmitPrevDefault address update +    , class "addPayment" +    ] +    [ addPaymentName address loggedInModel.add +    , addPaymentCost address model loggedInModel.add +    , paymentFrequency address model loggedInModel.add +    , button +        [ type' "submit" +        , classList +            [ ("add", True) +            , ("waitingServer", loggedInModel.add.waitingServer) +            ] +        ] +        [ text (getMessage "Add" model.translations) +        , if loggedInModel.add.waitingServer then renderSpinIcon else text "" +        ] +    ] + +addPaymentName : Address Action -> AddPaymentModel.Model -> Html +addPaymentName address addPayment = +  div +    [ classList +        [ ("name", True) +        , ("error", isJust addPayment.nameError) +        ] +    ] +    [ input +        [ id "nameInput" +        , value addPayment.name +        , on "input" targetValue (Signal.message address << UpdateLoggedIn << LoggedInAction.UpdateAdd << AddPaymentAction.UpdateName) +        , maxlength 20 +        ] +        [] +    , label +        [ for "nameInput" ] +        [ renderIcon "shopping-cart" ] +    , case addPayment.nameError of +        Just error -> +          div [ class "errorMessage" ] [ text error ] +        Nothing -> +          text "" +    ] + +addPaymentCost : Address Action -> Model -> AddPaymentModel.Model -> Html +addPaymentCost address model addPayment = +  div +    [ classList +        [ ("cost", True) +        , ("error", isJust addPayment.costError) +        ] +    ] +    [ input +        [ id "costInput" +        , value addPayment.cost +        , on "input" targetValue (Signal.message address << UpdateLoggedIn << LoggedInAction.UpdateAdd << AddPaymentAction.UpdateCost) +        , maxlength 7 +        ] +        [] +    , label +        [ for "costInput" ] +        [ text model.conf.currency ] +    , case addPayment.costError of +        Just error -> +          div [ class "errorMessage" ] [ text error ] +        Nothing -> +          text "" +    ] + +paymentFrequency : Address Action -> Model -> AddPaymentModel.Model -> Html +paymentFrequency address model addPayment = +  button +    [ type' "button" +    , class "frequency" +    , onClick address (UpdateLoggedIn << LoggedInAction.UpdateAdd <| AddPaymentAction.ToggleFrequency) +    ] +    [ div +        [ classList +            [ ("punctual", True) +            , ("selected", addPayment.frequency == Punctual) +            ] +        ] +        [ text (getMessage "Punctual" model.translations) ] +    , div +        [ classList +            [ ("monthly", True) +            , ("selected", addPayment.frequency == Monthly) +            ] +        ] +        [ text (getMessage "Monthly" model.translations) ] +    ] | 
