[Perl] DAQ system for the FAPG.
refactor share probe cards
Changed files
roles/dashboard/public/css/app.css
@@ -589,6 +589,16 @@
589
589
font-size: 1.35rem;
590
590
}
591
591
592
Added:
.card-heading h1 a {
593
Added:
color: inherit;
594
Added:
text-decoration: none;
595
Added:
}
596
Added:
597
Added:
.card-heading h1 a:hover {
598
Added:
color: var(--accent);
599
Added:
text-decoration: underline;
600
Added:
}
601
Added:
592
602
.card-heading p {
593
603
margin: 0;
594
604
color: var(--muted);
roles/dashboard/t/01-graph-page.t
@@ -27,6 +27,7 @@
27
27
'footer.site-footer a[href="https://www.lafermeaquaponique.com/"]')
28
28
->element_exists('div.card > div.card-heading')
29
29
->element_exists('div.card > div.card-body')
30
Added:
->text_is('div.card h1 a[href="/probes/ph"]', 'pH')
30
31
->element_exists('section#probe-ph[data-panel="ph"]')
31
32
->element_exists('canvas#chart-ph')
32
33
->element_exists_not('section#probe-do[data-panel="do"]')
@@ -40,7 +41,9 @@
40
41
->element_exists('[data-timeframe-adjustment="decrease"][data-timeframe="week"]')
41
42
->element_exists('[data-timeframe-adjustment="increase"][data-timeframe="week"]')
42
43
->content_like(qr/data-smoothing-toggle checked/)
43
Removed:
->content_like(qr/Latest pH Reading Messages/);
44
Added:
->content_like(qr/Latest pH Reading Messages/)
45
Added:
->element_exists('section.card.message-log > div.card-heading')
46
Added:
->element_exists('section.card.message-log > div.card-body');
44
47
45
48
$t->get_ok('/probes/unknown')->status_is(404);
46
49
@@ -48,9 +51,12 @@
48
51
49
52
$t->get_ok('/probes')
50
53
->status_is(200)
51
Removed:
->text_is('h1', 'pH')
52
54
->element_exists('div.card > div.card-heading')
53
55
->element_exists('div.card > div.card-body')
56
Added:
->text_is('h1 a[href="/probes/ph"]', 'pH')
57
Added:
->text_is('h1 a[href="/probes/do"]', 'Dissolved Oxygen')
58
Added:
->text_is('h1 a[href="/probes/orp"]', 'ORP')
59
Added:
->text_is('h1 a[href="/probes/ec"]', 'Electrical Conductivity')
54
60
->element_exists('section#probe-ph[data-panel="ph"]')
55
61
->element_exists('section#probe-do[data-panel="do"]')
56
62
->element_exists('section#probe-orp[data-panel="orp"]')
roles/dashboard/templates/dashboard/graph.html.ep
@@ -3,52 +3,35 @@
3
3
% layout 'default';
4
4
% title "FAPG DAQ $probe->{label}";
5
5
6
Removed:
<div class="card">
6
Added:
%= include 'dashboard/graph-control', aria_label => "$probe->{label} chart timeframe"
7
Added:
8
Added:
%= include 'dashboard/probe-card', probe => $probe
9
Added:
10
Added:
<section class="card message-log" aria-label="Last ten reading messages for <%= $probe->{label} %>">
7
11
<div class="card-heading">
8
Removed:
<h1><%= $probe->{label} %></h1>
9
Removed:
<div class="panel-tools">
10
Removed:
<p>
11
Removed:
Unit:
12
Removed:
<strong><%= $probe->{unit} %></strong>
13
Removed:
</p>
14
Removed:
%= include 'dashboard/graph-control', aria_label => "$probe->{label} chart timeframe"
15
Removed:
</div>
12
Added:
<h2>Latest Readings</h2>
16
13
</div>
17
14
<div class="card-body">
18
Removed:
<section id="probe-<%= $probe->{key} %>" class="tab-panel is-active" data-panel="<%= $probe->{key} %>">
19
Removed:
20
Removed:
<div class="chart-wrap">
21
Removed:
<canvas id="chart-<%= $probe->{key} %>"></canvas>
15
Added:
<div class="message-table-wrap">
16
Added:
<table class="message-table">
17
Added:
<thead>
18
Added:
<tr>
19
Added:
<th scope="col">Received</th>
20
Added:
<th scope="col">Age</th>
21
Added:
<th scope="col">Node</th>
22
Added:
<th scope="col">Value</th>
23
Added:
<th scope="col">Unit</th>
24
Added:
</tr>
25
Added:
</thead>
26
Added:
<tbody data-reading-messages="<%= $probe->{key} %>">
27
Added:
<tr>
28
Added:
<td colspan="5">Waiting for messages</td>
29
Added:
</tr>
30
Added:
</tbody>
31
Added:
</table>
22
32
</div>
23
Removed:
24
Removed:
<p class="reading-status" data-status="<%= $probe->{key} %>">
25
Removed:
Waiting for data…
26
Removed:
</p>
27
Removed:
28
Removed:
<section class="message-log" aria-label="Last ten reading messages for <%= $probe->{label} %>">
29
Removed:
<h2>Latest <%= $probe->{label} %> Reading Messages</h2>
30
Removed:
<div class="message-table-wrap">
31
Removed:
<table class="message-table">
32
Removed:
<thead>
33
Removed:
<tr>
34
Removed:
<th scope="col">Received</th>
35
Removed:
<th scope="col">Age</th>
36
Removed:
<th scope="col">Node</th>
37
Removed:
<th scope="col">Value</th>
38
Removed:
<th scope="col">Unit</th>
39
Removed:
</tr>
40
Removed:
</thead>
41
Removed:
<tbody data-reading-messages="<%= $probe->{key} %>">
42
Removed:
<tr>
43
Removed:
<td colspan="5">Waiting for messages</td>
44
Removed:
</tr>
45
Removed:
</tbody>
46
Removed:
</table>
47
Removed:
</div>
48
Removed:
</section>
49
Removed:
</section>
50
33
</div>
51
Removed:
</div>
34
Added:
</section>
52
35
53
36
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
54
37
<script src="/js/dashboard.js"></script>
roles/dashboard/templates/dashboard/probe-card.html.ep
@@ -0,0 +1,24 @@
1
Added:
<!-- -*- mode: web; -*- -->
2
Added:
3
Added:
<div class="card">
4
Added:
<div class="card-heading">
5
Added:
<h1><a href="/probes/<%= $probe->{key} %>"><%= $probe->{label} %></a></h1>
6
Added:
<div class="panel-tools">
7
Added:
<p>
8
Added:
Unit:
9
Added:
<strong><%= $probe->{unit} %></strong>
10
Added:
</p>
11
Added:
</div>
12
Added:
</div>
13
Added:
<div class="card-body">
14
Added:
<section id="probe-<%= $probe->{key} %>" class="tab-panel is-active" data-panel="<%= $probe->{key} %>">
15
Added:
<div class="chart-wrap">
16
Added:
<canvas id="chart-<%= $probe->{key} %>"></canvas>
17
Added:
</div>
18
Added:
19
Added:
<p class="reading-status" data-status="<%= $probe->{key} %>">
20
Added:
Waiting for data…
21
Added:
</p>
22
Added:
</section>
23
Added:
</div>
24
Added:
</div>
roles/dashboard/templates/dashboard/probes.html.ep
@@ -7,30 +7,7 @@
7
7
8
8
<div class="probes-grid">
9
9
% for my $probe ($probes->@*) {
10
Removed:
<div class="card">
11
Removed:
<div class="card-heading">
12
Removed:
<h1><%= $probe->{label} %></h1>
13
Removed:
<div class="panel-tools">
14
Removed:
<p>
15
Removed:
Unit:
16
Removed:
<strong><%= $probe->{unit} %></strong>
17
Removed:
</p>
18
Removed:
</div>
19
Removed:
</div>
20
Removed:
<div class="card-body">
21
Removed:
<section id="probe-<%= $probe->{key} %>" class="tab-panel is-active" data-panel="<%= $probe->{key} %>">
22
Removed:
23
Removed:
<div class="chart-wrap">
24
Removed:
<canvas id="chart-<%= $probe->{key} %>"></canvas>
25
Removed:
</div>
26
Removed:
27
Removed:
<p class="reading-status" data-status="<%= $probe->{key} %>">
28
Removed:
Waiting for data…
29
Removed:
</p>
30
Removed:
31
Removed:
</section>
32
Removed:
</div>
33
Removed:
</div>
10
Added:
%= include 'dashboard/probe-card', probe => $probe
34
11
% }
35
12
</div>
36
13