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
|
module View.LoggedIn.Add
( addPayment
) where
import Html as H exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Reads exposing (readInt)
import Result exposing (..)
import ServerCommunication as SC exposing (serverCommunications)
import Update exposing (..)
import Update.LoggedIn exposing (..)
import Update.LoggedIn.Add exposing (..)
import Model exposing (Model)
import Model.View.LoggedIn.Add exposing (..)
import Model.Translations exposing (getMessage)
import Model.View.LoggedInView exposing (LoggedInView)
import View.Events exposing (onSubmitPrevDefault)
import View.Icon exposing (renderIcon)
import Utils.Maybe exposing (isJust)
import Utils.Either exposing (toMaybeError)
addPayment : Model -> LoggedInView -> Html
addPayment model loggedInView =
H.form
[ case (validateName loggedInView.add.name model.translations, validateCost loggedInView.add.cost model.translations) of
(Ok name, Ok cost) ->
let action =
case loggedInView.add.frequency of
Punctual -> SC.AddPayment loggedInView.account.me name cost
Monthly -> SC.AddMonthlyPayment name cost
in onSubmitPrevDefault serverCommunications.address action
(resName, resCost) ->
onSubmitPrevDefault actions.address (UpdateLoggedIn <| UpdateAdd <| AddError (toMaybeError resName) (toMaybeError resCost))
, class "addPayment"
]
[ addPaymentName loggedInView.add
, addPaymentCost model loggedInView.add
, paymentFrequency model loggedInView.add
, button
[ type' "submit"
, class "add" ]
[ text (getMessage "Add" model.translations)]
]
addPaymentName : AddPayment -> Html
addPaymentName addPayment =
div
[ classList
[ ("name", True)
, ("error", isJust addPayment.nameError)
]
]
[ input
[ id "nameInput"
, value addPayment.name
, on "input" targetValue (Signal.message actions.address << UpdateLoggedIn << UpdateAdd << UpdateName)
, maxlength 20
]
[]
, label
[ for "nameInput" ]
[ renderIcon "shopping-cart" ]
, case addPayment.nameError of
Just error ->
div [ class "errorMessage" ] [ text error ]
Nothing ->
text ""
]
addPaymentCost : Model -> AddPayment -> Html
addPaymentCost model addPayment =
div
[ classList
[ ("cost", True)
, ("error", isJust addPayment.costError)
]
]
[ input
[ id "costInput"
, value addPayment.cost
, on "input" targetValue (Signal.message actions.address << UpdateLoggedIn << UpdateAdd << UpdateCost)
, maxlength 7
]
[]
, label
[ for "costInput" ]
[ text model.config.currency ]
, case addPayment.costError of
Just error ->
div [ class "errorMessage" ] [ text error ]
Nothing ->
text ""
]
paymentFrequency : Model -> AddPayment -> Html
paymentFrequency model addPayment =
button
[ type' "button"
, class "frequency"
, onClick actions.address (UpdateLoggedIn << UpdateAdd <| 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) ]
]
|
