Status-Seite wird ein Dashboard
Statt sieben flacher Kacheln jetzt: Kopfzeile mit Bot-Identitaet und Laufzeit, vier Kennzahlen mit Nebenzeile, Aktivitaetsverlauf und Modul-Zustand pro Bereich. Die Bereichs-Zeilen sind klickbar und springen in den Modul-Ueberblick. Fast alles war schon da und musste nur zusammengestellt werden. Neu am Server sind zwei Zeitstempel in archiveStats(): lastDevlog und lastCommit. Reine Zaehler sagen nicht, ob noch etwas passiert — "142 Devlogs, zuletzt vor zwei Tagen" schon. Der Mitglieder-Zuwachs kommt aus joins/leaves der Tagesdaten, der Verlauf fuellt fehlende Tage mit 0 statt sie wegzulassen, sonst staucht er sich. Beim Bauen gefunden: die Spalte in commits heisst committed_at, nicht ts. Da better-sqlite3 beim Vorbereiten sofort auswertet, waere der Bot beim Start abgestuerzt. Beide neuen Abfragen gegen das echte Schema geprueft. Dazu ein Dev-Server-Eintrag in launch.json: der Build ist minifiziert, im Fehlerfall steht dort nur "at bp". Mit dem Dev-Server kommt der Komponenten- und Zeilenverweis — genau das hat den Weg zur Ursache abgekuerzt. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
+128
-16
@@ -322,6 +322,7 @@ export default function Settings({ me }) {
|
||||
const [botDesc, setBotDesc] = useState('');
|
||||
const [team, setTeam] = useState([]);
|
||||
const [audit, setAudit] = useState([]);
|
||||
const [serverStats, setServerStats] = useState(null);
|
||||
const [owner, setOwner] = useState(null);
|
||||
const [auditAlle, setAuditAlle] = useState(false);
|
||||
// Module (An/Aus für alle Funktionen)
|
||||
@@ -446,6 +447,8 @@ export default function Settings({ me }) {
|
||||
.then((d) => { setTeam(d.admins); setOwner(d.owner); })
|
||||
.catch(() => {});
|
||||
apiGet('/api/auditlog').then((d) => setAudit(d.entries)).catch(() => {});
|
||||
// Fuers Dashboard: Mitgliederzahl und Nachrichten pro Tag
|
||||
apiGet('/api/serverstats').then(setServerStats).catch(() => {});
|
||||
apiGet('/api/ssoapps').then((d) => setSsoApps(d.apps)).catch(() => {});
|
||||
apiGet('/api/services').then((d) => setServices(d.services)).catch(() => {});
|
||||
apiGet('/api/pages/all/list').then((d) => setPages(d.pages)).catch(() => {});
|
||||
@@ -1108,29 +1111,138 @@ export default function Settings({ me }) {
|
||||
const activeModules = modules.filter((m) => m.enabled);
|
||||
const unfinished = activeModules.filter((m) => m.missing.length > 0);
|
||||
|
||||
/** Wie alt ist ein Zeitstempel, in Tagen — fuer die Nebenzeilen */
|
||||
function alterInTagen(iso) {
|
||||
if (!iso) return null;
|
||||
return Math.floor((Date.now() - new Date(iso.replace(' ', 'T') + 'Z').getTime()) / 86400000);
|
||||
}
|
||||
|
||||
/** „vor 3 Tagen" bzw. „heute" fuer eine Nebenzeile */
|
||||
function seit(iso, nie) {
|
||||
const t = alterInTagen(iso);
|
||||
if (t == null) return nie;
|
||||
if (t <= 0) return 'heute';
|
||||
return t === 1 ? 'gestern' : `vor ${t} Tagen`;
|
||||
}
|
||||
|
||||
// Mitglieder-Zuwachs der letzten 7 Tage aus den Tagesdaten
|
||||
const memberDelta = serverStats?.days
|
||||
? serverStats.days.slice(-7).reduce((n, d) => n + (d.joins ?? 0) - (d.leaves ?? 0), 0)
|
||||
: null;
|
||||
|
||||
// Nachrichten der letzten 30 Tage, luckenlos — fehlende Tage sind 0 und
|
||||
// nicht einfach weg, sonst staucht sich der Verlauf
|
||||
const aktivitaet = (() => {
|
||||
if (!serverStats?.days) return null;
|
||||
const proTag = new Map(serverStats.days.map((d) => [d.day, d.messages ?? 0]));
|
||||
const tage = [];
|
||||
for (let i = 29; i >= 0; i--) {
|
||||
const key = new Date(Date.now() - i * 86400000).toISOString().slice(0, 10);
|
||||
tage.push({ key, n: proTag.get(key) ?? 0 });
|
||||
}
|
||||
return { tage, gesamt: tage.reduce((n, t) => n + t.n, 0), max: Math.max(1, ...tage.map((t) => t.n)) };
|
||||
})();
|
||||
|
||||
const backupTage = alterInTagen(data.status.lastBackup);
|
||||
|
||||
const tabStatus = (
|
||||
<>
|
||||
<div className="settings-section">
|
||||
<h2 className="settings-title">// Status</h2>
|
||||
<div className="stats">
|
||||
<div className="stat"><span className="stat-value">{data.status.botTag ?? '—'}</span><span className="stat-label">Bot</span></div>
|
||||
<div className="stat"><span className="stat-value">{fmtUptime(data.status.uptimeSeconds)}</span><span className="stat-label">Uptime</span></div>
|
||||
{modules.length > 0 && (
|
||||
<div className="stat">
|
||||
<span className="stat-value">{activeModules.length}<span className="stat-of">/{modules.length}</span></span>
|
||||
<span className="stat-label">Module an</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="stat"><span className="stat-value">{data.status.devlogs}</span><span className="stat-label">Devlogs</span></div>
|
||||
<div className="stat"><span className="stat-value">{data.status.commits}</span><span className="stat-label">Commits</span></div>
|
||||
<div className="stat"><span className="stat-value">{fmtBytes(data.status.dbSizeBytes)}</span><span className="stat-label">Datenbank</span></div>
|
||||
<div className="stat">
|
||||
<span className="stat-value">{data.status.lastBackup ? data.status.lastBackup.slice(0, 10) : '—'}</span>
|
||||
<span className="stat-label">Letztes Backup</span>
|
||||
<div className="dash-head">
|
||||
{data.status.botAvatar
|
||||
? <img className="dash-avatar" src={data.status.botAvatar} alt="" />
|
||||
: <span className="dash-avatar leer">?</span>}
|
||||
<div className="dash-ident">
|
||||
<span className="dash-name">
|
||||
{data.status.botName ?? 'Bot'}
|
||||
{data.status.botTag && <span className="dash-tag">{data.status.botTag}</span>}
|
||||
</span>
|
||||
<span className="dash-pill"><span className="dash-dot" /> online</span>
|
||||
</div>
|
||||
<span className="dash-uptime">
|
||||
seit {fmtUptime(data.status.uptimeSeconds)}
|
||||
{data.status.guilds > 0 && ` · ${data.status.guilds} Server`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="dash-kpis">
|
||||
<div className="card dash-kpi">
|
||||
<span className="dash-v">{activeModules.length}<span className="dash-of">/{modules.length || '–'}</span></span>
|
||||
<span className="dash-l">Module an</span>
|
||||
<span className={`dash-t${unfinished.length > 0 ? ' warn' : ' gut'}`}>
|
||||
{unfinished.length > 0 ? `${unfinished.length} unvollständig` : 'alle einsatzbereit'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="card dash-kpi">
|
||||
<span className="dash-v">{serverStats?.members != null ? serverStats.members.toLocaleString('de-DE') : '—'}</span>
|
||||
<span className="dash-l">Member</span>
|
||||
<span className={`dash-t${memberDelta > 0 ? ' gut' : ''}`}>
|
||||
{memberDelta == null
|
||||
? ' '
|
||||
: `${memberDelta >= 0 ? '+' : ''}${memberDelta} in 7 Tagen`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="card dash-kpi">
|
||||
<span className="dash-v">{data.status.devlogs}</span>
|
||||
<span className="dash-l">Devlogs</span>
|
||||
<span className="dash-t">{seit(data.status.lastDevlog, 'noch keins')}</span>
|
||||
</div>
|
||||
<div className="card dash-kpi">
|
||||
<span className="dash-v">{fmtBytes(data.status.dbSizeBytes)}</span>
|
||||
<span className="dash-l">Datenbank</span>
|
||||
<span className={`dash-t${backupTage == null || backupTage > 2 ? ' warn' : ' gut'}`}>
|
||||
Backup {seit(data.status.lastBackup, 'fehlt')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{aktivitaet && aktivitaet.gesamt > 0 && (
|
||||
<div className="settings-section">
|
||||
<h2 className="settings-title">
|
||||
// Aktivität — {aktivitaet.gesamt.toLocaleString('de-DE')} Nachrichten in 30 Tagen
|
||||
</h2>
|
||||
<div className="dash-spark">
|
||||
{aktivitaet.tage.map((t) => (
|
||||
<span
|
||||
key={t.key}
|
||||
className="dash-bar"
|
||||
style={{ height: `${Math.max(3, (t.n / aktivitaet.max) * 100)}%` }}
|
||||
title={`${t.key}: ${t.n} Nachrichten`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{modules.length > 0 && moduleGroups.length > 0 && (
|
||||
<div className="settings-section">
|
||||
<h2 className="settings-title">// Module nach Bereich</h2>
|
||||
<div className="dash-groups">
|
||||
{moduleGroups.map((g) => {
|
||||
const drin = modules.filter((m) => m.group === g.id);
|
||||
if (drin.length === 0) return null;
|
||||
const an = drin.filter((m) => m.enabled).length;
|
||||
const offen = drin.filter((m) => m.enabled && m.missing.length > 0).length;
|
||||
return (
|
||||
<button
|
||||
className="dash-group"
|
||||
key={g.id}
|
||||
onClick={() => setTab('module')}
|
||||
title={`${g.label} im Modul-Überblick öffnen`}
|
||||
>
|
||||
<span className="dash-group-name">{g.label}</span>
|
||||
<span className={`dash-group-bar${offen > 0 ? ' warn' : ''}`}>
|
||||
<i style={{ width: `${(an / drin.length) * 100}%` }} />
|
||||
</span>
|
||||
<span className="dash-group-n">{an}/{drin.length}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{modules.length > 0 && (
|
||||
<div className="settings-section">
|
||||
<h2 className="settings-title">// Noch einzurichten</h2>
|
||||
|
||||
Reference in New Issue
Block a user