rene
5141ba9969
- HEIC→JPEG, MOV/AVI→MP4 Konvertierung bei allen Upload-Endpoints (media_utils.py) - ffmpeg im Docker-Image, Video-Thumbnails (extract_video_thumb, poster-Attribut) - Google Analytics entfernt, Umami self-hosted eingebunden (index.html, datenschutz.js) - Admin-Panel Analytics-Tab: Stat-Cards, Sparkline 7 Tage, Top-Seiten (Umami-API-Proxy) - Admin-Panel Tab-Icons korrigiert (aus vorhandenem Phosphor-Sprite) - users.real_name Spalte: Username öffentlich, echter Name privat und optional - Registrierung: Label "Benutzername", Leerzeichen verboten, Profanity-Blockliste - Datenschutzerklärung: GA-Abschnitt durch Umami-Text ersetzt
934 lines
43 KiB
JavaScript
934 lines
43 KiB
JavaScript
/* ============================================================
|
|
BAN YARO — Admin-Bereich
|
|
Nur für Admins und Moderatoren.
|
|
============================================================ */
|
|
|
|
window.Page_admin = (() => {
|
|
|
|
let _container = null;
|
|
let _appState = null;
|
|
let _tab = 'uebersicht';
|
|
|
|
const TABS = [
|
|
{ id: 'uebersicht', label: 'Übersicht', icon: 'house-line' },
|
|
{ id: 'nutzer', label: 'Nutzer', icon: 'users' },
|
|
{ id: 'forum', label: 'Forum & Meldungen', icon: 'chat-circle-dots' },
|
|
{ id: 'analytics', label: 'Analytics', icon: 'target' },
|
|
{ id: 'system', label: 'System', icon: 'gear' },
|
|
{ id: 'jobs', label: 'Jobs', icon: 'clock' },
|
|
{ id: 'audit', label: 'Audit-Log', icon: 'clipboard-text' },
|
|
];
|
|
|
|
// ------------------------------------------------------------------
|
|
async function init(container, appState) {
|
|
_container = container;
|
|
_appState = appState;
|
|
|
|
const u = appState.user;
|
|
const isMod = u?.rolle === 'admin' || u?.rolle === 'moderator' || u?.is_moderator;
|
|
if (!isMod) {
|
|
container.innerHTML = _emptyState('shield', 'Kein Zugriff', 'Dieser Bereich ist nur für Admins und Moderatoren.');
|
|
return;
|
|
}
|
|
|
|
_render();
|
|
}
|
|
|
|
function refresh() { _renderTab(); }
|
|
function onDogChange() {}
|
|
|
|
// ------------------------------------------------------------------
|
|
// SHELL
|
|
// ------------------------------------------------------------------
|
|
function _render() {
|
|
_container.innerHTML = `
|
|
<!-- Tabs -->
|
|
<div class="by-tabs adm-tabs" id="adm-tabs">
|
|
${TABS.map(t => `
|
|
<button class="by-tab${t.id === _tab ? ' active' : ''}" data-tab="${t.id}">
|
|
${UI.icon(t.icon)} ${t.label}
|
|
</button>
|
|
`).join('')}
|
|
</div>
|
|
|
|
<!-- Inhalt -->
|
|
<div id="adm-content"></div>
|
|
`;
|
|
|
|
_container.querySelectorAll('#adm-tabs .by-tab').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
_tab = btn.dataset.tab;
|
|
_container.querySelectorAll('#adm-tabs .by-tab').forEach(b =>
|
|
b.classList.toggle('active', b.dataset.tab === _tab)
|
|
);
|
|
_renderTab();
|
|
});
|
|
});
|
|
|
|
_renderTab();
|
|
}
|
|
|
|
async function _renderTab() {
|
|
const el = _container.querySelector('#adm-content');
|
|
if (!el) return;
|
|
el.innerHTML = `<div style="padding:var(--space-6);text-align:center;color:var(--c-text-muted)">Lade…</div>`;
|
|
try {
|
|
switch (_tab) {
|
|
case 'uebersicht': await _renderStats(el); break;
|
|
case 'nutzer': await _renderUsers(el); break;
|
|
case 'forum': await _renderForum(el); break;
|
|
case 'analytics': await _renderAnalytics(el); break;
|
|
case 'system': await _renderSystem(el); break;
|
|
case 'jobs': await _renderJobs(el); break;
|
|
case 'audit': await _renderAudit(el); break;
|
|
}
|
|
} catch (e) {
|
|
el.innerHTML = _emptyState('warning', 'Fehler', e.message || 'Unbekannter Fehler.');
|
|
}
|
|
}
|
|
|
|
// ------------------------------------------------------------------
|
|
// TAB: ANALYTICS
|
|
async function _renderAnalytics(el) {
|
|
const d = await API.get('/admin/analytics');
|
|
|
|
const pv = d.pageviews?.pageviews ?? [];
|
|
const ses = d.pageviews?.sessions ?? [];
|
|
|
|
// Sparkline SVG (Seitenaufrufe 7 Tage)
|
|
function _sparkline(data, color) {
|
|
if (!data.length) return '<span style="color:var(--c-text-muted);font-size:var(--text-xs)">Keine Daten</span>';
|
|
const vals = data.map(p => p.y ?? 0);
|
|
const max = Math.max(...vals, 1);
|
|
const W = 200, H = 48, pad = 4;
|
|
const pts = vals.map((v, i) => {
|
|
const x = pad + i * ((W - 2*pad) / Math.max(vals.length - 1, 1));
|
|
const y = H - pad - (v / max) * (H - 2*pad);
|
|
return `${x.toFixed(1)},${y.toFixed(1)}`;
|
|
}).join(' ');
|
|
return `<svg viewBox="0 0 ${W} ${H}" style="width:100%;height:48px">
|
|
<polyline points="${pts}" fill="none" stroke="${color}" stroke-width="2"
|
|
stroke-linejoin="round" stroke-linecap="round"/>
|
|
</svg>`;
|
|
}
|
|
|
|
const tv = v => v?.value ?? 0;
|
|
const fmt = v => Number(v).toLocaleString('de');
|
|
|
|
// Bounce Rate & Verweildauer
|
|
const bounceToday = d.today?.bounceRate?.value != null
|
|
? (d.today.bounceRate.value * 100).toFixed(0) + ' %'
|
|
: (d.today?.bounces?.value != null && d.today?.visits?.value > 0
|
|
? ((d.today.bounces.value / d.today.visits.value) * 100).toFixed(0) + ' %'
|
|
: '—');
|
|
const timeWeek = d.week?.totaltime?.value > 0 && d.week?.visits?.value > 0
|
|
? Math.round(d.week.totaltime.value / d.week.visits.value) + ' s'
|
|
: '—';
|
|
|
|
el.innerHTML = `
|
|
<div style="padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4)">
|
|
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-3)">
|
|
${_statCard('user', 'Besucher heute', fmt(tv(d.today?.visitors)), 'var(--c-primary)')}
|
|
${_statCard('eye', 'Aufrufe heute', fmt(tv(d.today?.pageviews)), 'var(--c-primary)')}
|
|
${_statCard('users','Besucher 7 Tage', fmt(tv(d.week?.visitors)), 'var(--c-success)')}
|
|
${_statCard('eye', 'Aufrufe 7 Tage', fmt(tv(d.week?.pageviews)), 'var(--c-success)')}
|
|
${_statCard('arrow-u-up-left','Bounce heute', bounceToday, 'var(--c-text-secondary)')}
|
|
${_statCard('timer','Ø Verweildauer 7 Tage', timeWeek, 'var(--c-text-secondary)')}
|
|
</div>
|
|
|
|
<div class="card" style="padding:var(--space-4)">
|
|
<div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
|
|
color:var(--c-text);margin-bottom:var(--space-3)">Seitenaufrufe — letzte 7 Tage</div>
|
|
${_sparkline(pv, 'var(--c-primary)')}
|
|
<div style="display:flex;justify-content:space-between;
|
|
font-size:var(--text-xs);color:var(--c-text-muted);margin-top:var(--space-1)">
|
|
${pv.map(p => `<span>${new Date(p.x).toLocaleDateString('de',{weekday:'short'})}</span>`).join('')}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="padding:var(--space-4)">
|
|
<div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
|
|
color:var(--c-text);margin-bottom:var(--space-3)">Top Seiten — letzte 7 Tage</div>
|
|
${(d.top_pages ?? []).length === 0
|
|
? `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Daten</p>`
|
|
: `<div style="display:flex;flex-direction:column;gap:var(--space-2)">
|
|
${d.top_pages.map(p => {
|
|
const maxY = d.top_pages[0].y;
|
|
const pct = maxY > 0 ? (p.y / maxY * 100).toFixed(0) : 0;
|
|
return `
|
|
<div>
|
|
<div style="display:flex;justify-content:space-between;
|
|
font-size:var(--text-xs);margin-bottom:3px">
|
|
<span style="color:var(--c-text);overflow:hidden;text-overflow:ellipsis;
|
|
white-space:nowrap;max-width:75%">${UI.escape(p.x)}</span>
|
|
<span style="color:var(--c-text-secondary);flex-shrink:0">${fmt(p.y)}</span>
|
|
</div>
|
|
<div style="height:4px;border-radius:2px;background:var(--c-surface-3)">
|
|
<div style="height:100%;width:${pct}%;border-radius:2px;
|
|
background:var(--c-primary);transition:width .3s"></div>
|
|
</div>
|
|
</div>`;
|
|
}).join('')}
|
|
</div>`}
|
|
</div>
|
|
|
|
</div>`;
|
|
}
|
|
|
|
// ------------------------------------------------------------------
|
|
// TAB: ÜBERSICHT
|
|
// ------------------------------------------------------------------
|
|
async function _renderStats(el) {
|
|
const s = await API.get('/admin/stats');
|
|
el.innerHTML = `
|
|
<div class="adm-stats-grid">
|
|
${_statCard('users', 'Nutzer gesamt', s.users_total, 'var(--c-primary)')}
|
|
${_statCard('user-plus', 'Neu heute', s.users_today, 'var(--c-success)')}
|
|
${_statCard('activity', 'Aktiv (7 Tage)', s.active_users_7d, 'var(--c-primary)')}
|
|
${_statCard('paw-print', 'Hunde', s.dogs_total, 'var(--c-primary)')}
|
|
${_statCard('chat-circle-dots','Threads', s.threads, 'var(--c-text-secondary)')}
|
|
${_statCard('warning', 'Offene Meldungen', s.open_reports, s.open_reports > 0 ? 'var(--c-danger)' : 'var(--c-text-muted)')}
|
|
${_statCard('skull', 'Gesperrte User', s.banned, s.banned > 0 ? '#f59e0b' : 'var(--c-text-muted)')}
|
|
${_statCard('warning-octagon', 'Giftk. aktiv', s.poison_active, 'var(--c-danger)')}
|
|
${_statCard('bell', 'Push-Abos', s.push_subscriptions, 'var(--c-text-secondary)')}
|
|
${_statCard('image', 'Media-Einträge', s.media_count, 'var(--c-text-secondary)')}
|
|
${_statCard('map-pin', 'Routen', s.routes_total, 'var(--c-text-secondary)')}
|
|
${_statCard('calendar', 'Events', s.events_total, 'var(--c-text-secondary)')}
|
|
${_statCard('map-trifold', 'OSM-Marker', s.osm_total.toLocaleString('de'), 'var(--c-success)')}
|
|
${_statCard('squares-four', 'Gecachte Tiles', s.osm_tiles.toLocaleString('de'), 'var(--c-text-secondary)')}
|
|
</div>
|
|
|
|
<div class="card" style="padding:var(--space-4)">
|
|
<p style="font-size:var(--text-sm);font-weight:600;margin:0 0 var(--space-3)">OSM-Cache nach Typ</p>
|
|
<div style="display:flex;flex-direction:column;gap:var(--space-2)">
|
|
${Object.entries(s.osm_by_type).map(([type, count]) => `
|
|
<div style="display:flex;justify-content:space-between;font-size:var(--text-sm)">
|
|
<span style="color:var(--c-text-secondary)">${type}</span>
|
|
<span style="font-weight:600">${count.toLocaleString('de')}</span>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="padding:var(--space-4)">
|
|
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0;line-height:1.6">
|
|
<svg class="ph-icon" aria-hidden="true" style="color:var(--c-primary)">
|
|
<use href="/icons/phosphor.svg#info"></use>
|
|
</svg>
|
|
Ersten Admin per SQL setzen:
|
|
<code style="background:var(--c-surface-2);padding:2px 6px;border-radius:4px;font-size:var(--text-xs);word-break:break-all;display:inline-block">
|
|
UPDATE users SET rolle='admin', is_moderator=1 WHERE email='deine@email.de';
|
|
</code>
|
|
</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function _statCard(icon, label, value, color) {
|
|
return `
|
|
<div class="card" style="padding:var(--space-4);text-align:center">
|
|
<svg class="ph-icon" style="width:24px;height:24px;color:${color};margin-bottom:var(--space-2)"
|
|
aria-hidden="true">
|
|
<use href="/icons/phosphor.svg#${icon}"></use>
|
|
</svg>
|
|
<div style="font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--c-text)">
|
|
${value ?? '—'}
|
|
</div>
|
|
<div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:2px">${label}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// ------------------------------------------------------------------
|
|
// TAB: NUTZER
|
|
// ------------------------------------------------------------------
|
|
async function _renderUsers(el) {
|
|
el.innerHTML = `
|
|
<div class="adm-filter-row">
|
|
<input id="adm-user-q" type="search" placeholder="Name oder E-Mail…"
|
|
class="adm-filter-input">
|
|
<select id="adm-user-rolle" class="adm-filter-select">
|
|
<option value="">Alle Rollen</option>
|
|
<option value="user">user</option>
|
|
<option value="moderator">moderator</option>
|
|
<option value="admin">admin</option>
|
|
</select>
|
|
</div>
|
|
<div id="adm-user-list">Lade…</div>
|
|
`;
|
|
|
|
const load = async () => {
|
|
const q = el.querySelector('#adm-user-q').value;
|
|
const rolle = el.querySelector('#adm-user-rolle').value;
|
|
const data = await API.get(`/admin/users?q=${encodeURIComponent(q)}&rolle=${rolle}`);
|
|
_renderUserList(el.querySelector('#adm-user-list'), data.users, data.total);
|
|
};
|
|
|
|
let timer;
|
|
el.querySelector('#adm-user-q').addEventListener('input', () => {
|
|
clearTimeout(timer);
|
|
timer = setTimeout(load, 350);
|
|
});
|
|
el.querySelector('#adm-user-rolle').addEventListener('change', load);
|
|
await load();
|
|
}
|
|
|
|
function _renderUserList(el, users, total) {
|
|
if (!users.length) {
|
|
el.innerHTML = _emptyState('users', 'Keine Nutzer gefunden', '');
|
|
return;
|
|
}
|
|
|
|
const isAdmin = _appState.user?.rolle === 'admin';
|
|
|
|
el.innerHTML = `
|
|
<div style="margin-bottom:var(--space-2);font-size:var(--text-xs);color:var(--c-text-muted)">
|
|
${total} Nutzer gefunden
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:var(--space-2)">
|
|
${users.map(u => `
|
|
<div class="card" style="padding:var(--space-3) var(--space-4);
|
|
${u.is_banned ? 'opacity:0.6;border-left:3px solid var(--c-danger)' : ''}">
|
|
<div style="display:flex;align-items:center;gap:var(--space-3)">
|
|
|
|
<!-- Avatar -->
|
|
<div style="width:36px;height:36px;border-radius:50%;flex-shrink:0;
|
|
background:var(--c-surface-2);
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-weight:var(--weight-bold);color:var(--c-text-secondary)">
|
|
${_esc(u.name[0].toUpperCase())}
|
|
</div>
|
|
|
|
<!-- Info -->
|
|
<div style="flex:1;min-width:0">
|
|
<div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--c-text)">
|
|
${_esc(u.name)}
|
|
${u.is_banned ? `<span style="font-size:10px;padding:1px 5px;border-radius:3px;
|
|
background:var(--c-danger);color:#fff;margin-left:4px">
|
|
GESPERRT</span>` : ''}
|
|
</div>
|
|
<div style="font-size:var(--text-xs);color:var(--c-text-muted)">
|
|
${_esc(u.email)} ·
|
|
<span style="color:${u.rolle === 'admin' ? 'var(--c-danger)' : u.rolle === 'moderator' ? '#f59e0b' : 'var(--c-text-muted)'}">
|
|
${_esc(u.rolle)}
|
|
</span>
|
|
· ${u.dog_count} Hund${u.dog_count !== 1 ? 'e' : ''}
|
|
· ${u.thread_count} Threads
|
|
</div>
|
|
<div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px">
|
|
🗺 ${u.route_count} Routen · ${u.total_km} km
|
|
· 📍 ${u.poi_count} POIs
|
|
${u.last_route ? '· zuletzt ' + new Date(u.last_route).toLocaleDateString('de-DE') : ''}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Aktionen -->
|
|
<div style="display:flex;gap:var(--space-1);flex-shrink:0">
|
|
${u.is_banned
|
|
? `<button class="btn btn-sm btn-ghost adm-unban" data-uid="${u.id}" data-name="${_esc(u.name)}"
|
|
title="Sperre aufheben" style="color:var(--c-success)">
|
|
<svg class="ph-icon"><use href="/icons/phosphor.svg#lock-open"></use></svg>
|
|
</button>`
|
|
: `<button class="btn btn-sm btn-ghost adm-ban" data-uid="${u.id}" data-name="${_esc(u.name)}"
|
|
title="Sperren" style="color:var(--c-danger)">
|
|
<svg class="ph-icon"><use href="/icons/phosphor.svg#lock"></use></svg>
|
|
</button>`
|
|
}
|
|
${isAdmin ? `
|
|
<button class="btn btn-sm btn-ghost adm-rolle" data-uid="${u.id}"
|
|
data-name="${_esc(u.name)}" data-rolle="${_esc(u.rolle)}"
|
|
title="Rolle ändern">
|
|
<svg class="ph-icon"><use href="/icons/phosphor.svg#shield"></use></svg>
|
|
</button>
|
|
<button class="btn btn-sm btn-ghost adm-delete" data-uid="${u.id}"
|
|
data-name="${_esc(u.name)}" title="Löschen"
|
|
style="color:var(--c-danger)">
|
|
<svg class="ph-icon"><use href="/icons/phosphor.svg#trash"></use></svg>
|
|
</button>
|
|
` : ''}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
|
|
// Events
|
|
el.querySelectorAll('.adm-ban').forEach(btn => {
|
|
btn.addEventListener('click', () => _banUser(btn.dataset.uid, btn.dataset.name, true));
|
|
});
|
|
el.querySelectorAll('.adm-unban').forEach(btn => {
|
|
btn.addEventListener('click', () => _banUser(btn.dataset.uid, btn.dataset.name, false));
|
|
});
|
|
el.querySelectorAll('.adm-rolle').forEach(btn => {
|
|
btn.addEventListener('click', () => _changeRolle(btn.dataset.uid, btn.dataset.name, btn.dataset.rolle));
|
|
});
|
|
el.querySelectorAll('.adm-delete').forEach(btn => {
|
|
btn.addEventListener('click', () => _deleteUser(btn.dataset.uid, btn.dataset.name));
|
|
});
|
|
}
|
|
|
|
async function _banUser(uid, name, ban) {
|
|
if (ban) {
|
|
const reason = await _prompt(`${name} sperren — Grund (optional):`);
|
|
if (reason === null) return; // abgebrochen
|
|
try {
|
|
await API.patch(`/admin/users/${uid}`, { is_banned: 1, ban_reason: reason || 'Kein Grund angegeben.' });
|
|
UI.toast.success(`${name} gesperrt.`);
|
|
_renderTab();
|
|
} catch (e) { UI.toast.error(e.message); }
|
|
} else {
|
|
try {
|
|
await API.patch(`/admin/users/${uid}`, { is_banned: 0, ban_reason: null });
|
|
UI.toast.success(`Sperre für ${name} aufgehoben.`);
|
|
_renderTab();
|
|
} catch (e) { UI.toast.error(e.message); }
|
|
}
|
|
}
|
|
|
|
async function _changeRolle(uid, name, currentRolle) {
|
|
const rollen = ['user', 'moderator', 'admin'].filter(r => r !== currentRolle);
|
|
UI.modal.open({
|
|
title: `Rolle ändern: ${name}`,
|
|
body: `
|
|
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-4)">
|
|
Aktuelle Rolle: <strong>${currentRolle}</strong>
|
|
</p>
|
|
<div style="display:flex;flex-direction:column;gap:var(--space-2)">
|
|
${rollen.map(r => `
|
|
<button class="btn btn-secondary adm-rolle-choice" data-rolle="${r}" form="">
|
|
${r === 'admin' ? `<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#shield"></use></svg>` : ''}
|
|
${r === 'moderator' ? `<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#star"></use></svg>` : ''}
|
|
${r === 'user' ? `<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#user"></use></svg>` : ''}
|
|
Als <strong>${r}</strong> setzen
|
|
</button>
|
|
`).join('')}
|
|
</div>
|
|
`,
|
|
});
|
|
|
|
document.querySelectorAll('.adm-rolle-choice').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
UI.modal.close();
|
|
try {
|
|
await API.patch(`/admin/users/${uid}`, { rolle: btn.dataset.rolle });
|
|
UI.toast.success(`${name} ist jetzt ${btn.dataset.rolle}.`);
|
|
_renderTab();
|
|
} catch (e) { UI.toast.error(e.message); }
|
|
});
|
|
});
|
|
}
|
|
|
|
async function _deleteUser(uid, name) {
|
|
const ok = await UI.modal.confirm({
|
|
title: `${name} löschen?`,
|
|
message: 'Alle Daten dieses Accounts werden unwiderruflich gelöscht — Hunde, Tagebuch, Beiträge.',
|
|
confirmText: 'Endgültig löschen',
|
|
});
|
|
if (!ok) return;
|
|
try {
|
|
await API.del(`/admin/users/${uid}`);
|
|
UI.toast.success(`${name} gelöscht.`);
|
|
_renderTab();
|
|
} catch (e) { UI.toast.error(e.message); }
|
|
}
|
|
|
|
// ------------------------------------------------------------------
|
|
// TAB: FORUM & MELDUNGEN
|
|
// ------------------------------------------------------------------
|
|
async function _renderForum(el) {
|
|
el.innerHTML = `
|
|
<!-- Unternavigation -->
|
|
<div class="adm-subnav">
|
|
<button class="btn btn-primary btn-sm adm-forum-nav" data-view="reports" id="adm-fn-reports">
|
|
Offene Meldungen
|
|
</button>
|
|
<button class="btn btn-ghost btn-sm adm-forum-nav" data-view="threads" id="adm-fn-threads">
|
|
Alle Threads
|
|
</button>
|
|
</div>
|
|
<div id="adm-forum-content">Lade…</div>
|
|
`;
|
|
|
|
el.querySelectorAll('.adm-forum-nav').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
el.querySelectorAll('.adm-forum-nav').forEach(b => {
|
|
b.className = b === btn ? 'btn btn-primary btn-sm adm-forum-nav' : 'btn btn-ghost btn-sm adm-forum-nav';
|
|
});
|
|
await _renderForumView(el.querySelector('#adm-forum-content'), btn.dataset.view);
|
|
});
|
|
});
|
|
|
|
await _renderForumView(el.querySelector('#adm-forum-content'), 'reports');
|
|
}
|
|
|
|
async function _renderForumView(el, view) {
|
|
el.innerHTML = '<div style="padding:var(--space-4);text-align:center;color:var(--c-text-muted)">Lade…</div>';
|
|
|
|
if (view === 'reports') {
|
|
const reports = await API.get('/admin/reports');
|
|
if (!reports.length) {
|
|
el.innerHTML = _emptyState('check', 'Keine offenen Meldungen', 'Alles sauber.');
|
|
return;
|
|
}
|
|
el.innerHTML = `
|
|
<div style="display:flex;flex-direction:column;gap:var(--space-3)">
|
|
${reports.map(r => `
|
|
<div class="card" style="padding:var(--space-4);
|
|
${r.resolved ? 'opacity:0.5' : 'border-left:3px solid var(--c-danger)'}">
|
|
<div style="display:flex;align-items:flex-start;gap:var(--space-3)">
|
|
<div style="flex:1;min-width:0">
|
|
<div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-bottom:var(--space-1)">
|
|
${r.resolved ? '✓ Erledigt · ' : ''}
|
|
${_esc(r.target_type)} #${r.target_id} ·
|
|
Gemeldet von <strong>${_esc(r.melder_name)}</strong>
|
|
</div>
|
|
<div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
|
|
color:var(--c-text);margin-bottom:var(--space-1)">
|
|
Grund: ${_esc(r.grund)}
|
|
</div>
|
|
${r.content_preview ? `
|
|
<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
|
|
padding:var(--space-2) var(--space-3);background:var(--c-surface-2);
|
|
border-radius:var(--radius-sm)">
|
|
${_esc(r.content_preview)}
|
|
</div>` : ''}
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:var(--space-2);flex-shrink:0">
|
|
<button class="btn btn-sm ${r.resolved ? 'btn-ghost' : 'btn-primary'} adm-resolve-btn"
|
|
data-rid="${r.id}" data-resolved="${r.resolved}"
|
|
title="${r.resolved ? 'Wieder öffnen' : 'Als erledigt markieren'}">
|
|
<svg class="ph-icon"><use href="/icons/phosphor.svg#${r.resolved ? 'arrow-square-out' : 'check'}"></use></svg>
|
|
</button>
|
|
${!r.resolved ? `
|
|
<button class="btn btn-sm btn-ghost adm-del-content"
|
|
data-type="${r.target_type}" data-id="${r.target_id}"
|
|
title="Inhalt löschen" style="color:var(--c-danger)">
|
|
<svg class="ph-icon"><use href="/icons/phosphor.svg#trash"></use></svg>
|
|
</button>` : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
|
|
el.querySelectorAll('.adm-resolve-btn').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
try {
|
|
await API.patch(`/admin/reports/${btn.dataset.rid}`, {});
|
|
_renderForumView(el, 'reports');
|
|
} catch (e) { UI.toast.error(e.message); }
|
|
});
|
|
});
|
|
|
|
el.querySelectorAll('.adm-del-content').forEach(btn => {
|
|
btn.addEventListener('click', () => _deleteContent(btn.dataset.type, btn.dataset.id, el, 'reports'));
|
|
});
|
|
|
|
} else {
|
|
// Threads
|
|
el.innerHTML = `
|
|
<div class="adm-filter-row">
|
|
<input id="adm-thread-q" type="search" placeholder="Threads durchsuchen…"
|
|
class="adm-filter-input">
|
|
<label class="adm-filter-label">
|
|
<input type="checkbox" id="adm-show-deleted"> Gelöschte
|
|
</label>
|
|
</div>
|
|
<div id="adm-thread-list">Lade…</div>
|
|
`;
|
|
|
|
const loadThreads = async () => {
|
|
const q = el.querySelector('#adm-thread-q').value;
|
|
const deleted = el.querySelector('#adm-show-deleted').checked ? 1 : 0;
|
|
const data = await API.get(`/admin/forum/threads?q=${encodeURIComponent(q)}&deleted=${deleted}`);
|
|
_renderThreadList(el.querySelector('#adm-thread-list'), data.threads, el);
|
|
};
|
|
|
|
let t2;
|
|
el.querySelector('#adm-thread-q').addEventListener('input', () => { clearTimeout(t2); t2 = setTimeout(loadThreads, 350); });
|
|
el.querySelector('#adm-show-deleted').addEventListener('change', loadThreads);
|
|
await loadThreads();
|
|
}
|
|
}
|
|
|
|
function _renderThreadList(el, threads, parentEl) {
|
|
if (!threads.length) {
|
|
el.innerHTML = _emptyState('chat-circle-dots', 'Keine Threads', '');
|
|
return;
|
|
}
|
|
el.innerHTML = `
|
|
<div style="display:flex;flex-direction:column;gap:var(--space-2)">
|
|
${threads.map(t => `
|
|
<div class="card" style="padding:var(--space-3) var(--space-4);
|
|
${t.is_deleted ? 'opacity:0.5;border-left:3px solid var(--c-danger)' : ''}
|
|
${t.is_locked ? 'border-left:3px solid #f59e0b' : ''}">
|
|
<div style="display:flex;align-items:center;gap:var(--space-3)">
|
|
<div style="flex:1;min-width:0">
|
|
<div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
|
|
color:var(--c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
|
|
${t.is_deleted ? '<s>' : ''}${_esc(t.titel)}${t.is_deleted ? '</s>' : ''}
|
|
</div>
|
|
<div style="font-size:var(--text-xs);color:var(--c-text-muted)">
|
|
von ${_esc(t.autor_name)} ·
|
|
${t.antworten} Antworten ·
|
|
${t.is_pinned ? '📌 ' : ''}${t.is_locked ? '🔒 ' : ''}${t.is_deleted ? '🗑 gelöscht' : ''}
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;gap:var(--space-1);flex-shrink:0">
|
|
${!t.is_deleted ? `
|
|
<button class="btn btn-sm btn-ghost adm-pin" data-tid="${t.id}"
|
|
data-pinned="${t.is_pinned}" title="${t.is_pinned ? 'Entpinnen' : 'Anpinnen'}">
|
|
<svg class="ph-icon"><use href="/icons/phosphor.svg#push-pin"></use></svg>
|
|
</button>
|
|
<button class="btn btn-sm btn-ghost adm-lock" data-tid="${t.id}"
|
|
data-locked="${t.is_locked}" title="${t.is_locked ? 'Entsperren' : 'Sperren'}">
|
|
<svg class="ph-icon"><use href="/icons/phosphor.svg#${t.is_locked ? 'lock-open' : 'lock'}"></use></svg>
|
|
</button>
|
|
<button class="btn btn-sm btn-ghost adm-del-thread" data-tid="${t.id}"
|
|
title="Löschen" style="color:var(--c-danger)">
|
|
<svg class="ph-icon"><use href="/icons/phosphor.svg#trash"></use></svg>
|
|
</button>
|
|
` : `
|
|
<button class="btn btn-sm btn-ghost adm-restore-thread" data-tid="${t.id}"
|
|
title="Wiederherstellen" style="color:var(--c-success)">
|
|
<svg class="ph-icon"><use href="/icons/phosphor.svg#arrow-square-out"></use></svg>
|
|
</button>
|
|
`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
|
|
el.querySelectorAll('.adm-pin').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
await API.patch(`/admin/forum/threads/${btn.dataset.tid}`, { is_pinned: btn.dataset.pinned === '1' ? 0 : 1 });
|
|
parentEl.querySelector('#adm-thread-q').dispatchEvent(new Event('input'));
|
|
});
|
|
});
|
|
el.querySelectorAll('.adm-lock').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
await API.patch(`/admin/forum/threads/${btn.dataset.tid}`, { is_locked: btn.dataset.locked === '1' ? 0 : 1 });
|
|
parentEl.querySelector('#adm-thread-q').dispatchEvent(new Event('input'));
|
|
});
|
|
});
|
|
el.querySelectorAll('.adm-del-thread').forEach(btn => {
|
|
btn.addEventListener('click', () => _deleteContent('thread', btn.dataset.tid, parentEl, 'threads'));
|
|
});
|
|
el.querySelectorAll('.adm-restore-thread').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
await API.patch(`/admin/forum/threads/${btn.dataset.tid}`, { is_deleted: 0 });
|
|
parentEl.querySelector('#adm-thread-q').dispatchEvent(new Event('input'));
|
|
});
|
|
});
|
|
}
|
|
|
|
async function _deleteContent(type, id, parentEl, view) {
|
|
const ok = await UI.modal.confirm({
|
|
title: `${type === 'thread' ? 'Thread' : 'Beitrag'} löschen?`,
|
|
message: 'Der Inhalt wird als gelöscht markiert.',
|
|
confirmText: 'Löschen',
|
|
});
|
|
if (!ok) return;
|
|
try {
|
|
await API.del(`/admin/forum/${type === 'thread' ? 'threads' : 'posts'}/${id}`);
|
|
UI.toast.success('Gelöscht.');
|
|
_renderForumView(parentEl, view);
|
|
} catch (e) { UI.toast.error(e.message); }
|
|
}
|
|
|
|
// ------------------------------------------------------------------
|
|
// TAB: SYSTEM
|
|
// ------------------------------------------------------------------
|
|
async function _renderSystem(el) {
|
|
el.innerHTML = `
|
|
<div style="display:flex;justify-content:flex-end;margin-bottom:var(--space-3)">
|
|
<button class="btn btn-ghost btn-sm" id="adm-sys-refresh">
|
|
${UI.icon('arrows-clockwise')} Aktualisieren
|
|
</button>
|
|
</div>
|
|
<div id="adm-sys-cards">Lade…</div>
|
|
<div style="margin-top:var(--space-5)">
|
|
<div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)">
|
|
<span style="font-size:var(--text-sm);font-weight:600">Server-Logs</span>
|
|
<select id="adm-log-level" class="input" style="width:auto;padding:2px 8px;font-size:var(--text-xs)">
|
|
<option value="">Alle</option>
|
|
<option value="INFO">INFO</option>
|
|
<option value="WARNING">WARNING</option>
|
|
<option value="ERROR">ERROR</option>
|
|
</select>
|
|
<button class="btn btn-ghost btn-sm" id="adm-log-refresh">${UI.icon('arrows-clockwise')}</button>
|
|
</div>
|
|
<div id="adm-log-box" style="
|
|
background:var(--c-surface-2);border-radius:var(--radius-md);
|
|
padding:var(--space-3);font-family:monospace;font-size:11px;
|
|
max-height:420px;overflow-y:auto;line-height:1.6">Lade…</div>
|
|
</div>
|
|
`;
|
|
const loadLogs = async () => {
|
|
const level = el.querySelector('#adm-log-level').value;
|
|
const box = el.querySelector('#adm-log-box');
|
|
box.textContent = 'Lade…';
|
|
const rows = await API.get(`/admin/logs?lines=200${level ? '&level=' + level : ''}`);
|
|
const COLORS = { ERROR: '#ef4444', WARNING: '#f59e0b', INFO: '#6b7280', DEBUG: '#94a3b8' };
|
|
box.innerHTML = rows.reverse().map(r => {
|
|
const color = COLORS[r.l] || '#6b7280';
|
|
return `<div style="border-bottom:1px solid var(--c-border);padding:2px 0">` +
|
|
`<span style="color:var(--c-text-muted)">${r.t}</span> ` +
|
|
`<span style="color:${color};font-weight:600">${r.l}</span> ` +
|
|
`<span style="color:var(--c-text-secondary)">${_esc(r.n)}</span> ` +
|
|
`<span>${_esc(r.m)}</span></div>`;
|
|
}).join('') || '<span style="color:var(--c-text-muted)">Keine Einträge</span>';
|
|
};
|
|
el.querySelector('#adm-sys-refresh').addEventListener('click', () => {
|
|
_loadSystemCards(el.querySelector('#adm-sys-cards'));
|
|
loadLogs();
|
|
});
|
|
el.querySelector('#adm-log-refresh').addEventListener('click', loadLogs);
|
|
el.querySelector('#adm-log-level').addEventListener('change', loadLogs);
|
|
await _loadSystemCards(el.querySelector('#adm-sys-cards'));
|
|
await loadLogs();
|
|
}
|
|
|
|
async function _loadSystemCards(el) {
|
|
el.innerHTML = `<div style="padding:var(--space-4);text-align:center;color:var(--c-text-muted)">Lade…</div>`;
|
|
const s = await API.get('/admin/system');
|
|
const diskUsedGb = s.disk_total_gb - s.disk_free_gb;
|
|
const diskPct = s.disk_total_gb > 0 ? Math.round(diskUsedGb / s.disk_total_gb * 100) : 0;
|
|
const uptime = _formatUptime(s.uptime_seconds);
|
|
el.innerHTML = `
|
|
<div class="adm-stats-grid">
|
|
${_statCard('database', 'Datenbank', s.db_size_mb.toFixed(1) + ' MB', 'var(--c-primary)')}
|
|
${_statCard('image', 'Media-Ordner', s.media_size_mb.toFixed(1) + ' MB','var(--c-text-secondary)')}
|
|
${_statCard('timer', 'Uptime', uptime, 'var(--c-success)')}
|
|
${_statCard('hard-drive','Disk frei', s.disk_free_gb.toFixed(1) + ' GB','diskPct > 85 ? "var(--c-danger)" : "var(--c-text-secondary)"')}
|
|
</div>
|
|
<div class="card" style="margin-top:var(--space-4);padding:var(--space-4)">
|
|
<div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
|
|
color:var(--c-text);margin-bottom:var(--space-3)">Disk-Auslastung</div>
|
|
<div style="display:flex;align-items:center;gap:var(--space-3)">
|
|
<div style="flex:1;height:8px;background:var(--c-surface-2);border-radius:4px;overflow:hidden">
|
|
<div style="height:100%;width:${diskPct}%;background:${diskPct > 85 ? 'var(--c-danger)' : diskPct > 65 ? '#f59e0b' : 'var(--c-success)'};border-radius:4px;transition:width .3s"></div>
|
|
</div>
|
|
<div style="font-size:var(--text-sm);color:var(--c-text-secondary);white-space:nowrap">
|
|
${diskPct}% · ${diskUsedGb.toFixed(1)} / ${s.disk_total_gb.toFixed(1)} GB
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:var(--space-3);font-size:var(--text-xs);color:var(--c-text-muted)">
|
|
Python ${_esc(s.python_version)}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function _formatUptime(secs) {
|
|
const d = Math.floor(secs / 86400);
|
|
const h = Math.floor((secs % 86400) / 3600);
|
|
const m = Math.floor((secs % 3600) / 60);
|
|
if (d > 0) return `${d}d ${h}h`;
|
|
if (h > 0) return `${h}h ${m}min`;
|
|
return `${m}min`;
|
|
}
|
|
|
|
// ------------------------------------------------------------------
|
|
// TAB: JOBS
|
|
// ------------------------------------------------------------------
|
|
async function _renderJobs(el) {
|
|
el.innerHTML = `
|
|
<div style="display:flex;justify-content:flex-end;margin-bottom:var(--space-3)">
|
|
<button class="btn btn-ghost btn-sm" id="adm-jobs-refresh">
|
|
${UI.icon('arrows-clockwise')} Aktualisieren
|
|
</button>
|
|
</div>
|
|
<div id="adm-jobs-list">Lade…</div>
|
|
`;
|
|
el.querySelector('#adm-jobs-refresh').addEventListener('click', () => _loadJobs(el.querySelector('#adm-jobs-list')));
|
|
await _loadJobs(el.querySelector('#adm-jobs-list'));
|
|
}
|
|
|
|
async function _loadJobs(el) {
|
|
el.innerHTML = `<div style="padding:var(--space-4);text-align:center;color:var(--c-text-muted)">Lade…</div>`;
|
|
const jobs = await API.get('/admin/scheduler/jobs');
|
|
if (!jobs.length) {
|
|
el.innerHTML = _emptyState('timer', 'Keine Jobs', 'Der Scheduler hat keine registrierten Jobs.');
|
|
return;
|
|
}
|
|
el.innerHTML = `
|
|
<div class="card adm-table-card">
|
|
<div class="adm-table-scroll">
|
|
<table class="adm-table">
|
|
<thead>
|
|
<tr style="background:var(--c-surface-2);text-align:left">
|
|
<th class="adm-th">Job</th>
|
|
<th class="adm-th">Nächster Lauf</th>
|
|
<th class="adm-th">Trigger</th>
|
|
<th class="adm-th"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${jobs.map((j, i) => `
|
|
<tr style="${i % 2 === 1 ? 'background:var(--c-surface-2)' : ''}">
|
|
<td class="adm-td" style="font-weight:var(--weight-semibold);color:var(--c-text)">
|
|
${_esc(j.name)}
|
|
<div class="adm-job-id">${_esc(j.id)}</div>
|
|
</td>
|
|
<td class="adm-td" style="color:var(--c-text-secondary);white-space:nowrap">
|
|
${j.next_run_time ? _formatDateTime(j.next_run_time) : '<span style="color:var(--c-text-muted)">—</span>'}
|
|
</td>
|
|
<td class="adm-td adm-td-trigger">
|
|
${_esc(j.trigger)}
|
|
</td>
|
|
<td class="adm-td" style="text-align:right">
|
|
<button class="btn btn-sm btn-ghost adm-job-trigger adm-icon-btn" data-id="${_esc(j.id)}" data-name="${_esc(j.name)}"
|
|
title="Jetzt ausführen" style="color:var(--c-primary)">
|
|
${UI.icon('play')}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`;
|
|
el.querySelectorAll('.adm-job-trigger').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
btn.disabled = true;
|
|
try {
|
|
await API.post(`/admin/scheduler/trigger/${encodeURIComponent(btn.dataset.id)}`, {});
|
|
UI.toast.success(`Job "${btn.dataset.name}" wird ausgeführt.`);
|
|
} catch (e) {
|
|
UI.toast.error(e.message || 'Fehler beim Auslösen des Jobs.');
|
|
} finally {
|
|
btn.disabled = false;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function _formatDateTime(iso) {
|
|
try {
|
|
const d = new Date(iso);
|
|
return d.toLocaleString('de-DE', { day:'2-digit', month:'2-digit', year:'numeric', hour:'2-digit', minute:'2-digit' });
|
|
} catch { return iso; }
|
|
}
|
|
|
|
// ------------------------------------------------------------------
|
|
// TAB: AUDIT-LOG
|
|
// ------------------------------------------------------------------
|
|
async function _renderAudit(el) {
|
|
el.innerHTML = `
|
|
<div style="display:flex;justify-content:flex-end;margin-bottom:var(--space-3)">
|
|
<button class="btn btn-ghost btn-sm" id="adm-audit-refresh">
|
|
${UI.icon('arrows-clockwise')} Aktualisieren
|
|
</button>
|
|
</div>
|
|
<div id="adm-audit-list">Lade…</div>
|
|
`;
|
|
el.querySelector('#adm-audit-refresh').addEventListener('click', () => _loadAudit(el.querySelector('#adm-audit-list')));
|
|
await _loadAudit(el.querySelector('#adm-audit-list'));
|
|
}
|
|
|
|
async function _loadAudit(el) {
|
|
el.innerHTML = `<div style="padding:var(--space-4);text-align:center;color:var(--c-text-muted)">Lade…</div>`;
|
|
const rows = await API.get('/admin/audit?limit=50');
|
|
if (!rows.length) {
|
|
el.innerHTML = _emptyState('list-bullets', 'Keine Einträge', 'Noch keine Admin-Aktionen protokolliert.');
|
|
return;
|
|
}
|
|
el.innerHTML = `
|
|
<div class="card adm-table-card">
|
|
<div class="adm-table-scroll">
|
|
<table class="adm-table">
|
|
<thead>
|
|
<tr style="background:var(--c-surface-2);text-align:left">
|
|
<th class="adm-th">Wann</th>
|
|
<th class="adm-th">Admin</th>
|
|
<th class="adm-th">Aktion</th>
|
|
<th class="adm-th">Ziel</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${rows.map((r, i) => `
|
|
<tr style="${i % 2 === 1 ? 'background:var(--c-surface-2)' : ''}">
|
|
<td class="adm-td" style="color:var(--c-text-muted);white-space:nowrap;font-size:var(--text-xs)">
|
|
${_formatDateTime(r.created_at)}
|
|
</td>
|
|
<td class="adm-td" style="color:var(--c-text);white-space:nowrap">
|
|
${_esc(r.admin_name || '—')}
|
|
</td>
|
|
<td class="adm-td">
|
|
<span class="adm-badge-mono">${_esc(r.action)}</span>
|
|
${r.detail ? `<div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:2px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${_esc(r.detail)}</div>` : ''}
|
|
</td>
|
|
<td class="adm-td" style="color:var(--c-text-secondary);font-size:var(--text-xs);white-space:nowrap">
|
|
${_esc(r.target || '—')}
|
|
</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// ------------------------------------------------------------------
|
|
// HELPERS
|
|
// ------------------------------------------------------------------
|
|
function _prompt(msg) {
|
|
return new Promise(resolve => {
|
|
UI.modal.open({
|
|
title: 'Eingabe',
|
|
body: `
|
|
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-3)">${msg}</p>
|
|
<input id="adm-prompt-input" type="text"
|
|
style="width:100%;box-sizing:border-box;padding:var(--space-2) var(--space-3);
|
|
border:1.5px solid var(--c-border);border-radius:var(--radius-md);
|
|
font-size:var(--text-sm);font-family:inherit;
|
|
background:var(--c-surface);color:var(--c-text)">
|
|
`,
|
|
footer: `
|
|
<button class="btn btn-primary" id="adm-prompt-ok" form="">OK</button>
|
|
<button class="btn btn-ghost" id="adm-prompt-cancel" form="">Abbrechen</button>
|
|
`,
|
|
});
|
|
document.getElementById('adm-prompt-ok')?.addEventListener('click', () => {
|
|
const val = document.getElementById('adm-prompt-input')?.value || '';
|
|
UI.modal.close();
|
|
resolve(val);
|
|
});
|
|
document.getElementById('adm-prompt-cancel')?.addEventListener('click', () => {
|
|
UI.modal.close();
|
|
resolve(null);
|
|
});
|
|
});
|
|
}
|
|
|
|
function _emptyState(icon, title, text) {
|
|
return `
|
|
<div style="text-align:center;padding:var(--space-10) var(--space-4)">
|
|
<svg class="ph-icon" style="width:40px;height:40px;color:var(--c-border);
|
|
margin-bottom:var(--space-3)" aria-hidden="true">
|
|
<use href="/icons/phosphor.svg#${icon}"></use>
|
|
</svg>
|
|
<p style="font-weight:var(--weight-semibold);color:var(--c-text);margin:0 0 var(--space-1)">${title}</p>
|
|
${text ? `<p style="font-size:var(--text-sm);color:var(--c-text-muted);margin:0">${text}</p>` : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function _esc(s) {
|
|
if (!s) return '';
|
|
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
|
}
|
|
|
|
// ------------------------------------------------------------------
|
|
return { init, refresh, onDogChange };
|
|
|
|
})();
|