Files
WhatIDo/public/admin.js
T
dev 2afe676969 feat(notifications): центр уведомлений о системных событиях
Добавлена система уведомлений о системных и фоновых событиях (новые записи
журнала, обработка фото, авто-проверка текста, блокировки IP, бэкапы).

- backend (server.js, worker.js):
  - каталог NOTIFY_TYPES с метаданными и уровнями
  - таблицы notifications и notification_reads в db/init.sql и db/migration.sql
  - SSE-стрим GET /api/notifications/stream через Redis pub/sub с in-memory fallback
  - REST API: список, счётчик непрочитанных, отметка о прочтении, удаление, очистка
  - настройки уведомлений в settings (notify_enabled, notify_retention_days, notify_<тип>)
  - автоматическая очистка старых уведомлений по расписанию
- frontend:
  - колокольчик со счётчиком непрочитанных в шапке (admin.js)
  - страница списка уведомлений public/notifications.html и public/js/notifications.js
  - секция настроек уведомлений в public/settings.html и public/js/settings.js
  - стили для уведомлений в public/admin.css
- тесты и документация:
  - добавлены проверки в api.smoketest.js
  - обновлены README.md и AGENTS.md
2026-09-27 23:34:47 +03:00

471 lines
17 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
const API = location.origin;
let token = sessionStorage.getItem('authToken');
let currentUser = null;
function hdr() { return { 'X-Auth-Token': token }; }
function hdrJson() { return { 'Content-Type': 'application/json', 'X-Auth-Token': token }; }
function esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
function thumbSrc(p) {
if (!p) return p;
if (p.startsWith('/uploads/')) return `${API}/uploads/thumb/${p.slice('/uploads/'.length)}`;
if (p.includes('/api/files/')) return p + (p.includes('?') ? '&' : '?') + 'thumb=1';
return p;
}
// --- Auth check ---
async function checkAuth() {
if (!token) { location.href = 'login.html'; return false; }
try {
const res = await fetch(`${API}/api/auth/me`, { headers: hdr() });
if (!res.ok) { cleanupSession(); return false; }
currentUser = await res.json();
return true;
} catch { cleanupSession(); return false; }
}
function cleanupSession() {
sessionStorage.removeItem('authToken');
token = null;
currentUser = null;
location.href = 'login.html';
}
function isAdmin() { return currentUser && currentUser.role === 'admin'; }
async function requireAdminPage() {
if (!(await checkAuth())) return false;
if (!isAdmin()) { location.href = 'journal.html'; return false; }
return true;
}
async function doLogout() {
try { await fetch(`${API}/api/auth/logout`, { method: 'POST', headers: hdr() }); } catch {}
cleanupSession();
}
// --- Sidebar ---
function buildSidebar(active) {
const el = document.getElementById('sidebar');
if (!el) return;
const base = [
{ page: 'dashboard', label: 'Дашборд', icon: 'layout-dashboard' },
{ page: 'journal', label: 'Журнал', icon: 'book-open' },
{ page: 'notifications', label: 'Уведомления', icon: 'bell' },
{ page: 'students', label: 'Ученики', icon: 'graduation-cap' },
{ page: 'groups', label: 'Группы', icon: 'users' },
{ page: 'files', label: 'Файлы', icon: 'folder' },
{ page: 'links', label: 'Ссылки', icon: 'link' },
{ page: 'trash', label: 'Корзина', icon: 'trash-2' },
];
const adminNav = [
{ page: 'modules', label: 'Темы модулей', icon: 'layers' },
{ page: 'branches', label: 'Филиалы', icon: 'building-2' },
{ page: 'users', label: 'Пользователи', icon: 'user-cog' },
{ page: 'worker', label: 'Воркер ИИ', icon: 'bot' },
{ page: 'audit', label: 'Аудит', icon: 'scroll-text' },
{ page: 'bans', label: 'Блокировки', icon: 'shield-off' },
{ page: 'settings', label: 'Настройки', icon: 'settings' },
];
const nav = [...base, ...(isAdmin() ? adminNav : [])];
const userName = currentUser?.name || currentUser?.username || '';
const roleLabel = isAdmin() ? 'Администратор' : 'Тутор';
el.innerHTML = `
<div class="logo">
<span class="logo-ic" id="sidebarLogo"></span>
<span id="sidebarName">Админ-панель</span>
</div>
<div class="user-box">
<div class="user-name">${esc(userName)}</div>
<div class="user-role">${roleLabel}</div>
</div>
<nav>
${nav.map(n => `<a href="${n.page}.html" data-nav="${n.page}" class="${n.page === active ? 'active' : ''}"><i data-lucide="${n.icon}"></i>${n.label}</a>`).join('')}
</nav>
<div class="bottom">
<div class="version" id="sidebarVersion"></div>
<a href="#" class="notify-bell" id="notifyBell" title="Уведомления"><i data-lucide="bell"></i>Уведомления<span class="notify-badge" id="notifyBadge" hidden>0</span></a>
<a href="/" data-nav="home"><i data-lucide="home"></i>На главную</a>
<a class="logout" href="#" data-action="logout"><i data-lucide="log-out"></i>Выйти</a>
</div>`;
renderIcons();
loadVersion();
loadBrand();
initNotifications();
}
async function loadBrand() {
const logoEl = document.getElementById('sidebarLogo');
const nameEl = document.getElementById('sidebarName');
if (!logoEl || !nameEl) return;
try {
const res = await fetch(`${API}/api/public-settings`);
if (!res.ok) return;
const s = await res.json();
if ((s.system_name || '').trim()) nameEl.textContent = s.system_name;
if (s.system_logo) {
const img = document.createElement('img');
img.src = s.system_logo;
img.alt = '';
logoEl.classList.add('has-logo');
logoEl.appendChild(img);
}
} catch {}
}
async function loadVersion() {
const el = document.getElementById('sidebarVersion');
if (!el) return;
try {
const res = await fetch(`${API}/version.json?t=${Date.now()}`);
if (!res.ok) { el.textContent = ''; return; }
const v = await res.json();
if (!v.short) { el.textContent = ''; return; }
const d = (v.date || '').slice(0, 10);
el.textContent = `v${v.short}${d ? ' · ' + d : ''}`;
el.title = `${v.short} · ${v.date || ''}`;
} catch { el.textContent = ''; }
}
// --- Notifications ---
const NOTIFY_ICONS = {
'entry.new': 'book-open',
'entry.ai.corrected': 'sparkles',
'entry.ai.error': 'bot',
'photo.job.done': 'image',
'photo.job.error': 'image-off',
'ip.ban': 'shield-off',
'backup.restore': 'database',
'backup.create': 'download',
'system.test': 'send',
};
const NOTIFY_LEVELS = { warning: 'Предупреждение', critical: 'Важно', info: '' };
let notifyList = [];
let notifyUnread = 0;
let notifyStream = null;
let notifyReconnectTimer = null;
let desktopNotify = localStorage.getItem('notifyDesktop') === '1';
function notifyIcon(type) { return NOTIFY_ICONS[type] || 'bell'; }
function attrEsc(s) { return esc(String(s === null || s === undefined ? '' : s).replace(/"/g, '&quot;')); }
function notifyTime(ts) {
const d = new Date(ts);
if (Number.isNaN(d.getTime())) return '';
const diff = Date.now() - d.getTime();
if (diff < 60000) return 'только что';
if (diff < 3600000) return `${Math.floor(diff / 60000)} мин назад`;
if (diff < 86400000) return `${Math.floor(diff / 3600000)} ч назад`;
return d.toLocaleString('ru-RU', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' });
}
function setNotifyUnread(n) {
notifyUnread = Number(n) || 0;
const badge = document.getElementById('notifyBadge');
if (!badge) return;
badge.textContent = notifyUnread > 99 ? '99+' : String(notifyUnread);
badge.hidden = notifyUnread <= 0;
}
function notifyItemHtml(n, expanded) {
const level = NOTIFY_LEVELS[n.level] ? ` level-${n.level}` : '';
return `<a href="#" class="notify-item${n.read ? '' : ' unread'}${level}" data-notify-id="${n.id}" data-notify-link="${attrEsc(n.link || '')}">
<span class="notify-ic"><i data-lucide="${notifyIcon(n.type)}"></i></span>
<span class="notify-body">
<span class="notify-title">${esc(n.title)}</span>
${n.body ? `<span class="notify-text">${esc(n.body)}</span>` : ''}
<span class="notify-time">${esc(notifyTime(n.created_at))}</span>
</span>
</a>`;
}
function notifyPanelEl() {
let panel = document.getElementById('notifyPanel');
if (panel) return panel;
panel = document.createElement('div');
panel.className = 'notify-panel';
panel.id = 'notifyPanel';
panel.hidden = true;
document.body.appendChild(panel);
return panel;
}
function renderNotifyPanel() {
const panel = notifyPanelEl();
if (!panel) return;
const items = notifyList.slice(0, 12);
panel.innerHTML = `
<div class="notify-head">
<b>Уведомления</b>
<button type="button" class="notify-link" id="notifyReadAll">Прочитать все</button>
</div>
<div class="notify-list">
${items.length ? items.map(n => notifyItemHtml(n, false)).join('') : '<div class="notify-empty">Пока уведомлений нет</div>'}
</div>
<div class="notify-foot">
<a href="notifications.html">Все уведомления${notifyUnread ? ` (${notifyUnread})` : ''}</a>
<button type="button" class="notify-link" id="notifyDesktopToggle">${desktopNotify ? 'В браузере: вкл' : 'В браузере: выкл'}</button>
</div>`;
renderIcons();
}
async function loadNotifications() {
try {
const res = await fetch(`${API}/api/notifications?limit=20`, { headers: hdr() });
if (!res.ok) return;
const data = await res.json();
notifyList = data.items || [];
setNotifyUnread(data.unread);
renderNotifyPanel();
} catch {}
}
function toggleNotifyPanel(force) {
const panel = notifyPanelEl();
if (!panel) return;
const open = force === undefined ? panel.hidden : !!force;
panel.hidden = !open;
if (open) { renderNotifyPanel(); loadNotifications(); }
}
async function markNotifyRead(id) {
const item = notifyList.find(n => n.id === id);
if (item && !item.read) {
item.read = true;
setNotifyUnread(Math.max(0, notifyUnread - 1));
renderNotifyPanel();
}
try { await fetch(`${API}/api/notifications/${id}/read`, { method: 'POST', headers: hdr() }); } catch {}
}
async function markAllNotifyRead() {
try {
const res = await fetch(`${API}/api/notifications/read-all`, { method: 'POST', headers: hdr() });
if (!res.ok) return;
notifyList.forEach(n => { n.read = true; });
setNotifyUnread(0);
renderNotifyPanel();
if (typeof onNotifyListChanged === 'function') onNotifyListChanged();
} catch {}
}
function showDesktopNotification(n) {
if (!desktopNotify) return;
if (typeof Notification === 'undefined' || Notification.permission !== 'granted') return;
try {
const note = new Notification(n.title, { body: n.body || '', tag: 'whatido-' + n.id });
note.onclick = () => {
window.focus();
if (n.link) location.href = n.link;
note.close();
};
} catch {}
}
async function toggleDesktopNotifications() {
if (desktopNotify) {
desktopNotify = false;
localStorage.setItem('notifyDesktop', '0');
renderNotifyPanel();
return;
}
if (typeof Notification === 'undefined') { showToast('Браузер не поддерживает уведомления'); return; }
let perm = Notification.permission;
if (perm === 'default') {
try { perm = await Notification.requestPermission(); } catch {}
}
if (perm !== 'granted') { showToast('Разрешение на уведомления не выдано'); return; }
desktopNotify = true;
localStorage.setItem('notifyDesktop', '1');
renderNotifyPanel();
showToast('Уведомления в браузере включены');
}
function handleIncomingNotification(n) {
notifyList.unshift(n);
if (notifyList.length > 40) notifyList.length = 40;
setNotifyUnread(notifyUnread + 1);
renderNotifyPanel();
if (n.level === 'warning' || n.level === 'critical') showToast(n.title);
showDesktopNotification(n);
if (typeof onNotificationArrived === 'function') onNotificationArrived(n);
}
function connectNotifyStream() {
if (notifyStream) { notifyStream.close(); notifyStream = null; }
const connect = () => {
const t = sessionStorage.getItem('authToken');
if (!t) return;
notifyStream = new EventSource(`${API}/api/notifications/stream?token=${encodeURIComponent(t)}`);
notifyStream.addEventListener('ready', ev => {
try { setNotifyUnread(JSON.parse(ev.data).unread); } catch {}
});
notifyStream.addEventListener('notification', ev => {
let n = null;
try { n = JSON.parse(ev.data); } catch { return; }
if (!n || !n.id) return;
handleIncomingNotification(n);
});
notifyStream.onerror = () => {
if (notifyStream) { notifyStream.close(); notifyStream = null; }
clearTimeout(notifyReconnectTimer);
notifyReconnectTimer = setTimeout(connect, 5000);
};
};
connect();
window.addEventListener('beforeunload', () => { if (notifyStream) notifyStream.close(); });
}
function initNotifications() {
const bell = document.getElementById('notifyBell');
const panel = notifyPanelEl();
if (!bell || !panel) return;
bell.addEventListener('click', e => { e.preventDefault(); toggleNotifyPanel(); });
panel.addEventListener('click', e => {
if (e.target.closest('#notifyReadAll')) { markAllNotifyRead(); return; }
if (e.target.closest('#notifyDesktopToggle')) { toggleDesktopNotifications(); return; }
const item = e.target.closest('[data-notify-id]');
if (!item) return;
e.preventDefault();
const id = parseInt(item.dataset.notifyId, 10);
const link = item.dataset.notifyLink;
toggleNotifyPanel(false);
markNotifyRead(id);
if (link) location.href = link;
});
document.addEventListener('click', e => {
if (panel.hidden) return;
if (e.target.closest('#notifyPanel') || e.target.closest('#notifyBell')) return;
toggleNotifyPanel(false);
});
document.addEventListener('keydown', e => { if (e.key === 'Escape' && !panel.hidden) toggleNotifyPanel(false); });
loadNotifications();
connectNotifyStream();
}
// --- Common UI ---
function renderIcons() {
if (window.lucide && typeof window.lucide.createIcons === 'function') {
window.lucide.createIcons();
}
}
function showToast(msg) {
const t = document.getElementById('toast');
if (!t) return;
t.textContent = msg;
t.classList.add('show');
setTimeout(() => t.classList.remove('show'), 3000);
}
function showImg(src) {
const img = document.getElementById('imgModalSrc');
const m = document.getElementById('imgModal');
if (img && m) { img.src = src; m.classList.add('open'); }
}
async function fillAutocomplete() {
const res = await fetch(`${API}/api/students`, { headers: hdr() });
const students = await res.json();
const names = students.map(s => s.name);
const dlEdit = document.getElementById('studentEditList');
if (dlEdit) {
dlEdit.innerHTML = '';
names.forEach(n => { const o = document.createElement('option'); o.value = n; dlEdit.appendChild(o); });
}
const dlAdd = document.getElementById('studentAddList');
if (dlAdd) {
dlAdd.innerHTML = '';
names.forEach(n => { const o = document.createElement('option'); o.value = n; dlAdd.appendChild(o); });
}
}
function copyStudentLink(name) {
const url = `${location.origin}/?nameInput=${encodeURIComponent(name)}`;
const done = () => showToast('Ссылка скопирована: ' + url);
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(url).then(done).catch(() => fallbackCopy(url, done));
} else {
fallbackCopy(url, done);
}
}
function fallbackCopy(text, done) {
const ta = document.createElement('textarea');
ta.value = text;
ta.style.position = 'fixed';
ta.style.opacity = '0';
document.body.appendChild(ta);
ta.select();
try { document.execCommand('copy'); done(); } catch { prompt('Скопируйте вручную:', text); }
document.body.removeChild(ta);
}
function studentUrlContent(name) {
const url = `${location.origin}/?nameInput=${encodeURIComponent(name)}`;
return `[InternetShortcut]\r\nURL=${url}\r\n`;
}
function safeWindowsName(name) {
return String(name).replace(/[\\/:*?"<>|]/g, '_').replace(/\s+/g, '_');
}
function downloadBlob(blob, filename) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}
async function exportStudentUrlZip(students, zipName) {
if (typeof JSZip === 'undefined') { alert('JSZip не загружен'); return; }
const zip = new JSZip();
students.forEach(s => {
zip.file(safeWindowsName(s.name) + '.url', studentUrlContent(s.name));
});
const blob = await zip.generateAsync({ type: 'blob' });
downloadBlob(blob, zipName);
}
function copyText(text) {
const done = () => showToast('Скопировано: ' + text);
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(text).then(done).catch(() => fallbackCopy(text, done));
} else {
fallbackCopy(text, done);
}
}
function renderPager(el, page, totalPages, onPage) {
if (!el) return;
if (totalPages <= 1) { el.innerHTML = ''; return; }
let html = `<button ${page === 1 ? 'disabled' : ''} data-nav="-1">‹</button>`;
for (let i = 1; i <= totalPages; i++) {
if (totalPages > 9 && i > 2 && i < totalPages - 1 && Math.abs(i - page) > 2) {
if (i === 3) html += `<button disabled>…</button>`;
continue;
}
html += `<button class="${i === page ? 'active' : ''}" data-page="${i}">${i}</button>`;
}
html += `<button ${page === totalPages ? 'disabled' : ''} data-nav="1">›</button>`;
el.innerHTML = html;
el._onPage = onPage;
el._page = page;
if (!el._bound) {
el._bound = true;
el.addEventListener('click', e => {
const btn = e.target.closest('button');
if (!btn || btn.disabled) return;
const p = btn.dataset.page ? parseInt(btn.dataset.page, 10) : el._page + parseInt(btn.dataset.nav, 10);
if (el._onPage) el._onPage(p);
});
}
}
document.addEventListener('click', e => {
const imgEl = e.target.closest('[data-img]');
if (imgEl) { e.preventDefault(); showImg(imgEl.dataset.img); return; }
const out = e.target.closest('[data-action="logout"]');
if (out) { e.preventDefault(); doLogout(); }
});