{% extends "bootstrap/base.html" %}
{% block title %}SOPHY monitor{% endblock %}

{% block styles %}
{{ super() }}
{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="{{ url_for('static', filename='js/plotly-latest.min.js') }}"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    var socket = io.connect('http://' + document.domain + ':' + location.port);

    socket.on('connect', function(data) {
        console.log('Initialazing plots...');
        makePlot("plot-az");
        makePlot("plot-el");
        makePlot("plot-saz");
        makePlot("plot-sel");
        makePlot("plot-tx");
        
    })

    socket.on('mqtt_message', function(data) {
      console.log(data.topic);
      var text = '(' + data['topic'] + ' qos: ' + data['qos'] + ') ' + data['payload'];
      $('#subscribe_messages').val(text);
      $('#radar_status').val(data.status);
      streamPlot("plot-az", data.timestamp, data.az );
      streamPlot("plot-el", data.timestamp, data.el );
      streamPlot("plot-saz", data.timestamp, data.saz );
      streamPlot("plot-sel", data.timestamp, data.sel );
    })
  });

  function makePlot(div){
    var plotDiv = document.getElementById(div);
    var traces = [{
        x: [],
        y: []
    }];
    var layout = {
        height: 350,
        font: {size: 12},
        margin: { t: 0 },
        xaxis: {
            type: 'date'
        },
        //yaxis: {
        //    range: [0, 110]
        //}
    };

    Plotly.plot(plotDiv, traces, layout);
  };

  function streamPlot(div, x, y ){
    var plotDiv = document.getElementById(div);
    if (plotDiv.data[0].x.length > 499){
        plotDiv.data[0].x = plotDiv.data[0].x.slice(-500)
        plotDiv.data[0].y = plotDiv.data[0].y.slice(-500)
    }
    var tm = x.map(i => new Date(i*1000));
    var values = y.map(i => Math.round(i * 100) / 100);
    var data_update = {x: [tm], y: [values]}
    //var windowDateObj = getWindow(x)
    //var layout_update = {xaxis: {
    //    range: [windowDateObj, x[x.length - 1]],
    //    rangeslider: {range: [plot_start, x[x.length - 1]]}
    //}};
    //Plotly.update(plotDiv, {}, layout_update)
    Plotly.extendTraces(plotDiv, data_update, [0])
};

</script>
{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <h1>SOPHy monitor</h1>
    </div>
  </div>
  <div class="row">
    <!--Messages-->
    <div class="col-xs-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Status</h3>
        </div>
        <div class="panel-body">
          <div class="col-xs-12">
            <div class="row">
              <div class="form-horizontal">
                <div class="form-group">
                    <div class="col-xs-12">
                      <label for="radar_status">Status</label>
                      <input id="radar_status" class="form-control" value="Not Running", disabled></input>
                    </div>
                  </div>
                <div class="form-group">
                  <div class="col-xs-12">
                    <label for="subscribe_messages">MQTT Message</label>
                    <textarea id="subscribe_messages" class="form-control" rows=8></textarea>
                  </div>
                </div>
              </div>
            </div>`
          </div>
        </div>
      </div>
    </div>
    <!--Azimuth-->
    <div class="col-xs-6">
        <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Pedestal Azimuth</h3>
            </div>
            <div class="panel-body">
              <div class="col-xs-12">
                <div class="row">
                  <div id="plot-az"></div>
                </div>
              </div>
            </div>
          </div>
    </div>
    <!--Elevation-->
    <div class="col-xs-6">
        <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Pedestal Elevation</h3>
            </div>
            <div class="panel-body">
              <div class="col-xs-12">
                <div class="row">
                  <div id="plot-el"></div>
                </div>
              </div>
            </div>
          </div>
    </div>
    <!--Azimuth Speed-->
    <div class="col-xs-6">
        <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Pedestal Azimuth Speed</h3>
            </div>
            <div class="panel-body">
              <div class="col-xs-12">
                <div class="row">
                  <div id="plot-saz"></div>
                </div>
              </div>
            </div>
          </div>
    </div>
    <!--Elevation Speed-->
    <div class="col-xs-6">
        <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Pedestal Elevation Speed</h3>
            </div>
            <div class="panel-body">
              <div class="col-xs-12">
                <div class="row">
                  <div id="plot-sel"></div>
                </div>
              </div>
            </div>
          </div>
    </div>
    <!--TX power-->
    <div class="col-xs-6">
        <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">SSPA's power</h3>
            </div>
            <div class="panel-body">
              <div class="col-xs-12">
                <div class="row">
                  <div id="plot-tx"></div>
                </div>
              </div>
            </div>
          </div>
    </div>
  </div>
</div>
{{debug}}
{% endblock %}