{% extends 'base.html' %}

{% block title %}multinode operation results{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='multinode.css') }}">
    <script type="text/javascript" src="{{ url_for('static', filename='multinode.js') }}"></script>
{% endblock %}


{% block body %}
<h2>
    <a id="title" class="link" target="_blank">{{ title }}</a>
</h2>


<div class="table wrap">
    <table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="checkall" />
                    <a class="state danger" href="javascript:;" onclick="invertSelection();">invert selection</a>
                </th>
                <th>Index</th>

                {% if opt == 'stop' %}
                <th>Dashboard</th>
                {% else %}
                <th>Manage projects</th>
                {% endif %}

                <th>Node name</th>
                <th>Status</th>
                <th>Project</th>

                {% if opt == 'stop' %}
                <th>Job</th>
                <th>Prev state</th>
                {% elif opt == 'delversion' %}
                <th>Version</th>
                {% endif %}
            </tr>
        </thead>

    <form method="post" enctype="multipart/form-data">
        <tbody>
    {% for SCRAPYD_SERVER in SCRAPYD_SERVERS %}
        {% if loop.index in selected_nodes %}
            <tr>
                <td><input type="checkbox" id="checkbox_{{ loop.index }}" name="{{ loop.index }}" /></td>
                <td >{{ loop.index }}</td>
                <td>
                    <a id="run_spider_{{ loop.index }}"

                    {% if loop.index == node %}
                    class="state safe"
                    {% else %}
                    class="state normal"
                    {% endif %}

                    {% if opt == 'stop' %}
                    href="{{ url_for('dashboard.dashboard', node=loop.index) }}"
                    {% else %}
                    href="{{ url_for('manage.manage', node=loop.index) }}"
                    {% endif %}

                    target="_blank">
                    {{ SCRAPYD_SERVERS[loop.index-1] }}
                    </a>
                </td>
                <td id="node_name_{{ loop.index }}"></td>
                <td><em id="status_{{ loop.index }}"></em></td>
                <td id="project_{{ loop.index }}"></td>

                {% if opt == 'stop' %}
                <td id="job_{{ loop.index }}"></td>
                <td id="prevstate_{{ loop.index }}"></td>
                {% elif opt == 'delversion' %}
                <td id="version_{{ loop.index }}"></td>
                {% endif %}
            </tr>
        {% endif %}
    {% endfor %}
        </tbody>
    <form>
    </table>

    <div class="action">
        <a class="button safe" href="javascript:;" onclick="passToOverview();">pass to Overview</a>
    </div>
</div>


<script>
var selected_nodes = {{ selected_nodes }};

var url_xhr = "{{ url_for('api.api', node=selected_nodes[0], opt=opt, project=project, version_spider_job=version_job) }}";
my$('#title').href = url_xhr;

{% if opt == 'stop' %}
var url_overview = "{{ url_for('overview.overview', node=node, opt='listjobs', project=project) }}";
{% elif opt == 'delproject' %}
var url_overview = "{{ url_for('overview.overview', node=node, opt='listprojects', project=project) }}";
{% elif opt == 'delversion' %}
var url_overview = "{{ url_for('overview.overview', node=node, opt='listversions', project=project) }}";
{% else %}
var url_overview = "{{ url_for('overview.overview', node=node) }}";
{% endif %}


window.onload = function(){
    $('#checkall').click(function () {
        $('input:checkbox').not(this).prop('checked', this.checked);
    });

    var r = confirm("Start to execute command on multinode?");
    if(r == false) {
        return;
    }

    for(idx in selected_nodes){
        var url = url_xhr.replace(/\/\d+/, '/'+selected_nodes[idx]);
        execXHR(selected_nodes[idx], url);
    }
}

function execXHR(idx, url){
    my$('#'+'status_'+idx).innerHTML = "loading...";
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (this.readyState == 4) {
            if (this.status == 200) {
                var obj = JSON.parse(this.responseText);
                if(obj.status == 'ok') {
                    console.log('#'+'node_name_'+idx, obj.node_name);
                    my$('#'+'node_name_'+idx).innerHTML = obj.node_name;
                    my$('#'+'status_'+idx).innerHTML = obj.status;
                    my$('#'+'project_'+idx).innerHTML = "{{ project }}";

                    {% if opt == 'stop' %}
                    my$('#'+'job_'+idx).innerHTML = "{{ version_job }}";
                    my$('#'+'prevstate_'+idx).innerHTML = obj.prevstate || "null";
                    {% elif opt == 'delversion' %}
                    my$('#'+'version_'+idx).innerHTML = "{{ version_job }}";
                    {% endif %}

                    my$('#'+'checkbox_'+idx).checked = true;
                } else {
                    my$('#'+'status_'+idx).innerHTML = "<a target='_blank' class='link' href='"+url+"'>"+"REQUEST</a> got status: "+obj.status;
                    my$('#'+'status_'+idx).style.color = 'red';
                }
            } else {
                my$('#'+'status_'+idx).innerHTML = "<a target='_blank' class='link' href='"+url+"'>"+"REQUEST</a> got code: "+this.status;
                my$('#'+'status_'+idx).style.color = 'red';
            }
        }
    };
    req.open("post", url, Async=true);
    req.send();
}
</script>
{% endblock %}
