Refactor inputs

1 files changed, 43 insertions, 45 deletions

diff --git a/front/src/Main.elm b/front/src/Main.elm
index c45373d..88a5ee7 100644
--- a/front/src/Main.elm
+++ b/front/src/Main.elm
@@ -403,6 +403,31 @@ clickableAttrs msg =
     [ onClick msg, class "text-lime-600", style "cursor" "pointer" ]
 
 
+txtInput : List (Attribute Msg) -> (String -> Msg) -> String -> Html Msg
+txtInput attributes onInputMsg valueTxt =
+    input
+        ([ class "border border-lime-500 border-2 px-2 focus:outline focus:outline-lime-500"
+         , onInput onInputMsg
+         , value valueTxt
+         ]
+            ++ attributes
+        )
+        []
+
+
+slider : List (Attribute Msg) -> (String -> Msg) -> String -> Html Msg
+slider attributes onInputMsg valueTxt =
+    input
+        (attributes
+            ++ [ type_ "range"
+               , class "mx-1 accent-lime-400"
+               , onInput onInputMsg
+               , value valueTxt
+               ]
+        )
+        []
+
+
 
 -- VIEW
 
@@ -433,67 +458,40 @@ specsView rawSpecs =
             ]
         , div [ class "flex my-1" ]
             [ text "Property price: "
-            , input
-                [ type_ "range"
-                , class "accent-lime-400"
-                , Html.Attributes.min "0"
-                , Html.Attributes.max "1000000"
-                , step "5000"
-                , value totalValue
-                , onInput (UpdateSpecs Principal)
-                ]
-                []
-            , text totalValue
+            , slider [ Html.Attributes.min "0", Html.Attributes.max "1000000", step "5000" ]
+                (UpdateSpecs Principal)
+                totalValue
+            , txtInput [ class "w-[100px]", Html.Attributes.min "0", Html.Attributes.max "1000000" ]
+                (UpdateSpecs Principal)
+                totalValue
             ]
         , div [ class "flex my-1" ]
             [ div [ class "" ]
                 [ text "Initial contribution: "
-                , input
-                    [ class "w-[100px] border border-lime-500 border-2 px-2 focus:outline focus:outline-lime-500"
-                    , Html.Attributes.min "0"
-                    , Html.Attributes.max totalValue
-                    , value initial
-                    , onInput (UpdateSpecs Initial)
-                    ]
-                    []
+                , txtInput [ class "w-[100px]", Html.Attributes.min "0", Html.Attributes.max totalValue ]
+                    (UpdateSpecs Initial)
+                    initial
                 ]
             , div [ class "ml-4" ]
                 [ text " ("
-                , input
-                    [ class "w-[55px] border border-lime-500 border-2 px-2 focus:outline focus:outline-lime-500"
-                    , Html.Attributes.min "10"
-                    , Html.Attributes.max "100"
-                    , value financedRate
-                    , onInput (UpdateSpecs Rate)
-                    ]
-                    []
+                , txtInput [ class "w-[55px]", Html.Attributes.min "10", Html.Attributes.max "100" ]
+                    (UpdateSpecs Rate)
+                    financedRate
                 , text "%)"
                 ]
             ]
         , div [ class "my-1" ]
             [ text "Interest rate: "
-            , input
-                [ class "w-[80px] border border-lime-500 border-2 px-2 focus:outline focus:outline-lime-500"
-                , Html.Attributes.min "0"
-                , Html.Attributes.max "100"
-                , value i1
-                , onInput (UpdateSpecs I1)
-                ]
-                []
+            , txtInput [ class "w-[80px]", Html.Attributes.min "0", Html.Attributes.max "100" ]
+                (UpdateSpecs I1)
+                i1
             , text " % (nominal)"
             ]
         , div [ class "flex my-1 mb-2" ]
             [ text "Years: "
-            , input
-                [ type_ "range"
-                , class "accent-lime-400"
-                , Html.Attributes.min "1"
-                , Html.Attributes.max "50"
-                , step "1"
-                , value years
-                , onInput (UpdateSpecs Years)
-                ]
-                []
+            , slider [ Html.Attributes.min "1", Html.Attributes.max "50", step "1" ]
+                (UpdateSpecs Years)
+                years
             , text years
             ]
         , button (butAttrs ++ simButAttrs) [ text "Simulate" ]