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