{% extends "base.html" %}

{% block title %}Oozappa - Jobset : {{ jobset.title }}{% endblock %}

{% block headline %}Jobset {{ jobset.title }}{% endblock %}

{% block body %}
<div>
  <div>
    description: {{ jobset.description }}
  </div>
  <div>
  <table class="striped rounded">
    <thead><tr><th>Environment</th><th>TASK</th><th>Description</th></tr></thead>
    <tbody>
    {% for job in jobset.jobs %}
    <tr id="jobset[{{ job.id }}]">
        <td>{{ job.environment.name }}</td>
        <td>{{ job.tasks }}</td>
        <td>{{ job.description }}</td>
    </tr>
    {% endfor %}
    </tbody>
    </table>
  </div>
  <div>
    <form id="fabric_jobset" method='POST' action='#'>
        <input type="hidden" name="jobset_id" id="jobset_id" value="{{ jobset.id }}"/>
        <input type="submit" value="run jobset">
  </div>
  <div>
    <h2 class="lead">Running log</h2>
    <div id="terminal">
    </div>
  </div>
  {% if executelog_list %}
  <div>
    <h3 class="lead">Execute Logs</h3>
    <table class="striped rounded">
    <thead><tr><th>Started</th><th>Finished</th><th>Time in sec.</th><th>Result</th></tr></thead>
      <tbody>
    {% for el in executelog_list %}
        <tr>
          <td>{{ el.started|datetimefmt }}</td>
          <td>{{ el.finished|datetimefmt }}</td>
          <td>{{ el.execute_time() }}</td>
          <td>
            <a href="{{ url_for('get_execute_log', id=el.id) }}">
              {% if el.success %}<li class="success alert">Success</li>
              {% else %}<li class="danger alert">Fail</li>{% endif %}
            </a>
          </td>
        </tr>
    {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script type="text/javascript">
        $(document).ready(function(){
          var ws;
          var connect_to = 'ws://' + document.domain + ':' + location.port + '/run_jobset'
          var connect = function() {
            ws = new WebSocket(connect_to);
            ws.onmessage = function(e) {
              var over_count = $("#terminal *").length - 100; //TODO fixme
              for(var i = 0;i < over_count;i++) {
                $("#terminal *").get(0).remove();
              }
              jQuery.each(e.data.split("\n"), function(i, v) {
                $("div#terminal").append('<div class="msg">' + v + '</div>');
              });
              $("div#terminal").scrollTop($("#terminal")[0].scrollHeight);
            };
            ws.onclose = function(e) {
              connect();
            }
          };
          connect();
          $('form#fabric_jobset').submit(function(event) {
              ws.send(JSON.stringify({jobset_id: $('#jobset_id').val()}));
              return false;
          });
        });
    </script>
{% endblock %}