plot.html
91 lines
| 2.8 KiB
| text/html
|
HtmlDjangoLexer
Juan C. Espinoza
|
r21 | {% 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">×</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 %} |