{% extends 'base.html' %}

{% load static %}

{% block title %}deployment's board{% endblock %}

{% block headscript %}
    <script src="{% static 'django_eventstream/json2.js' %}"></script>
    <script src="{% static 'django_eventstream/eventsource.min.js' %}"></script>
    <script src="{% static 'django_eventstream/reconnecting-eventsource.js' %}"></script>
{% endblock %}

{% block bodyattr %}
  onload="start();"
{% endblock %}

{% block content %}
  {{ user.username }}'s board
  {% if page_obj %}
    <table>
      <tr>
        <th>name</th>
        <th>type</th>
        <th>status</th>
        <th></th>
        <th></th>
      </tr>
      {% for deployment in page_obj %}
      <tr id="{{ deployment.id }}">
        <th name="name">{{ deployment.name }}</th>
        <th name="type">{{ deployment.type }}</th>
        <th name="status">{{ deployment.status }}</th>
        <th>
          <a href="{% url 'deployment-details' deployment.id %}">
            <button>details</button>
          </a>
        </th>
        {% if deployment.status == "FAILED" or deployment.status == "READY" %}
        <th name="deploy">
          <form action="{% url 'deployment-launch' deployment.id %}?page={{ page_obj.number }}" method="post">
            {% csrf_token %}
            <input type="submit" value="deploy">
          </form>
        </th>
        {% endif %}
      </tr>
      {% endfor %}
    </table>
    <div class="pagination">
      <span class="step-links">
          {% if page_obj.has_previous %}
              <a href="?page=1">&laquo; first</a>
              <a href="?page={{ page_obj.previous_page_number }}">previous</a>
          {% endif %}
  
          <span class="current">
              Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
          </span>
  
          {% if page_obj.has_next %}
              <a href="?page={{ page_obj.next_page_number }}">next</a>
              <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
          {% endif %}
      </span>
    </div>
  {% else %}
    <p>no deployments available</p>
  {% endif %}
  <a href="/deployment/create">
    <button>create</button>
  </a>
{% endblock %}

{% block script %}
<script>
  var start = function () {

  var es = new ReconnectingEventSource('{{ url|safe }}');

  es.onopen = function () {
    console.log('connected');
  };

  es.addEventListener('stream-error', function (e) {
    es.close();
    message = JSON.parse(e.data);
    console.log('stream error: ' + message.condition + ': ' + message.text);
  }, false);

  es.onerror = function (e) {
    console.log('connection error');
  };

  // listening on `message` events and update the corresponding table line.
  // If the status is `FAILED`, we reload the window to ensure a new csrf_token.
  es.addEventListener('message', function (e) {
    message = JSON.parse(e.data);
    console.log("id: " + message.id);
    console.log("status: " + message.status);

    const tr = document.getElementById(message.id);
    if (tr) {
      var th = tr.querySelector("th[name='status']");
      th.innerHTML = message.status;

      if (message.status == "FAILED") {
        setTimeout(() => {
          window.location.reload();
        }, 2000);
      }
    }

  }, false);
};
</script>
{% endblock %}