{% extends "base.html" %}
{% load static %}

{% block title %} Instrument Status {% endblock %}
{% block banner %} Instrument Status {% endblock %}

{% block header %}
<script language="javascript" type="text/javascript" src="/static/live_update.js"></script>
<link rel="stylesheet" media="all" href="/static/dashboard_simple.css" />

<script>
  function poll() {
    $.ajax({ url: "{{ update_url }}", success: function(data) {
        content = "<li class='status_"+data.postprocess_status.workflow+"' id='workflow_status'>Workflow</li>";
        $('#workflow_status').replaceWith(content);

        for (var i=0; i<data.instruments.length; i++)
        {
           global_system_status_update(data, i);
           var content = "<li class='status_"+data.instruments[i].completeness+"' id='"+data.instruments[i].name+"_completeness'>"+data.instruments[i].completeness_msg+"</td>";
           $('#'+data.instruments[i].name+'_completeness').replaceWith(content);
        }
    }, dataType: "json", timeout: 30000, cache: true,
        statusCode: { 401: function() { new_alert("Your session expired. Please log in again"); show_alert(); }}});
  };
</script>
{% endblock %}

{% block bodytop %}
<script id="source" language="javascript" type="text/javascript">
    setInterval(poll, 20000);
</script>
{% endblock %}

{% block right_side_links %}
    <span style="float:right">
    <b>dashboard</b> | <a href="{% url 'dasmon:dashboard_complete' %}">extended dashboard</a> | <a href="{% url 'dasmon:run_summary' %}">latest runs</a>
    </span>
{% endblock %}

{% block summary %}
<div class='status_box'>
<div class='diagnostics'>
  <a href='{{ central_services_url|safe }}'>
    <ul>
      <li class='status_text'>Central systems:</li>
      <li class='status_{{ postprocess_status.workflow }}' id='workflow_status'>Workflow</li>
    </ul>
  </a>
</div>
</div>

<div class="dashboard_parent">
<div class="select_menu">
  <span>List of instruments:</span>
  <label for="facility-select">Facility:</label>
  <select name="facilities" id="facility-select">
    <option value="all">All</option>
    <option value="hfir">HFIR</option>
    <option value="sns">SNS</option>
  </select>
</div>
<div class="column_heading_parent">
    <div class="first_column_heading"><h3 class="heading_element">Instrument</h3><h3 class="heading_element">Status</h3></div>
    <div class="second_column_heading"><h3 class="heading_element">Instrument</h3><h3 class="heading_element">Status</h3></div>
</div>
<div class="instrument_list">
    <!-- Columns are handled by CSS using a grid. -->
    {% for item in instruments %}
    <div class="{{ item.facility }}_instrument instrument_entry">
        <a href="{{ item.url|safe }}" class="entry_element">{{ item.name|upper }}</a>
        <span id="{{ item.name }}_recording_status" class="entry_element">{{ item.recording_status }}</span>
    </div>
    {% endfor %}
</div>
</div>

<script language="javascript" type="text/javascript" src="/static/facility_filter.js"></script>
  {% endblock %}
{% block nocontent %}{% endblock %}