sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[feat](trx-frontend-http): fix tab panel nesting, enrich About tab, move logo

Browse Source 
Close #tab-main properly so the footer and About tab are not nested
inside it — footer is now visible on all tabs.

Add server address, rig connection method, supported modes, and VFO
count to the About tab.

Move logo from translucent centered overlay to solid image in the
top-right of the header.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>
This commit is contained in:
Stan Grams
2026-02-08 13:52:14 +01:00
parent 9a4a238dcf
commit 494d8979a8
3 changed files with 32 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+21
View File
@@ -293,12 +293,33 @@ function render(update) {
if (update.server_version) { if (update.server_version) {
document.getElementById("about-server-ver").textContent = `trx-server v${update.server_version}`; document.getElementById("about-server-ver").textContent = `trx-server v${update.server_version}`;
} }
document.getElementById("about-server-addr").textContent = location.host;
if (update.server_callsign) { if (update.server_callsign) {
document.getElementById("about-server-call").textContent = update.server_callsign; document.getElementById("about-server-call").textContent = update.server_callsign;
} }
if (update.info) { if (update.info) {
const parts = [update.info.manufacturer, update.info.model, update.info.revision].filter(Boolean).join(" "); const parts = [update.info.manufacturer, update.info.model, update.info.revision].filter(Boolean).join(" ");
if (parts) document.getElementById("about-rig-info").textContent = parts; if (parts) document.getElementById("about-rig-info").textContent = parts;
const access = update.info.access;
if (access) {
if (access.Serial) {
document.getElementById("about-rig-access").textContent = `Serial (${access.Serial.port || "?"}, ${access.Serial.baud || "?"} baud)`;
} else if (access.Tcp) {
document.getElementById("about-rig-access").textContent = `TCP (${access.Tcp.host || "?"}:${access.Tcp.port || "?"})`;
} else {
const key = Object.keys(access)[0];
if (key) document.getElementById("about-rig-access").textContent = key;
}
}
if (update.info.capabilities) {
const cap = update.info.capabilities;
if (Array.isArray(cap.supported_modes) && cap.supported_modes.length) {
document.getElementById("about-modes").textContent = cap.supported_modes.map(normalizeMode).filter(Boolean).join(", ");
}
if (typeof cap.num_vfos === "number") {
document.getElementById("about-vfos").textContent = cap.num_vfos;
}
}
} }
if (typeof update.clients === "number") { if (typeof update.clients === "number") {
document.getElementById("about-clients").textContent = update.clients; document.getElementById("about-clients").textContent = update.clients;
src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+8 -3
View File
@@ -8,14 +8,14 @@
<link rel="stylesheet" href="/style.css" /> <link rel="stylesheet" href="/style.css" />
</head> </head>
<body> <body>
<div class="card" id="card" style="position:relative; overflow:hidden;"> <div class="card" id="card">
<div class="logo-bg"><img id="logo" src="/logo.png?v=1" alt="trx logo" onerror="console.error('logo load failed'); this.style.display='none'" /></div> <div class="header">
<div class="header" style="position:relative; z-index:2;">
<div> <div>
<div class="title"><span id="rig-title">Rig status</span></div> <div class="title"><span id="rig-title">Rig status</span></div>
<div class="subtitle" id="server-subtitle"></div> <div class="subtitle" id="server-subtitle"></div>
<div class="subtitle">{pkg} v{ver}</div> <div class="subtitle">{pkg} v{ver}</div>
</div> </div>
<img id="logo" class="header-logo" src="/logo.png?v=1" alt="trx logo" onerror="this.style.display='none'" />
</div> </div>
<div class="tab-bar"> <div class="tab-bar">
<button class="tab active" data-tab="main">Main</button> <button class="tab active" data-tab="main">Main</button>
@@ -115,11 +115,16 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="tab-about" class="tab-panel" style="display:none;"> <div id="tab-about" class="tab-panel" style="display:none;">
<table class="about-table"> <table class="about-table">
<tr><td>Server</td><td id="about-server-ver">--</td></tr> <tr><td>Server</td><td id="about-server-ver">--</td></tr>
<tr><td>Server address</td><td id="about-server-addr">--</td></tr>
<tr><td>Server callsign</td><td id="about-server-call">--</td></tr> <tr><td>Server callsign</td><td id="about-server-call">--</td></tr>
<tr><td>Rig</td><td id="about-rig-info">--</td></tr> <tr><td>Rig</td><td id="about-rig-info">--</td></tr>
<tr><td>Rig connection</td><td id="about-rig-access">--</td></tr>
<tr><td>Supported modes</td><td id="about-modes">--</td></tr>
<tr><td>VFOs</td><td id="about-vfos">--</td></tr>
<tr><td>Client</td><td>{pkg} v{ver}</td></tr> <tr><td>Client</td><td>{pkg} v{ver}</td></tr>
<tr><td>Connected clients</td><td id="about-clients">--</td></tr> <tr><td>Connected clients</td><td id="about-clients">--</td></tr>
</table> </table>
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+3 -4
View File
@@ -133,10 +133,9 @@ button:disabled { opacity: 0.6; cursor: not-allowed; }
.hint { color: var(--text-muted); font-size: 0.85rem; } .hint { color: var(--text-muted); font-size: 0.85rem; }
.inline { display: flex; gap: 0.5rem; align-items: center; } .inline { display: flex; gap: 0.5rem; align-items: center; }
small { color: var(--text-muted); } small { color: var(--text-muted); }
.header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
.title { font-size: 1.4rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; position: relative; z-index: 2; } .title { font-size: 1.4rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; }
.logo-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0.2; } .header-logo { height: 3rem; width: auto; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
.logo-bg img { max-width: 50%; max-height: 50%; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
.subtitle { color: var(--text-muted); font-size: 0.95rem; } .subtitle { color: var(--text-muted); font-size: 0.95rem; }
.subtitle a { color: var(--accent-green); text-decoration: none; } .subtitle a { color: var(--accent-green); text-decoration: none; }
.subtitle a:hover { text-decoration: underline; } .subtitle a:hover { text-decoration: underline; }