##// END OF EJS Templates
realtime_web
RSS
Remove test button
Juan C. Espinoza -
r40:be0b5b84adad
parent child
Show More
Show file before | Show file after | Hide comments
@@ -1,80 +1,79
1 {% extends 'base.html' %}
1 {% extends 'base.html' %}
2 {% load static%}
2 {% load static%}
3 {% block extra-header %}
3 {% block extra-header %}
4 {% endblock %}
4 {% endblock %}
5 {% block sidebar_content %}
5 {% block sidebar_content %}
6 <nav class="nav flex-column">
6 <nav class="nav flex-column">
7 {% for tag in tags %}
7 {% for tag in tags %}
8 <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>
8 <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>
9 {% endfor %}
9 {% endfor %}
10 </nav>
10 </nav>
11 {% endblock %}
11 {% endblock %}
12 {% block content %}
12 {% block content %}
13 <div class="row">
13 <div class="row">
14 {% for exp in experiments %}
14 {% for exp in experiments %}
15 <div class="col-12 col-sm-6 col-md-4 col-lg-3 p-1">
15 <div class="col-12 col-sm-6 col-md-4 col-lg-3 p-1">
16 <div id="card_{{exp.code}}" class="card m-1 box-shadow text-{{exp.style}} border-{{exp.style}}">
16 <div id="card_{{exp.code}}" class="card m-1 box-shadow text-{{exp.style}} border-{{exp.style}}">
17 <div id="card_header_{{exp.code}}" class="card-header bg-{{exp.style}} text-white">{{exp.name}}</div>
17 <div id="card_header_{{exp.code}}" class="card-header bg-{{exp.style}} text-white">{{exp.name}}</div>
18 <div id="card_body_{{exp.code}}" class="card-body">
18 <div id="card_body_{{exp.code}}" class="card-body">
19 <div id="date_{{exp.code}}">Last data: {{exp.date | date:"H:i:s" }}</div>
19 <div id="date_{{exp.code}}">Last data: {{exp.date | date:"H:i:s" }}</div>
20 {% for plot in exp.plots %}
20 {% for plot in exp.plots %}
21 <a class="btn btn-outline-{{exp.style}} mt-1" href="{% url 'url-plot' exp.code plot.plot %}" role="button">{{plot.name}}</a>
21 <a class="btn btn-outline-{{exp.style}} mt-1" href="{% url 'url-plot' exp.code plot.plot %}" role="button">{{plot.name}}</a>
22 {% endfor %}
22 {% endfor %}
23 <a class="btn btn-outline-{{exp.style}} mt-1" role="button">Hola</a>
24 </div>
23 </div>
25 </div>
24 </div>
26 </div>
25 </div>
27 {% endfor %}
26 {% endfor %}
28 </div>
27 </div>
29 {% if experiments %}
28 {% if experiments %}
30 <div class="row">
29 <div class="row">
31 <ul class="legend">
30 <ul class="legend">
32 <li>Time format: 24h (UTC-5)</li>
31 <li>Time format: 24h (UTC-5)</li>
33 <li><i class="fas fa-circle text-success"></i><span>Instrument online</span></li>
32 <li><i class="fas fa-circle text-success"></i><span>Instrument online</span></li>
34 <li><i class="fas fa-circle text-warning"></i><span>Instrument delayed</span></li>
33 <li><i class="fas fa-circle text-warning"></i><span>Instrument delayed</span></li>
35 <li><i class="fas fa-circle text-danger"></i><span>Instrument offline</span></li>
34 <li><i class="fas fa-circle text-danger"></i><span>Instrument offline</span></li>
36 </ul>
35 </ul>
37 </div>
36 </div>
38 {% endif %}
37 {% endif %}
39 {% endblock %}
38 {% endblock %}
40 {% block script %}
39 {% block script %}
41 <script>
40 <script>
42 function pad(num) {
41 function pad(num) {
43 return ("0"+num).slice(-2);
42 return ("0"+num).slice(-2);
44 }
43 }
45 function hhmmss(secs) {
44 function hhmmss(secs) {
46 var minutes = Math.floor(secs / 60);
45 var minutes = Math.floor(secs / 60);
47 secs = secs%60;
46 secs = secs%60;
48 var hours = Math.floor(minutes/60)
47 var hours = Math.floor(minutes/60)
49 minutes = minutes%60;
48 minutes = minutes%60;
50 return pad(hours)+":"+pad(minutes)+":"+pad(secs);
49 return pad(hours)+":"+pad(minutes)+":"+pad(secs);
51 }
50 }
52 /* This part create a new socket named "socket" to comunicate
51 /* This part create a new socket named "socket" to comunicate
53 if there is new data we could be able to change some attributes of a class*/
52 if there is new data we could be able to change some attributes of a class*/
54 var socket = new WebSocket('ws://' + window.location.host +'/ws/main/');
53 var socket = new WebSocket('ws://' + window.location.host +'/ws/main/');
55 socket.onopen = function open() {
54 socket.onopen = function open() {
56 console.log('Main WebSockets connection created.');
55 console.log('Main WebSockets connection created.');
57 };
56 };
58
57
59 socket.onmessage = function(event) {
58 socket.onmessage = function(event) {
60 var data = JSON.parse(event.data);
59 var data = JSON.parse(event.data);
61 // console.log(data);
60 // console.log(data);
62 var code = data['code'];
61 var code = data['code'];
63 console.log(code);
62 console.log(code);
64 var value = data['value'];
63 var value = data['value'];
65 var time = moment(new Date(data['time']*1000)).format('HH:mm:ss');
64 var time = moment(new Date(data['time']*1000)).format('HH:mm:ss');
66
65
67 /*This conditional ask if value(send by server) is online, and if it is then
66 /*This conditional ask if value(send by server) is online, and if it is then
68 change value to online in div with id="#alert_"+code*/
67 change value to online in div with id="#alert_"+code*/
69
68
70 $("#date_"+code).text("Last data: "+time);
69 $("#date_"+code).text("Last data: "+time);
71 $("#card_"+code).removeClass().addClass("card m-1 box-shadow text-"+value+" border-"+value);
70 $("#card_"+code).removeClass().addClass("card m-1 box-shadow text-"+value+" border-"+value);
72 $("#card_header_"+code).removeClass().addClass("card-header text-white bg-"+value);
71 $("#card_header_"+code).removeClass().addClass("card-header text-white bg-"+value);
73 $("#card_body_"+code).find("a").removeClass().addClass("btn mt-1 btn-outline-"+value);
72 $("#card_body_"+code).find("a").removeClass().addClass("btn mt-1 btn-outline-"+value);
74 };
73 };
75
74
76 if (socket.readyState == WebSocket.OPEN) {
75 if (socket.readyState == WebSocket.OPEN) {
77 socket.onopen();
76 socket.onopen();
78 };
77 };
79 </script>
78 </script>
80 {% endblock script %}
79 {% endblock script %}
General Comments 0
You need to be logged in to leave comments. Login now