Check and update timer active state on update.

This commit is contained in:
Christopher Charbonneau Wells 2017-10-29 15:47:26 -04:00
parent 97dbf87e5b
commit 8168c74034
3 changed files with 16 additions and 8 deletions

View File

@ -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');
}
}
});
}

View File

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

View File

@ -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