Frank
01c42202b8
Red tests first, then the pages. - tests/homepage_pages.bats: the pages reference the data + theme; no auto-refresh (Q41); no cursor alteration (Q28); the styling toggle strips to bare HTML (Q27); the footer shows the last master deployment datetime (Q43). - index.html / admin.html: the user and admin pages. A grid of TUI panels, a summary line, the bare toggle, the deployed-at footer. - app.js: reads status.json + services.json once (no auto-refresh), renders one panel per service for the page's category, the toggle, the footer. - style.css: the terminal TUI theme (green-on-black, phosphor palette, scanlines) + a ?bare=1 mode that strips to unstyled HTML. No custom cursor. Functionally verified with a Node DOM shim: 9 user panels, correct summary, correct footer datetime.
77 lines
2.9 KiB
JavaScript
77 lines
2.9 KiB
JavaScript
// The homepage front end. It reads status.json and services.json once on load
|
|
// (no auto-refresh, Q41), renders one TUI panel per service for this page's
|
|
// category, offers the styling toggle (Q27), and shows the last master
|
|
// deployment datetime (Q43). It never alters the user's cursor (Q28).
|
|
|
|
const CATEGORY = window.location.pathname.indexOf('/admin') !== -1 ? 'admin' : 'user';
|
|
|
|
function load(url) {
|
|
return fetch(url, { cache: 'no-store' }).then(function (r) { return r.json(); });
|
|
}
|
|
|
|
function esc(s) {
|
|
return String(s).replace(/[&<>"']/g, function (c) {
|
|
return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c];
|
|
});
|
|
}
|
|
|
|
function renderPanels(services, status) {
|
|
const stateByName = {};
|
|
for (const s of (status.services || [])) stateByName[s.name] = s.state;
|
|
|
|
const grid = document.getElementById('grid');
|
|
grid.innerHTML = '';
|
|
let up = 0, down = 0, wip = 0;
|
|
|
|
for (const svc of services) {
|
|
if (svc.category !== CATEGORY) continue;
|
|
const state = svc.wip ? 'wip' : (stateByName[svc.name] || 'down');
|
|
if (state === 'up') up++; else if (state === 'down') down++; else wip++;
|
|
|
|
const panel = document.createElement('div');
|
|
panel.className = 'panel ' + state;
|
|
const links = [];
|
|
if (svc.showLink && svc.url) links.push('<a class="open" href="' + esc(svc.url) + '">open</a>');
|
|
if (svc.docs) links.push('<a class="docs" href="' + esc(svc.docs) + '">docs</a>');
|
|
panel.innerHTML =
|
|
'<div class="panel-head">' +
|
|
' <span class="badge ' + state + '">' + state.toUpperCase() + '</span>' +
|
|
' <span class="name">' + esc(svc.name) + '</span>' +
|
|
'</div>' +
|
|
'<div class="desc">' + esc(svc.description || '') + '</div>' +
|
|
'<div class="links">' + links.join('') + '</div>';
|
|
grid.appendChild(panel);
|
|
}
|
|
|
|
document.getElementById('summary').textContent = 'UP ' + up + ' DOWN ' + down + ' WIP ' + wip;
|
|
}
|
|
|
|
// The styling toggle (Q27): ?bare=1 strips the page to bare, unstyled HTML.
|
|
function applyBare() {
|
|
const bare = new URLSearchParams(window.location.search).get('bare') === '1';
|
|
document.documentElement.setAttribute('data-bare', bare ? '1' : '0');
|
|
const t = document.getElementById('bare-toggle');
|
|
if (t) {
|
|
t.textContent = bare ? 'styled' : 'bare';
|
|
t.href = bare ? '?bare=0' : '?bare=1';
|
|
}
|
|
}
|
|
|
|
// The last master deployment datetime (Q43), baked in at deploy time.
|
|
function fillDeployed() {
|
|
const el = document.getElementById('deployed-at');
|
|
if (el && window.DEPLOYED_AT) el.textContent = window.DEPLOYED_AT;
|
|
}
|
|
|
|
function main() {
|
|
applyBare();
|
|
fillDeployed();
|
|
Promise.all([load('services.json'), load('status.json')])
|
|
.then(function (pair) { renderPanels(pair[0], pair[1]); })
|
|
.catch(function (e) {
|
|
document.getElementById('summary').textContent = 'status unavailable: ' + e;
|
|
});
|
|
}
|
|
|
|
main();
|