1 files changed, 72 insertions, 0 deletions
diff --git a/src/client/View/LoggedIn/Monthly.elm b/src/client/View/LoggedIn/Monthly.elm
new file mode 100644
index 0000000..14c3de7
--- /dev/null
+++ b/src/client/View/LoggedIn/Monthly.elm
@@ -0,0 +1,72 @@
+module View.LoggedIn.Monthly
+  ( monthlyPayments
+  ) where
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+
+import Update exposing (..)
+import Update.LoggedIn exposing (..)
+import Update.LoggedIn.Monthly exposing (..)
+
+import Model exposing (Model)
+import Model.View.LoggedIn.Monthly exposing (Monthly)
+import Model.Payment exposing (Payments, Payment)
+import Model.View.LoggedInView exposing (LoggedInView)
+import Model.Translations exposing (getMessage, getParamMessage)
+
+import ServerCommunication as SC exposing (serverCommunications)
+
+import View.Icon exposing (renderIcon)
+
+monthlyPayments : Model -> LoggedInView -> Html
+monthlyPayments model loggedInView =
+  let monthly = loggedInView.monthly
+  in  if List.isEmpty monthly.payments
+        then
+          text ""
+        else
+          div
+            [ class ("monthlyPayments" ++ if monthly.visibleDetail then " detail" else "") ]
+            [ monthlyCount model monthly
+            , if monthly.visibleDetail then paymentsTable model loggedInView monthly else text ""
+            ]
+
+monthlyCount : Model -> Monthly -> Html
+monthlyCount model monthly =
+  let count = List.length monthly.payments
+      key = if count > 1 then "PluralMonthlyCount" else "SingularMonthlyCount"
+  in  button
+        [ class "count"
+        , onClick actions.address (UpdateLoggedIn << UpdateMonthly <| ToggleDetail)
+        ]
+        [ text (getParamMessage [toString count] key model.translations)
+        , div
+            [ class "expand" ]
+            [ if monthly.visibleDetail
+                then renderIcon "chevron-up"
+                else renderIcon "chevron-down"
+            ]
+        ]
+
+paymentsTable : Model -> LoggedInView -> Monthly -> Html
+paymentsTable model loggedInView monthly =
+  div
+    [ class "table" ]
+    ( List.map (paymentLine model loggedInView) monthly.payments )
+
+paymentLine : Model -> LoggedInView -> Payment -> Html
+paymentLine model loggedInView payment =
+  a
+    [ class ("row" ++ (if loggedInView.paymentEdition == Just payment.id then " edition" else ""))
+    , onClick actions.address (UpdateLoggedIn (ToggleEdit payment.id))
+    ]
+    [ div [ class "cell" ] [ text (payment.name) ]
+    , div [ class "cell" ] [ text (toString payment.cost ++ " " ++ getMessage "MoneySymbol" model.translations) ]
+    , div
+        [ class "cell delete"
+        , onClick serverCommunications.address (SC.DeleteMonthlyPayment payment.id)
+        ]
+        [ renderIcon "times" ]
+    ]