extended expressjs admin dashboard

This commit is contained in:
Ludwig Lehnert
2026-01-12 18:29:18 +01:00
parent f0168139f3
commit ea9ac4b35a

View File

@@ -224,7 +224,7 @@ function formatCountdown(ts) {
return `${minutes}m`; return `${minutes}m`;
} }
function renderPage(title, body) { function renderPage(title, body, mainClass = '') {
return `<!doctype html> return `<!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
@@ -236,6 +236,7 @@ function renderPage(title, body) {
* { box-sizing: border-box; } * { box-sizing: border-box; }
body { margin: 0; font-family: "IBM Plex Sans", "Noto Sans", sans-serif; color: var(--ink); background: var(--bg); } body { margin: 0; font-family: "IBM Plex Sans", "Noto Sans", sans-serif; color: var(--ink); background: var(--bg); }
main { max-width: 920px; margin: 0 auto; padding: 22px 16px 48px; } main { max-width: 920px; margin: 0 auto; padding: 22px 16px 48px; }
main.wide { max-width: 1180px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h1 { margin: 0; font-size: 1.55rem; } h1 { margin: 0; font-size: 1.55rem; }
h2 { margin: 0 0 12px; font-size: 1.08rem; } h2 { margin: 0 0 12px; font-size: 1.08rem; }
@@ -248,15 +249,16 @@ function renderPage(title, body) {
button { border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; } button { border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
button.secondary { background: transparent; color: var(--accent); } button.secondary { background: transparent; color: var(--accent); }
.row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; } th, td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
progress { width: 100%; height: 12px; accent-color: var(--accent); } progress { width: 100%; height: 12px; accent-color: var(--accent); }
.actions { display: grid; gap: 6px; } .actions { display: grid; gap: 6px; }
.actions input, .actions button { font-size: 0.9rem; padding: 6px 8px; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; } .pill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; }
</style> </style>
</head> </head>
<body> <body>
<main> <main class="${mainClass}">
${body} ${body}
</main> </main>
</body> </body>
@@ -620,7 +622,7 @@ app.get(`${basePath}/admin/dashboard`, requireAdminPage, async (req, res) => {
` : '<div class="muted">Keine aktiven Uploads.</div>'} ` : '<div class="muted">Keine aktiven Uploads.</div>'}
</section> </section>
`; `;
res.send(renderPage('Adminübersicht', body)); res.send(renderPage('Adminübersicht', body, 'wide'));
}); });
app.post(`${basePath}/admin/files/:id/delete`, requireAdminPage, async (req, res) => { app.post(`${basePath}/admin/files/:id/delete`, requireAdminPage, async (req, res) => {