<!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>