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

{% block title %}{{ instrument }} Experiments {% 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" />
<link rel="stylesheet" media="all" href="/static/thirdparty/dynatable/jquery.dynatable.css" />
<script type='text/javascript' src='/static/thirdparty/dynatable/jquery.dynatable.js'></script>

<script>
var records = {% autoescape off %}{{ expt_list }}{% endautoescape %};
var dynatable = null;
    var last_expt_id = '{{ last_expt_created.id }}';
    var run_data = {{ run_rate|safe }};
    var error_data = {{ error_rate|safe }};

    $(document).ready( function() {
      $('#expt_table').dynatable({ dataset: { records: records,
                                  perPageOptions: [25, 50, 100],
                                  perPageDefault: 25 },
                                  features: { pushState: false }
      });
      dynatable = $('#expt_table').data('dynatable');
      dynatable.sorts.add('timestamp', -1)
      dynatable.process();
    });

    function poll(){
        $.ajax({ url: "{{ update_url }}?since="+last_expt_id, success: function(data) {
            if (data.refresh_needed.localeCompare('1')==0) {
                for (var i=0;i<data.expt_list.length;i++) {
                  records.push({'experiment': "<a href='{{ base_ipts_url }}"+data.expt_list[i].ipts+"/'>"+data.expt_list[i].ipts+"</a>",
                                'total': data.expt_list[i].n_runs,
                                'created_on': data.expt_list[i].created_on,
                                'timestamp': data.expt_list[i].timestamp
                                });
                }
                last_expt_id = data.last_expt_id;
            }
            dynatable.settings.dataset.originalRecords = records;
            dynatable.process();

            $('#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(); }}});
    };
</script>
{% endblock %}

{% block banner %}{{ instrument }} Experiments {% endblock %}

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

{% block content %}
List of {{ instrument }} experiments {% if error_url %}(view <a href='{{ error_url }}'>errors</a>){% endif %}<br><br>
<table class="message_table" id="expt_table">
  <thead>
    <tr>
      <th data-dynatable-column="experiment" style="width: 80px;">Experiment</th>
      <th data-dynatable-column="total" style="width: 50px;">No. of runs</th>
      <th data-dynatable-column="created_on" data-dynatable-sorts="timestamp">Created on</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<br>
<script id="source" language="javascript" type="text/javascript">
	plot_combined_rates(run_data, error_data);
</script>
{% endblock %}