1335 lines
62 KiB
JavaScript
1335 lines
62 KiB
JavaScript
const state = {
|
|
token: localStorage.getItem('token'),
|
|
user: localStorage.getItem('token') ? JSON.parse(localStorage.getItem('user') || 'null') : null,
|
|
tournaments: [],
|
|
route: 'public',
|
|
ws: null,
|
|
scoreMatchId: null,
|
|
scoreMode: localStorage.getItem('scoreMode') || 'expert',
|
|
sidebarCollapsed: localStorage.getItem('sidebarCollapsed') === '1',
|
|
authValidated: false
|
|
};
|
|
|
|
const $ = (selector) => document.querySelector(selector);
|
|
const view = $('#view');
|
|
|
|
function toast(message, kind = 'ok') {
|
|
const item = document.createElement('div');
|
|
item.className = `rounded px-4 py-3 text-sm font-bold shadow ${kind === 'error' ? 'bg-red-600' : 'bg-zinc-900'} text-white`;
|
|
item.textContent = message;
|
|
$('#toast').appendChild(item);
|
|
setTimeout(() => item.remove(), 3200);
|
|
}
|
|
|
|
async function api(path, options = {}) {
|
|
const headers = { 'Content-Type': 'application/json', ...(options.headers || {}) };
|
|
if (state.token) headers.Authorization = `Bearer ${state.token}`;
|
|
const res = await fetch(path, { ...options, headers });
|
|
const data = await res.json().catch(() => ({}));
|
|
if (!res.ok) {
|
|
const error = new Error(data.message || 'Error de API');
|
|
error.status = res.status;
|
|
throw error;
|
|
}
|
|
return data;
|
|
}
|
|
|
|
function selectedTournamentId() {
|
|
return Number($('#tournamentSelect').value || state.tournaments[0]?.id || 1);
|
|
}
|
|
|
|
function applySidebarState() {
|
|
document.body.classList.toggle('sidebar-collapsed', state.sidebarCollapsed);
|
|
$('#sidebarToggle')?.setAttribute('title', state.sidebarCollapsed ? 'Expandir menu' : 'Minimizar menu');
|
|
}
|
|
|
|
function openMobileMenu() {
|
|
document.body.classList.add('mobile-menu-open');
|
|
}
|
|
|
|
function closeMobileMenu() {
|
|
document.body.classList.remove('mobile-menu-open');
|
|
}
|
|
|
|
async function loadBase() {
|
|
const tournaments = await api('/api/tournaments');
|
|
state.tournaments = tournaments.data || [];
|
|
$('#tournamentSelect').innerHTML = state.tournaments.map(t => `<option value="${t.id}">${t.name}</option>`).join('');
|
|
updateSession();
|
|
}
|
|
|
|
async function validateStoredSession() {
|
|
if (!state.token) {
|
|
clearSession();
|
|
state.authValidated = true;
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await api('/api/auth/me');
|
|
state.user = res.user;
|
|
localStorage.setItem('user', JSON.stringify(res.user));
|
|
} catch (err) {
|
|
if (err.status === 401 || err.status === 403) {
|
|
clearSession();
|
|
}
|
|
} finally {
|
|
state.authValidated = true;
|
|
updateSession();
|
|
}
|
|
}
|
|
|
|
function clearSession() {
|
|
state.token = null;
|
|
state.user = null;
|
|
localStorage.removeItem('token');
|
|
localStorage.removeItem('user');
|
|
}
|
|
|
|
function currentRole() {
|
|
return String(state.user?.role || '').trim().toLowerCase();
|
|
}
|
|
|
|
function isAdmin() {
|
|
return Boolean(state.token && state.user && currentRole() === 'admin');
|
|
}
|
|
|
|
function updateSession() {
|
|
const role = currentRole();
|
|
$('#sessionInfo').textContent = state.user ? `${state.user.name} - ${role}` : 'Modo publico';
|
|
$('#loginBtn').setAttribute('title', state.user ? `Sesion: ${state.user.name}` : 'Ingresar');
|
|
$('#sideLoginBtn').textContent = state.user ? 'Ver sesion' : 'Ingresar';
|
|
$('#sessionUser').textContent = state.user ? state.user.name : 'Invitado';
|
|
$('#sessionRole').textContent = state.user ? `${state.user.email} - ${role}` : 'Modo publico';
|
|
}
|
|
|
|
function openModal({ eyebrow = '', title, subtitle = '', body, footer = '' }) {
|
|
$('#modalEyebrow').textContent = eyebrow;
|
|
$('#modalTitle').textContent = title;
|
|
$('#modalSubtitle').textContent = subtitle;
|
|
$('#modalBody').innerHTML = body;
|
|
$('#modalFooter').innerHTML = footer;
|
|
$('#modalFooter').classList.toggle('hidden', !footer);
|
|
$('#modalRoot').classList.remove('hidden');
|
|
$('#modalRoot').setAttribute('aria-hidden', 'false');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeModal() {
|
|
$('#modalRoot').classList.add('hidden');
|
|
$('#modalRoot').setAttribute('aria-hidden', 'true');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
function openLoginModal() {
|
|
if (state.user) {
|
|
openModal({
|
|
eyebrow: 'Sesion activa',
|
|
title: state.user.name,
|
|
subtitle: `${state.user.email} - ${state.user.role}`,
|
|
body: `<div class="space-y-3">
|
|
<p class="text-sm text-slate-500 dark:text-zinc-400">Ya estas autenticado en el sistema.</p>
|
|
<button id="logoutBtn" class="btn-muted w-full" type="button">Cerrar sesion</button>
|
|
</div>`
|
|
});
|
|
$('#logoutBtn').onclick = () => {
|
|
clearSession();
|
|
updateSession();
|
|
closeModal();
|
|
toast('Sesion cerrada');
|
|
render();
|
|
};
|
|
return;
|
|
}
|
|
|
|
openModal({
|
|
eyebrow: 'Acceso seguro',
|
|
title: 'Ingresar',
|
|
subtitle: 'Usa tu usuario administrador o delegado para gestionar torneos.',
|
|
body: `<div class="login-panel mb-4">
|
|
<span class="login-badge">JWT activo</span>
|
|
<p class="mt-3 text-sm text-slate-600 dark:text-zinc-300">Credenciales de prueba: admin@volley.test / password</p>
|
|
</div>
|
|
<form id="loginForm" class="space-y-4">
|
|
<label class="field"><span class="field-label">Email</span>
|
|
<input class="input" name="email" value="admin@volley.test" autocomplete="email" placeholder="Email">
|
|
</label>
|
|
<label class="field"><span class="field-label">Contrasena</span>
|
|
<input class="input" name="password" value="password" type="password" autocomplete="current-password" placeholder="Contrasena">
|
|
</label>
|
|
<button class="btn-primary w-full" type="submit">Ingresar</button>
|
|
</form>`
|
|
});
|
|
|
|
const loginForm = $('#modalBody').querySelector('#loginForm');
|
|
if (loginForm) {
|
|
loginForm.onsubmit = handleLogin;
|
|
}
|
|
}
|
|
|
|
async function handleLogin(e) {
|
|
e.preventDefault();
|
|
const data = Object.fromEntries(new FormData(e.target));
|
|
const res = await api('/api/auth/login', { method: 'POST', body: JSON.stringify(data) });
|
|
state.token = res.token;
|
|
state.user = res.user;
|
|
state.authValidated = true;
|
|
localStorage.setItem('token', res.token);
|
|
localStorage.setItem('user', JSON.stringify(res.user));
|
|
updateSession();
|
|
closeModal();
|
|
toast('Sesion iniciada');
|
|
render();
|
|
}
|
|
|
|
function setRoute(route) {
|
|
state.route = route;
|
|
syncActiveRoute();
|
|
closeMobileMenu();
|
|
render().catch(err => toast(err.message, 'error'));
|
|
}
|
|
|
|
function syncActiveRoute() {
|
|
document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.toggle('active', btn.dataset.route === state.route));
|
|
}
|
|
|
|
function toggleSidebar() {
|
|
state.sidebarCollapsed = !state.sidebarCollapsed;
|
|
localStorage.setItem('sidebarCollapsed', state.sidebarCollapsed ? '1' : '0');
|
|
applySidebarState();
|
|
}
|
|
|
|
async function render() {
|
|
try {
|
|
syncActiveRoute();
|
|
if (state.route === 'admin') return renderAdmin();
|
|
if (state.route === 'score') return renderScore();
|
|
if (state.route === 'team-link') return renderTeamLink();
|
|
return renderPublic();
|
|
} catch (err) {
|
|
toast(err.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function renderPublic() {
|
|
const id = selectedTournamentId();
|
|
const [standings, matches, stats] = await Promise.all([
|
|
api(`/api/tournaments/${id}/standings`),
|
|
api(`/api/matches?tournament_id=${id}&per_page=50`),
|
|
api(`/api/tournaments/${id}/stats`)
|
|
]);
|
|
view.innerHTML = `
|
|
<div class="grid gap-4 xl:grid-cols-2">
|
|
<section class="panel xl:col-span-2">
|
|
<h1 class="text-2xl font-black">Resultados, fixture y tabla</h1>
|
|
<p class="text-sm text-slate-500">Vista publica responsive con datos actualizados desde la planilla electronica.</p>
|
|
</section>
|
|
<section class="panel">
|
|
<h2 class="section-title">Tabla de posiciones</h2>
|
|
${table(['Equipo','PJ','G','P','SF','SC','Dif','Pts'], standings.map(r => [r.name, r.played, r.won, r.lost, r.sets_for, r.sets_against, r.sets_for - r.sets_against, r.points]))}
|
|
</section>
|
|
<section class="panel">
|
|
<h2 class="section-title">Calendario</h2>
|
|
${table(['Fecha','Local','Visitante','Sets','Estado'], (matches.data || []).map(m => [fmt(m.scheduled_at), m.home_team, m.away_team, `${m.home_sets}-${m.away_sets}`, m.status]))}
|
|
</section>
|
|
<section class="panel xl:col-span-2">
|
|
<h2 class="section-title">Ranking de jugadores</h2>
|
|
${table(['Jugador','Equipo','Puntos','Aces','Bloqueos','MVP'], (stats.players || []).map(p => [p.player_name, p.team_name, p.points || 0, p.aces || 0, p.blocks || 0, p.mvp || 0]))}
|
|
</section>
|
|
</div>`;
|
|
}
|
|
|
|
async function renderAdmin() {
|
|
if (!state.authValidated || state.token) {
|
|
await validateStoredSession();
|
|
}
|
|
|
|
if (!isAdmin()) {
|
|
view.innerHTML = `<section class="panel max-w-xl">
|
|
<h1 class="text-2xl font-black">Acceso administrador</h1>
|
|
<p class="mt-2 text-sm text-slate-500">Para crear torneos, equipos y partidos tenes que iniciar sesion con un usuario administrador.</p>
|
|
<p class="mt-2 text-xs text-slate-500">Estado actual: ${state.user ? `${state.user.email} - ${currentRole() || 'sin rol'}` : 'sin sesion valida'}</p>
|
|
<button class="btn-primary mt-4" id="adminLoginCta">Ingresar</button>
|
|
</section>`;
|
|
$('#adminLoginCta').onclick = openLoginModal;
|
|
setTimeout(openLoginModal, 150);
|
|
return;
|
|
}
|
|
|
|
const id = selectedTournamentId();
|
|
let teams;
|
|
let players;
|
|
let matches;
|
|
let users;
|
|
let templates;
|
|
try {
|
|
[teams, players, matches, users, templates] = await Promise.all([
|
|
api(`/api/teams?tournament_id=${id}&per_page=50`),
|
|
api('/api/players?per_page=50'),
|
|
api(`/api/matches?tournament_id=${id}&per_page=50`),
|
|
api('/api/users?per_page=50'),
|
|
api(`/api/sheet-templates?per_page=50&tournament_id=${id}`)
|
|
]);
|
|
} catch (err) {
|
|
if (err.status === 401) {
|
|
clearSession();
|
|
state.authValidated = true;
|
|
updateSession();
|
|
toast('La sesion expiro. Inicia sesion nuevamente.', 'error');
|
|
return renderAdmin();
|
|
}
|
|
throw err;
|
|
}
|
|
view.innerHTML = `
|
|
<div class="grid gap-4">
|
|
<section class="panel">
|
|
<div class="flex flex-wrap items-end justify-between gap-4">
|
|
<div>
|
|
<h1 class="text-2xl font-black">Dashboard administrativo</h1>
|
|
<p class="text-sm text-slate-500">Gestion operativa del torneo seleccionado.</p>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
|
${metricCard('Equipos', teams.data?.length || 0)}
|
|
${metricCard('Jugadores', players.data?.length || 0)}
|
|
${metricCard('Partidos', matches.data?.length || 0)}
|
|
${metricCard('Usuarios', users.data?.length || 0)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="dashboard-actions">
|
|
<button class="action-tile" data-admin-modal="user">
|
|
<span class="action-icon">+</span>
|
|
<span class="mt-4 block text-base font-black">Crear usuario</span>
|
|
<span class="mt-1 block text-sm text-slate-500">Admin o delegado.</span>
|
|
</button>
|
|
<button class="action-tile" data-admin-modal="tournament">
|
|
<span class="action-icon">+</span>
|
|
<span class="mt-4 block text-base font-black">Crear torneo</span>
|
|
<span class="mt-1 block text-sm text-slate-500">Categoria, formato y fechas.</span>
|
|
</button>
|
|
<button class="action-tile" data-admin-modal="team">
|
|
<span class="action-icon">+</span>
|
|
<span class="mt-4 block text-base font-black">Crear equipo</span>
|
|
<span class="mt-1 block text-sm text-slate-500">Nombre, DT y link de ficha.</span>
|
|
</button>
|
|
<button class="action-tile" data-admin-modal="match">
|
|
<span class="action-icon">+</span>
|
|
<span class="mt-4 block text-base font-black">Crear partido</span>
|
|
<span class="mt-1 block text-sm text-slate-500">Equipos, fecha y cancha.</span>
|
|
</button>
|
|
<button class="action-tile" data-admin-modal="template">
|
|
<span class="action-icon">+</span>
|
|
<span class="mt-4 block text-base font-black">Crear plantilla</span>
|
|
<span class="mt-1 block text-sm text-slate-500">Imagen y coordenadas.</span>
|
|
</button>
|
|
<button class="action-tile" id="demoScoresheetBtn">
|
|
<span class="action-icon">+</span>
|
|
<span class="mt-4 block text-base font-black">Demo planilla</span>
|
|
<span class="mt-1 block text-sm text-slate-500">Datos para probar export.</span>
|
|
</button>
|
|
</section>
|
|
<section class="dashboard-panels">
|
|
<section class="panel"><h2 class="section-title">Equipos</h2>${table(['Equipo','DT','Link ficha'], (teams.data || []).map(t => [t.name, t.coach_name || '-', `/registro/${t.registration_token}`]))}</section>
|
|
<section class="panel"><h2 class="section-title">Usuarios</h2>${userTable(users.data || [])}</section>
|
|
<section class="panel"><h2 class="section-title">Plantillas de planilla</h2>${templateTable(templates.data || [])}</section>
|
|
<section class="panel"><h2 class="section-title">Jugadores</h2>${table(['Jugador','Equipo','DNI','Nro','Posicion'], (players.data || []).map(p => [`${p.first_name} ${p.last_name}`, p.team_name, p.document_id, p.jersey_number || '-', p.position || '-']))}</section>
|
|
<section class="panel"><h2 class="section-title">Partidos</h2>${table(['ID','Fecha','Local','Visitante','Estado'], (matches.data || []).map(m => [m.id, fmt(m.scheduled_at), m.home_team, m.away_team, m.status]))}</section>
|
|
</section>
|
|
</div>`;
|
|
bindAdminActions(teams.data || [], users.data || [], templates.data || []);
|
|
}
|
|
|
|
function bindAdminActions(teams, users, templates) {
|
|
document.querySelector('[data-admin-modal="user"]').onclick = () => openUserModal();
|
|
document.querySelector('[data-admin-modal="tournament"]').onclick = () => openTournamentModal();
|
|
document.querySelector('[data-admin-modal="team"]').onclick = () => openTeamModal();
|
|
document.querySelector('[data-admin-modal="match"]').onclick = () => openMatchModal(teams);
|
|
document.querySelector('[data-admin-modal="template"]').onclick = () => openTemplateModal();
|
|
$('#demoScoresheetBtn').onclick = openDemoScoresheetModal;
|
|
document.querySelectorAll('[data-edit-user]').forEach(btn => {
|
|
btn.onclick = () => openUserModal(users.find(user => Number(user.id) === Number(btn.dataset.editUser)));
|
|
});
|
|
document.querySelectorAll('[data-toggle-user]').forEach(btn => {
|
|
btn.onclick = () => toggleUser(Number(btn.dataset.toggleUser), Number(btn.dataset.active) ? 0 : 1);
|
|
});
|
|
document.querySelectorAll('[data-assign-template]').forEach(btn => {
|
|
btn.onclick = () => openAssignTemplateModal(Number(btn.dataset.assignTemplate));
|
|
});
|
|
document.querySelectorAll('[data-edit-template]').forEach(btn => {
|
|
btn.onclick = () => openTemplateDesigner(Number(btn.dataset.editTemplate));
|
|
});
|
|
}
|
|
|
|
function openUserModal(user = null) {
|
|
const isEdit = Boolean(user);
|
|
openModal({
|
|
eyebrow: 'Seguridad',
|
|
title: isEdit ? 'Editar usuario' : 'Crear usuario',
|
|
subtitle: 'Administra accesos para administradores y delegados.',
|
|
body: `<form id="userForm" class="space-y-4">
|
|
${field('Nombre', input('name','Nombre', 'text', user?.name || ''))}
|
|
${field('Email', input('email','Email', 'email', user?.email || ''))}
|
|
${field(isEdit ? 'Nueva contrasena opcional' : 'Contrasena', input('password','Contrasena', 'password'))}
|
|
${field('Rol', `<select class="input" name="role">
|
|
<option value="admin" ${user?.role === 'admin' ? 'selected' : ''}>admin</option>
|
|
<option value="delegate" ${user?.role === 'delegate' ? 'selected' : ''}>delegate</option>
|
|
<option value="public" ${user?.role === 'public' ? 'selected' : ''}>public</option>
|
|
</select>`)}
|
|
${field('Estado', `<select class="input" name="active">
|
|
<option value="1" ${!user || Number(user.active) ? 'selected' : ''}>Activo</option>
|
|
<option value="0" ${user && !Number(user.active) ? 'selected' : ''}>Inactivo</option>
|
|
</select>`)}
|
|
<button class="btn-primary w-full">${isEdit ? 'Guardar cambios' : 'Crear usuario'}</button>
|
|
</form>`
|
|
});
|
|
|
|
$('#userForm').onsubmit = submitForm(isEdit ? `/api/users/${user.id}` : '/api/users', data => {
|
|
if (isEdit && !data.password) delete data.password;
|
|
return data;
|
|
}, true, isEdit ? 'PUT' : 'POST');
|
|
}
|
|
|
|
async function toggleUser(id, active) {
|
|
await api(`/api/users/${id}`, { method: 'PUT', body: JSON.stringify({ active }) });
|
|
toast(active ? 'Usuario activado' : 'Usuario desactivado');
|
|
render();
|
|
}
|
|
|
|
function openTemplateModal() {
|
|
const defaultConfig = JSON.stringify({
|
|
fields: {},
|
|
result_rows: [],
|
|
result_columns: {},
|
|
home_players: {},
|
|
away_players: {}
|
|
}, null, 2);
|
|
openModal({
|
|
eyebrow: 'Plantillas',
|
|
title: 'Crear plantilla',
|
|
subtitle: 'Subi la imagen a public/templates y defini coordenadas JSON.',
|
|
body: `<form id="templateForm" class="space-y-4">
|
|
${field('Codigo', input('code','ej: ltv27'))}
|
|
${field('Nombre', input('name','Nombre de plantilla'))}
|
|
${field('Ruta imagen', input('image_path','/templates/mi-planilla.png'))}
|
|
${field('Ancho px', input('page_width','1418','number'))}
|
|
${field('Alto px', input('page_height','970','number'))}
|
|
${field('Config JSON', `<textarea class="input min-h-[180px] font-mono text-xs" name="config_json">${escapeHtml(defaultConfig)}</textarea>`)}
|
|
<button class="btn-primary w-full">Crear plantilla</button>
|
|
</form>`
|
|
});
|
|
$('#templateForm').onsubmit = submitForm('/api/sheet-templates', data => ({ ...data, config_json: JSON.parse(data.config_json) }), true);
|
|
}
|
|
|
|
function openAssignTemplateModal(templateId) {
|
|
openModal({
|
|
eyebrow: 'Plantillas',
|
|
title: 'Asignar plantilla',
|
|
subtitle: 'Selecciona el torneo que usara esta planilla por defecto.',
|
|
body: `<form id="assignTemplateForm" class="space-y-4">
|
|
${field('Torneo', `<select class="input" name="tournament_id">${state.tournaments.map(tournament => `<option value="${tournament.id}" ${Number(tournament.id) === selectedTournamentId() ? 'selected' : ''}>${tournament.name}</option>`).join('')}</select>`)}
|
|
<button class="btn-primary w-full">Asignar plantilla</button>
|
|
</form>`
|
|
});
|
|
$('#assignTemplateForm').onsubmit = async (event) => {
|
|
event.preventDefault();
|
|
const data = Object.fromEntries(new FormData(event.target));
|
|
await assignTemplateToTournament(templateId, Number(data.tournament_id));
|
|
closeModal();
|
|
};
|
|
}
|
|
|
|
async function assignTemplateToTournament(templateId, tournamentId) {
|
|
try {
|
|
await api(`/api/tournaments/${tournamentId}/sheet-template`, { method: 'POST', body: JSON.stringify({ sheet_template_id: templateId }) });
|
|
toast('Plantilla asignada al torneo');
|
|
await renderAdmin();
|
|
} catch (err) {
|
|
toast(err.message, 'error');
|
|
await renderAdmin();
|
|
}
|
|
}
|
|
|
|
function openDemoScoresheetModal() {
|
|
openModal({
|
|
eyebrow: 'Demo',
|
|
title: 'Generar demo de planilla',
|
|
subtitle: 'Crea equipos, jugadores, partido, sets, libero, rotaciones y firma demo para probar la plantilla.',
|
|
body: `<form id="demoScoresheetForm" class="space-y-4">
|
|
${field('Torneo', `<select class="input" name="tournament_id">${state.tournaments.map(tournament => `<option value="${tournament.id}" ${Number(tournament.id) === selectedTournamentId() ? 'selected' : ''}>${tournament.name}</option>`).join('')}</select>`)}
|
|
${field('Modo', '<select class="input" name="force"><option value="0">No pisar demo existente</option><option value="1">Forzar regeneracion</option></select>')}
|
|
<button class="btn-primary w-full">Generar demo</button>
|
|
</form>`
|
|
});
|
|
$('#demoScoresheetForm').onsubmit = async (event) => {
|
|
event.preventDefault();
|
|
const data = Object.fromEntries(new FormData(event.target));
|
|
const res = await api(`/api/tournaments/${data.tournament_id}/demo-scoresheet-data`, { method: 'POST', body: JSON.stringify({ force: Number(data.force) === 1 }) });
|
|
closeModal();
|
|
toast(res.created ? `Demo creado. Partido #${res.match_id}` : res.message);
|
|
await renderAdmin();
|
|
};
|
|
}
|
|
|
|
async function openTemplateDesigner(templateId) {
|
|
const template = await api(`/api/sheet-templates/${templateId}/effective`);
|
|
if (!template) return;
|
|
const config = safeJson(template.effective_config_json || template.config_json, {});
|
|
state.designer = {
|
|
template,
|
|
config,
|
|
selectedKey: null,
|
|
selectedKind: 'field',
|
|
drag: null
|
|
};
|
|
renderTemplateDesigner();
|
|
}
|
|
|
|
function renderTemplateDesigner() {
|
|
const template = state.designer.template;
|
|
const config = state.designer.config;
|
|
view.innerHTML = `<div class="grid gap-4">
|
|
<section class="panel">
|
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<h1 class="text-2xl font-black">Editor de plantilla</h1>
|
|
<p class="text-sm text-slate-500">${template.name} - ${template.page_width}x${template.page_height}</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button class="btn-muted" id="backAdminBtn">Volver</button>
|
|
<button class="btn-primary" id="saveTemplateDesignBtn">Guardar diseno</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="template-editor">
|
|
<div class="template-canvas-wrap">
|
|
<div id="templateCanvas" class="template-canvas" tabindex="0" style="aspect-ratio:${template.page_width}/${template.page_height}">
|
|
<img src="${template.image_path}" alt="${template.name}" tabindex="-1">
|
|
${designerFields(config)}
|
|
${designerPlayerBlock(config.home_players, 'home_players', 'Jugadores A')}
|
|
${designerPlayerBlock(config.away_players, 'away_players', 'Jugadores B')}
|
|
${designerResultBlock(config)}
|
|
</div>
|
|
</div>
|
|
<aside class="template-side">
|
|
<section class="panel">
|
|
<h2 class="section-title">Agregar campo</h2>
|
|
<div class="template-field-list">
|
|
${availableTemplateFields().map(key => `<button class="btn-muted text-xs" data-add-field="${key}">${key}</button>`).join('')}
|
|
<button class="btn-muted text-xs" data-select-block="home_players">Bloque jugadores A</button>
|
|
<button class="btn-muted text-xs" data-select-block="away_players">Bloque jugadores B</button>
|
|
<button class="btn-muted text-xs" data-select-block="result">Bloque resultado</button>
|
|
</div>
|
|
</section>
|
|
<section class="panel">
|
|
<h2 class="section-title">Campo seleccionado</h2>
|
|
<div id="fieldProps">${fieldPropsPanel()}</div>
|
|
</section>
|
|
</aside>
|
|
</section>
|
|
</div>`;
|
|
bindTemplateDesigner();
|
|
}
|
|
|
|
function designerFields(config) {
|
|
return Object.entries(config.fields || {}).map(([key, box]) => {
|
|
const left = percent(box.x, state.designer.template.page_width);
|
|
const top = percent(box.y, state.designer.template.page_height);
|
|
const width = percent(box.w || 120, state.designer.template.page_width);
|
|
const active = state.designer.selectedKey === key ? 'active' : '';
|
|
return `<div class="template-field ${active}" data-field-key="${key}" style="left:${left}%;top:${top}%;width:${width}%;font-size:${box.size || 12}px;justify-content:${alignToJustify(box.align)};align-items:${verticalToAlign(box.valign)};transform:${verticalToTransform(box.valign)}">${fieldPreview(key)}</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
function designerPlayerBlock(config, key, label) {
|
|
if (!config?.x) return '';
|
|
const left = percent(config.x, state.designer.template.page_width);
|
|
const top = percent(config.y, state.designer.template.page_height);
|
|
const width = percent((config.number_w || 30) + (config.name_w || 120), state.designer.template.page_width);
|
|
const height = percent((config.row_h || 20) * 14, state.designer.template.page_height);
|
|
const active = state.designer.selectedKey === key ? 'active' : '';
|
|
return `<div class="template-field ${active}" data-block-key="${key}" style="left:${left}%;top:${top}%;width:${width}%;height:${height}%;font-size:${config.size || 10}px;align-items:${verticalToAlign(config.valign)}">${label}</div>`;
|
|
}
|
|
|
|
function designerResultBlock(config) {
|
|
if (!config?.result_rows?.length || !config?.result_columns?.set) return '';
|
|
const row = config.result_rows[0];
|
|
const col = config.result_columns.home_t || config.result_columns.set;
|
|
const lastRow = config.result_rows[config.result_rows.length - 1];
|
|
const left = percent(col.x, state.designer.template.page_width);
|
|
const top = percent(row.y, state.designer.template.page_height);
|
|
const width = percent(300, state.designer.template.page_width);
|
|
const height = percent((lastRow.y - row.y) + 24, state.designer.template.page_height);
|
|
const active = state.designer.selectedKey === 'result' ? 'active' : '';
|
|
return `<div class="template-field ${active}" data-block-key="result" style="left:${left}%;top:${top}%;width:${width}%;height:${height}%;font-size:11px">Resultado</div>`;
|
|
}
|
|
|
|
function fieldPropsPanel() {
|
|
const key = state.designer?.selectedKey;
|
|
if (!key) return '<p class="text-sm text-slate-500">Selecciona un campo del lienzo.</p>';
|
|
if (state.designer.selectedKind === 'block') {
|
|
return blockPropsPanel(key);
|
|
}
|
|
const box = state.designer.config.fields[key];
|
|
return `<div class="space-y-3">
|
|
${field('Campo', `<input class="input" value="${escapeAttr(key)}" disabled>`)}
|
|
${field('X', input('prop_x','x','number', box.x || 0))}
|
|
${field('Y', input('prop_y','y','number', box.y || 0))}
|
|
${field('Ancho', input('prop_w','w','number', box.w || 120))}
|
|
${field('Fuente', input('prop_size','size','number', box.size || 12))}
|
|
${field('Alineacion', `<select class="input" name="prop_align"><option value="left" ${box.align === 'left' ? 'selected' : ''}>left</option><option value="center" ${box.align === 'center' ? 'selected' : ''}>center</option><option value="right" ${box.align === 'right' ? 'selected' : ''}>right</option></select>`)}
|
|
${field('Alineacion vertical', `<select class="input" name="prop_valign"><option value="top" ${box.valign === 'top' ? 'selected' : ''}>top</option><option value="middle" ${box.valign === 'middle' ? 'selected' : ''}>middle</option><option value="bottom" ${box.valign === 'bottom' ? 'selected' : ''}>bottom</option></select>`)}
|
|
<button class="btn-muted w-full" id="deleteFieldBtn">Eliminar campo</button>
|
|
</div>`;
|
|
}
|
|
|
|
function blockPropsPanel(key) {
|
|
const block = getDesignerBlock(key);
|
|
if (!block) return '<p class="text-sm text-slate-500">Bloque no disponible.</p>';
|
|
return `<div class="space-y-3">
|
|
${field('Bloque', `<input class="input" value="${escapeAttr(key)}" disabled>`)}
|
|
${field('X', input('block_x','x','number', block.x || 0))}
|
|
${field('Y', input('block_y','y','number', block.y || 0))}
|
|
${key === 'result' ? field('Separacion filas', input('block_row_h','row_h','number', resultRowHeight())) : field('Alto fila', input('block_row_h','row_h','number', block.row_h || 22))}
|
|
${key === 'result' ? '' : field('Ancho numero', input('block_number_w','number_w','number', block.number_w || 32))}
|
|
${key === 'result' ? '' : field('Ancho nombre', input('block_name_w','name_w','number', block.name_w || 124))}
|
|
${field('Fuente', input('block_size','size','number', block.size || 10))}
|
|
${field('Alineacion vertical', `<select class="input" name="block_valign"><option value="top" ${block.valign === 'top' ? 'selected' : ''}>top</option><option value="middle" ${block.valign === 'middle' ? 'selected' : ''}>middle</option><option value="bottom" ${block.valign === 'bottom' ? 'selected' : ''}>bottom</option></select>`)}
|
|
<button class="btn-muted w-full" id="deleteBlockBtn">Eliminar bloque</button>
|
|
</div>`;
|
|
}
|
|
|
|
function bindTemplateDesigner() {
|
|
$('#backAdminBtn').onclick = () => {
|
|
document.onkeydown = null;
|
|
renderAdmin();
|
|
};
|
|
$('#saveTemplateDesignBtn').onclick = saveTemplateDesign;
|
|
document.querySelectorAll('[data-add-field]').forEach(btn => btn.onclick = () => addTemplateField(btn.dataset.addField));
|
|
document.querySelectorAll('[data-select-block]').forEach(btn => btn.onclick = () => selectTemplateBlock(btn.dataset.selectBlock));
|
|
document.querySelectorAll('[data-field-key]').forEach(el => {
|
|
el.onclick = () => selectTemplateField(el.dataset.fieldKey);
|
|
el.onpointerdown = (event) => startFieldDrag(event, el.dataset.fieldKey);
|
|
});
|
|
document.querySelectorAll('[data-block-key]').forEach(el => {
|
|
el.onclick = () => selectTemplateBlock(el.dataset.blockKey);
|
|
el.onpointerdown = (event) => startBlockDrag(event, el.dataset.blockKey);
|
|
});
|
|
const props = $('#fieldProps');
|
|
props.querySelectorAll('input, select').forEach(inputEl => inputEl.oninput = state.designer.selectedKind === 'block' ? updateSelectedBlockFromProps : updateSelectedFieldFromProps);
|
|
const deleteBtn = $('#deleteFieldBtn');
|
|
if (deleteBtn) deleteBtn.onclick = deleteSelectedField;
|
|
const deleteBlockBtn = $('#deleteBlockBtn');
|
|
if (deleteBlockBtn) deleteBlockBtn.onclick = deleteSelectedBlock;
|
|
document.onkeydown = handleTemplateKeydown;
|
|
}
|
|
|
|
function addTemplateField(key) {
|
|
if (['home_players', 'away_players', 'result'].includes(key)) {
|
|
addTemplateBlock(key);
|
|
return;
|
|
}
|
|
state.designer.config.fields = state.designer.config.fields || {};
|
|
state.designer.config.fields[key] = state.designer.config.fields[key] || { x: 40, y: 40, w: 160, size: 12, align: 'left' };
|
|
state.designer.selectedKey = key;
|
|
state.designer.selectedKind = 'field';
|
|
renderTemplateDesigner();
|
|
}
|
|
|
|
function selectTemplateField(key) {
|
|
state.designer.selectedKey = key;
|
|
state.designer.selectedKind = 'field';
|
|
renderTemplateDesigner();
|
|
focusTemplateCanvas();
|
|
}
|
|
|
|
function selectTemplateBlock(key) {
|
|
if (!getDesignerBlock(key)) addTemplateBlock(key);
|
|
state.designer.selectedKey = key;
|
|
state.designer.selectedKind = 'block';
|
|
renderTemplateDesigner();
|
|
focusTemplateCanvas();
|
|
}
|
|
|
|
function addTemplateBlock(key) {
|
|
if (key === 'home_players') state.designer.config.home_players = state.designer.config.home_players || { x: 1081, y: 548, row_h: 22, number_w: 32, name_w: 124, size: 10 };
|
|
if (key === 'away_players') state.designer.config.away_players = state.designer.config.away_players || { x: 1238, y: 548, row_h: 22, number_w: 32, name_w: 124, size: 10 };
|
|
if (key === 'result') {
|
|
state.designer.config.result_rows = state.designer.config.result_rows || [{ y: 790 }, { y: 816 }, { y: 842 }, { y: 867 }, { y: 893 }];
|
|
state.designer.config.result_columns = state.designer.config.result_columns || {
|
|
home_pt: { x: 886, w: 34 },
|
|
set: { x: 921, w: 70 },
|
|
away_pt: { x: 992, w: 34 }
|
|
};
|
|
}
|
|
state.designer.selectedKey = key;
|
|
state.designer.selectedKind = 'block';
|
|
}
|
|
|
|
function startFieldDrag(event, key) {
|
|
event.preventDefault();
|
|
const canvas = $('#templateCanvas');
|
|
const rect = canvas.getBoundingClientRect();
|
|
const box = state.designer.config.fields[key];
|
|
state.designer.selectedKey = key;
|
|
state.designer.drag = {
|
|
key,
|
|
startX: event.clientX,
|
|
startY: event.clientY,
|
|
originX: Number(box.x || 0),
|
|
originY: Number(box.y || 0),
|
|
scaleX: state.designer.template.page_width / rect.width,
|
|
scaleY: state.designer.template.page_height / rect.height
|
|
};
|
|
window.onpointermove = moveFieldDrag;
|
|
window.onpointerup = stopFieldDrag;
|
|
}
|
|
|
|
function startBlockDrag(event, key) {
|
|
event.preventDefault();
|
|
const canvas = $('#templateCanvas');
|
|
const rect = canvas.getBoundingClientRect();
|
|
const box = getDesignerBlock(key);
|
|
state.designer.selectedKey = key;
|
|
state.designer.selectedKind = 'block';
|
|
state.designer.drag = {
|
|
key,
|
|
kind: 'block',
|
|
startX: event.clientX,
|
|
startY: event.clientY,
|
|
originX: Number(box.x || 0),
|
|
originY: Number(box.y || 0),
|
|
resultOriginColumns: key === 'result' ? clone(state.designer.config.result_columns || {}) : null,
|
|
scaleX: state.designer.template.page_width / rect.width,
|
|
scaleY: state.designer.template.page_height / rect.height
|
|
};
|
|
window.onpointermove = moveFieldDrag;
|
|
window.onpointerup = stopFieldDrag;
|
|
}
|
|
|
|
function moveFieldDrag(event) {
|
|
const drag = state.designer.drag;
|
|
if (!drag) return;
|
|
const box = drag.kind === 'block' ? getDesignerBlock(drag.key) : state.designer.config.fields[drag.key];
|
|
const nextX = Math.max(0, Math.round(drag.originX + ((event.clientX - drag.startX) * drag.scaleX)));
|
|
box.x = nextX;
|
|
box.y = Math.max(0, Math.round(drag.originY + ((event.clientY - drag.startY) * drag.scaleY)));
|
|
if (drag.kind === 'block' && drag.key === 'result') {
|
|
moveResultRows(box.y);
|
|
moveResultColumns(drag.resultOriginColumns, nextX - drag.originX);
|
|
}
|
|
const selector = drag.kind === 'block' ? `[data-block-key="${drag.key}"]` : `[data-field-key="${drag.key}"]`;
|
|
const el = document.querySelector(selector);
|
|
if (el) {
|
|
el.style.left = `${percent(box.x, state.designer.template.page_width)}%`;
|
|
el.style.top = `${percent(box.y, state.designer.template.page_height)}%`;
|
|
}
|
|
}
|
|
|
|
function stopFieldDrag() {
|
|
window.onpointermove = null;
|
|
window.onpointerup = null;
|
|
state.designer.drag = null;
|
|
renderTemplateDesigner();
|
|
}
|
|
|
|
function handleTemplateKeydown(event) {
|
|
if (!state.designer || !state.designer.selectedKey) return;
|
|
const active = document.activeElement;
|
|
if (active && ['INPUT', 'SELECT', 'TEXTAREA'].includes(active.tagName)) return;
|
|
if (['Delete', 'Backspace'].includes(event.key)) {
|
|
event.preventDefault();
|
|
if (state.designer.selectedKind === 'block') deleteSelectedBlock();
|
|
else deleteSelectedField();
|
|
return;
|
|
}
|
|
if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) return;
|
|
event.preventDefault();
|
|
const step = event.shiftKey ? 10 : 1;
|
|
const target = state.designer.selectedKind === 'block'
|
|
? getDesignerBlock(state.designer.selectedKey)
|
|
: state.designer.config.fields[state.designer.selectedKey];
|
|
if (!target) return;
|
|
if (event.key === 'ArrowLeft') target.x = Math.max(0, Number(target.x || 0) - step);
|
|
if (event.key === 'ArrowRight') target.x = Number(target.x || 0) + step;
|
|
if (event.key === 'ArrowUp') target.y = Math.max(0, Number(target.y || 0) - step);
|
|
if (event.key === 'ArrowDown') target.y = Number(target.y || 0) + step;
|
|
if (state.designer.selectedKind === 'block' && state.designer.selectedKey === 'result') {
|
|
moveResultRows(target.y);
|
|
}
|
|
renderTemplateDesigner();
|
|
focusTemplateCanvas();
|
|
}
|
|
|
|
function updateSelectedFieldFromProps() {
|
|
const key = state.designer.selectedKey;
|
|
if (!key) return;
|
|
const box = state.designer.config.fields[key];
|
|
box.x = Number(document.querySelector('[name="prop_x"]').value || 0);
|
|
box.y = Number(document.querySelector('[name="prop_y"]').value || 0);
|
|
box.w = Number(document.querySelector('[name="prop_w"]').value || 120);
|
|
box.size = Number(document.querySelector('[name="prop_size"]').value || 12);
|
|
box.align = document.querySelector('[name="prop_align"]').value || 'left';
|
|
box.valign = document.querySelector('[name="prop_valign"]').value || 'top';
|
|
renderTemplateDesigner();
|
|
}
|
|
|
|
function updateSelectedBlockFromProps() {
|
|
const key = state.designer.selectedKey;
|
|
const box = getDesignerBlock(key);
|
|
if (!box) return;
|
|
box.x = Number(document.querySelector('[name="block_x"]').value || 0);
|
|
box.y = Number(document.querySelector('[name="block_y"]').value || 0);
|
|
box.size = Number(document.querySelector('[name="block_size"]').value || 10);
|
|
box.valign = document.querySelector('[name="block_valign"]').value || 'top';
|
|
const rowH = Number(document.querySelector('[name="block_row_h"]').value || 22);
|
|
if (key === 'result') {
|
|
const cols = state.designer.config.result_columns || {};
|
|
const oldX = Number((cols.home_t || cols.set || {}).x || box.x);
|
|
const newX = Number(document.querySelector('[name="block_x"]').value || oldX);
|
|
moveResultColumns(clone(cols), newX - oldX);
|
|
moveResultRows(box.y, rowH);
|
|
} else {
|
|
box.row_h = rowH;
|
|
box.number_w = Number(document.querySelector('[name="block_number_w"]').value || 32);
|
|
box.name_w = Number(document.querySelector('[name="block_name_w"]').value || 124);
|
|
}
|
|
renderTemplateDesigner();
|
|
}
|
|
|
|
function deleteSelectedField() {
|
|
const key = state.designer.selectedKey;
|
|
if (!key) return;
|
|
delete state.designer.config.fields[key];
|
|
state.designer.selectedKey = null;
|
|
renderTemplateDesigner();
|
|
}
|
|
|
|
function deleteSelectedBlock() {
|
|
const key = state.designer.selectedKey;
|
|
if (key === 'home_players') delete state.designer.config.home_players;
|
|
if (key === 'away_players') delete state.designer.config.away_players;
|
|
if (key === 'result') {
|
|
delete state.designer.config.result_rows;
|
|
delete state.designer.config.result_columns;
|
|
}
|
|
state.designer.selectedKey = null;
|
|
state.designer.selectedKind = 'field';
|
|
renderTemplateDesigner();
|
|
}
|
|
|
|
function getDesignerBlock(key) {
|
|
if (key === 'home_players') return state.designer.config.home_players;
|
|
if (key === 'away_players') return state.designer.config.away_players;
|
|
if (key === 'result') return state.designer.config.result_columns?.home_t || state.designer.config.result_columns?.set;
|
|
return null;
|
|
}
|
|
|
|
function resultRowHeight() {
|
|
const rows = state.designer.config.result_rows || [];
|
|
return rows.length > 1 ? Number(rows[1].y) - Number(rows[0].y) : 26;
|
|
}
|
|
|
|
function moveResultRows(startY, rowH = resultRowHeight()) {
|
|
(state.designer.config.result_rows || []).forEach((row, index) => {
|
|
row.y = Number(startY) + (index * Number(rowH));
|
|
});
|
|
}
|
|
|
|
function moveResultColumns(originColumns, deltaX) {
|
|
if (!originColumns) return;
|
|
Object.entries(originColumns).forEach(([key, col]) => {
|
|
if (!state.designer.config.result_columns[key]) return;
|
|
state.designer.config.result_columns[key].x = Math.max(0, Math.round(Number(col.x || 0) + Number(deltaX || 0)));
|
|
});
|
|
}
|
|
|
|
function clone(value) {
|
|
return JSON.parse(JSON.stringify(value));
|
|
}
|
|
|
|
async function saveTemplateDesign() {
|
|
const saved = await api(`/api/sheet-templates/${state.designer.template.id}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({ config_json: state.designer.config })
|
|
});
|
|
const fresh = await api(`/api/sheet-templates/${state.designer.template.id}`);
|
|
state.designer.template = fresh || saved;
|
|
state.designer.config = safeJson(state.designer.template.config_json, state.designer.config);
|
|
toast('Diseno de plantilla guardado');
|
|
renderTemplateDesigner();
|
|
}
|
|
|
|
function focusTemplateCanvas() {
|
|
setTimeout(() => $('#templateCanvas')?.focus?.(), 0);
|
|
}
|
|
|
|
function availableTemplateFields() {
|
|
return [
|
|
'tournament','date','time','court','home_team','away_team','home_sets','away_sets','winner',
|
|
'referee_signature','home_captain','away_captain','home_coach','away_coach','observations',
|
|
'home_players','away_players','result'
|
|
];
|
|
}
|
|
|
|
function fieldPreview(key) {
|
|
const values = {
|
|
tournament: 'Liga demo',
|
|
date: '19/05/2026',
|
|
time: '17:47',
|
|
court: 'Cancha 1',
|
|
home_team: 'Demo A',
|
|
away_team: 'Demo B',
|
|
home_sets: '3',
|
|
away_sets: '1',
|
|
winner: 'Demo A',
|
|
referee_signature: 'Arbitro Demo',
|
|
home_captain: 'Capitan A',
|
|
away_captain: 'Capitan B',
|
|
home_coach: 'DT A',
|
|
away_coach: 'DT B',
|
|
observations: 'Observaciones'
|
|
};
|
|
return values[key] || key;
|
|
}
|
|
|
|
function percent(value, total) {
|
|
return (Number(value || 0) / Number(total || 1)) * 100;
|
|
}
|
|
|
|
function alignToJustify(align) {
|
|
return align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start';
|
|
}
|
|
|
|
function verticalToAlign(align) {
|
|
return align === 'middle' ? 'center' : align === 'bottom' ? 'flex-end' : 'flex-start';
|
|
}
|
|
|
|
function verticalToTransform(align) {
|
|
return align === 'middle' ? 'translateY(-50%)' : align === 'bottom' ? 'translateY(-100%)' : 'none';
|
|
}
|
|
|
|
function safeJson(value, fallback) {
|
|
try {
|
|
return typeof value === 'string' ? JSON.parse(value) : value;
|
|
} catch (_) {
|
|
return fallback;
|
|
}
|
|
}
|
|
|
|
function openTournamentModal() {
|
|
openModal({
|
|
eyebrow: 'Administracion',
|
|
title: 'Crear torneo',
|
|
subtitle: 'Define la categoria, subcategoria y formato competitivo.',
|
|
body: `<form id="tournamentForm" class="space-y-4">
|
|
${field('Nombre', input('name','Nombre'))}
|
|
${field('Categoria', '<select class="input" name="category"><option>Masculino</option><option>Femenino</option><option>Mixto</option></select>')}
|
|
${field('Subcategoria', input('age_subcategory','Subcategoria'))}
|
|
${field('Formato', '<select class="input" name="format"><option>Liga</option><option>Eliminacion directa</option><option>Doble eliminacion</option><option>Grupos + playoffs</option></select>')}
|
|
<button class="btn-primary w-full">Crear torneo</button>
|
|
</form>`
|
|
});
|
|
$('#tournamentForm').onsubmit = submitForm('/api/tournaments', data => data, true);
|
|
}
|
|
|
|
function openTeamModal() {
|
|
openModal({
|
|
eyebrow: 'Administracion',
|
|
title: 'Crear equipo',
|
|
subtitle: 'El equipo se agrega al torneo activo y obtiene su link de ficha online.',
|
|
body: `<form id="teamForm" class="space-y-4">
|
|
${field('Nombre', input('name','Nombre'))}
|
|
${field('DT / responsable', input('coach_name','DT / responsable'))}
|
|
<button class="btn-primary w-full">Guardar equipo</button>
|
|
</form>`
|
|
});
|
|
$('#teamForm').onsubmit = submitForm('/api/teams', data => ({ ...data, tournament_id: selectedTournamentId() }), true);
|
|
}
|
|
|
|
function openMatchModal(teams) {
|
|
openModal({
|
|
eyebrow: 'Fixture',
|
|
title: 'Crear partido',
|
|
subtitle: 'Programa un encuentro para el torneo seleccionado.',
|
|
body: `<form id="matchForm" class="space-y-4">
|
|
${field('Local', `<select class="input" name="home_team_id">${teamOptions(teams)}</select>`)}
|
|
${field('Visitante', `<select class="input" name="away_team_id">${teamOptions(teams)}</select>`)}
|
|
${field('Fecha y hora', '<input class="input" name="scheduled_at" type="datetime-local">')}
|
|
<button class="btn-primary w-full">Programar partido</button>
|
|
</form>`
|
|
});
|
|
$('#matchForm').onsubmit = submitForm('/api/matches', data => ({ ...data, tournament_id: selectedTournamentId() }), true);
|
|
}
|
|
|
|
async function renderScore() {
|
|
const id = selectedTournamentId();
|
|
const matches = await api(`/api/matches?tournament_id=${id}&per_page=50`);
|
|
const matchList = matches.data || [];
|
|
const first = matchList.find(match => Number(match.id) === Number(state.scoreMatchId)) || matchList[0];
|
|
if (!first) {
|
|
view.innerHTML = '<section class="panel">No hay partidos programados.</section>';
|
|
return;
|
|
}
|
|
state.scoreMatchId = first.id;
|
|
const [score, advanced, homePlayers, awayPlayers, teamResponse] = await Promise.all([
|
|
api(`/api/matches/${first.id}/score`),
|
|
api(`/api/matches/${first.id}/advanced-score`),
|
|
api(`/api/players?team_id=${first.home_team_id}&per_page=50`),
|
|
api(`/api/players?team_id=${first.away_team_id}&per_page=50`),
|
|
api(`/api/teams?tournament_id=${id}&per_page=100`)
|
|
]);
|
|
connectWs(first.id);
|
|
const currentSet = score.sets.find(s => !s.winner_team_id) || score.sets[score.sets.length - 1] || { set_number: 1, home_points: 0, away_points: 0, side_state: 'normal' };
|
|
const players = [...(homePlayers.data || []), ...(awayPlayers.data || [])];
|
|
const fullTeams = teamResponse.data || [];
|
|
view.innerHTML = `
|
|
<div class="grid gap-4">
|
|
<section class="panel">
|
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
|
<div><h1 class="text-2xl font-black">Modo arbitro/anotador</h1><p class="text-sm text-slate-500">${first.home_team} vs ${first.away_team}</p></div>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<div class="segmented">
|
|
<button type="button" data-score-mode="guided" class="${state.scoreMode === 'guided' ? 'active' : ''}">Guiado</button>
|
|
<button type="button" data-score-mode="expert" class="${state.scoreMode === 'expert' ? 'active' : ''}">Experto</button>
|
|
</div>
|
|
<button id="exportScoresheetBtn" class="btn-muted" type="button">Planilla PDF</button>
|
|
<select id="scoreMatch" class="input max-w-xs">${matchList.map(m => `<option value="${m.id}" ${m.id === first.id ? 'selected' : ''}>#${m.id} ${m.home_team} vs ${m.away_team}</option>`).join('')}</select>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
${state.scoreMode === 'guided' ? guidedScorePanel(first, currentSet, score, advanced) : expertScorePanel(first, currentSet, score)}
|
|
<section class="grid gap-4 xl:grid-cols-2">
|
|
<div class="panel"><h2 class="section-title">Rotaciones oficiales</h2>${table(['Set','Equipo','Pos','Jugador','Libero'], advanced.rotations.map(r => [r.set_number, r.team_name, r.position_number, r.player_name, Number(r.is_libero) ? 'Si' : 'No']))}</div>
|
|
<div class="panel"><h2 class="section-title">Sustituciones y tiempos</h2>${table(['Tipo','Set','Equipo','Detalle'], [
|
|
...advanced.substitutions.map(s => ['Sustitucion', s.set_number, s.team_name, `${s.out_first} ${s.out_last} -> ${s.in_first} ${s.in_last}`]),
|
|
...advanced.timeouts.map(t => ['Tiempo', t.set_number, t.team_name, `${t.points_home}-${t.points_away}`])
|
|
])}</div>
|
|
<div class="panel"><h2 class="section-title">Historial de rallys</h2>${table(['#','Set','Saque','Ganador','Resultado','Marcador'], advanced.rallies.map(r => [r.rally_number, r.set_number, r.serving_team || '-', r.winning_team || '-', r.result_type, `${r.points_home}-${r.points_away}`]))}</div>
|
|
<div class="panel"><h2 class="section-title">Auditoria y firmas</h2>${table(['Tipo','Detalle','Fecha'], [
|
|
...advanced.signatures.map(s => ['Firma', `${s.signer_name} (${s.role}) ${String(s.signature_hash).slice(0, 10)}...`, fmt(s.signed_at)]),
|
|
...advanced.audit.map(a => ['Audit', `${a.action} - ${a.user_name || '-'}`, fmt(a.created_at)])
|
|
])}</div>
|
|
</section>
|
|
<section class="panel"><h2 class="section-title">Eventos en vivo</h2>${table(['Set','Equipo','Evento','Marcador','Hora'], score.events.map(e => [e.set_number, e.team_name || '-', e.event_type, `${e.points_home}-${e.points_away}`, fmt(e.created_at)]))}</section>
|
|
</div>`;
|
|
document.querySelectorAll('[data-team]').forEach(btn => btn.onclick = () => addEvent(first.id, btn.dataset.team, 'point'));
|
|
document.querySelectorAll('[data-event]').forEach(btn => btn.onclick = () => addEvent(first.id, first.home_team_id, btn.dataset.event));
|
|
document.querySelectorAll('[data-advanced]').forEach(btn => btn.onclick = () => openAdvancedScoreModal(btn.dataset.advanced, first, players, fullTeams));
|
|
document.querySelectorAll('[data-score-mode]').forEach(btn => btn.onclick = () => {
|
|
state.scoreMode = btn.dataset.scoreMode;
|
|
localStorage.setItem('scoreMode', state.scoreMode);
|
|
renderScore();
|
|
});
|
|
$('#scoreMatch').onchange = (event) => {
|
|
state.scoreMatchId = Number(event.target.value);
|
|
renderScore();
|
|
};
|
|
$('#exportScoresheetBtn').onclick = () => window.open(`/api/matches/${first.id}/scoresheet/ltv26`, '_blank');
|
|
}
|
|
|
|
function expertScorePanel(match, currentSet, score) {
|
|
return `<section class="grid gap-3 md:grid-cols-3">
|
|
<div class="panel text-center"><div class="section-title">Local</div><div class="text-4xl font-black">${currentSet.home_points}</div><div>${match.home_team}</div><button class="score-btn mt-4 w-full bg-court" data-team="${match.home_team_id}">+ Punto</button></div>
|
|
<div class="panel text-center"><div class="section-title">Set ${currentSet.set_number} - Lado ${currentSet.side_state}</div><div class="text-3xl font-black">${score.sets_won.home} - ${score.sets_won.away}</div><div class="mt-3 grid grid-cols-2 gap-2">${eventButtons()}</div></div>
|
|
<div class="panel text-center"><div class="section-title">Visitante</div><div class="text-4xl font-black">${currentSet.away_points}</div><div>${match.away_team}</div><button class="score-btn mt-4 w-full bg-zinc-900" data-team="${match.away_team_id}">+ Punto</button></div>
|
|
</section>
|
|
<section class="panel">
|
|
<h2 class="section-title">Planilla reglamentaria</h2>
|
|
<div class="grid gap-2 md:grid-cols-3 xl:grid-cols-6">
|
|
<button class="btn-muted" data-advanced="rotation">Rotacion 1-6</button>
|
|
<button class="btn-muted" data-advanced="libero">Libero</button>
|
|
<button class="btn-muted" data-advanced="substitution">Sustitucion</button>
|
|
<button class="btn-muted" data-advanced="timeout">Tiempo</button>
|
|
<button class="btn-muted" data-advanced="rally">Rally</button>
|
|
<button class="btn-muted" data-advanced="sanction">Sancion / tarjeta</button>
|
|
<button class="btn-muted" data-advanced="signature">Firma arbitral</button>
|
|
</div>
|
|
</section>`;
|
|
}
|
|
|
|
function guidedScorePanel(match, currentSet, score, advanced) {
|
|
const rotationCount = advanced.rotations.filter(row => Number(row.set_number) === Number(currentSet.set_number)).length;
|
|
const hasSignature = advanced.signatures.length > 0;
|
|
return `<section class="panel">
|
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<h2 class="text-xl font-black">Carga guiada de planilla</h2>
|
|
<p class="text-sm text-slate-500">Pensado para planilleros nuevos o cierre reglamentario.</p>
|
|
</div>
|
|
<div class="rounded border border-slate-200 bg-white px-4 py-2 text-sm font-black dark:border-zinc-800 dark:bg-zinc-900">Set ${currentSet.set_number} - ${currentSet.home_points}-${currentSet.away_points}</div>
|
|
</div>
|
|
<div class="stepper mt-4">
|
|
${guidedStep(1, 'Prepartido', `Confirmar equipos, libero y formacion inicial. Rotaciones cargadas: ${rotationCount}/12.`, [
|
|
['rotation', 'Cargar rotacion 1-6'],
|
|
['libero', 'Registrar libero']
|
|
])}
|
|
${guidedStep(2, 'Inicio y control de set', `Sets: ${score.sets_won.home}-${score.sets_won.away}. Lado de cancha: ${currentSet.side_state}.`, [
|
|
['rally', 'Registrar rally'],
|
|
['timeout', 'Tiempo solicitado'],
|
|
['substitution', 'Sustitucion']
|
|
])}
|
|
${guidedStep(3, 'Incidencias', 'Registrar sanciones, errores administrativos o correcciones con auditoria.', [
|
|
['sanction', 'Sancion / tarjeta'],
|
|
['rally', 'Rally corregido']
|
|
])}
|
|
${guidedStep(4, 'Cierre', hasSignature ? 'Planilla firmada digitalmente.' : 'Validar resultado y firmar al cierre.', [
|
|
['signature', 'Firma arbitral']
|
|
])}
|
|
</div>
|
|
</section>
|
|
<section class="grid gap-3 md:grid-cols-2">
|
|
<div class="panel text-center"><div class="section-title">Punto local</div><div class="text-3xl font-black">${match.home_team}</div><button class="score-btn mt-4 w-full bg-court" data-team="${match.home_team_id}">+ Punto</button></div>
|
|
<div class="panel text-center"><div class="section-title">Punto visitante</div><div class="text-3xl font-black">${match.away_team}</div><button class="score-btn mt-4 w-full bg-zinc-900" data-team="${match.away_team_id}">+ Punto</button></div>
|
|
</section>`;
|
|
}
|
|
|
|
function guidedStep(number, title, description, actions) {
|
|
return `<div class="step-row">
|
|
<span class="step-number">${number}</span>
|
|
<div class="min-w-0">
|
|
<div class="font-black">${title}</div>
|
|
<p class="text-sm text-slate-500">${description}</p>
|
|
<div class="step-actions">${actions.map(([type, label]) => `<button class="btn-muted text-sm" data-advanced="${type}">${label}</button>`).join('')}</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function openAdvancedScoreModal(type, match, players, fullTeams = []) {
|
|
const homeFull = fullTeams.find(team => Number(team.id) === Number(match.home_team_id));
|
|
const awayFull = fullTeams.find(team => Number(team.id) === Number(match.away_team_id));
|
|
const teams = [
|
|
{ id: match.home_team_id, name: match.home_team, coach: homeFull?.coach_name || 'DT Local' },
|
|
{ id: match.away_team_id, name: match.away_team, coach: awayFull?.coach_name || 'DT Visitante' }
|
|
];
|
|
const teamSelect = `<select class="input" name="team_id">${teams.map(team => `<option value="${team.id}">${team.name}</option>`).join('')}</select>`;
|
|
const playerSelect = (name) => `<select class="input" name="${name}">${players.map(player => `<option value="${player.id}">${player.first_name} ${player.last_name} - ${player.team_name}</option>`).join('')}</select>`;
|
|
const forms = {
|
|
rotation: {
|
|
title: 'Rotacion oficial',
|
|
path: 'rotations',
|
|
body: `${field('Equipo', teamSelect)}${field('Posicion 1 a 6', '<input class="input" name="position_number" type="number" min="1" max="6" value="1">')}${field('Jugador', playerSelect('player_id'))}${field('Libero', '<select class="input" name="is_libero"><option value="0">No</option><option value="1">Si</option></select>')}`
|
|
},
|
|
libero: {
|
|
title: 'Gestion de libero',
|
|
path: 'liberos',
|
|
body: `${field('Equipo', teamSelect)}${field('Jugador libero', playerSelect('player_id'))}${field('Inicial', '<select class="input" name="is_starting"><option value="0">No</option><option value="1">Si</option></select>')}`
|
|
},
|
|
substitution: {
|
|
title: 'Sustitucion reglamentaria',
|
|
path: 'substitutions',
|
|
body: `${field('Equipo', teamSelect)}${field('Sale', playerSelect('player_out_id'))}${field('Entra', playerSelect('player_in_id'))}${field('Motivo', input('reason','Motivo'))}`
|
|
},
|
|
timeout: {
|
|
title: 'Tiempo solicitado',
|
|
path: 'timeouts',
|
|
body: `${field('Equipo', teamSelect)}${field('Solicitado por', input('requested_by','DT / capitan'))}`
|
|
},
|
|
rally: {
|
|
title: 'Historial de rally',
|
|
path: 'rallies',
|
|
body: `${field('Equipo sacador', `<select class="input" name="serving_team_id">${teams.map(team => `<option value="${team.id}">${team.name}</option>`).join('')}</select>`)}${field('Equipo ganador', `<select class="input" name="winning_team_id">${teams.map(team => `<option value="${team.id}">${team.name}</option>`).join('')}</select>`)}${field('Resultado', '<select class="input" name="result_type"><option>point</option><option>error</option><option>ace</option><option>block</option><option>attack</option></select>')}${field('Notas', input('notes','Descripcion breve'))}`
|
|
},
|
|
signature: {
|
|
title: 'Firma digital arbitral',
|
|
path: 'signatures',
|
|
body: `${field('Nombre del arbitro', input('signer_name','Nombre completo'))}${field('Rol', '<select class="input" name="role"><option value="principal">Principal</option><option value="segundo">Segundo</option><option value="anotador">Anotador</option></select>')}`
|
|
},
|
|
sanction: {
|
|
title: 'Sancion / tarjeta',
|
|
path: 'advanced-sanctions',
|
|
body: `${field('Equipo', `<select class="input" name="team_id" id="sanctionTeamSelect">${teams.map(team => `<option value="${team.id}">${team.name}</option>`).join('')}</select>`)}${field('Plantel', `<select class="input" name="player_id" id="sanctionRosterSelect"></select>`)}
|
|
<div class="field"><span class="field-label">Tarjeta</span><div class="card-choice">
|
|
<input id="cardYellow" type="radio" name="card_type" value="yellow" checked><label for="cardYellow"><span class="card-swatch yellow"></span>Tarjeta amarilla</label>
|
|
<input id="cardRed" type="radio" name="card_type" value="red"><label for="cardRed"><span class="card-swatch red"></span>Tarjeta roja</label>
|
|
</div></div>
|
|
${field('Motivo', input('reason','Motivo'))}`
|
|
}
|
|
};
|
|
const config = forms[type];
|
|
openModal({
|
|
eyebrow: 'Planilla electronica',
|
|
title: config.title,
|
|
subtitle: 'El registro queda en eventos, historial y auditoria arbitral.',
|
|
body: `<form id="advancedScoreForm" class="space-y-4">${config.body}<button class="btn-primary w-full">Registrar</button></form>`
|
|
});
|
|
if (type === 'sanction') bindSanctionRoster(teams, players);
|
|
$('#advancedScoreForm').onsubmit = async (event) => {
|
|
event.preventDefault();
|
|
const payload = Object.fromEntries(new FormData(event.target));
|
|
if (payload.player_id === 'coach' || payload.player_id === '') {
|
|
payload.reason = `${payload.player_id === 'coach' ? 'DT - ' : ''}${payload.reason || ''}`.trim();
|
|
payload.player_id = null;
|
|
}
|
|
await api(`/api/matches/${match.id}/${config.path}`, { method: 'POST', body: JSON.stringify(payload) });
|
|
closeModal();
|
|
toast('Registro guardado');
|
|
renderScore();
|
|
};
|
|
}
|
|
|
|
function bindSanctionRoster(teams, players) {
|
|
const teamSelectEl = $('#sanctionTeamSelect');
|
|
const rosterSelect = $('#sanctionRosterSelect');
|
|
const refresh = () => {
|
|
const teamId = Number(teamSelectEl.value);
|
|
const team = teams.find(item => Number(item.id) === teamId);
|
|
const roster = players.filter(player => Number(player.team_id) === teamId);
|
|
rosterSelect.innerHTML = [
|
|
'<option value="">Equipo / banco</option>',
|
|
`<option value="coach">DT - ${team?.coach || 'Responsable'}</option>`,
|
|
...roster.map(player => `<option value="${player.id}">#${player.jersey_number || '-'} ${player.first_name} ${player.last_name}</option>`)
|
|
].join('');
|
|
};
|
|
teamSelectEl.onchange = refresh;
|
|
refresh();
|
|
}
|
|
|
|
function eventButtons() {
|
|
return ['serve','ace','block','attack','error','rotation'].map(e => `<button class="btn-muted text-xs" data-event="${e}">${e}</button>`).join('');
|
|
}
|
|
|
|
async function addEvent(matchId, teamId, eventType) {
|
|
try {
|
|
await api(`/api/matches/${matchId}/events`, { method: 'POST', body: JSON.stringify({ team_id: Number(teamId), event_type: eventType }) });
|
|
toast('Evento registrado');
|
|
renderScore();
|
|
} catch (err) {
|
|
toast(err.message, 'error');
|
|
}
|
|
}
|
|
|
|
function connectWs(matchId) {
|
|
if (state.ws) return;
|
|
try {
|
|
state.ws = new WebSocket(`ws://${location.hostname}:8081?match_id=${matchId}`);
|
|
state.ws.onmessage = () => state.route === 'score' && renderScore();
|
|
} catch (_) {}
|
|
}
|
|
|
|
function renderTeamLink() {
|
|
view.innerHTML = `<section class="panel max-w-xl">
|
|
<h1 class="text-2xl font-black">Ficha online de jugador</h1>
|
|
<p class="mb-4 text-sm text-slate-500">Usa el token del equipo. Ejemplo seed: 11111111111111111111111111111111</p>
|
|
<form id="linkForm" class="space-y-2">
|
|
${input('token','Token del equipo')}${input('first_name','Nombre')}${input('last_name','Apellido')}${input('document_id','DNI')}${input('birth_date','Nacimiento', 'date')}${input('jersey_number','Numero', 'number')}
|
|
<select class="input" name="position"><option>Punta</option><option>Armador</option><option>Central</option><option>Opuesto</option><option>Libero</option><option>Universal</option></select>
|
|
<button class="btn-primary w-full">Enviar ficha</button>
|
|
</form>
|
|
</section>`;
|
|
$('#linkForm').onsubmit = async (e) => {
|
|
e.preventDefault();
|
|
const data = Object.fromEntries(new FormData(e.target));
|
|
const token = data.token;
|
|
delete data.token;
|
|
await api(`/api/team-links/${token}/players`, { method: 'POST', body: JSON.stringify(data) });
|
|
toast('Ficha registrada');
|
|
e.target.reset();
|
|
};
|
|
}
|
|
|
|
function submitForm(path, mapper, shouldCloseModal = false, method = 'POST') {
|
|
return async (e) => {
|
|
e.preventDefault();
|
|
const payload = mapper(Object.fromEntries(new FormData(e.target)));
|
|
await api(path, { method, body: JSON.stringify(payload) });
|
|
toast('Guardado correctamente');
|
|
if (shouldCloseModal) closeModal();
|
|
await loadBase();
|
|
render();
|
|
};
|
|
}
|
|
|
|
function userTable(users) {
|
|
const rows = users.map(user => [
|
|
`<div class="font-bold">${user.name}</div><div class="text-xs text-slate-500">${user.email}</div>`,
|
|
user.role,
|
|
Number(user.active) ? 'Activo' : 'Inactivo',
|
|
`<div class="flex gap-2">
|
|
<button class="btn-muted text-xs" data-edit-user="${user.id}">Editar</button>
|
|
<button class="btn-muted text-xs" data-toggle-user="${user.id}" data-active="${Number(user.active)}">${Number(user.active) ? 'Desactivar' : 'Activar'}</button>
|
|
</div>`
|
|
]);
|
|
return table(['Usuario','Rol','Estado','Acciones'], rows);
|
|
}
|
|
|
|
function templateTable(templates) {
|
|
const rows = templates.map(template => [
|
|
`<div class="font-bold">${template.name}</div><div class="text-xs text-slate-500">${template.code}</div>`,
|
|
`${template.page_width}x${template.page_height}`,
|
|
template.image_path,
|
|
Number(template.assigned_to_tournament) ? 'Asignada' : (Number(template.active) ? 'Activa' : 'Inactiva'),
|
|
`<div class="flex flex-wrap gap-2"><button class="btn-muted text-xs" type="button" data-edit-template="${template.id}">Editar diseno</button><button class="btn-muted text-xs" type="button" data-assign-template="${template.id}">${Number(template.assigned_to_tournament) ? 'Reasignar' : 'Asignar al torneo'}</button></div>`
|
|
]);
|
|
return table(['Plantilla','Tamano','Imagen','Estado','Acciones'], rows);
|
|
}
|
|
|
|
function table(headers, rows) {
|
|
return `<div class="overflow-x-auto"><table class="table"><thead><tr>${headers.map(h => `<th>${h}</th>`).join('')}</tr></thead><tbody>${(rows.length ? rows : [['Sin datos']]).map(r => `<tr>${r.map(c => `<td>${c ?? '-'}</td>`).join('')}</tr>`).join('')}</tbody></table></div>`;
|
|
}
|
|
|
|
function input(name, placeholder, type = 'text', value = '') {
|
|
return `<input class="input" name="${name}" type="${type}" value="${escapeAttr(value)}" placeholder="${placeholder}">`;
|
|
}
|
|
|
|
function field(label, control) {
|
|
return `<label class="field"><span class="field-label">${label}</span>${control}</label>`;
|
|
}
|
|
|
|
function escapeAttr(value) {
|
|
return String(value ?? '').replaceAll('&', '&').replaceAll('"', '"').replaceAll('<', '<').replaceAll('>', '>');
|
|
}
|
|
|
|
function escapeHtml(value) {
|
|
return String(value ?? '').replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>');
|
|
}
|
|
|
|
function teamOptions(teams = []) {
|
|
return teams.map(t => `<option value="${t.id}">${t.name}</option>`).join('');
|
|
}
|
|
|
|
function metricCard(label, value) {
|
|
return `<div class="min-w-[112px] rounded border border-slate-200 bg-slate-50 px-4 py-3 text-right dark:border-zinc-800 dark:bg-zinc-900">
|
|
<div class="text-2xl font-black">${value}</div>
|
|
<div class="text-xs font-bold uppercase text-slate-500">${label}</div>
|
|
</div>`;
|
|
}
|
|
|
|
function fmt(value) {
|
|
if (!value) return '-';
|
|
return new Date(value.replace(' ', 'T')).toLocaleString('es-AR', { dateStyle: 'short', timeStyle: 'short' });
|
|
}
|
|
|
|
$('#loginBtn').onclick = openLoginModal;
|
|
$('#sideLoginBtn').onclick = openLoginModal;
|
|
$('#sidebarToggle').onclick = toggleSidebar;
|
|
$('#mobileMenuBtn').onclick = openMobileMenu;
|
|
$('#mobileMenuBackdrop').onclick = closeMobileMenu;
|
|
$('#themeBtn').onclick = () => document.documentElement.classList.toggle('dark');
|
|
$('#refreshBtn').onclick = () => render().catch(err => toast(err.message, 'error'));
|
|
$('#fixtureBtn').onclick = async () => {
|
|
try {
|
|
await api(`/api/tournaments/${selectedTournamentId()}/fixture`, { method: 'POST', body: JSON.stringify({}) });
|
|
toast('Fixture generado');
|
|
await render();
|
|
} catch (err) {
|
|
if (err.status === 401) {
|
|
clearSession();
|
|
updateSession();
|
|
openLoginModal();
|
|
}
|
|
toast(err.message, 'error');
|
|
}
|
|
};
|
|
document.querySelectorAll('[data-modal-close]').forEach(el => el.onclick = closeModal);
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape') closeModal();
|
|
});
|
|
document.querySelectorAll('[data-route]').forEach(btn => btn.onclick = () => setRoute(btn.dataset.route));
|
|
$('#tournamentSelect').onchange = () => render().catch(err => toast(err.message, 'error'));
|
|
|
|
applySidebarState();
|
|
validateStoredSession()
|
|
.then(loadBase)
|
|
.then(render)
|
|
.catch(err => toast(err.message, 'error'));
|