Adding a Ringing state that animate the color, does not ring a sound for the moment

2 files changed, 89 insertions, 45 deletions

diff --git a/src/View/Timer.elm b/src/View/Timer.elm
index b508dd6..2325d3a 100644
--- a/src/View/Timer.elm
+++ b/src/View/Timer.elm
@@ -13,6 +13,7 @@ import Maybe
 import Model.Model (..)
 import Model.Timer (..)
 import Model.TimerEdition (..)
+import Model.TimerState (..)
 import Model.Id (..)
 
 import Update.Update (..)
@@ -25,49 +26,44 @@ import Utils.Maybe (..)
 timerView : Model -> (Id, Timer) -> Html
 timerView model (id, timer) =
   div
-    [ class <| "timer" ++ (if timer.isRunning then " isRunning" else "") ]
-    [ button
-        [ class "name block" ]
-        [ text timer.name ]
-    , let maybeEdition = filterMaybe (\te -> te.id == id) model.timerEdition
-      in  case maybeEdition of
-            Just edition ->
-              button
-                [ class "time block edition"
-                , onClick (Signal.send updates ValidTimerEdition)
-                ]
-                [ text (editionView edition.numbers) ]
-            Nothing ->
-              button
-                [ class "time block"
-                , onClick (Signal.send updates (EditTimer id))
-                ]
-                [ text (timeView timer.currentTime) ]
-    , button
-        [ class <| "restart block"
-        , onClick (Signal.send updates (UpdateTimer id Restart))
-        ]
-        [ i [ class "fa fa-fw fa-backward" ] [] ]
-    , button
-        [ class <| "playPause block"
-        , onClick (Signal.send updates (UpdateTimer id ToggleRunning))
-        ]
-        [ let icon = if timer.isRunning then "fa-pause" else "fa-play"
-          in  i
-                [ class <| "fa fa-fw " ++ icon ]
-                []
-        ]
-    , 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))
-        ]
-        [ i [ class "fa fa-fw fa-remove" ] [] ]
+    [ [ (True, "timer")
+      , (timer.state == Running, "isRunning")
+      , (timer.state == Ringing, "isRinging")
+      ]
+        |> activatedClasses
     ]
+    [ nameBlock (id, timer)
+    , timeBlock model (id, timer)
+    , restartBlock (id, timer)
+    , playPauseBlock (id, timer)
+    , stopBlock (id, timer)
+    , removeBlock (id, timer)
+    ]
+
+nameBlock : (Id, Timer) -> Html
+nameBlock (id, timer) =
+  button
+    [ class "name block"
+    , onClick (stopIfRinging (id, timer) (Signal.send updates NoOp))
+    ]
+    [ text timer.name ]
+
+timeBlock : Model -> (Id, Timer) -> Html
+timeBlock model (id, timer) =
+  let maybeEdition = filterMaybe (\te -> te.id == id) model.timerEdition
+  in  case maybeEdition of
+        Just edition ->
+          button
+            [ class "time block edition"
+            , onClick (stopIfRinging (id, timer) (Signal.send updates ValidTimerEdition))
+            ]
+            [ text (editionView edition.numbers) ]
+        Nothing ->
+          button
+            [ class "time block"
+            , onClick (stopIfRinging (id, timer) (Signal.send updates (EditTimer id)))
+            ]
+            [ text (timeView timer.currentTime) ]
 
 editionView : Numbers -> String
 editionView numbers =
@@ -79,4 +75,46 @@ timeView time =
   let totalSeconds = truncate (time / 1000)
       totalMinutes = totalSeconds // 60
       restSeconds = totalSeconds `rem` 60
-  in  (toString totalMinutes) ++ " : " ++ (String.padLeft 2 '0' (toString restSeconds))
+  in  (String.padLeft 2 '0' (toString totalMinutes)) ++ " : " ++ (String.padLeft 2 '0' (toString restSeconds))
+
+restartBlock : (Id, Timer) -> Html
+restartBlock (id, timer) =
+  button
+    [ class <| "restart block"
+    , onClick (stopIfRinging (id, timer) (Signal.send updates (UpdateTimer id Restart)))
+    ]
+    [ i [ class "fa fa-fw fa-backward" ] [] ]
+
+playPauseBlock : (Id, Timer) -> Html
+playPauseBlock (id, timer) =
+  button
+    [ class <| "playPause block"
+    , onClick (stopIfRinging (id, timer) (Signal.send updates (UpdateTimer id ToggleRunning)))
+    ]
+    [ let icon = if timer.state == Running then "fa-pause" else "fa-play"
+      in  i
+            [ class <| "fa fa-fw " ++ icon ]
+            []
+    ]
+
+stopBlock : (Id, Timer) -> Html
+stopBlock (id, timer) =
+  button
+    [ class <| "stop block"
+    , onClick (stopIfRinging (id, timer) (Signal.send updates (UpdateTimer id Stop)))
+    ]
+    [ i [ class "fa fa-fw fa-stop" ] [] ]
+
+removeBlock : (Id, Timer) -> Html
+removeBlock (id, timer) =
+  button
+    [ class <| "remove block"
+    , 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
diff --git a/src/View/View.elm b/src/View/View.elm
index d7a9b99..e86ea52 100644
--- a/src/View/View.elm
+++ b/src/View/View.elm
@@ -34,9 +34,15 @@ title : Html
 title =
   div
     [ class "title" ]
-    [ h1 [] [ text "Timer" ]
+    [ button
+        [ onClick (Signal.send updates Initialize)
+        , class "title"
+        ]
+        [ text "Timer" ]
     , button
-        [ onClick (Signal.send updates AddNewTimer) ]
+        [ onClick (Signal.send updates AddNewTimer)
+        , class "addTimer"
+        ]
         [ i
             [ class "fa fa-fw fa-plus" ]
             []