<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task Progress - {{ SITE_LONG_NAME }}</title>
<link rel="stylesheet" href="{{ static('task_status.css') }}">
<script src="{{ static('libs/jquery-3.4.1.min.js') }}"></script>
<script type="text/javascript">
$(function () {
var $jumbotron = $('.jumbotron');
var task_id = $jumbotron.attr('data-task-id');
var status = JSON.parse($jumbotron.attr('data-task-status'));
var redirect = $jumbotron.attr('data-redirect');
var $stage = $jumbotron.find('.stage');
var $progress = $jumbotron.find('.progress');
var $known = $jumbotron.find('.progress-known');
var $known_bar = $known.find('.progress-bar');
var $known_text = $known.find('.progress-text');
var $fail = $jumbotron.find('.progress-failed');
var $fail_text = $fail.find('.progress-bar');
function show_status(status) {
$progress.hide();
switch (status.code) {
case 'SUCCESS':
$progress.filter('.progress-complete').show();
break;
case 'FAILURE':
$fail_text.text(status.error || 'Failed');
$fail.show();
break;
case 'PROGRESS':
$known_bar.attr({
'aria-valuenow': status.done,
'aria-valuemax': status.total,
}).width(100 * status.done / status.total + '%');
$known_text.text(status.done + ' / ' + status.total);
$known.show();
break;
case 'WORKING':
$progress.filter('.progress-unknown').show();
break;
}
$stage.text(status.stage || '');
}
function need_ajax(status) {
return status.code !== 'SUCCESS' && status.code !== 'FAILURE';
}
function do_ajax(backoff) {
$.get('{{ url('task_status_ajax') }}', {
id: task_id
}).done(function (data) {
show_status(data);
if (data.code === 'SUCCESS') {
window.location.href = redirect;
} else if (need_ajax(data)) {
setTimeout(do_ajax, 500);
}
}).fail(function (xhr, status) {
console.log(status);
setTimeout(function () {
do_ajax(backoff * 2);
}, backoff);
});
}
show_status(status);
if (need_ajax(status)) {
do_ajax();
}
});
</script>
</head>
<body>
<div class="container">
<div class="jumbotron" data-task-id="{{ task_id }}" data-task-status="{{ task_status }}"
data-redirect="{{ redirect }}">
<img src="{{ static('icons/icon.svg') }}" class="icon" alt="DMOJ Icon">
<p class="action">{{ message }}</p>
<p class="stage"></p>
<div class="progress progress-known">
<div class="progress-bar" role="progressbar" aria-valuemin="0"></div>
<div class="progress-text"></div>
</div>
<div class="progress progress-unknown">
<div class="progress-bar progress-bar-animated" role="progressbar"></div>
</div>
<div class="progress progress-complete">
<div class="progress-bar" role="progressbar">Completed!</div>
</div>
<div class="progress progress-failed">
<div class="progress-bar" role="progressbar">Failed!</div>
</div>
</div>
</div>
</body>
</html>