(function () {
// Alpine 5G Router – Rev: 2 (see REVISION in repo root)
const API = '/api';
const pageId = document.body.getAttribute('data-page');
if (!pageId) return;
async function api(path, opts = {}) {
const res = await fetch(API + path, {
...opts,
headers: {
'Content-Type': 'application/json',
...(opts.headers || {}),
},
credentials: 'same-origin',
});
const data = await res.json().catch(() => ({}));
if (res.status === 401) {
window.location.href = '/login';
throw new Error('Unauthorized');
}
if (!res.ok) throw new Error(data.error || res.statusText);
return data;
}
function showMsg(elId, text, type) {
const el = document.getElementById(elId);
if (!el) return;
el.textContent = text;
el.className = 'msg visible ' + (type || '');
el.classList.remove('success', 'error');
if (type) el.classList.add(type);
if (text) setTimeout(() => { el.classList.remove('visible'); }, 4000);
}
function escapeHtml(s) {
if (s == null) return '';
const div = document.createElement('div');
div.textContent = s;
return div.innerHTML;
}
// ---- Status page ----
if (pageId === 'status') {
const grid = document.getElementById('statusGrid');
const modemGrid = document.getElementById('modemGrid');
const refreshBtn = document.getElementById('refreshStatus');
const speedtest5gBtn = document.getElementById('speedtest5gBtn');
const speedtestWanBtn = document.getElementById('speedtestWanBtn');
const speedtestResult = document.getElementById('speedtestResult');
const speedtestMsg = document.getElementById('speedtestMsg');
if (!grid) return;
function statusItem(label, value) {
return '' + escapeHtml(value == null || value === '' ? '–' : String(value)) + '
| Loading… |
';
try {
const data = await api('/firewall');
const rules = data.rules || [];
if (rules.length === 0) {
tableBody.innerHTML = '| No rules. Add one below. |
';
return;
}
tableBody.innerHTML = rules.map(r => {
const delBtn = '';
return '| ' + escapeHtml(r.table_name) + ' | ' + escapeHtml(r.rule_line) + ' | ' + (r.enabled ? 'yes' : 'no') + ' | ' + delBtn + ' |
';
}).join('');
tableBody.querySelectorAll('[data-delete-id]').forEach(btn => {
btn.addEventListener('click', () => deleteRule(parseInt(btn.getAttribute('data-delete-id'), 10)));
});
} catch (e) {
tableBody.innerHTML = '| ' + escapeHtml(e.message) + ' |
';
}
}
async function deleteRule(id) {
if (!confirm('Delete this rule?')) return;
try {
await api('/firewall/' + id, { method: 'DELETE' });
showMsg('firewallMsg', 'Rule deleted.', 'success');
loadFirewall();
} catch (e) {
showMsg('firewallMsg', e.message, 'error');
}
}
addBtn.addEventListener('click', async () => {
const table_name = (tableNameEl && tableNameEl.value) || 'filter';
const rule_line = (ruleLineEl && ruleLineEl.value) || '';
if (!rule_line.trim()) { showMsg('firewallMsg', 'Rule line required.', 'error'); return; }
try {
await api('/firewall', { method: 'POST', body: JSON.stringify({ table_name, rule_line }) });
showMsg('firewallMsg', 'Rule added.', 'success');
if (ruleLineEl) ruleLineEl.value = '';
loadFirewall();
} catch (e) {
showMsg('firewallMsg', e.message, 'error');
}
});
applyBtn.addEventListener('click', async () => {
try {
await api('/firewall/apply', { method: 'POST' });
showMsg('firewallMsg', 'Rules applied (iptables-restore).', 'success');
} catch (e) {
showMsg('firewallMsg', e.message, 'error');
}
});
loadFirewall();
}
// ---- Routes page (SQLite) ----
if (pageId === 'routes') {
const tableBody = document.getElementById('routesTable');
const liveEl = document.getElementById('routesLive');
const destEl = document.getElementById('routeDest');
const gwEl = document.getElementById('routeGw');
const devEl = document.getElementById('routeDev');
const metricEl = document.getElementById('routeMetric');
const addBtn = document.getElementById('routeAddBtn');
const applyBtn = document.getElementById('routesApplyBtn');
const refreshLiveBtn = document.getElementById('routesRefreshLive');
if (!tableBody) return;
async function loadRoutes() {
tableBody.innerHTML = '| Loading… |
';
try {
const data = await api('/routes');
const routes = data.routes || [];
if (routes.length === 0) {
tableBody.innerHTML = '| No routes. Add one below. |
';
return;
}
tableBody.innerHTML = routes.map(r => {
const delBtn = '';
return '| ' + escapeHtml(r.destination) + ' | ' + escapeHtml(r.gateway) + ' | ' + escapeHtml(r.dev) + ' | ' + (r.metric != null ? r.metric : '') + ' | ' + (r.enabled ? 'yes' : 'no') + ' | ' + delBtn + ' |
';
}).join('');
tableBody.querySelectorAll('[data-delete-id]').forEach(btn => {
btn.addEventListener('click', () => deleteRoute(parseInt(btn.getAttribute('data-delete-id'), 10)));
});
} catch (e) {
tableBody.innerHTML = '| ' + escapeHtml(e.message) + ' |
';
}
}
async function loadLive() {
if (!liveEl) return;
liveEl.innerHTML = 'Loading…';
try {
const data = await api('/routes/live');
const lines = data.routes || [];
liveEl.innerHTML = lines.length ? lines.map(l => '' + escapeHtml(l) + '
').join('') : '(none)';
} catch (e) {
liveEl.innerHTML = 'Error: ' + escapeHtml(e.message);
}
}
async function deleteRoute(id) {
if (!confirm('Delete this route?')) return;
try {
await api('/routes/' + id, { method: 'DELETE' });
showMsg('routesMsg', 'Route deleted.', 'success');
loadRoutes();
} catch (e) {
showMsg('routesMsg', e.message, 'error');
}
}
addBtn.addEventListener('click', async () => {
const destination = (destEl && destEl.value) || '';
const gateway = (gwEl && gwEl.value) || '';
const dev = (devEl && devEl.value) || '';
const metric = metricEl && metricEl.value !== '' ? parseInt(metricEl.value, 10) : undefined;
if (!destination.trim()) { showMsg('routesMsg', 'Destination required.', 'error'); return; }
try {
await api('/routes', { method: 'POST', body: JSON.stringify({ destination: destination.trim(), gateway: gateway.trim() || undefined, dev: dev.trim() || undefined, metric }) });
showMsg('routesMsg', 'Route added.', 'success');
if (destEl) destEl.value = '';
if (gwEl) gwEl.value = '';
if (devEl) devEl.value = '';
if (metricEl) metricEl.value = '';
loadRoutes();
} catch (e) {
showMsg('routesMsg', e.message, 'error');
}
});
applyBtn.addEventListener('click', async () => {
try {
await api('/routes/apply', { method: 'POST' });
showMsg('routesMsg', 'Routes applied (ip route add).', 'success');
loadLive();
} catch (e) {
showMsg('routesMsg', e.message, 'error');
}
});
if (refreshLiveBtn) refreshLiveBtn.addEventListener('click', loadLive);
loadRoutes();
loadLive();
}
// ---- Users page ----
if (pageId === 'users') {
const tbody = document.getElementById('usersTable');
const addBtn = document.getElementById('addUserBtn');
if (!tbody) return;
async function loadUsers() {
try {
const data = await api('/users');
tbody.innerHTML = data.users.map(u => {
const del = u.username !== 'admin' ? '' : '';
return '| ' + escapeHtml(u.username) + ' | ' + escapeHtml(u.role) + ' | ' + del + ' |
';
}).join('');
tbody.querySelectorAll('[data-delete]').forEach(btn => {
btn.addEventListener('click', () => deleteUser(btn.getAttribute('data-delete')));
});
} catch (e) {
showMsg('usersMsg', e.message, 'error');
}
}
async function deleteUser(username) {
if (!confirm('Delete user "' + username + '"?')) return;
try {
await api('/users', { method: 'PUT', body: JSON.stringify({ action: 'delete', username }) });
showMsg('usersMsg', 'User deleted.', 'success');
loadUsers();
} catch (e) {
showMsg('usersMsg', e.message, 'error');
}
}
addBtn.addEventListener('click', () => {
const username = prompt('Username:');
if (!username) return;
const password = prompt('Password:');
if (!password) return;
const role = (prompt('Role (admin or support):', 'support') || 'support').toLowerCase();
if (role !== 'admin' && role !== 'support') {
showMsg('usersMsg', 'Role must be admin or support.', 'error');
return;
}
api('/users', { method: 'PUT', body: JSON.stringify({ action: 'add', username: username.trim(), password, role }) })
.then(() => { showMsg('usersMsg', 'User added.', 'success'); loadUsers(); })
.catch(e => showMsg('usersMsg', e.message, 'error'));
});
loadUsers();
}
})();