Check and update timer active state on update.

core/static_src/js/timer.js

@@ -36,9 +36,7 @@ BabyBuddy.Timer = function ($) {
             // phones that lock with the timer page open.
             Visibility.change(function (e, state) {
                 if (state == 'visible' && moment().diff(lastUpdate) > 2000) {
-                    clearInterval(runIntervalId);
                     Timer.update();
-                    runIntervalId = setInterval(Timer.tick, 1000);
                 }
             });
         },
@@ -72,11 +70,19 @@ BabyBuddy.Timer = function ($) {
         update: function() {
             $.get('/api/timers/' + timerId + '/', function(data) {
                 if (data && 'duration' in data) {
+                    clearInterval(runIntervalId);
                     var duration = moment.duration(data.duration);
                     timerElement.find('.timer-hours').text(duration.hours());
                     timerElement.find('.timer-minutes').text(duration.minutes());
                     timerElement.find('.timer-seconds').text(duration.seconds());
                     lastUpdate = moment();
+
+                    if (data['active']) {
+                        runIntervalId = setInterval(Timer.tick, 1000);
+                    }
+                    else {
+                        timerElement.addClass('timer-stopped');
+                    }
                 }
             });
         }

core/static_src/scss/timers.scss

@@ -1,7 +1,9 @@
-#view-timer-detail {
 #timer-status {
     font-size: $h1-font-size;
     font-weight: $display1-weight;
+
+    &.timer-stopped {
+        color: theme-color('danger');
     }
 }
 

core/templates/core/timer_detail.html

@@ -9,9 +9,9 @@
 {% endblock %}
 
 {% block content %}
-    <div class="jumbotron text-center{% if not object.active %} text-danger{% endif %}">
+    <div class="jumbotron text-center">
 
-        <div class="h1" id="timer-status">
+        <div class="h1{% if not object.active %} timer-stopped{% endif %}" id="timer-status">
             <span class="timer-hours">{{ object.duration|hours }}</span>h
             <span class="timer-minutes">{{ object.duration|minutes }}</span>m
             <span class="timer-seconds">{{ object.duration|seconds }}</span>s