Adding a progress bar to the timer time

1 files changed, 28 insertions, 21 deletions

diff --git a/src/View/Timer.elm b/src/View/Timer.elm
index ca5edc6..efabf8f 100644
--- a/src/View/Timer.elm
+++ b/src/View/Timer.elm
@@ -27,12 +27,7 @@ import Utils.Maybe (..)
 timerView : Model -> (Id, Timer) -> Html
 timerView model (id, timer) =
   div
-    [ [ (True, "timer")
-      , (timer.state == Running, "isRunning")
-      , (timer.state == Ringing, "isRinging")
-      ]
-        |> activatedClasses
-    ]
+    [ class "timer" ]
     [ nameBlock (id, timer)
     , timeBlock model (id, timer)
     , playPauseBlock (id, timer)
@@ -43,9 +38,7 @@ timerView model (id, timer) =
 nameBlock : (Id, Timer) -> Html
 nameBlock (id, timer) =
   button
-    [ class "name block"
-    , onClick (stopIfRinging (id, timer) (Signal.send updates NoOp))
-    ]
+    [ class "name block" ]
     [ text timer.name ]
 
 timeBlock : Model -> (Id, Timer) -> Html
@@ -55,7 +48,7 @@ timeBlock model (id, timer) =
         Just edition ->
           button
             [ class "time block edition"
-            , onClick (stopIfRinging (id, timer) (Signal.send updates ValidTimerEdition))
+            , onClick (Signal.send updates ValidTimerEdition)
             ]
             [ if List.isEmpty edition.numbers
                 then
@@ -65,10 +58,30 @@ timeBlock model (id, timer) =
             ]
         Nothing ->
           button
-            [ class "time block"
-            , onClick (stopIfRinging (id, timer) (Signal.send updates (EditTimer id)))
+            [ [ (True, "time block")
+              , (timer.state == Ringing, "isRinging")
+              ]
+                |> activatedClasses
+            , onClick
+                <| if timer.state == Ringing
+                     then Signal.send updates (UpdateTimer id Stop)
+                     else Signal.send updates (EditTimer id)
+            ]
+            [ span
+                [ class "progressBar"
+                , let width =
+                        1 - timer.currentTime / (initTime timer.initialTime)
+                          |> (*) 198
+                          |> round
+                          |> toString
+                          |> flip String.append "px"
+                  in style [ ("width", width) ]
+                ]
+                []
+            , span
+                [ class "text" ]
+                [ text (timeView timer.currentTime) ]
             ]
-            [ text (timeView timer.currentTime) ]
 
 editionView : Numbers -> String
 editionView numbers =
@@ -86,7 +99,7 @@ playPauseBlock : (Id, Timer) -> Html
 playPauseBlock (id, timer) =
   button
     [ class <| "playPause block"
-    , onClick (stopIfRinging (id, timer) (Signal.send updates (UpdateTimer id ToggleRunning)))
+    , onClick (Signal.send updates (UpdateTimer id ToggleRunning))
     ]
     [ let icon = if timer.state == Running then "fa-pause" else "fa-play"
       in  i
@@ -98,7 +111,7 @@ stopBlock : (Id, Timer) -> Html
 stopBlock (id, timer) =
   button
     [ class <| "stop block"
-    , onClick (stopIfRinging (id, timer) (Signal.send updates (UpdateTimer id Stop)))
+    , onClick (Signal.send updates (UpdateTimer id Stop))
     ]
     [ i [ class "fa fa-fw fa-stop" ] [] ]
 
@@ -109,9 +122,3 @@ removeBlock (id, timer) =
     , onClick (Signal.send updates (RemoveTimer id))
     ]
     [ i [ class "fa fa-fw fa-remove" ] [] ]
-
-stopIfRinging : (Id, Timer) -> Signal.Message -> Signal.Message
-stopIfRinging (id, timer) message =
-  if timer.state == Ringing
-    then Signal.send updates (UpdateTimer id Stop)
-    else message