{% extends "dasmon/live_monitor.html" %}
{% load dasmon_tags %}

{% block title %}{{ instrument }} Process Variables {% endblock %}

{% block banner %}{{ instrument }} Process Variables {% endblock %}

{% block header %}
<script language="javascript" type="text/javascript" src="/static/thirdparty/d3.v3/d3.v3.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/live_update.js"></script>
<script language="javascript" type="text/javascript" src="/static/bar_chart.js"></script>
<script language="javascript" type="text/javascript" src="/static/plotting_line.js"></script>
<link rel="stylesheet" type="text/css" href="/static/plotting.css" title="no title" charset="utf-8">
<link rel="stylesheet" type="text/css" href="/static/bar_chart.css" />
<link rel="stylesheet" type="text/css" href="/static/thirdparty/flaticon/flaticon.css">

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

    //************************************************************************80
    // FUNCTION: poll
    //
    // Desc: polls for new data
    //
    // Variables: query_str, pv_query_str
    //
    //************************************************************************80

    function poll() {
        query_str = "";
        for (var i=0;i<Plots.length; i++) {
            if (Plots[i].option === "1") query_str += Plots[i].element_id + ",";
        }
        $.ajax({ url: "{{ update_url }}?time="+plot_timeframe+"&vars="+query_str, success: function(data) {
            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;
            plotted_data = data.live_plot_data;
            plot_combined_rates(run_data, error_data);

            for (var i=0; i<data.live_plot_data.length; i++){
                for (var j=0; j<Plots.length; j++){
                    if (data.live_plot_data[i][0] === Plots[j].element_id){
                        Plots[j].plotted_data = data.live_plot_data[i][1];
                        plot_1d(Plots[j].plotted_data, Plots[j].plot_id, Plots[j].plot_options)
                        break;
                    }
                }
            }
        }, dataType: "json", timeout: 30000, cache: true,
        statusCode: { 401: function() { new_alert("Your session expired. Please log in again"); show_alert(); }}});
    };

</script>
{% endblock %}

{% block right_side_links %}
    <span style="float:right">live monitoring:
    <a href="{{ live_monitor_url }}">status</a> | <a href="{{ live_runs_url }}">runs</a> | <b>PVs</b>
    </span>
{% endblock %}

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

{% block content %}
  <table class="message_table" id="error_table">
    <thead>
      <tr>
        <th> Key </th> <th> Value </th> <th> Last Updated </th>
      </tr>
    </thead>
    <tbody>
      {% for item in key_value_pairs %}
      <tr>
        {% if item.value|is_number %}<td><a href='javascript:void(0);' onClick="new_monitor('{{ item.key }}', '1');"> {{ item.key }} </a></td>{% else %}<td>{{ item.key }}</td>{% endif %}
        <td><span id="{{ item.key }}">{{ item.value }}</span></td>
        <td><span id="{{ item.key }}_timestamp">{{ item.timestamp }}</span></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <br>

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

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