{% extends 'base.html' %}

{% block title %}deploy results{% endblock %}

{% block head %}
  <link rel="stylesheet" type="text/css" href="{{ static_css_multinode }}">
  <script type="text/javascript" src="{{ static_js_multinode }}"></script>
{% endblock %}


{% block body %}
<h2>Deploy Project</h2>
<div class="table wrap">
  <table>
    <thead>
      <tr>
        <th>
          <input type="checkbox" id="checkAll" />
          <a class="state warning" href="javascript:;" onclick="invertSelection();">invert selection</a>
        </th>
        <th>Index</th>
        <th>Projects</th>
        <th>Node Name</th>
        <th>Status</th>
        <th>Project</th>
        <th>Version</th>
        <th>Spiders</th>
      </tr>
    </thead>
  <form method="post" enctype="multipart/form-data">
    <input type="text" name="project" value="{{ project }}" hidden />
    <input type="text" name="version" value="{{ version }}" hidden />

    <tbody>
      <tr>
        <td><input type="checkbox" id="checkbox_{{ first_selected_node }}" name="{{ first_selected_node }}" checked /></td>
        <td>{{ first_selected_node }}</td>
        <td>
          <a
          class={% if first_selected_node == node %}"state safe"{% else %}"state normal"{% endif %}
          href="{{ url_projects_first_selected_node }}"
          target={% if selected_nodes|length > 1 %}"_blank"{% else %}"_self"{% endif %}
          >{{ SCRAPYD_SERVERS[first_selected_node-1] }}</a>
        </td>
        <td>{{ js['node_name'] }}</td>
        <td><em class="pass">{{ js['status'] }}</em></td>
        <td>{{ js['project'] }}</td>
        <td>{{ js['version'] }}</td>
        <td>{{ js['spiders'] }}</td>
      </tr>
  {% for SCRAPYD_SERVER in SCRAPYD_SERVERS %}
    {% if loop.index in selected_nodes and loop.index != first_selected_node %}
      <tr>
        <td><input type="checkbox" id="checkbox_{{ loop.index }}" name="{{ loop.index }}" /></td>
        <td >{{ loop.index }}</td>
        <td>
          <a
          class={% if loop.index == node %}"state safe"{% else %}"state normal"{% endif %}
          href="{{ url_projects_list[loop.index-1] }}"
          target={% if selected_nodes|length > 1 %}"_blank"{% else %}"_self"{% endif %}
          >{{ SCRAPYD_SERVERS[loop.index-1] }}</a>
        </td>
        <td id="node_name_{{ loop.index }}"></td>
        <td id="status_{{ loop.index }}"></td>
        <td id="project_{{ loop.index }}"></td>
        <td id="version_{{ loop.index }}"></td>
        <td id="spiders_{{ loop.index }}"></td>
      </tr>
    {% endif %}
  {% endfor %}
    </tbody>
  </form>
  </table>

  <div class="action">
    <a class="button safe big" href="javascript:;" onclick="multinodeRunSpider();">{% if selected_nodes|length > 1 %}Multinode {% endif %}Run Spider</a>
    <a class="button normal big" href="javascript:;" onclick="passToServers();">Servers &raquo; Run Spider</a>
  </div>
</div>


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

var url_xhr = "{{ url_xhr }}";
var url_schedule = "{{ url_schedule }}";
var url_servers = "{{ url_servers }}";


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

{% if selected_nodes|length > 1 %}
  setTimeout("fireXHR();", 500);
{% endif %}
}


{% if selected_nodes|length > 1 %}
function fireXHR(){
  //var r = confirm("Start to deploy project on remaining nodes?");
  //if(r == false) {
  //  return;
  //}

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


function execXHR(idx, url){
  my$('#'+'status_'+idx).innerHTML = '<em class="normal">loading...</em>';
  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 = '<em class="pass">'+obj.status+'</em>';
          my$('#'+'project_'+idx).innerHTML = obj.project;
          my$('#'+'version_'+idx).innerHTML = obj.version;
          my$('#'+'spiders_'+idx).innerHTML = obj.spiders;
          my$('#'+'checkbox_'+idx).checked = true;
        } else {
          my$('#'+'status_'+idx).innerHTML = getRequestFailHtml(url, 'status', obj.status);
        }
      } else {
        my$('#'+'status_'+idx).innerHTML = getRequestFailHtml(url, 'code', this.status);
      }
    }
  };
  req.open("post", url, Async=true);
  req.send();
}
{% endif %}
</script>
{% endblock %}
