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

babyblotter/settings/base.py

@@ -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'),
 ]
 
 

babyblotter/templates/babyblotter/base.html

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

core/static/js/timer.js

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

core/templates/core/timer_detail.html

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

gulpfile.js

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