rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feature: Moderation-Kacheln klickbar — direkter Sprung in Tab (SW by-v662)

Browse source
This commit is contained in:
rene 2026-05-03 21:07:30 +02:00
parent 4cd2a33ca2
commit 0413483692
4 changed files with 26 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '661'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '662'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.3.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app';

49
backend/static/js/pages/moderation.js
View file

@ -88,45 +88,35 @@ window.Page_moderation = (() => {
// ------------------------------------------------------------------
// TAB: ÜBERSICHT
// ------------------------------------------------------------------
function _switchTab(tabId) {
_tab = tabId;
_container.querySelectorAll('#mod-tabs .by-tab').forEach(b =>
b.classList.toggle('active', b.dataset.tab === _tab)
);
_renderTab();
}
async function _renderStats(el) {
const s = await API.get('/moderation/stats');
el.innerHTML = `
<div class="adm-stats-grid">
${_statCard('warning',
'Offene Meldungen',
s.open_reports,
s.open_reports > 0 ? 'var(--c-danger)' : 'var(--c-text-muted)')}
${_statCard('image',
'Fotos ausstehend',
s.pending_fotos,
s.pending_fotos > 0 ? 'var(--c-warning)' : 'var(--c-text-muted)')}
${_statCard('skull',
'Gesperrte User',
s.banned_users,
s.banned_users > 0 ? '#f59e0b' : 'var(--c-text-muted)')}
${_statCard('storefront',
'Züchter ausstehend',
s.pending_zuchter,
s.pending_zuchter > 0 ? 'var(--c-warning)' : 'var(--c-text-muted)')}
${_statCard('clock',
'POI-Korrekturen',
s.pending_poi_edits ?? 0,
(s.pending_poi_edits ?? 0) > 0 ? 'var(--c-warning)' : 'var(--c-text-muted)')}
${_statCard('warning', 'Offene Meldungen', s.open_reports, s.open_reports > 0 ? 'var(--c-danger)' : 'var(--c-text-muted)', 'forum')}
${_statCard('image', 'Fotos ausstehend', s.pending_fotos, s.pending_fotos > 0 ? 'var(--c-warning)' : 'var(--c-text-muted)', 'fotos')}
${_statCard('skull', 'Gesperrte User', s.banned_users, s.banned_users > 0 ? '#f59e0b' : 'var(--c-text-muted)', 'user')}
${_statCard('storefront','Züchter ausstehend',s.pending_zuchter, s.pending_zuchter > 0 ? 'var(--c-warning)' : 'var(--c-text-muted)', 'user')}
${_statCard('clock', 'POI-Korrekturen', s.pending_poi_edits ?? 0,(s.pending_poi_edits ?? 0) > 0 ? 'var(--c-warning)' : 'var(--c-text-muted)', 'poi-edits')}
</div>
<div class="card" style="padding:var(--space-4);margin-top:var(--space-4)">
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);line-height:1.6">
${UI.icon('info')}
Das Moderations-Panel zeigt dir alle ausstehenden Aufgaben auf einen Blick.
Verwende die Tabs oben für Details zu Fotos, Usern und Forum-Meldungen.
</p>
</div>
`;
el.querySelectorAll('.mod-stat-card[data-tab]').forEach(card => {
card.addEventListener('click', () => _switchTab(card.dataset.tab));
});
}
function _statCard(icon, label, value, color) {
function _statCard(icon, label, value, color, tab) {
const clickable = tab ? `data-tab="${tab}" style="padding:var(--space-4);text-align:center;cursor:pointer;transition:box-shadow .15s,transform .15s" onmouseenter="this.style.boxShadow='var(--shadow-md)';this.style.transform='translateY(-2px)'" onmouseleave="this.style.boxShadow='';this.style.transform=''"` : `style="padding:var(--space-4);text-align:center"`;
return `
<div class="card" style="padding:var(--space-4);text-align:center">
<div class="card mod-stat-card" ${clickable}>
<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>
@ -135,6 +125,7 @@ window.Page_moderation = (() => {
color:var(--c-text)">${value ?? '—'}</div>
<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
margin-top:2px">${label}</div>
${tab ? `<div style="font-size:10px;color:var(--c-primary);margin-top:var(--space-2);opacity:.7">${UI.icon('arrow-right')} öffnen</div>` : ''}
</div>
`;
}