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

[feat](trx-frontend-http): refine header controls and overlays

Browse Source 
Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-02-28 01:02:51 +01:00
parent 4c4d14b705
commit 4e79820e14
3 changed files with 30 additions and 32 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
+8 -14
View File
@@ -248,6 +248,7 @@ function applyAuthRestrictions() {
function applyCapabilities(caps) {
if (!caps) return;
lastHasTx = !!caps.tx;
// PTT / TX controls
const pttBtn = document.getElementById("ptt-btn");
@@ -330,14 +331,12 @@ const overviewCanvas = document.getElementById("overview-canvas");
const overviewLabel = document.getElementById("overview-label");
const overviewPeakHoldEl = document.getElementById("overview-peak-hold");
const themeToggleBtn = document.getElementById("theme-toggle");
const rigSwitchSelect = document.getElementById("rig-switch-select");
const rigSwitchBtn = document.getElementById("rig-switch-btn");
const headerRigSwitchSelect = document.getElementById("header-rig-switch-select");
const headerRigSwitchBtn = document.getElementById("header-rig-switch-btn");
let overviewPeakHoldMs = Number(loadSetting("overviewPeakHoldMs", 2000));
let lastControl;
let lastTxEn = null;
let lastHasTx = true;
let lastRendered = null;
let hintTimer = null;
let sigMeasuring = false;
@@ -451,10 +450,7 @@ function applyRigList(activeRigId, rigIds, displayNames) {
if (aboutActive) aboutActive.textContent = activeRigId;
}
const disableSwitch = lastRigIds.length === 0 || authRole === "rx";
populateRigPicker(rigSwitchSelect, lastRigIds, activeRigId, lastRigIds.length === 0);
populateRigPicker(headerRigSwitchSelect, lastRigIds, activeRigId, lastRigIds.length === 0);
if (rigSwitchBtn) rigSwitchBtn.disabled = disableSwitch;
if (headerRigSwitchBtn) headerRigSwitchBtn.disabled = disableSwitch;
populateRigPicker(headerRigSwitchSelect, lastRigIds, activeRigId, disableSwitch);
updateRigSubtitle(activeRigId);
}
@@ -1195,7 +1191,7 @@ function render(update) {
lockBtn.textContent = lastLocked ? "Unlock" : "Lock";
const tx = update.status && update.status.tx ? update.status.tx : null;
txMeters.style.display = "";
txMeters.style.display = lastHasTx ? "" : "none";
if (tx && typeof tx.power === "number") {
const pct = Math.max(0, Math.min(100, tx.power));
pwrBar.style.width = `${pct}%`;
@@ -1339,8 +1335,7 @@ async function switchRigFromSelect(selectEl) {
showHint("Unknown rig", 1500);
return;
}
if (rigSwitchBtn) rigSwitchBtn.disabled = true;
if (headerRigSwitchBtn) headerRigSwitchBtn.disabled = true;
selectEl.disabled = true;
showHint("Switching rig…");
try {
await postPath(`/select_rig?rig_id=${encodeURIComponent(selectEl.value)}`);
@@ -1351,13 +1346,12 @@ async function switchRigFromSelect(selectEl) {
console.error(err);
} finally {
const disableSwitch = lastRigIds.length === 0 || authRole === "rx";
if (rigSwitchBtn) rigSwitchBtn.disabled = disableSwitch;
if (headerRigSwitchBtn) headerRigSwitchBtn.disabled = disableSwitch;
selectEl.disabled = disableSwitch;
}
}
if (headerRigSwitchBtn) {
headerRigSwitchBtn.addEventListener("click", () => switchRigFromSelect(headerRigSwitchSelect));
if (headerRigSwitchSelect) {
headerRigSwitchSelect.addEventListener("change", () => { switchRigFromSelect(headerRigSwitchSelect); });
}
powerBtn.addEventListener("click", async () => {
src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+9 -8
View File
@@ -20,20 +20,21 @@
<div class="top-bar-actions">
<div class="header-rig-switch">
<select id="header-rig-switch-select" aria-label="Select active rig"></select>
<button id="header-rig-switch-btn" type="button">Switch Rig</button>
</div>
<button id="theme-toggle" class="header-bar-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
<button id="header-auth-btn" class="header-bar-btn" type="button" style="display:none;" aria-label="Login or Logout">Login</button>
</div>
</div>
<div class="header">
<div class="header-left">
<img id="logo" class="header-logo" src="/logo.png?v=1" alt="trx logo" onerror="this.style.display='none'" />
</div>
<div class="header-text">
<div class="title"><span id="rig-title">trx-rs</span></div>
<div class="subtitle" id="server-subtitle"></div>
<div class="subtitle" id="rig-subtitle" style="font-weight: 700;">Rig: --</div>
<div class="header-main">
<div class="header-left">
<img id="logo" class="header-logo" src="/logo.png?v=1" alt="trx logo" onerror="this.style.display='none'" />
</div>
<div class="header-text">
<div class="title"><span id="rig-title">trx-rs</span></div>
<div class="subtitle" id="server-subtitle"></div>
<div class="subtitle" id="rig-subtitle" style="font-weight: 700;">Rig: --</div>
</div>
</div>
</div>
<div class="overview-strip">
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+13 -10
View File
@@ -377,26 +377,28 @@ button:disabled { opacity: 0.6; cursor: not-allowed; }
}
small { color: var(--text-muted); }
.header {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 1rem;
margin-bottom: 0;
padding: 0.25rem 0 0.15rem;
position: relative;
z-index: 3;
}
.header-text {
width: auto;
min-width: 0;
flex: 1 1 auto;
padding: 0.35rem 0.65rem 0.4rem;
border-radius: 0.8rem;
.header-main {
display: inline-flex;
align-items: center;
gap: 0.9rem;
max-width: min(100%, 46rem);
padding: 0.35rem 0.8rem 0.4rem 0.45rem;
border-radius: 0.95rem;
background: color-mix(in srgb, var(--card-bg) 56%, transparent);
backdrop-filter: blur(12px) saturate(125%);
-webkit-backdrop-filter: blur(12px) saturate(125%);
box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}
.header-text {
width: auto;
min-width: 0;
flex: 0 1 auto;
}
.title { font-size: 1.4rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; }
.overview-strip {
width: 100%;
@@ -680,6 +682,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
.freq-inline { gap: 0.5rem; }
.freq-inline { flex-wrap: wrap; }
.header-text { width: auto; min-width: 0; flex: 0 1 auto; }
.header-main { max-width: 100%; padding-right: 0.65rem; }
.header-left { justify-content: flex-end; }
.tab-bar { flex-wrap: wrap; }
.top-bar-actions { width: 100%; justify-content: space-between; }