Update the timer duration in real time on the timer detail page.

This commit is contained in:
Christopher Charbonneau Wells 2017-08-20 11:09:40 -04:00
parent 21e4af6f58
commit 78eb20ab91
5 changed files with 94 additions and 6 deletions

View File

@ -108,7 +108,7 @@ STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'babyblotter/static'),
os.path.join(BASE_DIR, 'babyblotter', 'static'),
]

View File

@ -15,6 +15,7 @@
{% block page %}{% endblock %}
<script src="{% static "babyblotter/js/vendor.js" %}"></script>
<script src="{% static "babyblotter/js/app.js" %}"></script>
{% block javascript %}{% endblock %}
</body>
</html>

65
core/static/js/timer.js Normal file
View File

@ -0,0 +1,65 @@
if (typeof jQuery === 'undefined') {
throw new Error('BabyBlotter Timer requires jQuery.')
}
var BBTimer = function ($) {
/* Baby Blotter Timer
*
* Uses a supplied ID to run a timer. The element using the ID must have
* three children with the following classes:
* * timer-seconds
* * timer-minutes
* * timer-hours
*/
var runIntervalId = null;
var timerElement = null;
var BBTimer = {
run: function(id) {
timerElement = $('#' + id);
if (timerElement.length == 0) {
console.error('BBTimer: Timer element not found.')
return false;
}
if (timerElement.find('.timer-seconds').length == 0
|| timerElement.find('.timer-minutes').length == 0
|| timerElement.find('.timer-hours').length == 0) {
console.error('BBTimer: Element does not contain expected children.');
return false;
}
runIntervalId = setInterval(this.tick, 1000);
return runIntervalId;
},
tick: function() {
var s = timerElement.find('.timer-seconds');
var seconds = Number(s.text());
if (seconds < 59) {
s.text(seconds + 1);
return;
}
else {
s.text(0);
}
var m = timerElement.find('.timer-minutes');
var minutes = Number(m.text());
if (minutes < 59) {
m.text(minutes + 1);
return;
}
else {
m.text(0);
}
var h = timerElement.find('.timer-hours');
var hours = Number(h.text());
h.text(hours + 1);
}
};
return BBTimer;
}(jQuery);

View File

@ -6,10 +6,10 @@
{% block content %}
<div class="jumbotron text-center">
<h1 class="display-1">
<span id="timer_hours">{{ object.current_duration|hours }}</span>h
<span id="timer_minutes">{{ object.current_duration|minutes }}</span>m
<span id="timer_seconds">{{ object.current_duration|seconds }}</span>s
<h1 id="timer-status" class="display-1">
<span class="timer-hours">{{ object.current_duration|hours }}</span>h
<span class="timer-minutes">{{ object.current_duration|minutes }}</span>m
<span class="timer-seconds">{{ object.current_duration|seconds }}</span>s
</h1>
<p class="lead text-muted">Started {{ object.start }} by {{ object.user }}</p>
@ -38,3 +38,9 @@
{% endif %}
</div>
{% endblock %}
{% block javascript %}
<script type="application/javascript">
BBTimer.run('timer-status');
</script>
{% endblock %}

View File

@ -1,6 +1,20 @@
var gulp = require('gulp');
var concat = require('gulp-concat');
/* APP FILES */
gulp.task('app:scripts', function() {
return gulp.src([
'core/static/js/timer.js'
])
.pipe(concat('app.js'))
.pipe(gulp.dest('babyblotter/static/babyblotter/js/'));
});
gulp.task('app', ['app:scripts']);
/* VENDOR FILES */
gulp.task('vendor:scripts', function() {
return gulp.src([
'node_modules/jquery/dist/jquery.js',
@ -32,4 +46,6 @@ gulp.task('vendor:fonts', function() {
gulp.task('vendor', ['vendor:styles', 'vendor:scripts', 'vendor:fonts']);
gulp.task('default', ['vendor']);
/* DEFAULT */
gulp.task('default', ['vendor', 'app']);