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

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

View file

@ -93,9 +93,9 @@
</script> </script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung --> <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=661"> <link rel="stylesheet" href="/css/design-system.css?v=662">
<link rel="stylesheet" href="/css/layout.css?v=661"> <link rel="stylesheet" href="/css/layout.css?v=662">
<link rel="stylesheet" href="/css/components.css?v=661"> <link rel="stylesheet" href="/css/components.css?v=662">
</head> </head>
<body> <body>
@ -562,7 +562,7 @@
<script src="/js/api.js?v=94"></script> <script src="/js/api.js?v=94"></script>
<script src="/js/ui.js?v=94"></script> <script src="/js/ui.js?v=94"></script>
<script src="/js/app.js?v=94"></script> <script src="/js/app.js?v=94"></script>
<script src="/js/worlds.js?v=661"></script> <script src="/js/worlds.js?v=662"></script>
<!-- Feature-Seiten werden lazy geladen --> <!-- Feature-Seiten werden lazy geladen -->

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. 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 APP_VERSION = '1.3.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app'; const IS_STAGING = location.hostname === 'staging.banyaro.app';

View file

@ -88,45 +88,35 @@ window.Page_moderation = (() => {
// ------------------------------------------------------------------ // ------------------------------------------------------------------
// TAB: ÜBERSICHT // 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) { async function _renderStats(el) {
const s = await API.get('/moderation/stats'); const s = await API.get('/moderation/stats');
el.innerHTML = ` el.innerHTML = `
<div class="adm-stats-grid"> <div class="adm-stats-grid">
${_statCard('warning', ${_statCard('warning', 'Offene Meldungen', s.open_reports, s.open_reports > 0 ? 'var(--c-danger)' : 'var(--c-text-muted)', 'forum')}
'Offene Meldungen', ${_statCard('image', 'Fotos ausstehend', s.pending_fotos, s.pending_fotos > 0 ? 'var(--c-warning)' : 'var(--c-text-muted)', 'fotos')}
s.open_reports, ${_statCard('skull', 'Gesperrte User', s.banned_users, s.banned_users > 0 ? '#f59e0b' : 'var(--c-text-muted)', 'user')}
s.open_reports > 0 ? 'var(--c-danger)' : 'var(--c-text-muted)')} ${_statCard('storefront','Züchter ausstehend',s.pending_zuchter, s.pending_zuchter > 0 ? 'var(--c-warning)' : 'var(--c-text-muted)', 'user')}
${_statCard('image', ${_statCard('clock', 'POI-Korrekturen', s.pending_poi_edits ?? 0,(s.pending_poi_edits ?? 0) > 0 ? 'var(--c-warning)' : 'var(--c-text-muted)', 'poi-edits')}
'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)')}
</div> </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 ` 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}; <svg class="ph-icon" style="width:24px;height:24px;color:${color};
margin-bottom:var(--space-2)" aria-hidden="true"> margin-bottom:var(--space-2)" aria-hidden="true">
<use href="/icons/phosphor.svg#${icon}"></use> <use href="/icons/phosphor.svg#${icon}"></use>
@ -135,6 +125,7 @@ window.Page_moderation = (() => {
color:var(--c-text)">${value ?? '—'}</div> color:var(--c-text)">${value ?? '—'}</div>
<div style="font-size:var(--text-xs);color:var(--c-text-secondary); <div style="font-size:var(--text-xs);color:var(--c-text-secondary);
margin-top:2px">${label}</div> 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> </div>
`; `;
} }

View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache Offline-Cache + Push Notifications + Tile-Cache
============================================================ */ ============================================================ */
const CACHE_VERSION = 'by-v661'; const CACHE_VERSION = 'by-v662';
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache