[Perl] DAQ system for the FAPG.
Update display of probe graphs.
Changed files
roles/dashboard/public/css/app.css
@@ -480,6 +480,22 @@
480
480
margin-top: 1rem;
481
481
}
482
482
483
Added:
.probes-grid {
484
Added:
display: grid;
485
Added:
grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
486
Added:
gap: 1rem;
487
Added:
}
488
Added:
489
Added:
.probes-timeframe-control {
490
Added:
display: flex;
491
Added:
justify-content: center;
492
Added:
margin-bottom: 1rem;
493
Added:
}
494
Added:
495
Added:
.probes-grid .card + .card {
496
Added:
margin-top: 0;
497
Added:
}
498
Added:
483
499
.tabs {
484
500
display: flex;
485
501
flex-wrap: wrap;
roles/dashboard/t/01-graph-page.t
@@ -52,6 +52,11 @@
52
52
->element_exists('canvas#chart-ph')
53
53
->element_exists('canvas#chart-do')
54
54
->element_exists('canvas#chart-orp')
55
Removed:
->element_exists('canvas#chart-ec');
55
Added:
->element_exists('canvas#chart-ec')
56
Added:
->element_exists('div.probes-grid')
57
Added:
->element_exists('div.probes-timeframe-control > div.timeframe-control')
58
Added:
->element_exists_not('div.card div.timeframe-control')
59
Added:
->element_exists_not('section.message-log')
60
Added:
->content_unlike(qr/Reading Messages/);
56
61
57
62
done_testing;
roles/dashboard/templates/dashboard/probes.html.ep
@@ -3,6 +3,16 @@
3
3
% layout 'default';
4
4
% title 'FAPG DAQ Probes';
5
5
6
Added:
<div class="probes-timeframe-control">
7
Added:
<div class="timeframe-control" role="group" aria-label="All probe chart timeframes">
8
Added:
<button class="timeframe-button" type="button" data-timeframe="hour">Hourly</button>
9
Added:
<button class="timeframe-button is-active" type="button" data-timeframe="day">Daily</button>
10
Added:
<button class="timeframe-button" type="button" data-timeframe="week">Weekly</button>
11
Added:
<button class="timeframe-button" type="button" data-timeframe="year">Yearly</button>
12
Added:
</div>
13
Added:
</div>
14
Added:
15
Added:
<div class="probes-grid">
6
16
% for my $probe ($probes->@*) {
7
17
<div class="card">
8
18
<div class="card-heading">
@@ -12,12 +22,6 @@
12
22
Unit:
13
23
<strong><%= $probe->{unit} %></strong>
14
24
</p>
15
Removed:
<div class="timeframe-control" role="group" aria-label="<%= $probe->{label} %> chart timeframe">
16
Removed:
<button class="timeframe-button" type="button" data-timeframe="hour">Hourly</button>
17
Removed:
<button class="timeframe-button is-active" type="button" data-timeframe="day">Daily</button>
18
Removed:
<button class="timeframe-button" type="button" data-timeframe="week">Weekly</button>
19
Removed:
<button class="timeframe-button" type="button" data-timeframe="year">Yearly</button>
20
Removed:
</div>
21
25
<label class="smoothing-control">
22
26
<input type="checkbox" data-smoothing-toggle checked>
23
27
<span>Smoothed</span>
@@ -35,31 +39,11 @@
35
39
Waiting for data…
36
40
</p>
37
41
38
Removed:
<section class="message-log" aria-label="Last ten reading messages for <%= $probe->{label} %>">
39
Removed:
<h2>Latest <%= $probe->{label} %> Reading Messages</h2>
40
Removed:
<div class="message-table-wrap">
41
Removed:
<table class="message-table">
42
Removed:
<thead>
43
Removed:
<tr>
44
Removed:
<th scope="col">Received</th>
45
Removed:
<th scope="col">Age</th>
46
Removed:
<th scope="col">Node</th>
47
Removed:
<th scope="col">Value</th>
48
Removed:
<th scope="col">Unit</th>
49
Removed:
</tr>
50
Removed:
</thead>
51
Removed:
<tbody data-reading-messages="<%= $probe->{key} %>">
52
Removed:
<tr>
53
Removed:
<td colspan="5">Waiting for messages</td>
54
Removed:
</tr>
55
Removed:
</tbody>
56
Removed:
</table>
57
Removed:
</div>
58
42
</section>
59
Removed:
</section>
60
43
</div>
61
44
</div>
62
45
% }
46
Added:
</div>
63
47
64
48
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
65
49
<script src="/js/dashboard.js"></script>