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

{% block sidebar_content %}
<h5>{{name}}</h5>
<nav class="nav flex-column">
{% for plot in plots %}
  <a class="nav-link" href="{% url 'url-plot' code plot.plot %}">{{plot.name}}</a>
{% endfor %}
</nav>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div id="loader" class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
<div id="plot" {%if meta.metadata.type == 'pcolor' %}class="row"{%endif%}>
  {% if image %}
  <img id="image" class="img-fluid"/>
  {% endif %}
</div>
{% endblock content %} 

{% block modal %}
<!-- Modal -->
{% if setup_form %}
<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>
{% endif %}
{% 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 + '/ws/realtime/{{code}}/{{plot}}/');
  {% else %}
  var socket = new WebSocket('ws://' + window.location.host + '/ws/database/{{code}}/{{plot}}/');
  {% endif %}
  socket.onopen = function open() {
    console.log('WebSockets connection created: ' + socket.url);
    socket.send('{{date}}')
  };

  socket.onmessage = function message(event) {
    var data = JSON.parse(event.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,
      });
    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 %}