rene
0a262989f3
Rene: QR-Stats gehören nicht ins öffentliche Profil, eigene Seite fehlte.
Neue Seite 'Partner-Bereich' (Welten-Chip 🤝 zwischen Moderation und Admin,
role:partner — sichtbar für is_partner + Admin; _mergeDefaults reicht den
Chip an bestehende Welt-Configs nach):
- Einladungscode groß + Link-kopieren-Button
- Kacheln: Registrierungen gesamt / diesen Monat / unbestätigt
- QR-Kontingente mit Einzel-Code-Status (aus partner-profil.js hierher verschoben)
- Profil-Status-Karte (Entwurf/Prüfung/frei) mit Sprung zum Editor
Backend: GET /partner/my-stats (Codes mit Zahlen + Profil-Status).
Settings-Partner-Karte: zwei Buttons (Partner-Bereich primär, Profil sekundär);
Dank-Mail-CTA zeigt auf #partner-dashboard. Suite: 52 passed.
212 lines
10 KiB
JavaScript
212 lines
10 KiB
JavaScript
/* ============================================================
|
|
BAN YARO — Partner-Dashboard
|
|
Operative Daten für Partner: Code + Einladungslink, Statistik,
|
|
QR-Kontingente mit Einzel-Code-Status, Profil-Status.
|
|
(Die öffentliche Präsenz wird in partner-profil.js gepflegt.)
|
|
============================================================ */
|
|
|
|
window.Page_partner_dashboard = (() => {
|
|
|
|
let _container = null;
|
|
let _stats = null;
|
|
let _qrBatches = [];
|
|
|
|
async function init(container) {
|
|
_container = container;
|
|
_render();
|
|
await _load();
|
|
}
|
|
|
|
function refresh() { _load(); }
|
|
function onDogChange() {}
|
|
|
|
function _render() {
|
|
_container.innerHTML = `
|
|
<div style="max-width:640px;margin:0 auto;padding:var(--space-4)">
|
|
<div style="margin-bottom:var(--space-5)">
|
|
<h1 style="font-size:var(--text-xl);font-weight:800;margin:0 0 var(--space-1)">
|
|
${UI.icon('handshake')} Partner-Bereich
|
|
</h1>
|
|
<p style="color:var(--c-text-secondary);font-size:var(--text-sm);margin:0">
|
|
Dein Code, deine Zahlen, deine QR-Kontingente.
|
|
</p>
|
|
</div>
|
|
<div id="pd-content">
|
|
<div style="text-align:center;padding:var(--space-8);color:var(--c-text-muted)">Lade…</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
async function _load() {
|
|
const el = _container.querySelector('#pd-content');
|
|
try {
|
|
_stats = await API.get('/partner/my-stats');
|
|
_qrBatches = (await API.get('/partner/my-qr').catch(() => [])) || [];
|
|
el.innerHTML = _renderDashboard();
|
|
_bindEvents(el);
|
|
} catch (e) {
|
|
el.innerHTML = `<p class="text-danger">${UI.escape(e.message || 'Fehler beim Laden.')}</p>`;
|
|
}
|
|
}
|
|
|
|
function _renderDashboard() {
|
|
const codes = _stats?.codes || [];
|
|
return `
|
|
${codes.length === 0 ? `
|
|
<div class="card" style="padding:var(--space-5);text-align:center;margin-bottom:var(--space-3)">
|
|
<p class="text-sm-secondary" style="margin:0">
|
|
Dir ist noch kein Partner-Code zugeordnet.<br>
|
|
Melde dich bei <a href="mailto:partner@banyaro.app" class="text-primary">partner@banyaro.app</a> — wir richten ihn ein.
|
|
</p>
|
|
</div>` : codes.map(c => _renderCodeCard(c)).join('')}
|
|
|
|
${_renderQrSection()}
|
|
${_renderProfileCard()}
|
|
`;
|
|
}
|
|
|
|
function _renderCodeCard(c) {
|
|
const link = `https://banyaro.app/?ref=${encodeURIComponent(c.code)}`;
|
|
return `
|
|
<div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)">
|
|
<div style="font-size:var(--text-xs);font-weight:700;text-transform:uppercase;
|
|
letter-spacing:.06em;color:var(--c-text-muted);margin-bottom:var(--space-2)">Dein Einladungscode</div>
|
|
<div style="display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)">
|
|
<code style="font-size:var(--text-lg);font-weight:800;letter-spacing:.1em;color:var(--c-primary)">${UI.escape(c.code)}</code>
|
|
<button class="btn btn-sm btn-secondary pd-copy" data-link="${UI.escape(link)}">
|
|
${UI.icon('copy')} Link kopieren
|
|
</button>
|
|
</div>
|
|
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);text-align:center">
|
|
<div style="background:var(--c-surface-2);border-radius:var(--radius-md);padding:var(--space-3)">
|
|
<div style="font-size:var(--text-xl);font-weight:800;color:${c.registrations > 0 ? 'var(--c-success,#16a34a)' : 'var(--c-text)'}">${c.registrations}</div>
|
|
<div class="text-xs-muted">Registrierungen</div>
|
|
</div>
|
|
<div style="background:var(--c-surface-2);border-radius:var(--radius-md);padding:var(--space-3)">
|
|
<div style="font-size:var(--text-xl);font-weight:800">${c.registrations_month}</div>
|
|
<div class="text-xs-muted">diesen Monat</div>
|
|
</div>
|
|
<div style="background:var(--c-surface-2);border-radius:var(--radius-md);padding:var(--space-3)"
|
|
title="Registriert, aber E-Mail (noch) nicht bestätigt">
|
|
<div style="font-size:var(--text-xl);font-weight:800;color:var(--c-text-muted)">${c.attempts}</div>
|
|
<div class="text-xs-muted">unbestätigt</div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function _renderQrSection() {
|
|
if (!_qrBatches.length) return '';
|
|
return `
|
|
<div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)">
|
|
<div style="font-size:var(--text-xs);font-weight:700;text-transform:uppercase;
|
|
letter-spacing:.06em;color:var(--c-text-muted);margin-bottom:var(--space-2)">Meine QR-Codes</div>
|
|
<p class="text-xs-muted" style="margin:0 0 var(--space-3)">
|
|
Deine gedruckten QR-Codes (Sticker, Flyer). Jeder Scan und jede Registrierung
|
|
darüber wird gezählt — so siehst du, was wo funktioniert.
|
|
</p>
|
|
${_qrBatches.map(b => `
|
|
<div style="border-bottom:1px solid var(--c-border)">
|
|
<div style="display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0">
|
|
<div class="flex-1-min">
|
|
<div style="font-weight:600;font-size:var(--text-sm)">${UI.escape(b.label)}</div>
|
|
<div class="text-xs-muted">
|
|
${b.quantity} Codes · ${(b.created_at || '').slice(0, 10)} ·
|
|
<span style="color:${b.codes_used > 0 ? 'var(--c-success,#16a34a)' : 'inherit'}">${b.codes_used}/${b.quantity} verbraucht</span>
|
|
</div>
|
|
</div>
|
|
<div style="text-align:center;min-width:48px">
|
|
<div style="font-weight:700">${b.scans}</div>
|
|
<div class="text-xs-muted">Scans</div>
|
|
</div>
|
|
<div style="text-align:center;min-width:48px"
|
|
title="Registriert und E-Mail bestätigt${b.attempts ? ` — dazu ${b.attempts} unbestätigte` : ''}">
|
|
<div style="font-weight:700;color:${b.registrations > 0 ? 'var(--c-success,#16a34a)' : 'inherit'}">${b.registrations}${b.attempts ? `<span class="text-xs-muted" style="font-weight:400"> +${b.attempts}</span>` : ''}</div>
|
|
<div class="text-xs-muted">Registr.</div>
|
|
</div>
|
|
<button class="btn btn-sm btn-ghost pd-qr-codes-btn" data-id="${b.id}" title="Einzel-Codes anzeigen">
|
|
${UI.icon('list')}
|
|
</button>
|
|
<a class="btn btn-sm btn-secondary" href="/api/partner/my-qr/${b.id}/pdf" download>
|
|
${UI.icon('file-pdf')} PDF
|
|
</a>
|
|
</div>
|
|
<div class="hidden" id="pd-qr-codes-${b.id}" style="padding:0 0 var(--space-3)">
|
|
<div class="text-sm-muted">Lädt…</div>
|
|
</div>
|
|
</div>`).join('')}
|
|
</div>`;
|
|
}
|
|
|
|
function _renderProfileCard() {
|
|
const p = _stats?.profile || {};
|
|
let badge;
|
|
if (p.approved === 1) badge = `<span class="badge" style="background:#dcfce7;color:#16a34a">✓ Öffentlich sichtbar</span>`;
|
|
else if (p.approved === -1) badge = `<span class="badge" style="background:#fee2e2;color:#dc2626">✗ Abgelehnt</span>`;
|
|
else if (p.submitted_at) badge = `<span class="badge" style="background:#fef9c3;color:#a16207">⏳ In Prüfung</span>`;
|
|
else if (p.exists) badge = `<span class="badge">Entwurf</span>`;
|
|
else badge = `<span class="badge">Noch nicht angelegt</span>`;
|
|
return `
|
|
<div class="card" style="padding:var(--space-4)">
|
|
<div style="display:flex;align-items:center;gap:var(--space-3)">
|
|
<div class="flex-1-min">
|
|
<div style="font-size:var(--text-xs);font-weight:700;text-transform:uppercase;
|
|
letter-spacing:.06em;color:var(--c-text-muted);margin-bottom:var(--space-1)">Öffentliches Profil</div>
|
|
${badge}
|
|
</div>
|
|
<button class="btn btn-sm btn-secondary" id="pd-edit-profile">
|
|
${UI.icon('pencil-simple')} Bearbeiten
|
|
</button>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function _bindEvents(el) {
|
|
// Einladungslink kopieren
|
|
el.querySelectorAll('.pd-copy').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(btn.dataset.link);
|
|
UI.toast.success('Einladungslink kopiert.');
|
|
} catch {
|
|
UI.toast.info(btn.dataset.link);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Einzel-Code-Status (lazy, .hidden via classList)
|
|
el.querySelectorAll('.pd-qr-codes-btn').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
const box = el.querySelector(`#pd-qr-codes-${btn.dataset.id}`);
|
|
if (!box) return;
|
|
box.classList.toggle('hidden');
|
|
if (box.classList.contains('hidden') || box.dataset.loaded === '1') return;
|
|
try {
|
|
const codes = await API.get(`/partner/my-qr/${btn.dataset.id}/codes`);
|
|
box.dataset.loaded = '1';
|
|
box.innerHTML = codes.map(c => {
|
|
const used = c.registrations > 0;
|
|
const scanned = c.scans > 0;
|
|
return `
|
|
<div style="display:flex;align-items:center;gap:var(--space-2);padding:3px 0;font-size:var(--text-xs);border-bottom:1px dashed var(--c-border)">
|
|
<span style="font-weight:700;min-width:34px">#${c.seq}</span>
|
|
<code class="flex-1-min" style="color:var(--c-text-muted)">banyaro.app/q/${UI.escape(c.token)}</code>
|
|
<span class="text-xs-muted" style="min-width:60px;text-align:right">${c.scans} Scan${c.scans === 1 ? '' : 's'}</span>
|
|
${used
|
|
? `<span class="badge" style="background:#dcfce7;color:#16a34a" title="Registrierung am ${(c.first_registration_at || '').slice(0, 10)}">● verbraucht</span>`
|
|
: scanned
|
|
? `<span class="badge" style="background:#fef9c3;color:#a16207" title="Gescannt${c.last_scan_at ? ' am ' + c.last_scan_at.slice(0, 10) : ''}, noch keine bestätigte Registrierung">◐ gescannt</span>`
|
|
: `<span class="badge" style="background:var(--c-surface-2);color:var(--c-text-muted)">○ frei</span>`}
|
|
</div>`;
|
|
}).join('');
|
|
} catch (err) { UI.toast.error(err.message); }
|
|
});
|
|
});
|
|
|
|
el.querySelector('#pd-edit-profile')?.addEventListener('click', () => App.navigate('partner-profil'));
|
|
}
|
|
|
|
return { init, refresh, onDogChange };
|
|
|
|
})();
|