{% extends "report/base_instrument.html" %}
{% load dasmon_tags %}

{% block title %}{{ instrument }} Monitor {% endblock %}
{% block header %}
<script language="javascript" type="text/javascript" src="/static/live_update.js"></script>
<script language="javascript" type="text/javascript" src="/static/bar_chart.js"></script>
<link rel="stylesheet" media="all" href="/static/bar_chart.css" />
<script language="javascript" type="text/javascript" src="/static/thirdparty/plotly-2.9.0.min.js"></script>

<script>
    var last_run_id = '{{ last_run.id }}';
    var run_data = {{ run_rate|safe }};
    var error_data = {{ error_rate|safe }};
    var plot_timeframe = '7200';

    function poll() {
        $.ajax({ url: "{{ update_url }}", success: function(data) {
            data.variables = []
            update_from_ajax_data(data);
            $('#info_last_run').replaceWith("<span id='info_last_run'><a href='{{ base_run_url }}"+data.last_run+"/'>"+data.last_run+"</a></span>");
            $('#info_last_expt').replaceWith("<span id='info_last_expt'><a href='{{ base_ipts_url }}"+data.last_expt+"/'>"+data.last_expt+"</a></span>");
            $('#info_run_time').replaceWith("<span id='info_run_time'>"+data.last_run_time+"</span>");

            run_data = data.run_rate;
            error_data = data.error_rate;
            plot_combined_rates(run_data, error_data);

        }, dataType: "json", timeout: 30000, cache: true,
        statusCode: { 401: function() { new_alert("Your session expired. Please log in again"); show_alert(); }}});

        $.ajax({ url: "{{ legacy_update_url }}", success: function(legacy_data) {
            for (var i=0; i<legacy_data.length; i++)
            {
                for (var j=0; j<legacy_data[i].data.length; j++)
                {
                    $('#'+legacy_data[i].data[j].key).replaceWith("<span id='"+legacy_data[i].data[j].key+"'>"+legacy_data[i].data[j].value+"</span>");
                }
            }
        }, dataType: "json", timeout: 30000, cache: true,
        statusCode: { 401: function() { new_alert("Your session expired. Please log in again"); show_alert(); }}});
    };

{% if html_data %}
    var div_data = '';
    function get_plot_update() {
        $.ajax({type: "GET",
                url: "{{update_url}}",
                success: function(data) {
                    if (div_data.localeCompare(data) != 0) {
                        div_data = data;
                        $('#graph').replaceWith("<div id='graph'>"+data+"</div>");
                    };
                },
                dataType: "html",
                timeout: 2000
        })
    };
    get_plot_update();
{% endif %}
</script>
{% endblock %}

{% block banner %}{{ instrument }} Monitor {% endblock %}
{% block summary %}

<div class="summary_plots">
  <div id="runs_per_hour"></div>
</div>

<p class='dashboard_highlight'>
  <span class='dashboard_normal'>Proposal:</span> <span class='dashboard_highlight' id="Proposal">{{ Proposal }}</span>
  <span class='dashboard_normal'>Run:</span> <span class='dashboard_highlight' id="Run">{{ Run }}</span><br>
  <span class='dashboard_normal'>Status:</span> <span class='dashboard_highlight' id="Status">{{ Status }}</span>
  <span class='dashboard_normal'>Count rate:</span> <span class='dashboard_highlight' id="Detector_Rate">{{ Detector_Rate }}</span>
</p>

<div class='status_bar'>
  <div class='status_box'>
    <div class='diagnostics'>
      <a href='{{ live_monitor_url|safe }}diagnostics/'>
        <ul>
          <li class='status_text'>Systems:</li>
          <li class='status_{{ das_status.workflow }}' id='workflow_status'>Workflow</li>
          <li class='status_{{ das_status.catalog }}' id='catalog_status'>Catalog</li>
          <li class='status_{{ das_status.reduction }}' id='reduction_status'>Reduction</li>
        </ul>
      </a>
    </div>
  </div>
</div>

<p>
{% if last_run %}
Last translated run: <span id='info_last_run'><a href='{{ base_run_url }}{{ last_run.run_number }}/'>{{ last_run.run_number }}</a></span>
from <span id='info_last_expt'><a href='{{ base_ipts_url }}{{ last_expt.expt_name }}/'>{{ last_expt.expt_name|upper }}</a></span>
created on <span id='info_run_time'>{{ last_run.created_on }}</span><br>
{% elif last_expt %}
Last experiment: <a href='{{ base_ipts_url }}{{ last_expt.expt_name }}/'>{{ last_expt.expt_name|upper }}</a><br>
{% endif %}
</p>
{% endblock %}
{% block right_side_links %}
    <span style="float:right">live monitoring:
      status | <a href="{{ live_runs_url }}">runs</a>
    </span>
{% endblock %}

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

{% block content %}
  {% for group in key_value_pairs %}
  <h3 class='table_title'>{{ group.group }}</h3>
  <table class="message_table">
    <thead>
      <tr>
        <th> Key </th> <th> Value </th>
      </tr>
    </thead>
    <tbody>
    {% for item in group.data %}
      <tr>
        <td>{{ item.key|strip }}</td>
        <td><span id="{{ item.key }}">{{ item.value|safe }}</span></td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
  {% endfor %}
  <br>

  {% if html_data %}
  <p>
  <h3>Latest results from the automated reduction [hit reload to refresh]</h3>
  <div id="graph"></div>
  {% endif %}

  <div id="dialog_placeholder"></div>

  <script id="source" language="javascript" type="text/javascript">
    plot_combined_rates(run_data, error_data);
  </script>
{% endblock%}