[Perl] DAQ system for the FAPG.

chore add semantic IDs to page elements

Stable IDs on navbar, page title, footer, page sections, controls, and key cards. Enables unambiguous element reference from the browser inspector.

Commit
0e1c967577202e6b0611e8cf771a823314326f18
Author
gpt-5.6-sol high <agent@openai.com>
Author date
Committer
gpt-5.6-sol high <agent@openai.com>
Committer date
Changed files
roles/dashboard/templates/dashboard/downloads.html.ep
index 74b31f53..dc2b4f7e 100644..100644
@@ -1,9 +1,9 @@
1 1 % layout 'default';
2 2 % title 'FAPG DAQ Downloads';
3 3
4 Removed: <section class="mb-4" aria-label="Data downloads">
4 Added: <section id="downloads-page" class="mb-4" aria-label="Data downloads">
5 5
6 Removed: <div class="card">
6 Added: <div id="downloads-card" class="card">
7 7
8 8 <div class="card-body">
9 9 <div class="alert alert-danger d-none" role="alert" id="downloads-error" data-downloads-error></div>
roles/dashboard/templates/dashboard/graph.html.ep
index 2203d615..253876a3 100644..100644
@@ -2,14 +2,14 @@
2 2 % title "FAPG DAQ $probe->{label}";
3 3 % stash use_charts => 1;
4 4
5 Removed: <section class="mb-4" aria-label="<%= $probe->{label} %> probe detail">
6 Removed: <div class="d-flex align-items-center justify-content-end gap-2 mb-3 sticky-controls">
5 Added: <section id="probe-detail" class="mb-4" aria-label="<%= $probe->{label} %> probe detail">
6 Added: <div id="probe-controls" class="d-flex align-items-center justify-content-end gap-2 mb-3 sticky-controls">
7 7 %= include 'dashboard/graph-control', aria_label => "$probe->{label} chart timeframe", default_timeframe => 'day'
8 8 </div>
9 9
10 10 %= include 'dashboard/probe-card', probe => $probe
11 11
12 Removed: <div class="card mt-3" aria-label="Last ten reading messages for <%= $probe->{label} %>">
12 Added: <div id="latest-readings" class="card mt-3" aria-label="Last ten reading messages for <%= $probe->{label} %>">
13 13 <div class="card-header">
14 14 <h2 class="h6 mb-0">Latest Readings</h2>
15 15 </div>
roles/dashboard/templates/dashboard/index.html.ep
index d17ec449..c787c71b 100644..100644
@@ -2,9 +2,9 @@
2 2 % title 'FAPG DAQ Dashboard';
3 3 % stash use_charts => 1;
4 4
5 Removed: <section class="mb-3" aria-label="DAQ status overview">
5 Added: <section id="index-overview" class="mb-3" aria-label="DAQ status overview">
6 6
7 Removed: <section class="reading-quick-status mb-3" aria-label="Sensor reading quick status">
7 Added: <section id="quick-readings" class="reading-quick-status mb-3" aria-label="Sensor reading quick status">
8 8 <div class="row g-2" data-reading-quick-list>
9 9 % for my $probe ($probes->@*) {
10 10 <div class="col-6 col-sm-6 col-xl-3">
@@ -30,7 +30,7 @@
30 30 </div>
31 31 </section>
32 32
33 Removed: <section aria-label="Weather forecast">
33 Added: <section id="index-weather" aria-label="Weather forecast">
34 34 <a href="/weather" class="text-decoration-none text-reset d-block">
35 35 <div class="card" data-weather-forecast>
36 36 <div class="card-body py-2 px-3">
roles/dashboard/templates/dashboard/insights.html.ep
index 0ddaec75..ee5b7682 100644..100644
@@ -2,8 +2,8 @@
2 2 % title 'FAPG DAQ Insights';
3 3 % stash use_charts => 1;
4 4
5 Removed: <section class="mb-4" aria-label="Insights visualisations">
6 Removed: <div class="d-flex align-items-center justify-content-end gap-2 mb-3 sticky-controls">
5 Added: <section id="insights-page" class="mb-4" aria-label="Insights visualisations">
6 Added: <div id="insights-controls" class="d-flex align-items-center justify-content-end gap-2 mb-3 sticky-controls">
7 7 %= include 'dashboard/graph-control', aria_label => 'Insights timeframe', default_timeframe => 'day'
8 8 </div>
9 9
roles/dashboard/templates/dashboard/probes.html.ep
index 11c0bd63..5016ed87 100644..100644
@@ -2,8 +2,8 @@
2 2 % title 'FAPG DAQ Probes';
3 3 % stash use_charts => 1;
4 4
5 Removed: <section class="mb-4" aria-label="Probe readings">
6 Removed: <div class="d-flex align-items-center justify-content-end gap-2 mb-3 sticky-controls">
5 Added: <section id="probes-page" class="mb-4" aria-label="Probe readings">
6 Added: <div id="probes-controls" class="d-flex align-items-center justify-content-end gap-2 mb-3 sticky-controls">
7 7 %= include 'dashboard/graph-control', aria_label => 'All probe chart timeframes', default_timeframe => 'day'
8 8 </div>
9 9
roles/dashboard/templates/dashboard/status.html.ep
index 92000aee..41927dc7 100644..100644
@@ -1,9 +1,9 @@
1 1 % layout 'default';
2 2 % title 'FAPG DAQ Status';
3 3
4 Removed: <section class="mb-4" aria-label="DAQ status">
4 Added: <section id="status-page" class="mb-4" aria-label="DAQ status">
5 5
6 Removed: <div class="card">
6 Added: <div id="status-list" class="card">
7 7
8 8 <div class="list-group list-group-flush">
9 9 % for my $item ($items->@*) {
roles/dashboard/templates/dashboard/weather.html.ep
index 561b3e45..fb95db58 100644..100644
@@ -2,8 +2,8 @@
2 2 % title 'FAPG DAQ Weather';
3 3 % stash use_charts => 1;
4 4
5 Removed: <section class="mb-4" aria-label="Weather data">
6 Removed: <div class="d-flex align-items-center justify-content-end gap-2 mb-3 sticky-controls">
5 Added: <section id="weather-page" class="mb-4" aria-label="Weather data">
6 Added: <div id="weather-controls" class="d-flex align-items-center justify-content-end gap-2 mb-3 sticky-controls">
7 7 %= include 'dashboard/graph-control', aria_label => 'Weather timeframe', default_timeframe => 'day'
8 8 </div>
9 9
roles/dashboard/templates/layouts/default.html.ep
index 0431410d..034607b5 100644..100644
@@ -18,15 +18,15 @@
18 18
19 19 <a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>
20 20
21 Removed: <nav class="navbar navbar-expand-md bg-body border-bottom shadow-sm sticky-top mb-3" aria-label="Dashboard navigation">
21 Added: <nav id="navbar" class="navbar navbar-expand-md bg-body border-bottom shadow-sm sticky-top mb-3" aria-label="Dashboard navigation">
22 22 <div class="container-fluid px-3">
23 23
24 Removed: <a class="navbar-brand fw-bold text-success" href="/">FAPG</a>
24 Added: <a id="navbar-brand" class="navbar-brand fw-bold text-success" href="/">FAPG</a>
25 25
26 26 % my $page_title = stash('page_title') // '';
27 27 % if ($page_title) {
28 Removed: <span class="navbar-text fw-semibold text-body position-absolute start-50 translate-middle-x d-none d-sm-inline" aria-hidden="true"><%= $page_title %></span>
29 Removed: <span class="navbar-text fw-semibold text-body mx-auto d-sm-none" aria-hidden="true"><%= $page_title %></span>
28 Added: <span id="navbar-title" class="navbar-text fw-semibold text-body position-absolute start-50 translate-middle-x d-none d-sm-inline" aria-hidden="true"><%= $page_title %></span>
29 Added: <span id="navbar-title-mobile" class="navbar-text fw-semibold text-body mx-auto d-sm-none" aria-hidden="true"><%= $page_title %></span>
30 30 % }
31 31
32 32 <div class="d-flex align-items-center gap-2 ms-auto order-md-last">
@@ -88,7 +88,7 @@
88 88 <%= content %>
89 89 </main>
90 90
91 Removed: <footer class="text-center text-body-secondary small py-3 mt-4 bg-body-tertiary border-top">
91 Added: <footer id="site-footer" class="text-center text-body-secondary small py-3 mt-4 bg-body-tertiary border-top">
92 92 <p class="mb-0">
93 93 <a class="text-body-secondary" href="https://www.lafermeaquaponique.com/">lafermeaquaponique.com</a>
94 94 </p>