##// END OF EJS Templates
realtime_web
RSS
Better navigation, sidebar, update jroplots #TODO OverJRO
Better navigation, sidebar, update jroplots #TODO OverJRO
Juan C. Espinoza - - Load All Authors

File last commit:

r39:b80dda8fb07c
r39:b80dda8fb07c
Show More
home.html
80 lines | 3.0 KiB | text/html | HtmlDjangoLexer
/ plotter / templates / home.html
History | Annotation | Raw |Copy content |Copy permalink
{% extends 'base.html' %}
{% load static%}
{% block extra-header %}
{% endblock %}
{% block sidebar_content %}
<nav class="nav flex-column">
{% for tag in tags %}
<a class="nav-link {{tag.active}}" href="{% url 'url_main' tag.name %}">{{tag.name | title}} &nbsp; <span class="badge badge-primary text-left">{{tag.n | stringformat:"02d"}} </span></a>
{% endfor %}
</nav>
{% endblock %}
{% block content %}
<div class="row">
{% for exp in experiments %}
<div class="col-12 col-sm-6 col-md-4 col-lg-3 p-1">
<div id="card_{{exp.code}}" class="card m-1 box-shadow text-{{exp.style}} border-{{exp.style}}">
<div id="card_header_{{exp.code}}" class="card-header bg-{{exp.style}} text-white">{{exp.name}}</div>
<div id="card_body_{{exp.code}}" class="card-body">
<div id="date_{{exp.code}}">Last data: {{exp.date | date:"H:i:s" }}</div>
{% for plot in exp.plots %}
<a class="btn btn-outline-{{exp.style}} mt-1" href="{% url 'url-plot' exp.code plot.plot %}" role="button">{{plot.name}}</a>
{% endfor %}
<a class="btn btn-outline-{{exp.style}} mt-1" role="button">Hola</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% if experiments %}
<div class="row">
<ul class="legend">
<li>Time format: 24h (UTC-5)</li>
<li><i class="fas fa-circle text-success"></i><span>Instrument online</span></li>
<li><i class="fas fa-circle text-warning"></i><span>Instrument delayed</span></li>
<li><i class="fas fa-circle text-danger"></i><span>Instrument offline</span></li>
</ul>
</div>
{% endif %}
{% endblock %}
{% block script %}
<script>
function pad(num) {
return ("0"+num).slice(-2);
}
function hhmmss(secs) {
var minutes = Math.floor(secs / 60);
secs = secs%60;
var hours = Math.floor(minutes/60)
minutes = minutes%60;
return pad(hours)+":"+pad(minutes)+":"+pad(secs);
}
/* This part create a new socket named "socket" to comunicate
if there is new data we could be able to change some attributes of a class*/
var socket = new WebSocket('ws://' + window.location.host +'/ws/main/');
socket.onopen = function open() {
console.log('Main WebSockets connection created.');
};
socket.onmessage = function(event) {
var data = JSON.parse(event.data);
// console.log(data);
var code = data['code'];
console.log(code);
var value = data['value'];
var time = moment(new Date(data['time']*1000)).format('HH:mm:ss');
/*This conditional ask if value(send by server) is online, and if it is then
change value to online in div with id="#alert_"+code*/
$("#date_"+code).text("Last data: "+time);
$("#card_"+code).removeClass().addClass("card m-1 box-shadow text-"+value+" border-"+value);
$("#card_header_"+code).removeClass().addClass("card-header text-white bg-"+value);
$("#card_body_"+code).find("a").removeClass().addClass("btn mt-1 btn-outline-"+value);
};
if (socket.readyState == WebSocket.OPEN) {
socket.onopen();
};
</script>
{% endblock script %}