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