module LoggedIn.Home.AddPayment.View ( view ) where import Result exposing (..) import Html as H exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (..) import LoggedIn.Action as LoggedInAction import LoggedIn.Home.Action as HomeAction import LoggedIn.Home.Model as HomeModel import LoggedIn.Home.AddPayment.Action as AddPaymentAction import LoggedIn.Home.AddPayment.Model as AddPaymentModel import Model.Payment exposing (Frequency(..)) import Model.Translations exposing (getMessage) import LoggedData exposing (LoggedData) import Action import Mailbox import View.Events exposing (onSubmitPrevDefault) import View.Icon exposing (..) import Utils.Maybe exposing (isJust) import Utils.Either exposing (toMaybeError) view : LoggedData -> HomeModel.Model -> Html view loggedData homeModel = H.form [ let update = if homeModel.add.waitingServer then Action.NoOp else Action.UpdateLoggedIn <| LoggedInAction.AddPayment homeModel.add.name homeModel.add.cost homeModel.add.frequency in onSubmitPrevDefault Mailbox.address update , class "addPayment" ] [ addPaymentName loggedData homeModel.add , addPaymentCost loggedData homeModel.add , paymentFrequency loggedData homeModel.add , button [ type' "submit" , classList [ ("add", True) , ("waitingServer", homeModel.add.waitingServer) ] ] [ text (getMessage "Add" loggedData.translations) , if homeModel.add.waitingServer then renderSpinIcon else text "" ] ] addPaymentName : LoggedData -> AddPaymentModel.Model -> Html addPaymentName loggedData addPayment = div [ classList [ ("name", True) , ("error", isJust addPayment.nameError) ] ] [ input [ id "nameInput" , value addPayment.name , on "input" targetValue (Signal.message Mailbox.address << Action.UpdateLoggedIn << LoggedInAction.HomeAction << HomeAction.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 : LoggedData -> AddPaymentModel.Model -> Html addPaymentCost loggedData addPayment = div [ classList [ ("cost", True) , ("error", isJust addPayment.costError) ] ] [ input [ id "costInput" , value addPayment.cost , on "input" targetValue (Signal.message Mailbox.address << Action.UpdateLoggedIn << LoggedInAction.HomeAction << HomeAction.UpdateAdd << AddPaymentAction.UpdateCost) , maxlength 7 ] [] , label [ for "costInput" ] [ text loggedData.conf.currency ] , case addPayment.costError of Just error -> div [ class "errorMessage" ] [ text error ] Nothing -> text "" ] paymentFrequency : LoggedData -> AddPaymentModel.Model -> Html paymentFrequency loggedData addPayment = button [ type' "button" , class "frequency" , onClick Mailbox.address (Action.UpdateLoggedIn << LoggedInAction.HomeAction << HomeAction.UpdateAdd <| AddPaymentAction.ToggleFrequency) ] [ div [ classList [ ("punctual", True) , ("selected", addPayment.frequency == Punctual) ] ] [ text (getMessage "Punctual" loggedData.translations) ] , div [ classList [ ("monthly", True) , ("selected", addPayment.frequency == Monthly) ] ] [ text (getMessage "Monthly" loggedData.translations) ] ]