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

{% block title %}{{ instrument }} Monitor {% endblock %}
{% block header %}


<script language="javascript" type="text/javascript" src="/static/thirdparty/jquery.sparkline.min.js"></script>
<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() {
        var query_str = "";
        var pv_query_str = "";
        var options;
        for (var i=0; i<Plots.length; i++){
            if (Plots[i].option === "1") query_str += Plots[i].element_id + ",";
            else if (Plots[i].option === "2") pv_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: 2000, cache: true,
        statusCode: { 401: function(){
                new_alert("Your session expired. Please log in again");
                show_alert();
                }
            }
        });
        if (pv_query_str.length>0) {
            $.ajax({ url: "{{ pv_url }}?time="+plot_timeframe+"&vars="+pv_query_str, success: function(data) {

                //console.log("plotted_data: " + data.live_plot_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: 2000, cache: true,
            statusCode: { 401: function() {
                        new_alert("Your session expired. Please log in again");
                        show_alert();
                    }
                }
            });
        }
        get_alarms();

    };

    $( document ).tooltip({
      items: '*:not(.ui-dialog-titlebar-close)'
    });

    function get_alarms()
    {
        $.ajax({ url: "{{ signals_url }}", success: function(data) {
            $('#signal_table').replaceWith(data);
        }, dataType: "html", timeout: 30000, cache: true });
    }

    function ack_alarm(ack_url, id)
    {
        $.ajax({ url: ack_url, cache: false });
        $(id).remove();
    }

</script>
{% endblock %}

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

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

{% block bodytop %}
<script id="source" language="javascript" type="text/javascript">
    get_alarms();
    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%}