{% extends 'base.html' %} {% load static %} {% load bootstrap4 %} {% block content %}

<div class="p-4 text-igp">
  <h3>{{title}} <small> {{subtitle}}</small></h3>
</div>
<div class="row justify-content-center">
  <div id="loader" class="loader mt-5"></div>
</div>
<div id="plot" {%if plot == 'spc' %}class="row"{%endif%}></div>

{% endblock content %} {% block modal %}
<!-- Modal -->
<div class="modal fade" id="setup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Setup plot</h4>
      </div>
      <div class="modal-body">
        {% if code and plot %}
        <form id="form_setup">
          {% bootstrap_form setup_form layout='grid' size='small' %}
        </form>
        {% endif %}
      </div>
      <div class="modal-footer">
        <button id="bt_update" type="button" class="btn btn-primary">Update</button>
      </div>
    </div>
  </div>
</div>
{% endblock modal%} {% block script %}
<script src="{% static 'js/jroplots.js' %}"></script>
<script>
  /* This conditional is used to know if we have to setup the data
   or just update the last data*/
  $("#loader").css("display", "block");
  {% if realtime %}
  var socket = new WebSocket('ws://' + window.location.host + '/realtime/{{code}}/{{plot}}/');
  {% else %}
  var socket = new WebSocket('ws://' + window.location.host + '/{{id}}/{{code}}/{{plot}}/');
  {% endif %}
  socket.onopen = function open() {
    console.log('WebSockets connection created: ' + socket.url);
    socket.send('{"date": "{{date}}"}')
  };

  socket.onmessage = function message(event) {
    var data = JSON.parse(event.data);
    console.log(data);
    if (data.interval == 0) {
      $("#loader").removeClass("loader").addClass("no-data");
      $("#loader").html("No data found");
    } else {
      var first = plot(data);
      if (first == true) {
        $("#loader").css("display", "none");
      }
    }
  }

  if (socket.readyState == WebSocket.OPEN) {
    socket.onopen();
  }

  let flag = true;
  function plot(data) {
    if (flag === true) {
      flag = false;
      plt = new {{ fn_plot }} ({
        div: 'plot',
        data: data,
        key: '{{plot}}',
        props: { throttle: 30, timespan: 12, colormap: 'Jet' },
      });
    return true;
  } else {
    plt.update(data);
    return false;
  }
  }
  /*It is the button to make changes in my plot parameters defined in block modal*/
  $("#bt_update").click(function () {
    $("#setup").modal('hide');
    var values = $("#form_setup").serializeArray();
    plt.restyle(values);
  });

</script> {% endblock script %}