1 files changed, 48 insertions, 9 deletions
diff --git a/src/client/View/Payments/Monthly.elm b/src/client/View/Payments/Monthly.elm
index 366af92..e115dbf 100644
--- a/src/client/View/Payments/Monthly.elm
+++ b/src/client/View/Payments/Monthly.elm
@@ -6,19 +6,58 @@ import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
 
+import Update exposing (..)
+import Update.LoggedView exposing (..)
+import Update.LoggedView.Monthly exposing (..)
+
 import Model exposing (Model)
-import Model.Payment exposing (Payments)
+import Model.View.Payment.Monthly exposing (Monthly)
+import Model.Payment exposing (Payments, Payment)
 import Model.View.LoggedView exposing (LoggedView)
-import Model.Translations exposing (getVarMessage)
+import Model.Translations exposing (getMessage, getVarMessage)
+
+import View.Icon exposing (renderIcon)
 
 monthlyPayments : Model -> LoggedView -> Html
 monthlyPayments model loggedView =
-  div
-    [ class "monthlyPayments" ]
-    [ monthlyCount model loggedView.monthlyPayments ]
+  let monthly = loggedView.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 monthly else text ""
+            ]
 
-monthlyCount : Model -> Payments -> Html
-monthlyCount model monthlyPayments =
-  let count = List.length monthlyPayments
+monthlyCount : Model -> Monthly -> Html
+monthlyCount model monthly =
+  let count = List.length monthly.payments
       key = if count > 1 then "PluralMonthlyCount" else "SingularMonthlyCount"
-  in  text (getVarMessage [toString count] key model.translations)
+  in  button
+        [ class "count"
+        , onClick actions.address (UpdateLoggedView << UpdateMonthly <| ToggleDetail)
+        ]
+        [ text (getVarMessage [toString count] key model.translations)
+        , div
+            [ class "expand" ]
+            [ if monthly.visibleDetail
+                then renderIcon "chevron-up"
+                else renderIcon "chevron-down"
+            ]
+        ]
+
+paymentsTable : Model -> Monthly -> Html
+paymentsTable model monthly =
+  div
+    [ class "table" ]
+    ( List.map (paymentLine model) monthly.payments )
+
+paymentLine : Model -> Payment -> Html
+paymentLine model payment =
+  a
+    [ class "row" ]
+    [ div [ class "cell" ] [ text (payment.name) ]
+    , div [ class "cell" ] [ text (toString payment.cost ++ " " ++ getMessage "MoneySymbol" model.translations) ]
+    ]