101 lines
3.9 KiB
HTML
101 lines
3.9 KiB
HTML
|
<!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>
|