rattail/tailbone
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Fix progress page so it effectively fetches progress data synchronously

Browse source 
i.e. use `setTimeout()` instead of `setInterval()` and only set next timeout
after previous fetch has succeeded
This commit is contained in:
Lance Edgar 2019-09-20 17:26:33 -05:00
parent fe413ba2f5
commit c16349d5c3
1 changed files with 44 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
tailbone/templates/progress.mako
View file

@ -16,16 +16,19 @@
${self.extra_styles()} ${self.extra_styles()}
<script type="text/javascript"> <script type="text/javascript">
var updater = null; var stillInProgress = true;
updater = setInterval(function() {update_progress()}, 1000); // fetch first progress data, one second from now
setTimeout(function() {
update_progress();
}, 1000);
% if can_cancel: % if can_cancel:
$(function() { $(function() {
$('#cancel button').click(function() { $('#cancel button').click(function() {
if (confirm("Do you really wish to cancel this operation?")) { if (confirm("Do you really wish to cancel this operation?")) {
clearInterval(updater); stillInProgress = false;
$(this).button('disable').button('option', 'label', "Canceling, please wait..."); $(this).button('disable').button('option', 'label', "Canceling, please wait...");
$.ajax({ $.ajax({
url: '${url('progress.cancel', key=progress.key)}?sessiontype=${progress.session.type}', url: '${url('progress.cancel', key=progress.key)}?sessiontype=${progress.session.type}',
@ -84,36 +87,51 @@
function update_progress() { function update_progress() {
$.ajax({ $.ajax({
url: '${url('progress', key=progress.key)}?sessiontype=${progress.session.type}', url: '${url('progress', key=progress.key)}?sessiontype=${progress.session.type}',
success: function(data) { success: function(data) {
if (data.error) { if (data.error) {
// errors stop the show, we redirect to "cancel" page
location.href = '${cancel_url}'; location.href = '${cancel_url}';
} else if (data.complete || data.maximum) {
$('#message').html(data.message); } else {
$('#total').html('('+data.maximum_display+' total)'); if (data.complete || data.maximum) {
% if can_cancel: $('#message').html(data.message);
$('#cancel button').show(); $('#total').html('('+data.maximum_display+' total)');
% endif
if (data.complete) {
clearInterval(updater);
% if can_cancel: % if can_cancel:
$('#cancel button').hide(); $('#cancel button').show();
% endif % endif
$('#total').html('done!'); if (data.complete) {
$('#complete').css('width', '100%'); stillInProgress = false;
$('#remaining').hide(); % if can_cancel:
$('#percentage').html('100 %'); $('#cancel button').hide();
location.href = data.success_url; % endif
} else { $('#total').html('done!');
var width = parseInt(data.value) / parseInt(data.maximum); $('#complete').css('width', '100%');
width = Math.round(100 * width); $('#remaining').hide();
if (width) { $('#percentage').html('100 %');
$('#complete').css('width', width+'%'); location.href = data.success_url;
$('#percentage').html(width+' %');
} else { } else {
$('#complete').css('width', '0.01%'); // got progress data, so update display
$('#percentage').html('0 %'); var width = parseInt(data.value) / parseInt(data.maximum);
width = Math.round(100 * width);
if (width) {
$('#complete').css('width', width+'%');
$('#percentage').html(width+' %');
} else {
$('#complete').css('width', '0.01%');
$('#percentage').html('0 %');
}
$('#remaining').css('width', 'auto');
} }
$('#remaining').css('width', 'auto'); }
if (stillInProgress) {
// fetch progress data again, in one second from now
setTimeout(function() {
update_progress();
}, 1000);
} }
} }
}, },