Format update overview

1 files changed, 98 insertions, 56 deletions

diff --git a/front/src/Main.elm b/front/src/Main.elm
index 57a6f11..fef4863 100644
--- a/front/src/Main.elm
+++ b/front/src/Main.elm
@@ -12,6 +12,7 @@ import Html
         , div
         , hr
         , input
+        , li
         , p
         , pre
         , span
@@ -22,6 +23,7 @@ import Html
         , th
         , thead
         , tr
+        , ul
         )
 import Html.Attributes
     exposing
@@ -98,6 +100,15 @@ make_t lang str =
                 "Total to pay: " ->
                     "Total a pagar: "
 
+                "Total after early payments: " ->
+                    "Total tras amortizaciones anticipadas: "
+
+                "Payed early: " ->
+                    "Anticipado: "
+
+                "Saved: " ->
+                    "Ahorro: "
+
                 "Initial payment: " ->
                     "Pago inicial: "
 
@@ -119,6 +130,9 @@ make_t lang str =
                 "Pending" ->
                     "Pendiente"
 
+                "Updates" ->
+                    "Actualizaciones"
+
                 _ ->
                     str
 
@@ -186,7 +200,7 @@ capitalSumView { t, settings } { principal, interest } =
                 , ")"
                 ]
     in
-    span [ class "underline", title partsTitle ] [ amountView settings.currency (principal + interest) ]
+    amountView (titledAttrs partsTitle) settings.currency (principal + interest)
 
 
 type alias MortgageSim =
@@ -915,29 +929,29 @@ amountToString currency amount =
             amountStr
 
 
-amountView : Currency -> Float -> Html Msg
-amountView currency amount =
+amountView : List (Attribute Msg) -> Currency -> Float -> Html Msg
+amountView attrs currency amount =
     let
         amountStr =
             Round.round 2 amount
     in
-    case String.split "." amountStr of
-        int :: float :: [] ->
-            let
-                floatPart =
-                    case float of
-                        "00" ->
-                            []
-
-                        _ ->
-                            [ text <| String.fromChar (currencySep currency).decimal
-                            , span [ class "text-sm" ] [ text float ]
-                            ]
-
-                els =
-                    [ text (insertThousandsSep currency int) ] ++ floatPart
-            in
-            span [] <|
+    span attrs <|
+        case String.split "." amountStr of
+            int :: float :: [] ->
+                let
+                    floatPart =
+                        case float of
+                            "00" ->
+                                []
+
+                            _ ->
+                                [ text <| String.fromChar (currencySep currency).decimal
+                                , span [ class "text-sm" ] [ text float ]
+                                ]
+
+                    els =
+                        [ text (insertThousandsSep currency int) ] ++ floatPart
+                in
                 case currencyOrder currency of
                     Prefix ->
                         [ text (currencySymbol currency) ] ++ els
@@ -945,8 +959,13 @@ amountView currency amount =
                     Postfix ->
                         els ++ [ text (currencySymbol currency) ]
 
-        _ ->
-            text amountStr
+            _ ->
+                [ text amountStr ]
+
+
+titledAttrs : String -> List (Attribute Msg)
+titledAttrs title_ =
+    [ class "underline", title title_ ]
 
 
 specsView : Model -> Html Msg
@@ -1050,7 +1069,7 @@ simUpdateView : List (Attribute Msg) -> Model -> SimUpdate -> Html Msg
 simUpdateView attrs m upd =
     case upd of
         Amortize f ->
-            p attrs [ text "+", amountView m.settings.currency f ]
+            p attrs [ text "+", amountView [] m.settings.currency f ]
 
         SetI1 f ->
             p attrs [ text <| String.fromFloat f, text "%" ]
@@ -1100,7 +1119,7 @@ quotaView m { updates } { month, payed, pending_principal } =
                 [ yearField
                 , text (String.fromInt month)
                 , capitalSumView m payed
-                , amountView m.settings.currency pending_principal
+                , amountView [] m.settings.currency pending_principal
                 , updatesField
                 ]
             )
@@ -1159,45 +1178,68 @@ simView m ( rawSpecs, sim ) =
         fee =
             total * parseFloat rawSpecs.fee / 100
 
-        overview financed =
-            div []
-                [ pre []
-                    [ text <| t "Financed (mortgage): "
-                    , capitalSumView m financed
+        overview title financed extraLis =
+            div [ class "my-2 p-1 border-2 rounded-md border-gray-400" ]
+                [ p [ class "text-lg" ]
+                    [ text title
+                    , amountView [ class "font-bold" ]
+                        currency
+                        (financed.principal
+                            + financed.interest
+                            + initial
+                            + vat
+                            + fee
+                        )
                     ]
-                , pre []
-                    [ text <| t "Total to pay: "
-                    , span [ class "font-bold" ]
-                        [ amountView currency
-                            (financed.principal
-                                + financed.interest
-                                + initial
-                                + vat
-                                + fee
-                            )
+                , ul [ class "list-inside list-disc" ]
+                    ([ li []
+                        [ text <| t "Initial payment: "
+                        , amountView [] currency (initial + vat + fee)
                         ]
-                    ]
+                     , li []
+                        [ text <| t "Financed (mortgage): "
+                        , capitalSumView m financed
+                        ]
+                     ]
+                        ++ extraLis
+                    )
                 ]
     in
     div []
         [ hr [ class "my-5" ] []
-        , pre [ class "leading-none" ]
+        , p []
             [ text <| t "Initial payment: "
-            , amountView currency (initial + vat + fee)
-            , text "\n├ "
-            , text <| t "Property: "
-            , amountView currency initial
-            , text "\n├ "
-            , text <| t "Agent fee: "
-            , amountView currency fee
-            , text "\n└ "
-            , text <| t "VAT: "
-            , amountView currency vat
+            , amountView [ class "font-bold" ] currency (initial + vat + fee)
             ]
-        , p [ class "text-lg font-bold" ] [ text "-- without early payments --" ]
-        , overview sim.topay
-        , p [ class "text-lg font-bold" ] [ text "-- with early payments --" ]
-        , overview sim.payed
+        , ul [ class "list-inside list-disc" ]
+            [ li []
+                [ text <| t "Property: "
+                , amountView [] currency initial
+                ]
+            , li []
+                [ text <| t "Agent fee: "
+                , amountView [] currency fee
+                ]
+            , li []
+                [ text <| t "VAT: "
+                , amountView [] currency vat
+                ]
+            ]
+        , overview (t "Total to pay: ") sim.topay []
+        , if capitalSumView m sim.topay /= capitalSumView m sim.payed then
+            overview (t "Total after early payments: ") sim.payed <|
+                [ li []
+                    [ text <| t "Payed early: "
+                    , amountView [] currency sim.payed_amortized
+                    ]
+                , li []
+                    [ text <| t "Saved: "
+                    , amountView [] currency (sim.topay.interest - sim.payed.interest)
+                    ]
+                ]
+
+          else
+            text ""
         , mortgageView m sim
         ]
 
@@ -1206,7 +1248,7 @@ view : Model -> Document Msg
 view m =
     { title = "Hiccup"
     , body =
-        [ div [ class "flex flex-col max-w-lg mx-auto items-center mt-2 p-3 border-2 rounded-md border-gray-500 bg-gray-100" ]
+        [ div [ class "flex flex-col max-w-xl mx-auto items-center mt-2 p-3 border-2 rounded-md border-gray-500 bg-gray-100" ]
             [ div [ class "min-w-full" ]
                 [ specsView m
                 , case m.simulation of