Add title + some style, baby

1 files changed, 46 insertions, 14 deletions

diff --git a/front/src/Main.elm b/front/src/Main.elm
index 85b4057..1e54654 100644
--- a/front/src/Main.elm
+++ b/front/src/Main.elm
@@ -2,7 +2,19 @@ module Main exposing (main)
 
 import Browser
 import Html exposing (Attribute, Html, button, div, hr, input, span, table, tbody, td, text, th, thead, tr)
-import Html.Attributes exposing (class, disabled, max, min, step, style, title, type_, value)
+import Html.Attributes
+    exposing
+        ( class
+        , disabled
+        , max
+        , min
+        , placeholder
+        , step
+        , style
+        , title
+        , type_
+        , value
+        )
 import Html.Events exposing (onClick, onInput)
 import Http
 import Json.Decode exposing (Decoder, field, float, int, list, map, map2, map3, map4)
@@ -69,7 +81,8 @@ simDecoder =
 
 
 type alias SimSpecsRaw =
-    { totalValueTxt : String
+    { titleTxt : String
+    , totalValueTxt : String
     , initialTxt : String
     , financedRateTxt : String
     , i1Txt : String
@@ -142,7 +155,13 @@ init : () -> ( Model, Cmd Msg )
 init () =
     let
         simSpecsRaw =
-            { totalValueTxt = "200000", financedRateTxt = "80", initialTxt = "40000", i1Txt = "1.621", yearsTxt = "30" }
+            { titleTxt = ""
+            , totalValueTxt = "200000"
+            , financedRateTxt = "80"
+            , initialTxt = "40000"
+            , i1Txt = "1.621"
+            , yearsTxt = "30"
+            }
     in
     ( { error = "", simSpecsRaw = simSpecsRaw, expandedYears = Set.empty, simulation = Nothing }, Cmd.none )
 
@@ -152,7 +171,8 @@ init () =
 
 
 type SimSpecUpdate
-    = Principal
+    = Title
+    | Principal
     | Rate
     | Initial
     | I1
@@ -209,6 +229,9 @@ update msg model =
 
                 newSimSpecsTxt =
                     case u of
+                        Title ->
+                            { simSpecsRaw | titleTxt = val }
+
                         Principal ->
                             { simSpecsRaw | totalValueTxt = val }
 
@@ -286,7 +309,7 @@ errorToString error =
 specsView : SimSpecsRaw -> Html Msg
 specsView simSpecsRaw =
     let
-        { totalValueTxt, financedRateTxt, initialTxt, i1Txt, yearsTxt } =
+        { titleTxt, totalValueTxt, financedRateTxt, initialTxt, i1Txt, yearsTxt } =
             simSpecsRaw
 
         simSpecs =
@@ -302,10 +325,19 @@ specsView simSpecsRaw =
     in
     div []
         [ div []
+            [ input
+                [ class "min-w-full mb-2 py-1 px-3 text-xl font-bold lime-100"
+                , placeholder "Title..."
+                , value titleTxt
+                , onInput (UpdateSimSpecs Title)
+                ]
+                []
+            ]
+        , div [ class "flex my-1" ]
             [ text "Property price: "
             , input
                 [ type_ "range"
-                , class "accent-lime-300"
+                , class "accent-lime-400"
                 , Html.Attributes.min "0"
                 , Html.Attributes.max "1000000"
                 , step "5000"
@@ -315,7 +347,7 @@ specsView simSpecsRaw =
                 []
             , text totalValueTxt
             ]
-        , div [ class "flex" ]
+        , div [ class "flex my-1" ]
             [ div [ class "" ]
                 [ text "Initial contribution: "
                 , input
@@ -340,7 +372,7 @@ specsView simSpecsRaw =
                 , text "%)"
                 ]
             ]
-        , div []
+        , div [ class "my-1" ]
             [ text "Interest rate: "
             , input
                 [ class "w-[80px] border border-lime-500 border-2 px-2"
@@ -350,13 +382,13 @@ specsView simSpecsRaw =
                 , onInput (UpdateSimSpecs I1)
                 ]
                 []
-            , text " % TIN"
+            , text " % (nominal)"
             ]
-        , div [ class "flex mb-2" ]
+        , div [ class "flex my-1 mb-2" ]
             [ text "Years: "
             , input
                 [ type_ "range"
-                , class "accent-lime-300"
+                , class "accent-lime-400"
                 , Html.Attributes.min "1"
                 , Html.Attributes.max "50"
                 , step "1"
@@ -379,8 +411,8 @@ historyView m quotas =
         head =
             thead [ class "bg-lime-100" ] [ tr [] (List.map (\t -> th [ class "px-3 py-1 border border-gray-300" ] [ text t ]) titles) ]
     in
-    div [ class "py-4" ]
-        [ table [ class "border border-collapse border-gray-400" ]
+    div [ class "pt-4 flex flex-col items-center" ]
+        [ table [ class "border border-collapse bg-gray-50 border-gray-400" ]
             [ head
             , tbody []
                 (List.map (quotaView m)
@@ -503,7 +535,7 @@ simView m { history, topay, payed } =
 
 view : Model -> Html Msg
 view m =
-    div [ class "flex flex-col max-w-lg mx-auto items-center" ]
+    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 "min-w-full" ]
             [ specsView m.simSpecsRaw
             , case m.simulation of