[Perl] DAQ system for the FAPG.

feat share graph controls

Commit
07293b93d3a7ceb670d85d597fc6126f2d8e0d16
Author
Codex <codex@openai.com>
Author date
Committer
Codex <codex@openai.com>
Committer date
Changed files
roles/dashboard/public/css/app.css
index d1dcde3f..d60e201e 100644..100644
@@ -486,27 +486,30 @@
486 486 gap: 1rem;
487 487 }
488 488
489 Removed: .probes-timeframe-control {
489 Added: .graph-control {
490 490 display: flex;
491 Added: flex-wrap: wrap;
491 492 justify-content: center;
493 Added: align-items: center;
494 Added: gap: 0.75rem;
492 495 margin-bottom: 1rem;
493 496 }
494 497
495 Removed: .probes-timeframe-control .timeframe-option {
498 Added: .graph-control .timeframe-option {
496 499 display: flex;
497 500 min-width: 4.75rem;
498 501 }
499 502
500 Removed: .probes-timeframe-control .timeframe-option + .timeframe-option {
503 Added: .graph-control .timeframe-option + .timeframe-option {
501 504 border-left: 1px solid var(--border);
502 505 }
503 506
504 Removed: .probes-timeframe-control .timeframe-button {
507 Added: .graph-control .timeframe-button {
505 508 width: 100%;
506 509 border-left: 0;
507 510 }
508 511
509 Removed: .probes-timeframe-control .timeframe-option.is-expanded {
512 Added: .graph-control .timeframe-option.is-expanded {
510 513 min-width: 12rem;
511 514 }
512 515
@@ -880,15 +883,11 @@
880 883 border-radius: 0.5rem;
881 884 }
882 885
883 Removed: .probes-timeframe-control {
884 Removed: display: block;
885 Removed: }
886 Removed:
887 Removed: .probes-timeframe-control .timeframe-option {
886 Added: .graph-control .timeframe-option {
888 887 min-width: 0;
889 888 }
890 889
891 Removed: .probes-timeframe-control .timeframe-option.is-expanded {
890 Added: .graph-control .timeframe-option.is-expanded {
892 891 grid-column: span 2;
893 892 min-width: 0;
894 893 }
@@ -897,12 +896,12 @@
897 896 border-top: 1px solid var(--border);
898 897 }
899 898
900 Removed: .timeframe-button:nth-child(1),
901 Removed: .timeframe-button:nth-child(2) {
899 Added: .timeframe-option:nth-child(1) .timeframe-button,
900 Added: .timeframe-option:nth-child(2) .timeframe-button {
902 901 border-top: 0;
903 902 }
904 903
905 Removed: .timeframe-button:nth-child(odd) {
904 Added: .timeframe-option:nth-child(odd) .timeframe-button {
906 905 border-left: 0;
907 906 }
908 907
roles/dashboard/public/js/dashboard.js
index 29765ae8..5f3d803a 100644..100644
@@ -759,7 +759,13 @@
759 759 }
760 760
761 761 function setTimeframe(timeframe, expand = false) {
762 Removed: activeTimeframe = TIMEFRAMES[timeframe] ? timeframe : DEFAULT_TIMEFRAME;
762 Added: const selected = TIMEFRAMES[timeframe] ? timeframe : DEFAULT_TIMEFRAME;
763 Added:
764 Added: if (selected === activeTimeframe) {
765 Added: timeframeRanges[selected] = 1;
766 Added: }
767 Added:
768 Added: activeTimeframe = selected;
763 769 expandedTimeframe = expand ? activeTimeframe : null;
764 770
765 771 document.querySelectorAll(".timeframe-button").forEach(button => {
roles/dashboard/t/01-graph-page.t
index 274b76c0..284cb8a0 100644..100644
@@ -35,6 +35,10 @@
35 35 ->content_like(qr/Daily/)
36 36 ->content_like(qr/Weekly/)
37 37 ->content_like(qr/Yearly/)
38 Added: ->element_exists('div.graph-control > div.timeframe-control')
39 Added: ->element_exists('[data-timeframe-option="week"]')
40 Added: ->element_exists('[data-timeframe-adjustment="decrease"][data-timeframe="week"]')
41 Added: ->element_exists('[data-timeframe-adjustment="increase"][data-timeframe="week"]')
38 42 ->content_like(qr/data-smoothing-toggle checked/)
39 43 ->content_like(qr/Latest pH Reading Messages/);
40 44
@@ -56,7 +60,7 @@
56 60 ->element_exists('canvas#chart-orp')
57 61 ->element_exists('canvas#chart-ec')
58 62 ->element_exists('div.probes-grid')
59 Removed: ->element_exists('div.probes-timeframe-control > div.timeframe-control')
63 Added: ->element_exists('div.graph-control > div.timeframe-control')
60 64 ->element_exists_not('div.card div.timeframe-control')
61 65 ->element_exists('[data-timeframe-option="week"]')
62 66 ->element_exists('[data-timeframe-adjustment="decrease"][data-timeframe="week"]')
roles/dashboard/templates/dashboard/graph-control.html.ep
index 00000000..28fd6ffd 000000..100644
@@ -0,0 +1,31 @@
1 Added: <!-- -*- mode: web; -*- -->
2 Added:
3 Added: <div class="graph-control">
4 Added: <div class="timeframe-control" role="group" aria-label="<%= $aria_label %>">
5 Added: % for my $timeframe ( [ hour => 'Hourly' ], [ day => 'Daily' ], [ week => 'Weekly' ], [ year => 'Yearly' ] ) {
6 Added: <div class="timeframe-option" data-timeframe-option="<%= $timeframe->[0] %>">
7 Added: <button
8 Added: class="timeframe-adjustment"
9 Added: type="button"
10 Added: data-timeframe-adjustment="decrease"
11 Added: data-timeframe="<%= $timeframe->[0] %>"
12 Added: aria-label="Decrease <%= $timeframe->[0] %> range">−</button>
13 Added: <button
14 Added: class="timeframe-button<%= $timeframe->[0] eq 'day' ? ' is-active' : '' %>"
15 Added: type="button"
16 Added: data-timeframe="<%= $timeframe->[0] %>"
17 Added: data-timeframe-label="<%= $timeframe->[1] %>"><%= $timeframe->[1] %></button>
18 Added: <button
19 Added: class="timeframe-adjustment"
20 Added: type="button"
21 Added: data-timeframe-adjustment="increase"
22 Added: data-timeframe="<%= $timeframe->[0] %>"
23 Added: aria-label="Increase <%= $timeframe->[0] %> range">+</button>
24 Added: </div>
25 Added: % }
26 Added: </div>
27 Added: <label class="smoothing-control">
28 Added: <input type="checkbox" data-smoothing-toggle checked>
29 Added: <span>Smoothed</span>
30 Added: </label>
31 Added: </div>
roles/dashboard/templates/dashboard/graph.html.ep
index 2beb4a47..551f9200 100644..100644
@@ -11,16 +11,7 @@
11 11 Unit:
12 12 <strong><%= $probe->{unit} %></strong>
13 13 </p>
14 Removed: <div class="timeframe-control" role="group" aria-label="<%= $probe->{label} %> chart timeframe">
15 Removed: <button class="timeframe-button" type="button" data-timeframe="hour">Hourly</button>
16 Removed: <button class="timeframe-button is-active" type="button" data-timeframe="day">Daily</button>
17 Removed: <button class="timeframe-button" type="button" data-timeframe="week">Weekly</button>
18 Removed: <button class="timeframe-button" type="button" data-timeframe="year">Yearly</button>
19 Removed: </div>
20 Removed: <label class="smoothing-control">
21 Removed: <input type="checkbox" data-smoothing-toggle checked>
22 Removed: <span>Smoothed</span>
23 Removed: </label>
14 Added: %= include 'dashboard/graph-control', aria_label => "$probe->{label} chart timeframe"
24 15 </div>
25 16 </div>
26 17 <div class="card-body">
roles/dashboard/templates/dashboard/probes.html.ep
index 65aea078..d2d3b38e 100644..100644
@@ -3,31 +3,7 @@
3 3 % layout 'default';
4 4 % title 'FAPG DAQ Probes';
5 5
6 Removed: <div class="probes-timeframe-control">
7 Removed: <div class="timeframe-control" role="group" aria-label="All probe chart timeframes">
8 Removed: % for my $timeframe ( [ hour => 'Hourly' ], [ day => 'Daily' ], [ week => 'Weekly' ], [ year => 'Yearly' ] ) {
9 Removed: <div class="timeframe-option" data-timeframe-option="<%= $timeframe->[0] %>">
10 Removed: <button
11 Removed: class="timeframe-adjustment"
12 Removed: type="button"
13 Removed: data-timeframe-adjustment="decrease"
14 Removed: data-timeframe="<%= $timeframe->[0] %>"
15 Removed: aria-label="Decrease <%= $timeframe->[0] %> range">−</button>
16 Removed: <button
17 Removed: class="timeframe-button<%= $timeframe->[0] eq 'day' ? ' is-active' : '' %>"
18 Removed: type="button"
19 Removed: data-timeframe="<%= $timeframe->[0] %>"
20 Removed: data-timeframe-label="<%= $timeframe->[1] %>"><%= $timeframe->[1] %></button>
21 Removed: <button
22 Removed: class="timeframe-adjustment"
23 Removed: type="button"
24 Removed: data-timeframe-adjustment="increase"
25 Removed: data-timeframe="<%= $timeframe->[0] %>"
26 Removed: aria-label="Increase <%= $timeframe->[0] %> range">+</button>
27 Removed: </div>
28 Removed: % }
29 Removed: </div>
30 Removed: </div>
6 Added: %= include 'dashboard/graph-control', aria_label => 'All probe chart timeframes'
31 7
32 8 <div class="probes-grid">
33 9 % for my $probe ($probes->@*) {
@@ -39,10 +15,6 @@
39 15 Unit:
40 16 <strong><%= $probe->{unit} %></strong>
41 17 </p>
42 Removed: <label class="smoothing-control">
43 Removed: <input type="checkbox" data-smoothing-toggle checked>
44 Removed: <span>Smoothed</span>
45 Removed: </label>
46 18 </div>
47 19 </div>
48 20 <div class="card-body">