diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js index 3b98aaf..46c35c3 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js @@ -289,6 +289,20 @@ function render(update) { } if (typeof update.clients === "number") lastClientCount = update.clients; + // Populate About tab + if (update.server_version) { + document.getElementById("about-server-ver").textContent = `trx-server v${update.server_version}`; + } + if (update.server_callsign) { + document.getElementById("about-server-call").textContent = update.server_callsign; + } + if (update.info) { + const parts = [update.info.manufacturer, update.info.model, update.info.revision].filter(Boolean).join(" "); + if (parts) document.getElementById("about-rig-info").textContent = parts; + } + if (typeof update.clients === "number") { + document.getElementById("about-clients").textContent = update.clients; + } powerHint.textContent = readyText(); lastLocked = update.status && update.status.lock === true; lockBtn.textContent = lastLocked ? "Unlock" : "Lock"; @@ -568,6 +582,16 @@ lockBtn.addEventListener("click", async () => { } }); +// --- Tab navigation --- +document.querySelector(".tab-bar").addEventListener("click", (e) => { + const btn = e.target.closest(".tab[data-tab]"); + if (!btn) return; + document.querySelectorAll(".tab-bar .tab").forEach((t) => t.classList.remove("active")); + btn.classList.add("active"); + document.querySelectorAll(".tab-panel").forEach((p) => p.style.display = "none"); + document.getElementById(`tab-${btn.dataset.tab}`).style.display = ""; +}); + connect(); // --- Signal measurement --- diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html index 6bf6fcb..0214434 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html @@ -17,6 +17,11 @@
{pkg} v{ver}
+
+ + +
+
Initializing (rig)…
@@ -109,11 +114,20 @@ Off
+ + - diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css index e8a4957..ff9084b 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css @@ -150,6 +150,14 @@ small { color: var(--text-muted); } .meter-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-green), var(--accent-yellow), var(--accent-red)); transition: width 150ms ease; } .meter-value { font-size: 0.95rem; color: var(--text-heading); min-width: 64px; text-align: right; } #content { display: flex; flex-direction: column; gap: 1.1rem; } +.tab-bar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1rem; position: relative; z-index: 2; } +.tab { background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.5rem 1rem; color: var(--text-muted); cursor: pointer; font-size: 0.95rem; height: auto; } +.tab.active { border-bottom-color: var(--accent-green); color: var(--accent-green); font-weight: 600; } +.tab:hover:not(.active) { color: var(--text); } +.about-table { width: 100%; border-collapse: collapse; } +.about-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); } +.about-table tr:last-child td { border-bottom: none; } +.about-table td:first-child { color: var(--text-muted); width: 40%; } .footer { display: flex; justify-content: space-between; align-items: baseline; } .full-row { grid-column: 1 / -1; } .copyright { color: var(--text-muted); font-size: 0.75rem; opacity: 0.7; }