Expand years

1 files changed, 84 insertions, 17 deletions

diff --git a/front/src/Main.elm b/front/src/Main.elm
index 19fd765..15a0bd6 100644
--- a/front/src/Main.elm
+++ b/front/src/Main.elm
@@ -8,6 +8,7 @@ import Http
 import Json.Decode exposing (Decoder, field, float, int, list, map, map2, map3, map4)
 import Json.Encode as Encode exposing (Value, object)
 import Round
+import Set exposing (Set)
 
 
 
@@ -94,6 +95,7 @@ type alias SimSpecs =
 type alias Model =
     { error : String
     , simSpecsTxt : SimSpecsTxt
+    , expandedYears : Set Int
     , simulation : Maybe Simulation
     }
 
@@ -136,7 +138,7 @@ init () =
         simSpecsTxt =
             { principalTxt = "200000", i1Txt = "1.621", yearsTxt = "30" }
     in
-    ( { error = "", simSpecsTxt = simSpecsTxt, simulation = Nothing }, Cmd.none )
+    ( { error = "", simSpecsTxt = simSpecsTxt, expandedYears = Set.empty, simulation = Nothing }, Cmd.none )
 
 
 
@@ -153,6 +155,7 @@ type Msg
     = GotSimulation (Result Http.Error Simulation)
     | UpdateSimSpecs SimSpecUpdate String
     | RunSimulation SimSpecs
+    | SetExpandedYears (Set Int)
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
@@ -189,6 +192,9 @@ update msg model =
             in
             ( { model | simSpecsTxt = newSimSpecsTxt }, Cmd.none )
 
+        SetExpandedYears eyears ->
+            ( { model | expandedYears = eyears }, Cmd.none )
+
 
 
 -- VIEW (THEME)
@@ -199,6 +205,11 @@ butAttrs =
     [ class "px-3 rounded-md bg-lime-300 enabled:active:bg-lime-400 border border-lime-600 disabled:opacity-75" ]
 
 
+clickableAttrs : Msg -> List (Attribute Msg)
+clickableAttrs msg =
+    [ onClick msg, class "text-blue-800", style "cursor" "pointer" ]
+
+
 
 -- VIEW
 
@@ -288,16 +299,24 @@ specsView simSpecsTxt =
         ]
 
 
-historyView : List Quota -> Html Msg
-historyView quotas =
+historyView : Model -> List Quota -> Html Msg
+historyView m quotas =
     let
         titles =
-            [ "Month", "Quota", "Pending" ]
+            [ "Year", "Month", "Quota", "Pending" ]
 
         head =
             thead [ class "bg-lime-100" ] [ tr [] (List.map (\t -> th [ class "px-3 py-1 border border-gray-300" ] [ text t ]) titles) ]
     in
-    table [ class "border border-collapse border-gray-400" ] [ head, tbody [] (List.map quotaView quotas) ]
+    div [ class "py-4" ]
+        [ table [ class "border border-collapse border-gray-400" ]
+            [ head
+            , tbody []
+                (List.map (quotaView m)
+                    quotas
+                )
+            ]
+        ]
 
 
 capitalSumView : Capital -> Html Msg
@@ -309,12 +328,60 @@ capitalSumView { principal, interest } =
     span [ class "underline", title partsTitle ] [ text (Round.round 2 (principal + interest)) ]
 
 
-quotaView : Quota -> Html Msg
-quotaView { period, payed, pending_principal } =
-    if modBy 12 period == 0 then
+periodToYear : Int -> Int
+periodToYear period =
+    ((period - 1) // 12) + 1
+
+
+quotaView : Model -> Quota -> Html Msg
+quotaView m { period, payed, pending_principal } =
+    let
+        year =
+            periodToYear period
+
+        yearExpanded =
+            Set.member year m.expandedYears
+    in
+    if modBy 12 (period - 1) == 0 then
+        tr []
+            (List.map (\t -> td [ class "px-3 py-1 border border-gray-300" ] [ t ])
+                [ div []
+                    [ span
+                        (clickableAttrs
+                            (SetExpandedYears
+                                ((if yearExpanded then
+                                    Set.remove
+
+                                  else
+                                    Set.insert
+                                 )
+                                    year
+                                    m.expandedYears
+                                )
+                            )
+                        )
+                        [ text
+                            (if yearExpanded then
+                                "▼ "
+
+                             else
+                                "▶ "
+                            )
+                        ]
+                    , text (String.fromInt year)
+                    ]
+                , text
+                    (String.fromInt period)
+                , capitalSumView payed
+                , text (Round.round 2 pending_principal)
+                ]
+            )
+
+    else if yearExpanded then
         tr []
             (List.map (\t -> td [ class "px-3 py-1 border border-gray-300" ] [ t ])
-                [ text
+                [ text ""
+                , text
                     (String.fromInt period)
                 , capitalSumView payed
                 , text (Round.round 2 pending_principal)
@@ -325,26 +392,26 @@ quotaView { period, payed, pending_principal } =
         text ""
 
 
-simView : Simulation -> Html Msg
-simView { history, topay, payed } =
+simView : Model -> Simulation -> Html Msg
+simView m { history, topay, payed } =
     div []
-        [ historyView history
+        [ historyView m history
         , div [] [ text "to pay: ", capitalSumView topay ]
         , div [] [ text "payed: ", capitalSumView payed ]
         ]
 
 
 view : Model -> Html Msg
-view model =
+view m =
     div [ class "flex flex-row max-w-sm mx-auto" ]
         [ div [ class "flex flex-col items-center" ]
-            [ specsView model.simSpecsTxt
-            , case model.simulation of
+            [ specsView m.simSpecsTxt
+            , case m.simulation of
                 Nothing ->
                     text ""
 
                 Just sim ->
-                    div [] [ simView sim ]
-            , div [] [ text model.error ]
+                    simView m sim
+            , div [] [ text m.error ]
             ]
         ]