Maxim Dolgolyov
192055dc0f
- gam-award-grid/gam-reset-grid: CSS Grid, адаптив 800px - gam-user-col/filter/select — единые стили из design system - gam-preset/gam-reason-tag — через CSS-классы, без inline - gam-num-input: Unbounded шрифт, выровненный по центру - gam-award-footer + gam-reset-warning как отдельные блоки - убраны все эмоджи; пресеты сбрасываются через gamSetXP/gamSetCoins Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
243 lines
12 KiB
JavaScript
243 lines
12 KiB
JavaScript
'use strict';
|
|
/* admin → gam (gamification) section: stats + top + recent XP + purchases + award XP/coins */
|
|
(function () {
|
|
'use strict';
|
|
let inited = false;
|
|
let _gamAwarding = false;
|
|
let _allUsers = []; // кэш пользователей для <select>-ов
|
|
|
|
const XP_REASONS = {
|
|
'daily_activity': ['sun', '#F59E0B', 'Ежедневная активность'],
|
|
'correct_answers': ['check-circle', '#10B981', 'Правильные ответы'],
|
|
'test_complete': ['file-text', '#06B6D4', 'Тест завершён'],
|
|
'test_90+': ['zap', '#9B5DE5', 'Тест на 90%+'],
|
|
'test_perfect': ['trophy', '#F59E0B', 'Идеальный тест (100%)'],
|
|
'lab_experiment': ['atom', '#06D6A0', 'Лабораторный эксперимент'],
|
|
'daily_goal': ['target', '#EF476F', 'Ежедневная цель выполнена'],
|
|
'Admin award': ['crown', '#9B5DE5', 'Начисление администратором'],
|
|
};
|
|
|
|
const PRESET_REASONS = [
|
|
'Admin award',
|
|
'За участие в мероприятии',
|
|
'За активность на уроке',
|
|
'Бонус за отличную работу',
|
|
'Поощрение за серию',
|
|
'Компенсация (техническая)',
|
|
];
|
|
|
|
function fmtXPReason(reason) {
|
|
if (!reason) return '—';
|
|
const entry = XP_REASONS[reason];
|
|
if (entry) {
|
|
const [icon, color, label] = entry;
|
|
return `<span style="display:inline-flex;align-items:center;gap:5px"><span style="color:${color};display:inline-flex">${lsIcon(icon, 14)}</span>${label}</span>`;
|
|
}
|
|
if (reason.startsWith('achievement:')) {
|
|
return `<span style="display:inline-flex;align-items:center;gap:5px"><span style="color:#F59E0B;display:inline-flex">${lsIcon('award', 14)}</span>Достижение: ${esc(reason.slice(12))}</span>`;
|
|
}
|
|
if (reason.startsWith('Испытание:')) {
|
|
return `<span style="display:inline-flex;align-items:center;gap:5px"><span style="color:#EF476F;display:inline-flex">${lsIcon('swords', 14)}</span>${esc(reason)}</span>`;
|
|
}
|
|
return esc(reason);
|
|
}
|
|
|
|
/* ── Загрузить всех пользователей для select-ов ─────────────────────── */
|
|
async function loadAllUsers() {
|
|
if (_allUsers.length) return _allUsers;
|
|
try {
|
|
const r = await LS.adminGetUsers({ limit: 500 });
|
|
_allUsers = (r.users || []).sort((a, b) => (a.name || '').localeCompare(b.name || '', 'ru'));
|
|
} catch (e) { _allUsers = []; }
|
|
return _allUsers;
|
|
}
|
|
|
|
function buildUserOptions(selected) {
|
|
const blank = `<option value="">— Выберите пользователя —</option>`;
|
|
return blank + _allUsers.map(u => {
|
|
const label = (u.name || u.email || 'ID:' + u.id) + (u.role !== 'student' ? ' (' + u.role + ')' : '');
|
|
const sel = selected && selected == u.id ? ' selected' : '';
|
|
return `<option value="${u.id}"${sel}>${esc(label)}</option>`;
|
|
}).join('');
|
|
}
|
|
|
|
function populateSelects() {
|
|
for (const id of ['gam-award-uid', 'gam-reset-uid']) {
|
|
const el = document.getElementById(id);
|
|
if (el) el.innerHTML = buildUserOptions(el.value);
|
|
}
|
|
}
|
|
|
|
/* ── Быстрый фильтр select-а по вводу ───────────────────────────────── */
|
|
function filterUserSelect(q, selectId) {
|
|
const el = document.getElementById(selectId);
|
|
if (!el) return;
|
|
const ql = q.toLowerCase();
|
|
for (const opt of el.options) {
|
|
if (!opt.value) continue;
|
|
opt.style.display = !ql || opt.textContent.toLowerCase().includes(ql) ? '' : 'none';
|
|
}
|
|
}
|
|
|
|
/* ── Статистика ──────────────────────────────────────────────────────── */
|
|
async function load() {
|
|
const { fmtDate } = AdminCtx;
|
|
try {
|
|
const [stats] = await Promise.all([
|
|
LS.adminGamStats(),
|
|
loadAllUsers(),
|
|
]);
|
|
|
|
document.getElementById('gam-stats-grid').innerHTML = `
|
|
<div class="stat-card" style="--stat-top:var(--violet)">
|
|
<div class="stat-card-icon" style="background:rgba(155,93,229,0.1)"><i data-lucide="zap" class="stat-icon"></i></div>
|
|
<div class="stat-val violet">${stats.totalXP}</div>
|
|
<div class="stat-label">Суммарный XP</div>
|
|
</div>
|
|
<div class="stat-card" style="--stat-top:var(--cyan)">
|
|
<div class="stat-card-icon" style="background:rgba(6,214,224,0.1)"><i data-lucide="coins" class="stat-icon"></i></div>
|
|
<div class="stat-val cyan">${stats.totalCoins}</div>
|
|
<div class="stat-label">Суммарные монеты</div>
|
|
</div>
|
|
<div class="stat-card" style="--stat-top:var(--green)">
|
|
<div class="stat-card-icon" style="background:rgba(6,214,100,0.1)"><i data-lucide="bar-chart-3" class="stat-icon"></i></div>
|
|
<div class="stat-val green">${(stats.avgLevel ?? 0).toFixed(1)}</div>
|
|
<div class="stat-label">Средний уровень</div>
|
|
</div>
|
|
<div class="stat-card" style="--stat-top:var(--amber, #FFB347)">
|
|
<div class="stat-card-icon" style="background:rgba(255,179,71,0.1)"><i data-lucide="trophy" class="stat-icon"></i></div>
|
|
<div class="stat-val" style="color:var(--amber, #FFB347)">${stats.achievementCount}</div>
|
|
<div class="stat-label">Достижений выдано</div>
|
|
</div>
|
|
<div class="stat-card" style="--stat-top:#FF9F1C">
|
|
<div class="stat-card-icon" style="background:rgba(255,159,28,0.1)"><i data-lucide="shopping-bag" class="stat-icon"></i></div>
|
|
<div class="stat-val" style="color:#FF9F1C">${stats.totalPurchases || 0}</div>
|
|
<div class="stat-label">Покупок</div>
|
|
</div>`;
|
|
|
|
// Top-10
|
|
const topBody = document.getElementById('gam-top-body');
|
|
topBody.innerHTML = stats.topByXP?.length
|
|
? stats.topByXP.slice(0, 10).map((u, i) => `<tr>
|
|
<td><strong>${i + 1}</strong></td>
|
|
<td>${esc(u.name || u.email || 'ID:' + (u.id || u.user_id))}</td>
|
|
<td><span style="color:var(--violet);font-weight:700">${u.xp}</span></td>
|
|
<td>${u.level}</td>
|
|
<td>${u.coins} <i data-lucide="coins" style="width:12px;height:12px;vertical-align:-2px;color:var(--amber, #FFB347)"></i></td>
|
|
</tr>`).join('')
|
|
: '<tr><td colspan="5" class="empty">Нет данных</td></tr>';
|
|
|
|
// Recent XP log
|
|
const logBody = document.getElementById('gam-log-body');
|
|
logBody.innerHTML = stats.recentXP?.length
|
|
? stats.recentXP.slice(0, 20).map(e => `<tr>
|
|
<td style="font-size:0.78rem;color:var(--text-3)">${fmtDate(e.created_at || e.date)}</td>
|
|
<td>${esc(e.name || e.user_name || '—')}</td>
|
|
<td><span style="color:var(--violet);font-weight:700">+${e.amount}</span></td>
|
|
<td style="font-size:0.82rem;color:var(--text-2)">${fmtXPReason(e.reason)}</td>
|
|
</tr>`).join('')
|
|
: '<tr><td colspan="4" class="empty">Нет данных</td></tr>';
|
|
|
|
// Purchases
|
|
const purchBody = document.getElementById('gam-purchases-body');
|
|
purchBody.innerHTML = stats.recentPurchases?.length
|
|
? stats.recentPurchases.slice(0, 20).map(p => `<tr>
|
|
<td style="font-size:0.78rem;color:var(--text-3)">${fmtDate(p.purchased_at)}</td>
|
|
<td>${esc(p.user_name || '—')}</td>
|
|
<td style="font-weight:600">${esc(p.item_name || '—')}</td>
|
|
<td><span class="badge" style="font-size:0.7rem">${esc(p.type || '—')}</span></td>
|
|
<td style="color:var(--amber,#FFB347);font-weight:700">${p.price} <i data-lucide="coins" style="width:12px;height:12px;vertical-align:-2px"></i></td>
|
|
</tr>`).join('')
|
|
: '<tr><td colspan="5" class="empty">Нет покупок</td></tr>';
|
|
|
|
populateSelects();
|
|
if (window.lucide) lucide.createIcons();
|
|
} catch (e) {
|
|
document.getElementById('gam-stats-grid').innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
|
|
}
|
|
}
|
|
|
|
/* ── Пресеты XP ──────────────────────────────────────────────────────── */
|
|
function gamSetXP(val) {
|
|
const inp = document.getElementById('gam-award-xp');
|
|
if (!inp) return;
|
|
inp.value = val;
|
|
inp.readOnly = false;
|
|
document.querySelectorAll('.gam-xp-preset').forEach(b => b.classList.toggle('active', b.dataset.xp == val));
|
|
}
|
|
|
|
function gamSetCoins(val) {
|
|
const inp = document.getElementById('gam-award-coins');
|
|
if (!inp) return;
|
|
inp.value = val;
|
|
document.querySelectorAll('.gam-coins-preset').forEach(b => b.classList.toggle('active', b.dataset.coins == val));
|
|
}
|
|
|
|
function gamSetReason(val) {
|
|
const inp = document.getElementById('gam-award-reason');
|
|
if (inp) inp.value = val;
|
|
}
|
|
|
|
/* ── Начислить XP/Монеты ─────────────────────────────────────────────── */
|
|
async function gamAdminAward() {
|
|
if (_gamAwarding) return;
|
|
const userId = parseInt(document.getElementById('gam-award-uid').value, 10);
|
|
const xpRaw = document.getElementById('gam-award-xp').value;
|
|
const coinsRaw = document.getElementById('gam-award-coins').value;
|
|
const xp = xpRaw === '' ? 0 : Number(xpRaw);
|
|
const coins = coinsRaw === '' ? 0 : Number(coinsRaw);
|
|
const reason = document.getElementById('gam-award-reason').value.trim() || 'Admin award';
|
|
|
|
if (!userId) { LS.toast('Выберите пользователя', 'error'); return; }
|
|
if (xp < 0 || coins < 0) { LS.toast('Значения не могут быть отрицательными', 'error'); return; }
|
|
if (!xp && !coins) { LS.toast('Введите XP или монеты (больше 0)', 'error'); return; }
|
|
|
|
_gamAwarding = true;
|
|
try {
|
|
const r = await LS.adminGamAward({ userId, xp, coins, reason });
|
|
const userName = document.getElementById('gam-award-uid').selectedOptions?.[0]?.textContent || 'пользователю';
|
|
LS.toast(`Начислено ${userName}: XP +${xp} Монеты +${coins} → Уровень ${r.level}`, 'success');
|
|
// Reset form
|
|
document.getElementById('gam-award-uid').value = '';
|
|
gamSetXP(0);
|
|
gamSetCoins(0);
|
|
document.getElementById('gam-award-reason').value = '';
|
|
inited = false;
|
|
await load();
|
|
inited = true;
|
|
} catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
|
|
finally { _gamAwarding = false; }
|
|
}
|
|
|
|
/* ── Сбросить прогресс ───────────────────────────────────────────────── */
|
|
async function gamAdminReset() {
|
|
const sel = document.getElementById('gam-reset-uid');
|
|
const userId = parseInt(sel?.value, 10);
|
|
const userName = sel?.selectedOptions?.[0]?.textContent || '';
|
|
if (!userId) { LS.toast('Выберите пользователя', 'error'); return; }
|
|
if (!await LS.confirm(
|
|
`ВСЕ XP, монеты и достижения пользователя «${userName}» будут удалены безвозвратно.`,
|
|
{ title: 'Сбросить прогресс?', confirmText: 'Сбросить', danger: true }
|
|
)) return;
|
|
try {
|
|
await LS.adminGamReset({ userId });
|
|
LS.toast('Прогресс сброшен: ' + userName, 'success');
|
|
sel.value = '';
|
|
inited = false; await load(); inited = true;
|
|
} catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
|
|
}
|
|
|
|
window.gamAdminAward = gamAdminAward;
|
|
window.gamAdminReset = gamAdminReset;
|
|
window.gamSetXP = gamSetXP;
|
|
window.gamSetCoins = gamSetCoins;
|
|
window.gamSetReason = gamSetReason;
|
|
window.gamFilterUsers = filterUserSelect;
|
|
|
|
window.AdminSections = window.AdminSections || {};
|
|
window.AdminSections.gam = {
|
|
init: async () => { if (inited) return; inited = true; await load(); },
|
|
reload: load,
|
|
};
|
|
})();
|