Adding a stop button

4 files changed, 28 insertions, 8 deletions

diff --git a/design/design.css b/design/design.css
index b6047d8..ddf597b 100644
--- a/design/design.css
+++ b/design/design.css
@@ -34,13 +34,15 @@ h1 {
 
 .block {
   display: inline-block;
-  background-color: #DDDDDD;
+  background-color: #EEEEEE;
   text-align: center;
   height: 50px;
+  margin-right: 5px;
+  border-radius: 2px;
 }
 
 .timer.isRunning > .name {
-  background-color: green;
+  color: #33AA22;
 }
 
 .timer > button.name {
@@ -52,8 +54,13 @@ h1 {
   width: 100px;
 }
 
+.timer > button.stop {
+  border: none;
+}
+
 .timer > button.remove {
   border: none;
+  color: #AA2222;
 }
 
 .timer:not(last-child) {
diff --git a/src/Model/Timer.elm b/src/Model/Timer.elm
index ddbe97b..7d345b2 100644
--- a/src/Model/Timer.elm
+++ b/src/Model/Timer.elm
@@ -10,7 +10,8 @@ import Time (Time)
 type alias Timer =
   { creationTime : Time
   , name : String
-  , time : Time
+  , initialTime : Time
+  , currentTime : Time
   , isRunning : Bool
   }
 
@@ -18,7 +19,8 @@ initialTimer : Time -> String -> Timer
 initialTimer creationTime name =
   { creationTime = creationTime
   , name = name
-  , time = 5 * 60 * 1000
+  , initialTime = 5 * 60 * 1000
+  , currentTime = 5 * 60 * 1000
   , isRunning = True
   }
 
@@ -26,15 +28,15 @@ substractTimerTime : Time -> Timer -> Timer
 substractTimerTime time timer =
   if timer.isRunning
     then
-      if timer.time - time <= 0.0
+      if timer.currentTime - time <= 0.0
         then
           { timer
-          | time <- 0.0
+          | currentTime <- 0.0
           , isRunning <- False
           }
         else
           { timer
-          | time <- timer.time - time
+          | currentTime <- timer.currentTime - time
           }
     else
       timer
diff --git a/src/Update/UpdateTimer.elm b/src/Update/UpdateTimer.elm
index d8861b7..40085ed 100644
--- a/src/Update/UpdateTimer.elm
+++ b/src/Update/UpdateTimer.elm
@@ -8,9 +8,15 @@ import Model.Id (..)
 
 type TimerAction =
   ToggleRunning
+  | Stop
 
 updateTimer : TimerAction -> Timer -> Timer
 updateTimer action timer =
   case action of
     ToggleRunning ->
       { timer | isRunning <- not timer.isRunning }
+    Stop ->
+      { timer
+      | isRunning <- False
+      , currentTime <- timer.initialTime
+      }
diff --git a/src/View/Timer.elm b/src/View/Timer.elm
index 13f071c..98f6514 100644
--- a/src/View/Timer.elm
+++ b/src/View/Timer.elm
@@ -26,7 +26,12 @@ timerView (id, timer) =
         [ text timer.name ]
     , div
         [ class <| "time block" ]
-        [ text (timeView timer.time) ]
+        [ text (timeView timer.currentTime) ]
+    , button
+        [ class <| "stop block"
+        , onClick (Signal.send updates (UpdateTimer id Stop))
+        ]
+        [ i [ class "fa fa-fw fa-stop" ] [] ]
     , button
         [ class <| "remove block"
         , onClick (Signal.send updates (RemoveTimer id))