{% extends "base.html" %}

{% block extrahead %}
<style type="text/css">
.result {
  margin-bottom: 0.25em;
}
</style>
{% endblock %}

{% block body %}
<h1>Testing async dispatch</h1>
<hr>
<h2>Status</h2>
<div class="push-4 span-16">
  <div id="status-window"></div>
</div>
<script type="text/javascript">
YUI().use('node', 'datasource-io', 'datasource-polling', 'json-parse', function (Y) {
  var last_message = "",
    container = Y.one("#status-window"),
    dispatch = new Y.DataSource.IO({source: "/dispatch/{{job}}"});

  job_status = new Y.DataSource.IO({source: "/status/{{status}}"});
  polling = job_status.setInterval(250, {
    request: "",
    callback: {
      success: function (e) {
        console.log("Success");
        console.log(e.response);
        console.log(e.response.results[0]);
        console.log(Y.JSON.parse(e.response.results[0].response));
        var status_data = Y.JSON.parse(e.response.results[0].response);
        if (status_data.status != last_message) {
          last_message = status_data.status;
          container.append("<p class=\"result\">" + last_message + "</p>");
        };
        if (status_data.finished === true) {
          job_status.clearInterval(polling)
        };
      },
      failure: function (e) {
        console.log("Error");
        console.log(e);
      }
    }
  });

  dispatch.sendRequest({
    request: "",
    callback: {
      success: function() {},
      failure: function() {}
    }
  });
});
</script>
{% endblock %}