A generic web based timer to use on your brew day! http://brewtimer.brett.is
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
173 lines
4.3 KiB
173 lines
4.3 KiB
var started = false;
|
|
var update_timeout = null;
|
|
var start_time = null;
|
|
var stop_time = null;
|
|
var remaining_time = null;
|
|
var elapsed_time = null;
|
|
var steps = [];
|
|
|
|
|
|
$(document).ready(function(){
|
|
$('#set').click(start_timer);
|
|
$('#stop').click(stop_timer);
|
|
$('#add').click(add_step);
|
|
});
|
|
|
|
var start_timer = function(){
|
|
remaining_time = parseFloat($('#total').val());
|
|
elapsed_time = 0;
|
|
if(!remaining_time){
|
|
alert('invalid number: ' + $('#total').val());
|
|
return false;
|
|
}
|
|
|
|
remaining_time *= 60;
|
|
|
|
start_time = new Date().getTime();
|
|
stop_time = start_time + (remaining_time * 1000);
|
|
update_timers();
|
|
$('#set-timer').hide();
|
|
$('#stop-timer').show();
|
|
};
|
|
|
|
var stop_timer = function(){
|
|
$('#total').val(round(remaining_time / 60, 2));
|
|
if(update_timeout){
|
|
clearTimeout(update_timeout);
|
|
}
|
|
$('#set-timer').show();
|
|
$('#stop-timer').hide();
|
|
};
|
|
|
|
var update_timers = function(){
|
|
remaining_time -= 1;
|
|
elapsed_time -= 1;
|
|
|
|
if(remaining_time > 0){
|
|
update_timeout = setTimeout(update_timers, 1000);
|
|
} else{
|
|
$('#finished').trigger('play');
|
|
$('#set-timer').show();
|
|
$('#stop-timer').hide();
|
|
}
|
|
|
|
$('#remaining h3').html(format_time(remaining_time));
|
|
$('#elapsed h3').html('-' + format_time(elapsed_time));
|
|
|
|
var now = new Date().getTime();
|
|
var true_total = Math.floor((stop_time - start_time) / 1000);
|
|
var true_elapsed = Math.floor((start_time - now) / 1000);
|
|
var true_remaining = Math.floor((stop_time - now) / 1000);
|
|
if(true_elapsed != elapsed_time || true_remaining != remaining_time || (elapsed_time + remaining_time) != true_total){
|
|
remaining_time = Math.floor((stop_time - now) / 1000);
|
|
elapsed_time = true_elapsed;
|
|
}
|
|
|
|
check_steps(true_remaining);
|
|
};
|
|
|
|
|
|
var format_time = function(time){
|
|
time = Math.abs(time);
|
|
var hours = Math.floor(time / 3600);
|
|
time -= hours * 3600;
|
|
var minutes = Math.floor(time / 60);
|
|
time -= minutes * 60;
|
|
var seconds = round(time, 0);
|
|
|
|
return less_than_ten(hours) + ':' + less_than_ten(minutes) + ':' + less_than_ten(seconds);
|
|
};
|
|
|
|
var less_than_ten = function(time){
|
|
return (time < 10)? '0' + time : time;
|
|
};
|
|
|
|
var add_step = function(){
|
|
var step = {
|
|
at: round(parseFloat($('#add-step #time').val()), 2),
|
|
name: $('#add-step #name').val()
|
|
};
|
|
if(!step.at){
|
|
alert('invalid number: ' + $('#add-step #time').val());
|
|
return false;
|
|
}
|
|
|
|
if(!step.name || step.name == ''){
|
|
alert('invalid name: ' + step.name);
|
|
return false;
|
|
}
|
|
|
|
step.at *= 60;
|
|
steps.push(step);
|
|
write_steps();
|
|
|
|
$('#add-step #time').val('');
|
|
$('#add-step #name').val('');
|
|
};
|
|
|
|
var write_steps = function(){
|
|
steps.sort(function(a, b){
|
|
return a.at < b.at;
|
|
});
|
|
$('#steps .step').remove();
|
|
|
|
for(var i in steps){
|
|
var step = steps[i];
|
|
var html = $('<div class="step row"/>');
|
|
html.append('<div class="six columns"><h5 class="name">' + step.name + '</h5></div>');
|
|
html.append('<div class="two columns"><h5 class="at">' + format_time(step.at) + '</h5></div>');
|
|
html.append('<div class="two columns end"><button class="remove button">Remove Step</button></div>');
|
|
$('#steps #list').append(html);
|
|
}
|
|
|
|
$('#steps #list .remove').click(remove_step);
|
|
};
|
|
|
|
|
|
var remove_step = function(){
|
|
var step = $(this).parent().parent()
|
|
var columns = step.children('columns');
|
|
var name = columns.children('.name').html();
|
|
var at = parseFloat(columns.children('.at').html()) * 60;
|
|
|
|
var remove = null;
|
|
for(var i in steps){
|
|
var step = steps[i];
|
|
if(step.at == at && step.name == name){
|
|
remove = i;
|
|
break;
|
|
}
|
|
}
|
|
if(remove >= 0){
|
|
steps.splice(i, 1);
|
|
}
|
|
|
|
write_steps();
|
|
};
|
|
|
|
|
|
var check_steps = function(time){
|
|
$('#steps #list .step').each(function(){
|
|
var columns = $(this).children('.columns');
|
|
var at = columns.children('.at').html();
|
|
var matches = at.match('([0-9]+):([0-9]+):([0-9]+)');
|
|
at = parseInt(matches[1]) * 3600;
|
|
at += parseInt(matches[2] * 60);
|
|
at += parseInt(matches[3]);
|
|
if(at > time){
|
|
$(this).addClass('completed');
|
|
$(this).removeClass('current');
|
|
} else if(at == time){
|
|
$(this).addClass('current');
|
|
$('#completed').trigger('play');
|
|
} else{
|
|
$(this).removeClass('current');
|
|
$(this).removeClass('completed');
|
|
}
|
|
});
|
|
};
|
|
|
|
var round = function(num, num_places){
|
|
num_places = Math.pow(10, num_places);
|
|
return Math.round(num * num_places) / num_places;
|
|
};
|