base.html
111 lines
| 3.7 KiB
| text/html
|
HtmlDjangoLexer
| r0 | {% load static %} {% load bootstrap3 %} | ||
| <!doctype html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |||
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> | |||
| <link href="{% static 'css/bootstrap-datetimepicker.min.css' %}" media="screen" rel="stylesheet"> | |||
| <script src="{% static 'js/jquery.min.js' %}"></script> | |||
| <style> | |||
| /* Paste this css to your style sheet file or under head tag */ | |||
| /* This only works with JavaScript, | |||
| if it's not present, don't show loader */ | |||
| .loader { | |||
| width: 100%; | |||
| height: 10px; | |||
| position: relative; | |||
| z-index: 9999; | |||
| background: url("{% static 'images/loader.gif' %}") center no-repeat #fff; | |||
| } | |||
| .no-data { | |||
| text-align: center; | |||
| background-color: #d58512; | |||
| padding: 8px 16px; | |||
| border-radius: 5px; | |||
| color: #FEFEFE; | |||
| font: 20px 'Helvetica'; | |||
| text-transform: uppercase; | |||
| } | |||
| </style> | |||
| <title>Realtime plots at JRO</title> | |||
| </head> | |||
| <body> | |||
| <div class="container"> | |||
| <div id="page" class="row" style="min-height:600px"> | |||
| {% bootstrap_messages %} | |||
| <div class="page-header"> | |||
| <h1>{% block content-title %}Realtime{% endblock %} | |||
| <small>{% block content-suptitle %}Plots{% endblock %}</small> | |||
| </h1> | |||
| </div> | |||
| <div class="col-md-3 hidden-xs hidden-sm" role="complementary"> | |||
| <div id="sidebar"> | |||
| {% if form.is_multipart %} | |||
| <form class="form" enctype="multipart/form-data" method="post" action="{{action}}"> | |||
| {% else %} | |||
| <form class="form" method="post" action="{{action}}"> | |||
| {% endif %} {% csrf_token %} {% bootstrap_form form layout='inline' size='medium' %} | |||
| <div style="clear: both;"></div> | |||
| <br> | |||
| <div class="pull-left"> | |||
| <button type="button" id="bt_show" class="btn btn-primary">Show</button> | |||
| </div> | |||
| </form> | |||
| </div> | |||
| </div> | |||
| <div class="col-md-9 col-xs-12" role="main"> | |||
| <div id="loader" class="loader"></div> | |||
| {% block content %} {% endblock %} | |||
| </div> | |||
| </div> | |||
| <!--/row--> | |||
| </div> | |||
| <script src="{% static 'js/plotly-latest.min.js' %}"></script> | |||
| <script src="{% static 'js/moment.min.js' %}"></script> | |||
| <script src="{% static 'js/bootstrap-datetimepicker.min.js' %}"></script> | |||
| <script src="{% static 'js/jroplots.js' %}"></script> | |||
| <script type="text/javascript"> | |||
| $('#id_date').datetimepicker({ | |||
| pickTime: false, | |||
| format: 'DD/MM/YYYY', | |||
| }); | |||
| $("#bt_show").click(function () { | |||
| document.location = '/' + $("#id_experiment").val() + '/' + $("#id_plot").val() + '/?date=' + $("#id_date").val(); | |||
| }); | |||
| var socket = new WebSocket('ws://' + window.location.host + '/{{code}}/{{plot}}/'); | |||
| socket.onopen = function open() { | |||
| console.log('WebSockets connection created.'); | |||
| {% if date %} | |||
| socket.send('{"date": "{{date}}" }'); | |||
| {% else %} | |||
| socket.send('{"date": "{% now "d/m/Y" %}" }'); | |||
| {% endif %} | |||
| }; | |||
| 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(); | |||
| } | |||
| </script> {% block script %}{% endblock script %} | |||
| </body> | |||
| </html> |
