1 files changed, 90 insertions, 0 deletions
diff --git a/src/client/elm/LoggedIn/Home/View/Monthly.elm b/src/client/elm/LoggedIn/Home/View/Monthly.elm
new file mode 100644
index 0000000..487c05d
--- /dev/null
+++ b/src/client/elm/LoggedIn/Home/View/Monthly.elm
@@ -0,0 +1,90 @@
+module LoggedIn.Home.View.Monthly
+  ( view
+  ) where
+
+import String
+
+import Html 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.View.Price exposing (price)
+import LoggedIn.Home.View.Expand exposing (..)
+
+import Model.Payment as Payment exposing (Payment)
+import Model.Translations exposing (getMessage, getParamMessage)
+import LoggedData exposing (LoggedData)
+
+import Action
+import Mailbox
+
+import View.Icon exposing (renderIcon)
+
+view : LoggedData -> HomeModel.Model -> Html
+view loggedData homeModel =
+  if List.length loggedData.monthlyPayments == 0
+    then
+      text ""
+    else
+      div
+        [ classList
+            [ ("monthlyPayments", True)
+            , ("detail", homeModel.monthlyDetail)
+            ]
+        ]
+        [ monthlyCount loggedData homeModel
+        , if homeModel.monthlyDetail
+            then paymentsTable loggedData homeModel
+            else text ""
+        ]
+
+monthlyCount : LoggedData -> HomeModel.Model -> Html
+monthlyCount loggedData homeModel =
+  let count = List.length loggedData.monthlyPayments
+      total = List.sum << List.map .cost <| loggedData.monthlyPayments
+      key = if count > 1 then "PluralMonthlyCount" else "SingularMonthlyCount"
+  in  button
+        [ class "header"
+        , onClick Mailbox.address (Action.UpdateLoggedIn << LoggedInAction.HomeAction <| HomeAction.ToggleMonthlyDetail)
+        ]
+        [ text (getParamMessage [toString count, price loggedData.conf total] key loggedData.translations)
+        , expand ExpandDown homeModel.monthlyDetail
+        ]
+
+paymentsTable : LoggedData -> HomeModel.Model -> Html
+paymentsTable loggedData homeModel =
+  div
+    [ class "table" ]
+    ( loggedData.monthlyPayments
+        |> List.sortBy (String.toLower << .name)
+        |> List.map (paymentLine loggedData homeModel)
+    )
+
+paymentLine : LoggedData -> HomeModel.Model -> Payment -> Html
+paymentLine loggedData homeModel payment =
+  a
+    [ classList
+        [ ("row", True)
+        , ("edition", homeModel.paymentEdition == Just payment.id)
+        ]
+    , onClick Mailbox.address (Action.UpdateLoggedIn << LoggedInAction.HomeAction <| HomeAction.ToggleEdit payment.id)
+    ]
+    [ div [ class "cell category" ] [ text (payment.name) ]
+    , div
+        [ classList
+            [ ("cell cost", True)
+            , ("refund", payment.cost < 0)
+            ]
+        ]
+        [ text (price loggedData.conf payment.cost) ]
+    , div
+        [ class "cell delete"
+        , onClick Mailbox.address (Action.UpdateLoggedIn <| LoggedInAction.DeletePayment payment Payment.Monthly)
+        ]
+        [ button [] [ renderIcon "times" ]
+        ]
+    ]