spawn_pending.html

{% extends "page.html" %}

{% block stylesheet %}
<link rel="stylesheet" href="{{ static_url("css/custom.css") }}" type="text/css"/>
{% endblock %}

{% block main %}

<div class="container">
    <div class="row" style="margin-top: 2%">
        <div class="text-center">
            <svg class="spinner" id="big_spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
               <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
            </svg>
            <div style="display: inline-block">
                Your server is starting up.<br>
                This can take seconds or minutes, please be patient.<br>
                You will be redirected automatically when it's ready for you.<br>
                This page is updated automatically.
            </div>
            <p style="margin-top: 1%">
                <a id="refresh" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored " href="#">refresh</a>
                <span id="log-lines-header" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">Build log</span>
                <a id="resist" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored " href="{{base_url}}spawn" style="display: none">Return to spawn page</a>
            </p>
        </div>
    </div>
    <div class="row" style="margin-top: 2%; width: 85%">
        <div id="log-lines" style="display: none;"></div>
    </div>
</div>

{% endblock %}

{% block footer %}
{% endblock %}


{% block script %}
<script type="text/javascript">
function make_list(log, is_failed) {
    function escapeHTML(s) {
        return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }
    var result = [], is_done = [];
    var cur_level = -1;
    log.forEach(function(item) {
        var level = item.level;
        if (level != cur_level) {
            if (level < cur_level)
                result.push('</ul>');
            else
                result.push('<ul>');
            cur_level = level;
        }
        is_done.push(true);
        var cur_line = item.text;
        if (cur_line.lastIndexOf('Cloning repository', 0) !== 0)
            cur_line = escapeHTML(cur_line);
        result.push('<li>' + cur_line + '</li>');
    });
    for (var i = 1; i <= cur_level; ++i)
        result.push('</ul>');
    var min_level = Infinity;
    for (var i = log.length - 1; i >= 0; --i) {
        if (log[i].level < min_level) {
            min_level = log[i].level;
            is_done[i] = false;
        }
    }
    var style = '';
    var level_begins = [];
    is_done.forEach(function (is_done, i) {
        if (log[i].level > level_begins.length)
            level_begins.push(i);
        else if (log[i].level < level_begins.length) {
            while (level_begins.length != log[i].level)
                level_begins[level_begins.length - 2] += i - level_begins.pop() - 1;
        }
        var selector = 'div > ';
        for (var j = 0; j < level_begins.length; ++j)
            selector += 'ul > ';
        style += selector + 'li:nth-child(' + (i - level_begins[level_begins.length - 1] + 1) + '){list-style-image:url(\'';
        if (is_done)
            style += '{{ static_url('images/done.png') }}';
        else if (is_failed)
            style += '{{ static_url('images/error.png') }}';
        else
            style += '{{ static_url('images/loading.gif') }}';
        style += '\');}\n';
    });
    return [result.join(''), style];
}
require(["jquery"], function ($) {
    var old_color = $('#log-lines-header').css('background');
    $('#log-lines-header').click(function () {
        var content = $('#log-lines');
        if (!content.is(':visible'))
            $(this).css('background', '#3f51b5');
        else
            $(this).css('background', old_color);
        content.slideToggle(200);
    });
    $("#refresh").click(function () {
        window.location.reload();
    });
    function write_log_lines(log, is_failed) {
        var res = make_list(log, is_failed);
        $('#log-lines').html(res[0]);
        $('head').append('<style type="text/css">' + res[1] + '</style>');
    }
    function reload_page() {
        window.location.reload();
    }
    function update_log() {
        $.getJSON('#', {
            'get_logs': 1
        }, function (data) {
            if ('done' in data) {
                clearInterval(id);
                write_log_lines(data.log, false);
                setTimeout(reload_page, 1000);
            } else {
                var is_failed = false;
                if ('failed' in data) {
                    clearInterval(id);
                    is_failed = true;
                    $('#log-lines-header').trigger('click');
                    $('#big_spinner').css('display', 'none');
                    $("#resist").show();
                }
                write_log_lines(data.log, is_failed);
            }
        });
    }
    update_log();
    var id = setInterval(update_log, 2000);
});
</script>
{% endblock %}