##// END OF EJS Templates
realtime_web
RSS
Docker working
Docker working
jespinoza - - Load All Authors

File last commit:

r0:476448e11002
r1:f2324aa7e45d
Show More
base.html
111 lines | 3.7 KiB | text/html | HtmlDjangoLexer
/ plotter / templates / base.html
History | Annotation | Raw |Copy content |Copy permalink
{% 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>