<!DOCTYPE html>


<html>



<head>
    {% load static %}
    {% load static %}
    {% get_static_prefix as STATIC_PREFIX %}
    {% include "chlamdb/header.html" %}
</head>

<body>

    <div class="row" style="padding-left:40px">
        <div id="progress-div" class="row" style="padding-top:5px;height:25px;" class="row"></div>

        <div class="progress row" style="width=50%;" id="progress">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 20%"></div>
        </div>
        
        <div id="results" class="row"></div>
     <div class="row">

</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
    $("#progress").hide();

    var prg_dv = $('#progress-div');
    var pgrbar = $('.progress-bar');

    var task_id = "{{ task_id }}";
    console.log("my task id", task_id)
    get_task_info(task_id);

    function get_task_info(task_id) {
        $.ajax({
            type: 'get',
            url: '/get-task-info/',
            data: {'task_id': task_id},
            success: function (data) {
                pgrbar.css('width', 10+'%').attr('aria-valuenow', 10)
                $("#progress").show();
                $('#results').html('')
                console.log("data task id", task_id)
                if (data.state == 'PENDING') {
                    prg_dv.html('Please wait...');
                }
                else if (data.state == 'PROGRESS') {
                    pgrbar.css('width', data.result.percent+'%').attr('aria-valuenow', data.result.percent)
                    console.log(data.result.percent);
                    prg_dv.html('Step ' + data.result.current + '/' + data.result.total + ': ' + data.result.description);
                }
                else if (data.state == 'SUCCESS') {
                    // pgrbar.hide();
                    prg_dv.html('');
                    $('#results').html(data.result);
                    $("#progress").hide();
                }

                if (data.state != 'SUCCESS') {
                    console.log("waiting...")
                    setTimeout(function () {
                        get_task_info(task_id)
                    }, 1000);
                }
            },
            error: function (data) {
                console.log(data)
                prg_dv.html("Something went wrong!");
            }
        });
    }
</script>