// ============================================================================ // TIME RUST Support Panel — new design wired up to the real backend. // Single-file React app (loaded via Babel from CDN). // ============================================================================ const { useState, useEffect, useCallback, useRef, useMemo } = React; // ─── Tiny helpers ─────────────────────────────────────────────────────────── const h = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c])); async function api(url, opts = {}) { const { headers: extra, body, ...rest } = opts; const isFD = body instanceof FormData; const headers = { ...(isFD ? {} : { 'Content-Type': 'application/json' }), ...(extra || {}) }; const r = await fetch(url, { headers, credentials: 'same-origin', body, ...rest }); if (r.status === 401) { window.__forceLogin?.(); return { __error: 'unauthorized' }; } if (r.status === 403) { const d = await r.json().catch(() => ({})); if (d.error === 'panel_blocked') { location.href = '/auth/logout?blocked=1'; return { __error: 'blocked' }; } window.__forceLogin?.(); return { __error: 'forbidden' }; } if (r.status === 204) return { ok: true }; return r.json().catch(() => ({})); } function padId(id) { return String(id || '').slice(-6).padStart(6, '0'); } function defAv(uid) { try { return `https://cdn.discordapp.com/embed/avatars/${Number(BigInt(uid || '0') >> 22n) % 6}.png`; } catch (_) { return 'https://cdn.discordapp.com/embed/avatars/0.png'; } } function fmtTime(iso) { if (!iso) return ''; const d = new Date(iso); return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`; } function fmtDate(iso) { if (!iso) return '—'; const d = new Date(iso); const dd = String(d.getDate()).padStart(2, '0'); const mm = String(d.getMonth() + 1).padStart(2, '0'); return `${dd}.${mm}.${d.getFullYear()}, ${fmtTime(iso)}`; } const CAT_LABELS = { player_report: 'Жалоба на игрока', ban_appeal: 'Апелляция бана', work: 'Работать у нас', other: 'Другое', }; const CAT_EMOJI = { player_report: '🛡️', ban_appeal: '🔨', work: '💼', other: '❓' }; // ─── Icons (line icons matching the design) ───────────────────────────────── const Icon = { search: (p) => , stats: (p) => , ticket: (p) => , doc: (p) => , lock: (p) => , filter: (p) => , bell: (p) => , close: (p) => , flame: (p) => , plus: (p) => , at: (p) => , chevR: (p) => , chevL: (p) => , send: (p) => , discord: (p) => , check: (p) => , starF: (p) => , starO: (p) => , megaphone: (p) => , gear: (p) => , bolt: (p) => , trash: (p) => , shield: (p) => , crown: (p) => , music: (p) => , hand: (p) => , ask: (p) => , key: (p) => , monitor: (p) => , chat: (p) => , globe: (p) => , hourglass: (p) => , hammer: (p) => , unlock: (p) => , ban: (p) => , gift: (p) => , gamepad: (p) => , users: (p) => , wrench: (p) => , copy: (p) => , paperclip: (p) => , }; // ─── Discord markdown rendering ───────────────────────────────────────────── function fmtDiscordMd(text) { if (!text) return ''; let s = h(text); s = s.replace(/```([\s\S]+?)```/g, (_, c) => `
${c.trim()}
`); s = s.replace(/\*\*(.+?)\*\*/g, '$1'); s = s.replace(/__(.+?)__/g, '$1'); s = s.replace(/\*([^*\n]+?)\*/g, '$1'); s = s.replace(/`([^`\n]+?)`/g, '$1'); s = s.replace(/<@!?(\d+)>/g, '@пользователь'); s = s.replace(/<#(\d+)>/g, '#канал'); s = s.replace(/<@&(\d+)>/g, '@роль'); s = s.replace(/^>\s?(.+)$/gm, '$1'); s = s.replace(/^#{1,3}\s?(.+)$/gm, '
$1
'); s = s.replace(/(https?:\/\/[^\s<]+)/g, '$1'); return s; } function colorClassFor(c) { if (!c) return 'ec-green'; if (c === 0x57F287 || c === 5763719) return 'ec-green'; if (c === 0xFEE75C || c === 16776540) return 'ec-yellow'; if (c === 0xED4245 || c === 15548997) return 'ec-red'; if (c === 0x5865F2 || c === 5793266) return 'ec-blue'; if (c === 0x4CF287) return 'ec-green'; return 'ec-blue'; } // ─── Quick replies (defaults — server may override) ───────────────────────── const DEFAULT_QUICK_REPLY_GROUPS = [ { id: 'greet', label: 'Приветствие', items: [ { id: 'qr-hi', icon: 'hand', title: 'Приветствие', text: 'Здравствуйте, {mention}! Начинаю работать по Вашему тикету.' }, { id: 'qr-more', icon: 'ask', title: 'Чем ещё помочь?', text: 'Могу ли я Вам чем-то ещё помочь? {mention}' }, { id: 'qr-solved', icon: 'check', title: 'Вопрос решён', text: 'Рад, что смог помочь! Если появятся ещё вопросы — не стесняйтесь обращаться. Закрываю тикет.' }, { id: 'qr-ignore', icon: 'hourglass', title: 'Игнор (24ч)', text: '{mention}, напоминаю о Вашем тикете. Если у Вас остались вопросы — напишите, мы продолжим. Если всё решено — дайте знать, закроем тикет.' }, ]}, { id: 'howto', label: 'Инструкции', items: [ { id: 'qr-steamid', icon: 'key', title: 'Как узнать SteamID', text: 'Для получения SteamID64 воспользуйтесь инструкцией: https://wiki.timerust.ru/instrukcii/steamid' }, { id: 'qr-console', icon: 'monitor', title: 'Подключение через консоль', text: 'Инструкция по подключению к серверу через консоль: https://wiki.timerust.ru/instrukcii/kak-podklyuchitsya-k-serveru-cherez-connect' }, { id: 'qr-vip', icon: 'gift', title: 'Как получить Free VIP', text: 'Получить бесплатный VIP можно через нашего Telegram-бота: @timerust_bot' }, { id: 'qr-vpn', icon: 'globe', title: 'Проблема с подключением', text: 'Воспользуйтесь VPN — Ваш провайдер блокирует подключение к серверу. Если проблема сохранится после включения VPN, напишите нам снова.' }, ]}, { id: 'req', label: 'Запросы', items: [ { id: 'qr-proof', icon: 'doc', title: 'Запрос доказательств', text: 'Пожалуйста, предоставьте доказательства (скриншоты, видео или демо-записи), чтобы мы могли рассмотреть вашу заявку.' }, { id: 'qr-wait', icon: 'hourglass', title: 'Ожидайте ответа', text: 'Ваше обращение передано на рассмотрение. Пожалуйста, ожидайте — мы ответим в ближайшее время.' }, { id: 'qr-tech', icon: 'wrench', title: 'Передано тех. специалистам', text: 'Ваше обращение передано техническим специалистам. Они изучат ситуацию и примут необходимые меры в ближайшее время.' }, ]}, { id: 'rep', label: 'Жалобы', items: [ { id: 'qr-rep-ok', icon: 'shield', title: 'Жалоба принята', text: 'Спасибо за жалобу. Игрок будет проверен нашей администрацией в ближайшее время.' }, { id: 'qr-cheats', icon: 'gamepad', title: 'Софт/читы', text: 'Спасибо за обращение. Данный игрок будет проверен на использование стороннего ПО. Если факт нарушения подтвердится, к нему будут применены соответствующие меры.' }, { id: 'qr-multi', icon: 'users', title: 'Мульти-аккаунты', text: 'Информация о мульти-аккаунтах принята. Мы проверим связанные аккаунты и примем меры в случае подтверждения нарушения.' }, { id: 'qr-punished', icon: 'check', title: 'Нарушитель наказан', text: 'По итогам проверки нарушитель получил блокировку. Спасибо за обращение!' }, { id: 'qr-unblock', icon: 'unlock', title: 'Игрок разблокирован', text: 'После рассмотрения вашей апелляции блокировка аккаунта снята. Приносим извинения за доставленные неудобства. Приятной игры!' }, ]}, { id: 'deny', label: 'Отказы', items: [ { id: 'qr-noproof', icon: 'ban', title: 'Недостаточно доказательств', text: 'К сожалению, предоставленных доказательств недостаточно для принятия мер. Если у вас появятся дополнительные материалы — создайте новый тикет.' }, { id: 'qr-banok', icon: 'hammer', title: 'Бан подтверждён', text: 'После проверки блокировка вашего аккаунта признана обоснованной. Апелляция отклонена.' }, { id: 'qr-notech', icon: 'gear', title: 'Нет технической возможности', text: 'К сожалению, у нас нет такой технической возможности. Приносим извинения за неудобства.' }, { id: 'qr-no-hire', icon: 'shield', title: 'Набор модераторов закрыт', text: 'В данный момент набор на пост модератора не ведётся. Следите за объявлениями.' }, ]}, ]; // ─── Push notifications setup ─────────────────────────────────────────────── function urlBase64ToUint8Array(b64) { const padding = '='.repeat((4 - b64.length % 4) % 4); const base64 = (b64 + padding).replace(/-/g, '+').replace(/_/g, '/'); const raw = atob(base64); const out = new Uint8Array(raw.length); for (let i = 0; i < raw.length; i++) out[i] = raw.charCodeAt(i); return out; } async function registerPush() { if (!('serviceWorker' in navigator) || !('PushManager' in window)) return; try { const reg = await navigator.serviceWorker.register('/sw.js'); await navigator.serviceWorker.ready; let sub = await reg.pushManager.getSubscription(); if (!sub) { const { key } = await fetch('/api/push/vapid-public-key').then(r => r.json()); sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(key), }); } await fetch('/api/push/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(sub), credentials: 'same-origin', }); } catch (e) { /* push не критичен */ } } async function requestPushPermission() { if (!('Notification' in window)) return; if (Notification.permission === 'default') { const r = await Notification.requestPermission(); if (r === 'granted') registerPush(); } else if (Notification.permission === 'granted') { registerPush(); } } // ─── Notification sound ───────────────────────────────────────────────────── const notifSound = (typeof Audio !== 'undefined') ? new Audio('https://images.timerust.ru/ModerationPanel/new-post-notification-sound.mp3') : null; if (notifSound) notifSound.volume = 0.5; let lastNotifTime = 0; function playNotif() { if (!notifSound) return; const now = Date.now(); if (now - lastNotifTime < 3000) return; lastNotifTime = now; try { notifSound.currentTime = 0; notifSound.play().catch(() => {}); } catch (_) {} } // ─── Login page ───────────────────────────────────────────────────────────── function LoginPage({ error }) { return (
); } // ─── Avatar ───────────────────────────────────────────────────────────────── function Avatar({ name, src, color, size = '' }) { if (src) return {name { e.target.style.display = 'none'; }} />; const ch = (name || '?').trim().charAt(0).toUpperCase(); return {ch}; } // ─── Sidebar ──────────────────────────────────────────────────────────────── function Sidebar({ active, onNav, currentUser, stats, isAdmin, onCloseDrawer }) { const navMain = [ { id: 'stats', label: 'Статистика', icon: Icon.stats }, { id: 'tickets', label: 'Тикеты', icon: Icon.ticket, badge: stats?.unassigned || null }, ]; if (isAdmin) { navMain.push({ id: 'notifications', label: 'Оповещения', icon: Icon.megaphone }); navMain.push({ id: 'management', label: 'Управление', icon: Icon.lock }); } const rating = currentUser?.my_avg_rating || stats?.my_avg_rating; const stars = Math.round(rating || 0); return ( ); } // ─── Mobile topbar ────────────────────────────────────────────────────────── function MobileTopbar({ section, activeTicket, onMenu, onBack, onInfo }) { const titles = { tickets: 'Тикеты', stats: 'Статистика', notifications: 'Оповещения', management: 'Управление' }; const inChat = section === 'tickets' && !!activeTicket; return (
{inChat ? ( ) : ( )}
{inChat ? ( <> #{padId(activeTicket.id)} {activeTicket.category_label || CAT_LABELS[activeTicket.category] || 'Тикет'} ) : ( {titles[section] || 'TIME RUST'} )}
{inChat ? ( ) : ( )}
); } // ─── Tickets list ─────────────────────────────────────────────────────────── function TicketCard({ ticket, active, currentUserId, onClick }) { const sourceLabel = ticket.source || 'discord'; const isMine = ticket.agent_id === currentUserId; const isUnassigned = !ticket.agent_id && ticket.status === 'open'; const isClosed = ticket.status === 'closed'; const catLabel = ticket.category_label || CAT_LABELS[ticket.category] || 'Тикет'; return (
{sourceLabel} {ticket.awaiting_reply && !isClosed && ( )} {isMine && !isClosed && ( )}
{ticket.agent_id ? ( <> {ticket.agent_avatar ? : {(ticket.agent_name || '?')[0].toUpperCase()}} {ticket.agent_name || '—'} ) : ( не назначен )}
{catLabel}
{isClosed ? 'Закрыт ' : 'Открыт '} {fmtDate(isClosed ? ticket.closed_at : ticket.created_at)}
User
{ticket.username || '—'}
User ID
{ticket.user_id || '—'}
# {padId(ticket.id)} {ticket.rating ? ★ {ticket.rating}/5 : null}
); } function TicketsList({ tickets, activeId, onSelect, stats, currentUserId, isAdmin }) { const [filter, setFilter] = useState('Ожидают'); const [query, setQuery] = useState(''); const isMine = (t) => t.agent_id === currentUserId; const isFree = (t) => !t.agent_id && t.status === 'open'; const isClosed = (t) => t.status === 'closed'; const isLockedByOther = (t) => t.agent_id && t.agent_id !== currentUserId; const filtered = tickets.filter((t) => { // Только админ и нынешний агент видят чужие тикеты в работе if (!isAdmin && isLockedByOther(t) && !isClosed(t)) return false; if (filter === 'Мои' && !isMine(t)) return false; if (filter === 'Ожидают' && !isFree(t)) return false; if (filter === 'Закрытые' && !isClosed(t)) return false; if (query) { const q = query.toLowerCase(); const hay = `${t.category_label || ''} ${t.username || ''} ${t.user_id || ''} ${t.id}`.toLowerCase(); if (!hay.includes(q)) return false; } return true; }); const visible = tickets.filter((t) => isAdmin || !isLockedByOther(t) || isClosed(t)); const counts = { total: visible.length, open: visible.filter((t) => t.status === 'open').length, free: visible.filter(isFree).length, mine: visible.filter(isMine).length, }; return (
Тикеты
{counts.total}
Всего
{counts.open}
Открыто
{counts.free}
Свободных
{counts.mine}
Моих
setQuery(e.target.value)} />
{['Ожидают', 'Мои', 'Закрытые', 'Все'].map((c) => ( ))}
{filtered.length === 0 && (
Ничего не найдено
{filter === 'Мои' && 'У вас нет тикетов в работе'} {filter === 'Ожидают' && 'Нет свободных тикетов'} {filter === 'Закрытые' && 'Нет закрытых тикетов'} {filter === 'Все' && 'Попробуйте изменить поиск'}
)} {filtered.map((t) => ( onSelect(t.id)} /> ))}
); } // ─── Embed card (Discord embed rendering) ─────────────────────────────────── function EmbedCard({ embed }) { const cls = colorClassFor(embed.color); return (
{embed.title &&
} {embed.description &&
} {embed.fields && embed.fields.length > 0 && (
{embed.fields.map((f, i) => (
{f.name}
))}
)} {embed.footer &&
{embed.footer}
}
); } function V2Card({ v2 }) { if (!v2 || !v2.texts || !v2.texts.length) return null; const combined = v2.texts.filter((t) => !/^<@!?\d+>$/.test(t)).join('\n'); if (!combined.trim()) return null; const cls = colorClassFor(v2.color); return
; } // ─── Attachments (images + file links + delete) ───────────────────────────── function isImage(att) { return att.contentType?.startsWith('image/'); } function Attachments({ attachments, canDelete, onDelete }) { if (!attachments || !attachments.length) return null; const imgs = attachments.filter(isImage); const files = attachments.filter((a) => !isImage(a)); return ( <> {imgs.length > 0 && (
{imgs.map((a, i) => (
{a.name} {canDelete && ( )}
))}
)} {files.length > 0 && (
{files.map((a, i) => (
{a.name} {canDelete && ( )}
))}
)} ); } // ─── Extract a readable text body from a bot embed/v2 message ─────────────── function botMessageText(m) { const parts = []; if (m.content) parts.push(m.content); if (m.embeds && m.embeds.length) { for (const e of m.embeds) { if (e.title) parts.push(`**${e.title}**`); if (e.description) parts.push(e.description); if (e.fields && e.fields.length) { for (const f of e.fields) parts.push(`**${f.name}** — ${f.value}`); } } } if (m.v2 && m.v2.texts && m.v2.texts.length) { m.v2.texts.filter((t) => !/^<@!?\d+>$/.test(t)).forEach((t) => parts.push(t)); } return parts.join('\n\n').trim(); } // ─── Message bubble ───────────────────────────────────────────────────────── function Message({ m, ticket, canEdit, canDelete, onEdit, onDelete, onDeleteAtt }) { const [editing, setEditing] = useState(false); const [draft, setDraft] = useState(m.content || ''); const taRef = useRef(null); useEffect(() => { setDraft(m.content || ''); }, [m.content]); useEffect(() => { if (editing && taRef.current) { taRef.current.focus(); taRef.current.style.height = 'auto'; taRef.current.style.height = taRef.current.scrollHeight + 'px'; } }, [editing]); // Classify message const isWebAgent = !!m.is_web; const isBot = !!m.is_bot && !isWebAgent; const isWebhook = !!m.is_webhook; // Any bot message → compact "system notice" card (extracted text from content/embed/v2) const isSystem = isBot; const isOut = isWebAgent || isWebhook; const isDeleted = !!m.deleted; const authorName = isWebAgent ? (m.web_agent_name || m.author_name) : m.author_name; const authorAvatar = isWebAgent ? (m.web_agent_avatar || m.author_avatar) : m.author_avatar; const commitEdit = () => { const next = draft.trim(); if (!next) { setEditing(false); setDraft(m.content || ''); return; } if (next !== m.content) onEdit && onEdit(next); setEditing(false); }; const cancelEdit = () => { setEditing(false); setDraft(m.content || ''); }; if (isSystem) { const sysText = botMessageText(m); if (!sysText) return null; return (
Системное уведомление · отправлено пользователю
{authorName && @{authorName}} {fmtTime(m.created_at)}
); } // Deleted message — preserve as red audit-trail card if (isDeleted) { return (
Сообщение удалено
{m.content &&
} {}} />
{authorName || '—'} {fmtTime(m.created_at)} в архиве
); } const hasActions = canEdit || canDelete; return (
{editing ? (