##// END OF EJS Templates
realtime_web
RSS
New version with cards and status alerts
New version with cards and status alerts
Developer - - Load All Authors

File last commit:

r11:2395d68d2d5f
r11:2395d68d2d5f
Show More
base.html
176 lines | 7.3 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, initial-scale=1, shrink-to-fit=no">
<link href="{% static 'css/bootstrap-datetimepicker.min.css' %}" media="screen" rel="stylesheet">
<!-- Bootstrap CSS -->
<!--<link rel="stylesheet" href="static/css/bootstrap.min.css">-->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
{%block extra-header%}{%endblock%}
<title>Realtime plots at JRO</title>
</head>
<body>
<!-- This part is used to show just the title of my web page -->
<section class="container-fluid d-flex align-items-end justify-content-center text-white bg-info">
<h1 class="display-4">Real time Plots</h1>
</section>
<!-- menu -->
<nav class="navbar navbar-dark bg-info navbar-expand-lg">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="{% url 'url_main' %}">
<img src="{% static 'images/usuario2.png' %}" width="50" height="50" class="d-inline-block align-top" alt="Logo Bootstrap">
JRO
</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<div class="navbar-nav mr-auto ml-auto text-center">
<a class="nav-item nav-link active" href="{% url 'url_main' %}"><img src="{% static 'images/nosotros2.png' %}" width="50" height="50" class="d-inline-block align-top" alt="Logo Bootstrap">About us</a>
<a class="nav-item nav-link" href="{% url 'url_main' %}"><img src="{% static 'images/panel.png' %}" width="50" height="50" class="d-inline-block align-top" alt="Logo Bootstrap">Control Panel</a>
<a class="nav-item nav-link" href="{% url 'url_main' %}"><img src="{% static 'images/guardar.png' %}" width="50" height="50" class="d-inline-block align-top" alt="Logo Bootstrap">Save</a>
<a class="nav-item nav-link" href="{% url 'url_main' %}"><img src="{% static 'images/configuracion.png' %}" width="50" height="50" class="d-inline-block align-top" alt="Logo Bootstrap">Settings</a>
</div>
<div class="d-flex flex-row justify-content-center text-white">
</div>
</div>
</nav>
<!-- menu end -->
<div id="loader" class="loader mt-5 px-5 py-2 bg-negro"></div>
<!-- <div id="cards">-->
<!-- Here we put the content depending which url the view.py program command us -->
{% block content %}{% endblock content %}
<!-- This part put block modal which is used to change parameters of my plot -->
{% block modal %}{% endblock modal %}
<!-- </div>-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<!-- script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script-->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<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">
{% if code and plot %}
$("#loader").css("display", "block");
var socket = new WebSocket('ws://' + window.location.host + '/{{code}}/{{plot}}/?' + 'pk={{id}}');
socket.onopen = function open() {
console.log('WebSockets connection created.');
socket.send('{"date": "{{date}}" }');
};
socket.onmessage = function message(event) {
var data = JSON.parse(event.data);
console.log(data.time);
if (data.interval == 0) {
$("#loader").removeClass("loader").ad100/noise/index.htmldClass("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();
}
{% else %}
$("#loader").css("display", "none");
/* This part create a new socket named "socket_main" to comunicate
if there is new data we could be able to change some attributes of a class*/
var socket_main = new WebSocket('ws://' + window.location.host +'/9999/main/');
socket_main.onopen = function open() {
console.log('Main WebSockets connection created.');
};
/*Here we get 3 attributes from data:
- code (from the experiment)
- value (this we are going to change and show: online, delasyed o offline)
- time
*/
socket_main.onmessage = function message(event) {
var data = JSON.parse(event.data);
console.log(data);
code = data.code;
value = data.value;
time = moment(new Date(data.time*1000)).format('MMMM Do YYYY, h:mm:ss a');
/*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*/
if (value == "Online"){
$("#alert_"+code).text(value);
/*$("#alert_"+code).removeClass();
$("#alert_"+code).addClass("alertas-online");*/
$("#dato_"+code).text("Last data: "+time);
$("#card_"+code).removeClass();
$("#card_"+code).addClass("card-online text-white text-justify border-info {{exp.bgcolor}}");
/*$("#cartotas").load("home.html");*/
}
/*This conditional ask if value(send by server) is delayed, and if it is then
change value to delayed in div with id="#alert_"+code*/
if (value == "Delayed"){
$("#alert_"+code).text(value);
/*$("#alert_"+code).removeClass();
$("#alert_"+code).addClass("alertas-delayed");*/
$("#dato_"+code).text("Last data: "+time);
$("#card_"+code).removeClass();
$("#card_"+code).addClass("card-delayed text-white text-justify border-info {{exp.bgcolor}}");
/*$("#cartotas").load("home.html");*/
}
/*This conditional ask if value(send by server) is offline, and if it is then
change value to offline in div with id="#alert_"+code*/
if (value == "Offline"){
$("#alert_"+code).text(value);
/*$("#alert_"+code).removeClass();
$("#alert_"+code).addClass("alertas-offline");*/
$("#dato_"+code).text("Last data: "+time);
$("#card_"+code).removeClass();
$("#card_"+code).addClass("card-offline text-white text-justify border-info {{exp.bgcolor}}");
/*$("#cartotas").load("home.html");*/
}
};
if (socket_main.readyState == WebSocket.OPEN) {
socket_main.onopen();
};
{% endif %}
</script>
<!-- Here we put the script from the type of plot that we recibe -->
{% block script %}{% endblock script %}
</body>
</html>