mirror of https://github.com/snachodog/mybuddy.git
Update the timer duration in real time on the timer detail page.
This commit is contained in:
parent
21e4af6f58
commit
78eb20ab91
|
@ -108,7 +108,7 @@ STATIC_URL = '/static/'
|
||||||
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
|
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
|
||||||
|
|
||||||
STATICFILES_DIRS = [
|
STATICFILES_DIRS = [
|
||||||
os.path.join(BASE_DIR, 'babyblotter/static'),
|
os.path.join(BASE_DIR, 'babyblotter', 'static'),
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
{% block page %}{% endblock %}
|
{% block page %}{% endblock %}
|
||||||
|
|
||||||
<script src="{% static "babyblotter/js/vendor.js" %}"></script>
|
<script src="{% static "babyblotter/js/vendor.js" %}"></script>
|
||||||
|
<script src="{% static "babyblotter/js/app.js" %}"></script>
|
||||||
{% block javascript %}{% endblock %}
|
{% block javascript %}{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -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);
|
|
@ -6,10 +6,10 @@
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="jumbotron text-center">
|
<div class="jumbotron text-center">
|
||||||
<h1 class="display-1">
|
<h1 id="timer-status" class="display-1">
|
||||||
<span id="timer_hours">{{ object.current_duration|hours }}</span>h
|
<span class="timer-hours">{{ object.current_duration|hours }}</span>h
|
||||||
<span id="timer_minutes">{{ object.current_duration|minutes }}</span>m
|
<span class="timer-minutes">{{ object.current_duration|minutes }}</span>m
|
||||||
<span id="timer_seconds">{{ object.current_duration|seconds }}</span>s
|
<span class="timer-seconds">{{ object.current_duration|seconds }}</span>s
|
||||||
</h1>
|
</h1>
|
||||||
<p class="lead text-muted">Started {{ object.start }} by {{ object.user }}</p>
|
<p class="lead text-muted">Started {{ object.start }} by {{ object.user }}</p>
|
||||||
|
|
||||||
|
@ -38,3 +38,9 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block javascript %}
|
||||||
|
<script type="application/javascript">
|
||||||
|
BBTimer.run('timer-status');
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
18
gulpfile.js
18
gulpfile.js
|
@ -1,6 +1,20 @@
|
||||||
var gulp = require('gulp');
|
var gulp = require('gulp');
|
||||||
var concat = require('gulp-concat');
|
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() {
|
gulp.task('vendor:scripts', function() {
|
||||||
return gulp.src([
|
return gulp.src([
|
||||||
'node_modules/jquery/dist/jquery.js',
|
'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('vendor', ['vendor:styles', 'vendor:scripts', 'vendor:fonts']);
|
||||||
|
|
||||||
gulp.task('default', ['vendor']);
|
/* DEFAULT */
|
||||||
|
|
||||||
|
gulp.task('default', ['vendor', 'app']);
|
Loading…
Reference in New Issue