Adding a progress bar to the timer time

6 files changed, 86 insertions, 64 deletions

diff --git a/design/design.css b/design/design.css
index 80a1c64..7d66650 100644
--- a/design/design.css
+++ b/design/design.css
@@ -93,7 +93,7 @@
   text-align: center;
   height: 80px;
   margin-right: 20px;
-  border-radius: 35px;
+  border-radius: 30px;
   box-shadow: 0px 4px #AAAAAA;
   border: 1px solid #DDDDDD;
 }
@@ -111,29 +111,44 @@
   box-shadow: 0px 2px #AAAAAA;
 }
 
-.timer.isRunning > :not(.remove) {
-  background-color: #CDE4C2;
+.timer > button.name {
+  width: 300px;
+  border-radius: 0px;
 }
 
-.timer.isRunning > :not(.remove):hover {
-  background-color: #BAD4AD;
+.timer > .time {
+  width: 200px;
+  cursor: text;
+  position: relative;
+  border-radius: 0px;
 }
 
-.timer.isRinging > :not(.remove) {
-  background-color: #FED5AE;
+.timer > .time > .text {
+  position: relative;
 }
 
-.timer.isRinging > :not(.remove):hover {
-  background-color: #F2CAA5;
+.timer > .time > .progressBar {
+  background-color: #CDE4C2;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 79px;
 }
 
-.timer > button.name {
-  width: 300px;
+.timer > .time:hover > .progressBar {
+  background-color: #B5CEAA;
 }
 
-.timer > .time {
-  width: 200px;
-  cursor: text;
+.timer > .time.isRinging:hover {
+  cursor: pointer;
+}
+
+.timer > .time.isRinging > .progressBar {
+  background-color: #FED5AE;
+}
+
+.timer > .time.isRinging:hover > .progressBar {
+  background-color: #F2CAA5;
 }
 
 .timer > .edition {
diff --git a/src/Model/Model.elm b/src/Model/Model.elm
index ad1e9da..b929261 100644
--- a/src/Model/Model.elm
+++ b/src/Model/Model.elm
@@ -1,7 +1,6 @@
 module Model.Model
   ( Model
   , initialModel
-  , substractTimersTime
   , numberOfTimers
   ) where
 
@@ -32,9 +31,5 @@ initialModel initialTime =
       , timerEdition = Nothing
       }
 
-substractTimersTime : Time -> Dict Id Timer -> Dict Id Timer
-substractTimersTime t timers =
-  Dict.map (\id timer -> substractTimerTime t timer) timers
-
 numberOfTimers : Model -> Int
 numberOfTimers = List.length << Dict.toList << .timers
diff --git a/src/Model/Timer.elm b/src/Model/Timer.elm
index b73016d..f05c487 100644
--- a/src/Model/Timer.elm
+++ b/src/Model/Timer.elm
@@ -1,7 +1,6 @@
 module Model.Timer
   ( Timer
   , initialTimer
-  , substractTimerTime
   , initTime
   ) where
 
@@ -28,21 +27,5 @@ initialTimer creationTime name =
       , state = Idle
       }
 
-substractTimerTime : Time -> Timer -> Timer
-substractTimerTime time timer =
-  if timer.state == Running
-    then
-      let newTime = timer.currentTime - time
-      in  if newTime <= 0.0
-            then
-              { timer
-              | currentTime <- 0.0
-              , state <- Ringing
-              }
-            else
-              { timer | currentTime <- newTime }
-    else
-      timer
-
 initTime : Time -> Time
 initTime t = t + 999
diff --git a/src/Update/Update.elm b/src/Update/Update.elm
index f96a128..fabe0e8 100644
--- a/src/Update/Update.elm
+++ b/src/Update/Update.elm
@@ -62,7 +62,7 @@ update action model =
     DeltaTime delta ->
       { model
       | currentTime <- model.currentTime + delta
-      , timers <- substractTimersTime delta model.timers
+      , timers <- Dict.map (\id timer -> updateTimer (SubstractTime delta) timer) model.timers
       }
     UpdateTimer id action ->
       let maybeTimerEdition = filterMaybe (\timerEdition -> timerEdition.id == id) model.timerEdition
diff --git a/src/Update/UpdateTimer.elm b/src/Update/UpdateTimer.elm
index e45a3c2..2e0d9af 100644
--- a/src/Update/UpdateTimer.elm
+++ b/src/Update/UpdateTimer.elm
@@ -14,6 +14,7 @@ type TimerAction =
   | ToggleRunning
   | Stop
   | SetTime Time
+  | SubstractTime Time
 
 updateTimer : TimerAction -> Timer -> Timer
 updateTimer action timer =
@@ -21,12 +22,19 @@ updateTimer action timer =
     Pause ->
       { timer | state <- Idle }
     ToggleRunning ->
-      { timer
-      | state <-
-          if timer.currentTime > 0 && timer.state == Idle
-            then Running
-            else Idle
-      }
+      if timer.state == Ringing
+        then
+          { timer
+          | currentTime <- initTime timer.initialTime
+          , state <- Running
+          }
+        else
+          { timer
+          | state <-
+              if timer.currentTime > 0 && timer.state == Idle
+                then Running
+                else Idle
+          }
     Stop ->
       { timer
       | currentTime <- initTime timer.initialTime
@@ -38,3 +46,17 @@ updateTimer action timer =
           | initialTime <- time
           , currentTime <- augmentedTime
           }
+    SubstractTime time ->
+      if timer.state == Running
+        then
+          let newTime = timer.currentTime - time
+          in  if newTime <= 0.0
+                then
+                  { timer
+                  | currentTime <- 0.0
+                  , state <- Ringing
+                  }
+                else
+                  { timer | currentTime <- newTime }
+        else
+          timer
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