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

{% block title %}{{ instrument }} Run {{ run_object.run_number }}{% endblock %}
{% block banner %}{{ instrument }} Run {{ run_object.run_number }}{% endblock %}
{% block extra_files_header %}
<link rel="stylesheet" type="text/css" href="/static/thirdparty/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/static/thirdparty/cssmenu/styles.css" />
<script language="javascript" type="text/javascript" src="/static/thirdparty/jquery-3.6.0.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/thirdparty/mustache.js-master/mustache.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/1d_plot/spectrum.css" />
<link rel="stylesheet" type="text/css" href="/static/1d_plot/1d_plots_v2.css" />
<link rel="stylesheet" type="text/css" href="/static/1d_plot/appstyles.css" />
{% 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/thirdparty/plotly-2.9.0.min.js"></script>

<link rel="stylesheet" media="all" href="/static/bar_chart.css" />
<link rel="stylesheet" type="text/css" href="/static/thirdparty/flaticon/flaticon.css">
<div id="dialog-confirm" title="Submit for post-processing" style="display:none">
   <p><span class="ui-icon ui-icon-alert" style="float: left"></span>
   Confirm submission?</p>
</div>
<script>
    function confirm(action) {
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            modal: true,
            buttons: {
                "Submit": function() {
                    window.location.href = action;
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                        }
                    }
        });
    };

{% 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: 20000
        })
    };
    get_plot_update();
    setInterval(get_plot_update, 20000);

{% elif plot_data %}
    // Container for all plots on page
    var plots = [];

    // Anchor
    var anchor = "graph";
    // Default plot options
    var plot_options = {
      color: "#0077cc",
      log_scale_x: false,
      log_scale_y: true,
      grid: false,
      x_label: "{{ plot_label_x }}",
      y_label: "{{ plot_label_y }}",
      title: '',
      x_label_align: "center",
      y_label_align: "center",
      title_label_align: "center",
      allow_region_mode: false,
      predetermined_region: []
    }

      var dim = 20;
      var raw_data = {{ plot_data }};
      var step;
      var qx = [parseFloat(-2.5)];

      step = parseFloat(6) / dim;
      for (var i = 0; i < dim - 1; i++) {
            qx.push(qx[i] + step);
      }
    $(function() {
      var name = "{{ instrument }}_{{ run_object.run_number }}";
      var plot = new Plot_1d(raw_data, anchor, plot_options, name);
      plots.push(plot);
    });
{% endif %}
</script>

{% endblock %}

{% block summary %}
  <span style='float:right'>{% if prev_url %}<a href='{{ prev_url|safe }}'>previous</a>{% else %}previous{% endif %} | {% if next_url %}<a href='{{ next_url|safe }}'>next</a>{% else %}next{% endif %}</span>
  <br><br>
  {% if no_icat_info %}
  {% if run_number == run_object.run_number|stringformat:"i" %}
  <table class='info_display'>
    <tbody>
        <tr><td>Run title</td><td><b>{{ run_title|safe }}</b></td></tr>
    </tbody>
  </table>
  </p>
  {% endif %}
  <p>
  {{ no_icat_info }}
  <p>

  {% elif icat_info.title %}
  <table class='info_display'>
    <tbody>
        <tr><td>Run title</td><td><b>{{ icat_info.title|default:"unknown" }}</b></td></tr>
        <tr><td>Run start</td><td>{{ icat_info.startTime|default:"unknown" }}</td></tr>
        <tr><td>Run end</td><td>{{ icat_info.endTime|default:"unknown" }}</td></tr>
        <tr><td>Duration</td><td>{{ icat_info.duration|default:"0" }}</td></tr>
        <tr><td>Total counts</td><td>{{ icat_info.totalCounts|default:"0" }}</td></tr>
        <tr><td>Proton charge</td><td>{{ icat_info.protonCharge|default:"0" }}</td></tr>
    </tbody>
  </table>
  <p>
  {% endif %}

  {% if fitting_url %}
    <p>
    <a href='{{ fitting_url }}' target="_blank">fit data</a> |
  {% endif %}

  {% if html_data %}
    {% if data_url %}
      Data access: <a href='{{ data_url }}'>download plot data points</a>
    {% endif %}
    <div id="graph"></div>
  {% elif plot_data %}
    <p>
    <div class="graph main">
      <div class='graph cssmenu'></div>
      <div class="graph" id="graph"></div>
      <div class="graph user-console"></div>
    </div>
  {% endif %}

  <p>
  {% if not no_icat_info %}
  Data files:
  <ul>
  {%if icat_info.data_files %}
    {% for item in icat_info.data_files %}<li>{{ item|default:"unknown" }}</li>
    {% endfor %}
  {% else %}
    {{ run_object.file|default:"unknown" }}
  {% endif %}
  </ul>
  {%if icat_info.reduced_files %}
  <p>
  Reduced files:
  <ul>
    {% for item in icat_info.reduced_files %}<li>{{ item|default:"unknown" }}</li>
    {% endfor %}
  </ul>
  {% endif %}
  {% endif %}
{% endblock %}

{% block content %}
  <table class="message_table fixed_table">
    <thead>
      <tr>
        <th style="width: 170px;">Message</th>
        <th>Information</th>
        <th style="width: 90px;">Time</th>
      </tr>
    </thead>
    <tbody>
      {% for item in status %}
      <tr>
        <td>{{ item.queue_id.name|lower }}</td>
        {% if item.last_error %}<td class="error">{{ item.last_error.description }}</td>{% else %}<td>{{ item.last_info.description }}</td>{% endif %}
        <td>{{ item.created_on }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <br>
  {% if is_instrument_staff %}
  Submit for post-processing: <a href='javascript:void(0);' onClick="confirm('catalog');">catalog</a>
  {% if reduce_url %} | <a href='javascript:void(0);' onClick="confirm('reduce');">reduction</a> | <a href='javascript:void(0);' onClick="confirm('postprocess');">all post-processing</a>{% endif %}
  {% if reduction_setup_url %} | <a href='{{ reduction_setup_url }}'>setup</a>{% endif %}
  {% endif %}
{% endblock %}

{% block extra_files_footer %}
  {% if plot_data %}
  <script language="javascript" type="text/javascript" src="/static/1d_plot/1d_plots_v2.js"></script>
  <script language="javascript" type="text/javascript" src="/static/thirdparty/saveSvgAsPng.js"></script>
  <script language="javascript" type="text/javascript" src="/static/1d_plot/spectrum.js"></script>
  <script language="javascript" type="text/javascript" src="/static/1d_plot/mustachetemplates.js"></script>
  <script language="javascript" type="text/javascript" src="/static/1d_plot/appfunctions.js"></script>
  <script language="javascript" type="text/javascript" src="/static/thirdparty/cssmenu/script.js"></script>
  {% endif %}
{% endblock %}