Update firmware-pusher UI: fixed projection query, metadata.version field, improved UX
This commit is contained in:
astromech73
+145
-295
@@ -5,243 +5,122 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GenieACS Firmware Pusher</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root {
|
||||
--bg: #0f1117;
|
||||
--surface: #1a1d27;
|
||||
--border: #2a2d3a;
|
||||
--text: #e4e4e7;
|
||||
--text-dim: #71717a;
|
||||
--accent: #3b82f6;
|
||||
--accent-hover: #2563eb;
|
||||
--success: #22c55e;
|
||||
--error: #ef4444;
|
||||
--warning: #f59e0b;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
}
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
.subtitle {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.field {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
select, input {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.875rem;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
color: var(--text);
|
||||
font-size: 0.9rem;
|
||||
transition: border-color 0.15s;
|
||||
appearance: none;
|
||||
}
|
||||
select:focus, input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
select {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.875rem center;
|
||||
padding-right: 2.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, opacity 0.15s;
|
||||
}
|
||||
.btn:hover { background: var(--accent-hover); }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.btn.loading { position: relative; }
|
||||
.btn.loading::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 1em; height: 1em;
|
||||
border: 2px solid rgba(255,255,255,0.3);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
margin-left: 0.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.status {
|
||||
margin-top: 1.25rem;
|
||||
padding: 0.875rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
display: none;
|
||||
}
|
||||
.status.show { display: block; }
|
||||
.status.ok { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: var(--success); }
|
||||
.status.err { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: var(--error); }
|
||||
.status.info { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.3); color: var(--accent); }
|
||||
.status .task-id { font-family: monospace; font-size: 0.8em; color: var(--text-dim); }
|
||||
.version-tag {
|
||||
position: fixed;
|
||||
bottom: 0.75rem;
|
||||
right: 1rem;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-dim);
|
||||
--bg: #0d1117; --surface: #161b22; --border: #30363d;
|
||||
--text: #e6edf3; --muted: #8b949e; --accent: #58a6ff;
|
||||
--ok: #3fb950; --err: #f85149; --warn: #d29922;
|
||||
--radius: 8px;
|
||||
}
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
|
||||
.container { width: 100%; max-width: 720px; }
|
||||
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
|
||||
.card h1 { font-size: 1.4rem; margin-bottom: 6px; }
|
||||
.card p { color: var(--muted); font-size: 0.85rem; margin-bottom: 24px; }
|
||||
.version-tag { background: var(--border); color: var(--muted); font-size: 0.7rem; padding: 2px 8px; border-radius: 20px; display: inline-block; margin-bottom: 20px; }
|
||||
|
||||
/* Login screen */
|
||||
.login-screen .main-ui { display: none; }
|
||||
.main-ui .login-screen { display: none; }
|
||||
.login-screen {
|
||||
text-align: center;
|
||||
}
|
||||
.login-screen .logo { font-size: 2rem; margin-bottom: 0.5rem; }
|
||||
.login-screen .subtitle { margin-bottom: 2rem; }
|
||||
.login-screen .field { text-align: left; }
|
||||
.lock-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
/* ── Login ─────────────────────────────────────────────── */
|
||||
.login-screen { display: flex; flex-direction: column; gap: 14px; }
|
||||
.login-screen h2 { font-size: 1.1rem; }
|
||||
label { font-size: 0.8rem; color: var(--muted); display: block; margin-bottom: 6px; }
|
||||
input { width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 0.95rem; outline: none; }
|
||||
input:focus { border-color: var(--accent); }
|
||||
button { padding: 10px 20px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.9rem; font-weight: 600; }
|
||||
button:hover { opacity: 0.85; }
|
||||
button:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
button.loading { position: relative; color: transparent; }
|
||||
button.loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.3) 50%, transparent 75%); background-size: 200% 100%; animation: shimmer 1s infinite; }
|
||||
@keyframes shimmer { to { background-position: -200% 0; } }
|
||||
|
||||
/* Device / firmware info badges */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(59,130,246,0.15);
|
||||
color: var(--accent);
|
||||
margin-left: 0.5rem;
|
||||
vertical-align: middle;
|
||||
font-family: monospace;
|
||||
}
|
||||
.fw-info { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.25rem; }
|
||||
hr.divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
|
||||
.inline-field { display: flex; gap: 0.75rem; }
|
||||
.inline-field .field { flex: 1; }
|
||||
/* ── Main UI ───────────────────────────────────────────── */
|
||||
.main-ui { display: none; }
|
||||
.main-ui.visible { display: block; }
|
||||
.connected-as { font-size: 0.8rem; color: var(--muted); margin-bottom: 20px; }
|
||||
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
|
||||
.box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
|
||||
.box h3 { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
|
||||
select { width: 100%; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 0.9rem; }
|
||||
select option { background: var(--surface); }
|
||||
.box-meta { font-size: 0.75rem; color: var(--muted); margin-top: 8px; min-height: 18px; }
|
||||
.status-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
|
||||
#fwCount { font-size: 0.8rem; color: var(--muted); }
|
||||
.btn-row { display: flex; gap: 10px; align-items: center; }
|
||||
#btnPush { background: var(--ok); flex: 1; }
|
||||
#btnPush:hover:not(:disabled) { background: #2ea043; }
|
||||
#btnLogout { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 10px 16px; }
|
||||
.status-box { font-size: 0.8rem; min-height: 48px; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); word-break: break-all; }
|
||||
.status-box.ok { border-color: rgba(63,185,80,0.4); color: var(--ok); }
|
||||
.status-box.err { border-color: rgba(248,81,73,0.4); color: var(--err); }
|
||||
#statusBox { display: none; }
|
||||
#statusBox.visible { display: block; }
|
||||
@media (max-width: 540px) { .grid { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
|
||||
<!-- LOGIN SCREEN -->
|
||||
<div class="card login-screen" id="loginScreen">
|
||||
<div class="lock-icon">🔐</div>
|
||||
<div class="logo">GenieACS Firmware Pusher</div>
|
||||
<div class="subtitle">Enter your GenieACS credentials to continue</div>
|
||||
<div class="field">
|
||||
<label>Username</label>
|
||||
<input type="text" id="inUser" value="admin" autocomplete="username" spellcheck="false" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Password</label>
|
||||
<input type="password" id="inPass" autocomplete="current-password" spellcheck="false" />
|
||||
</div>
|
||||
<button class="btn" id="btnConnect" onclick="connect()">Connect</button>
|
||||
<div class="status" id="loginStatus"></div>
|
||||
</div>
|
||||
|
||||
<!-- MAIN UI -->
|
||||
<div class="card main-ui" id="mainUI">
|
||||
<div class="logo">GenieACS Firmware Pusher</div>
|
||||
<div class="subtitle">
|
||||
<span id="connectedAs">Connected</span>
|
||||
<button onclick="logout()" style="background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:0.75rem;margin-left:0.5rem;text-decoration:underline;">disconnect</button>
|
||||
</div>
|
||||
|
||||
<hr class="divider">
|
||||
|
||||
<div class="inline-field">
|
||||
<div class="field">
|
||||
<label>Device</label>
|
||||
<select id="selDevice">
|
||||
<option value="">— Loading devices… —</option>
|
||||
</select>
|
||||
<div class="fw-info" id="devInfo"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>
|
||||
Firmware
|
||||
<span class="badge" id="fwCount"></span>
|
||||
</label>
|
||||
<select id="selFw">
|
||||
<option value="">— Loading files… —</option>
|
||||
</select>
|
||||
<div class="fw-info" id="fwInfo"></div>
|
||||
</div>
|
||||
|
||||
<button class="btn" id="btnPush" onclick="pushFirmware()" disabled>
|
||||
Push Firmware
|
||||
</button>
|
||||
|
||||
<div class="status" id="statusBox"></div>
|
||||
</div>
|
||||
|
||||
<!-- Login screen -->
|
||||
<div id="loginScreen" class="login-screen">
|
||||
<div class="version-tag">GenieACS Firmware Pusher v1.0</div>
|
||||
<h2>Sign in</h2>
|
||||
<div id="loginStatus"></div>
|
||||
<div>
|
||||
<label for="inUser">Username</label>
|
||||
<input id="inUser" type="text" placeholder="admin" value="admin" autocomplete="username">
|
||||
</div>
|
||||
<div>
|
||||
<label for="inPass">Password</label>
|
||||
<input id="inPass" type="password" placeholder="GenieACS password" autocomplete="current-password">
|
||||
</div>
|
||||
<button id="btnConnect" onclick="connect()">Connect</button>
|
||||
</div>
|
||||
|
||||
<!-- Main UI -->
|
||||
<div id="mainUI" class="main-ui">
|
||||
<div class="version-tag">GenieACS Firmware Pusher v1.0</div>
|
||||
<div class="connected-as" id="connectedAs"></div>
|
||||
<div id="statusBox"></div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="box">
|
||||
<h3>Device</h3>
|
||||
<select id="selDevice"><option value="">Loading…</option></select>
|
||||
<div class="box-meta" id="devInfo"></div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h3>Firmware <span id="fwCount"></span></h3>
|
||||
<select id="selFw"><option value="">Loading…</option></select>
|
||||
<div class="box-meta" id="fwInfo"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-line">
|
||||
<button id="btnPush" disabled onclick="pushFirmware()">Push Firmware</button>
|
||||
<button id="btnLogout" onclick="logout()">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const NBI = 'https://nbi.yoda.ddnsgeek.com';
|
||||
// ── Config ───────────────────────────────────────────────
|
||||
// NBI is empty string → all API calls go through nginx on the same host (no CORS, no external auth)
|
||||
const NBI = '';
|
||||
|
||||
// ── Auth helpers ───────────────────────────────────────────
|
||||
function getCreds() {
|
||||
return { user: sessionStorage.getItem('nbi_user'), pass: sessionStorage.getItem('nbi_pass') };
|
||||
}
|
||||
|
||||
function b64auth() {
|
||||
const { user, pass } = getCreds();
|
||||
return 'Basic ' + btoa(user + ':' + pass);
|
||||
}
|
||||
|
||||
function logout() {
|
||||
sessionStorage.removeItem('nbi_user');
|
||||
sessionStorage.removeItem('nbi_pass');
|
||||
document.getElementById('mainUI').classList.remove('main-ui');
|
||||
document.getElementById('mainUI').classList.add('login-screen');
|
||||
document.getElementById('loginScreen').classList.add('login-screen');
|
||||
document.getElementById('loginScreen').style.display = '';
|
||||
document.getElementById('inPass').value = '';
|
||||
clearStatus();
|
||||
location.reload();
|
||||
}
|
||||
|
||||
// ── API helpers ────────────────────────────────────────────
|
||||
@@ -262,26 +141,21 @@
|
||||
const user = document.getElementById('inUser').value.trim();
|
||||
const pass = document.getElementById('inPass').value;
|
||||
if (!user || !pass) { showStatus('loginStatus', 'Please enter username and password.', 'err'); return; }
|
||||
|
||||
const btn = document.getElementById('btnConnect');
|
||||
btn.classList.add('loading'); btn.disabled = true;
|
||||
clearStatus('loginStatus');
|
||||
|
||||
try {
|
||||
// Test auth by fetching devices
|
||||
// Test auth
|
||||
const test = await fetch(NBI + '/devices?projection=_id', {
|
||||
headers: { 'Authorization': 'Basic ' + btoa(user + ':' + pass) }
|
||||
});
|
||||
if (test.status === 401) throw new Error('Invalid credentials');
|
||||
if (!test.ok) throw new Error('Server error: ' + test.status);
|
||||
|
||||
sessionStorage.setItem('nbi_user', user);
|
||||
sessionStorage.setItem('nbi_pass', pass);
|
||||
|
||||
document.getElementById('loginScreen').style.display = 'none';
|
||||
document.getElementById('mainUI').classList.add('main-ui');
|
||||
document.getElementById('mainUI').classList.add('visible');
|
||||
document.getElementById('connectedAs').textContent = 'Connected as ' + user;
|
||||
|
||||
await loadDevices();
|
||||
await loadFiles();
|
||||
} catch(e) {
|
||||
@@ -301,22 +175,17 @@
|
||||
const info = document.getElementById('devInfo');
|
||||
sel.innerHTML = '<option value="">Loading…</option>';
|
||||
try {
|
||||
const devs = await api('/devices?projection=InternetGatewayDevice.');
|
||||
const devs = await api('/devices?projection=_id,InternetGatewayDevice.DeviceInfo.SoftwareVersion,InternetGatewayDevice.ManagementServer.ConnectionRequestURL');
|
||||
sel.innerHTML = '';
|
||||
if (!devs || devs.length === 0) {
|
||||
sel.innerHTML = '<option value="">No devices found</option>';
|
||||
return;
|
||||
}
|
||||
// Sort: online first, then by ID
|
||||
devs.sort((a, b) => {
|
||||
const ia = a._id.toLowerCase(), ib = b._id.toLowerCase();
|
||||
return ia.localeCompare(ib);
|
||||
});
|
||||
devs.sort((a, b) => a._id.toLowerCase().localeCompare(b._id.toLowerCase()));
|
||||
for (const d of devs) {
|
||||
const serial = d._id.includes('-') ? d._id.split('-').pop() : d._id;
|
||||
const igd = d.InternetGatewayDevice || {};
|
||||
const sw = igd.DeviceInfo?.SoftwareVersion?._value || '—';
|
||||
const url = igd.ManagementServer?.ConnectionRequestURL?._value || '';
|
||||
const sw = d.InternetGatewayDevice?.DeviceInfo?.SoftwareVersion?._value || '—';
|
||||
const url = d.InternetGatewayDevice?.ManagementServer?.ConnectionRequestURL?._value || '';
|
||||
const online = url && !url.includes('://0.') ? '🟢' : '⚫';
|
||||
const opt = document.createElement('option');
|
||||
opt.value = d._id;
|
||||
@@ -340,7 +209,7 @@
|
||||
btn.disabled = !sel.value || !fw.value;
|
||||
}
|
||||
|
||||
// ── Load firmware files ─────────────────────────────────────
|
||||
// ── Load firmware files ───────────────────────────────────
|
||||
async function loadFiles() {
|
||||
const sel = document.getElementById('selFw');
|
||||
const count = document.getElementById('fwCount');
|
||||
@@ -355,10 +224,10 @@
|
||||
return;
|
||||
}
|
||||
count.textContent = files.length + ' file' + (files.length !== 1 ? 's' : '');
|
||||
// Sort by version descending
|
||||
// Sort by version descending (use metadata.version or fall back to filename)
|
||||
files.sort((a, b) => {
|
||||
const va = (a.version || '0').split('.').map(Number);
|
||||
const vb = (b.version || '0').split('.').map(Number);
|
||||
const va = (a.metadata?.version || a.filename || '').split('.').map(Number);
|
||||
const vb = (b.metadata?.version || b.filename || '').split('.').map(Number);
|
||||
for (let i = 0; i < Math.max(va.length, vb.length); i++) {
|
||||
const na = va[i] || 0, nb = vb[i] || 0;
|
||||
if (na !== nb) return nb - na;
|
||||
@@ -366,13 +235,14 @@
|
||||
return 0;
|
||||
});
|
||||
for (const f of files) {
|
||||
const ver = f.metadata?.version || '';
|
||||
const fname = f.filename || f._id || '';
|
||||
const sz = f.length ? fmtSize(f.length) : '';
|
||||
const opt = document.createElement('option');
|
||||
opt.value = f.fileName;
|
||||
const ver = f.version || f.fileName.match(/R(\d+[\d.]*)/)?.[1] || '—';
|
||||
const sz = f.size ? fmtSize(f.size) : '';
|
||||
opt.textContent = f.version ? `R${f.version}${sz ? ' (' + sz + ')' : ''}` : f.fileName;
|
||||
opt.dataset.version = f.version || '';
|
||||
opt.dataset.size = f.size || '';
|
||||
opt.value = fname;
|
||||
opt.textContent = ver ? `R${ver}${sz ? ' (' + sz + ')' : ''}` : fname;
|
||||
opt.dataset.version = ver;
|
||||
opt.dataset.size = f.length || '';
|
||||
sel.appendChild(opt);
|
||||
}
|
||||
sel.addEventListener('change', onFwChange);
|
||||
@@ -384,93 +254,73 @@
|
||||
}
|
||||
|
||||
function onFwChange() {
|
||||
const sel = document.getElementById('selFw');
|
||||
const btn = document.getElementById('btnPush');
|
||||
const sel = document.getElementById('selDevice');
|
||||
const fw = document.getElementById('selFw');
|
||||
const info = document.getElementById('fwInfo');
|
||||
const opt = sel.options[sel.selectedIndex];
|
||||
if (opt && opt.value) {
|
||||
const sz = opt.dataset.size ? fmtSize(parseInt(opt.dataset.size)) : '';
|
||||
info.textContent = opt.value + (sz ? ' · ' + sz : '');
|
||||
} else {
|
||||
info.textContent = '';
|
||||
btn.disabled = !sel.value || !fw.value;
|
||||
if (fw.value) {
|
||||
const opt = fw.options[fw.selectedIndex];
|
||||
if (opt && opt.dataset.version) info.textContent = 'Version: ' + opt.dataset.version;
|
||||
}
|
||||
btn.disabled = !document.getElementById('selDevice').value || !sel.value;
|
||||
}
|
||||
|
||||
// ── Push firmware ──────────────────────────────────────────
|
||||
// ── Push firmware ─────────────────────────────────────────
|
||||
async function pushFirmware() {
|
||||
const devId = document.getElementById('selDevice').value;
|
||||
const fileName = document.getElementById('selFw').value;
|
||||
const fwFile = document.getElementById('selFw').value;
|
||||
const btn = document.getElementById('btnPush');
|
||||
const status = document.getElementById('statusBox');
|
||||
|
||||
if (!devId || !fileName) return;
|
||||
|
||||
clearStatus();
|
||||
btn.classList.add('loading'); btn.disabled = true;
|
||||
|
||||
if (!devId || !fwFile) return;
|
||||
btn.disabled = true; btn.textContent = 'Pushing…';
|
||||
status.className = 'status-box'; status.textContent = '';
|
||||
status.classList.add('visible');
|
||||
try {
|
||||
const task = await api('/devices/' + encodeURIComponent(devId) + '/tasks', 'POST', {
|
||||
name: 'download',
|
||||
fileType: '1 Firmware Upgrade Image',
|
||||
fileName: fileName,
|
||||
productClass: 'GigaSpire'
|
||||
name: 'FirmwareDownloadImage',
|
||||
arguments: { File: fwFile }
|
||||
});
|
||||
|
||||
if (task && task.name === 'download') {
|
||||
showStatus('statusBox',
|
||||
`✓ Firmware push queued successfully. Task ID: <span class="task-id">${task.id}</span>`,
|
||||
'ok');
|
||||
} else {
|
||||
showStatus('statusBox', '✓ Task created: ' + JSON.stringify(task).slice(0, 100), 'ok');
|
||||
}
|
||||
status.innerHTML = `✓ Task created — refresh device list after 1–2 min to see new version`;
|
||||
status.className = 'status-box ok';
|
||||
setTimeout(() => { status.classList.remove('visible'); }, 8000);
|
||||
} catch(e) {
|
||||
if (e.message === 'AUTH') {
|
||||
showStatus('statusBox', 'Session expired. Please reconnect.', 'err');
|
||||
setTimeout(logout, 1500);
|
||||
status.textContent = 'Session expired. Please reconnect.';
|
||||
status.className = 'status-box err';
|
||||
setTimeout(() => logout(), 2000);
|
||||
} else {
|
||||
showStatus('statusBox', 'Failed to push firmware: ' + e.message, 'err');
|
||||
status.textContent = 'Failed to push firmware: ' + e.message;
|
||||
status.className = 'status-box err';
|
||||
}
|
||||
} finally {
|
||||
btn.classList.remove('loading'); btn.disabled = false;
|
||||
btn.disabled = false; btn.textContent = 'Push Firmware';
|
||||
}
|
||||
}
|
||||
|
||||
// ── UI helpers ─────────────────────────────────────────────
|
||||
// ── Status helpers ─────────────────────────────────────────
|
||||
function showStatus(id, html, type) {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
el.innerHTML = html;
|
||||
el.className = 'status show ' + type;
|
||||
}
|
||||
function clearStatus(id = 'statusBox') {
|
||||
const el = document.getElementById(id);
|
||||
if (el) { el.className = 'status'; el.innerHTML = ''; }
|
||||
el.style.color = type === 'err' ? 'var(--err)' : type === 'ok' ? 'var(--ok)' : '';
|
||||
}
|
||||
function clearStatus(id) { showStatus(id, '', ''); }
|
||||
function fmtSize(bytes) {
|
||||
if (!bytes) return '';
|
||||
if (bytes >= 1e9) return (bytes/1e9).toFixed(1) + ' GB';
|
||||
if (bytes >= 1e6) return (bytes/1e6).toFixed(0) + ' MB';
|
||||
return (bytes/1e3).toFixed(0) + ' KB';
|
||||
const units = ['B','KB','MB','GB'];
|
||||
let i = 0;
|
||||
while (bytes >= 1024 && i < units.length - 1) { bytes /= 1024; i++; }
|
||||
return bytes.toFixed(1) + ' ' + units[i];
|
||||
}
|
||||
|
||||
// ── Boot ──────────────────────────────────────────────────
|
||||
(function init() {
|
||||
const { user, pass } = getCreds();
|
||||
if (user && pass) {
|
||||
// Restore session
|
||||
document.getElementById('inUser').value = user;
|
||||
// ── Init: re-attach if already logged in ───────────────────
|
||||
if (sessionStorage.getItem('nbi_user')) {
|
||||
document.getElementById('loginScreen').style.display = 'none';
|
||||
document.getElementById('mainUI').classList.add('main-ui');
|
||||
document.getElementById('connectedAs').textContent = 'Connected as ' + user;
|
||||
document.getElementById('mainUI').classList.add('visible');
|
||||
document.getElementById('connectedAs').textContent = 'Connected as ' + sessionStorage.getItem('nbi_user');
|
||||
loadDevices().then(loadFiles).catch(() => logout());
|
||||
} else {
|
||||
document.getElementById('loginScreen').classList.add('login-screen');
|
||||
}
|
||||
// Enter key on password field
|
||||
document.getElementById('inPass').addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') connect();
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user