juavillo
9c9d2d25f9
- Límite de solicitudes por día y cargo (modelo reserva: pendientes + aprobadas ocupan hueco, rechazar lo libera). Días completos, pasados o el de hoy no se pueden elegir; validado también en el servidor. - Estados de aprobación en las peticiones (pendiente/aprobado/rechazado) visibles para el trabajador con color; solo puede editar pendientes o añadir nuevas. - Calendario de admin con barra lateral por empleado: aprobar/rechazar por día y en bloque, añadir/quitar días, y editar los límites por cargo. - Excel con días por estado y ocupación por día/cargo. - Migraciones automáticas no destructivas (columnas rounds.limits y requests.status; las peticiones existentes pasan a "pendiente"). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
116 lines
4.6 KiB
HTML
116 lines
4.6 KiB
HTML
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<title>Administración · Vacaciones</title>
|
|
<meta name="theme-color" content="#f6f0e3" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Karla:wght@400;700;800&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="/css/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page page--wide">
|
|
<header class="masthead">
|
|
<p class="kicker">Administración</p>
|
|
<h1>Rondas de <em>vacaciones</em></h1>
|
|
<p class="sub">Crea rondas, comparte la URL con el equipo y descarga las peticiones</p>
|
|
</header>
|
|
|
|
<!-- Login -->
|
|
<section id="login-card" class="card hidden" style="max-width: 420px; margin-inline: auto;">
|
|
<h2>Acceso</h2>
|
|
<form id="login-form">
|
|
<label for="password">Contraseña de administración</label>
|
|
<input id="password" type="password" autocomplete="current-password" required />
|
|
<div class="error-msg" id="login-error"></div>
|
|
<button class="btn" type="submit">Entrar</button>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Panel -->
|
|
<div id="panel" class="hidden">
|
|
|
|
<!-- Vista: lista de rondas -->
|
|
<div id="rounds-view">
|
|
<section class="card">
|
|
<h2>Nueva ronda</h2>
|
|
<form id="create-form">
|
|
<div class="form-row">
|
|
<div>
|
|
<label for="round-name">Local</label>
|
|
<input id="round-name" type="text" maxlength="80" placeholder="P. ej. Restaurante Centro" required />
|
|
</div>
|
|
<div>
|
|
<label for="round-year">Año</label>
|
|
<input id="round-year" type="number" min="2020" max="2100" required />
|
|
</div>
|
|
</div>
|
|
<label>Cargos y límite por día</label>
|
|
<div id="roles-editor"></div>
|
|
<button type="button" class="btn btn--ghost btn--small" id="add-role">+ Añadir cargo</button>
|
|
<p class="field-hint">El equipo elegirá su cargo al registrarse. El <b>máx/día</b> es cuántas personas de ese cargo pueden tener vacaciones el mismo día (vacío = sin límite).</p>
|
|
<div class="error-msg" id="create-error"></div>
|
|
<button class="btn btn--accent" type="submit">Crear ronda y obtener URL</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Rondas</h2>
|
|
<div id="rounds-list"></div>
|
|
</section>
|
|
|
|
<button class="btn btn--ghost" id="logout-btn">Cerrar sesión</button>
|
|
</div>
|
|
|
|
<!-- Vista: calendario / aprobación de una ronda -->
|
|
<div id="calendar-view" class="hidden">
|
|
<div class="cal-topbar">
|
|
<button class="btn btn--ghost btn--small" id="cal-back">← Volver</button>
|
|
<div class="cal-heading">
|
|
<h2 id="cal-title">Calendario</h2>
|
|
<span class="badge" id="cal-status"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="card cal-limits">
|
|
<h3>Límite de solicitudes por día y cargo</h3>
|
|
<div id="cal-limits-fields" class="cal-limits-grid"></div>
|
|
<div class="cal-limits-foot">
|
|
<span class="field-hint">Vacío = sin límite. Ampliar o reducir afecta a las nuevas solicitudes.</span>
|
|
<button class="btn btn--small" id="cal-limits-save">Guardar límites</button>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="cal-layout">
|
|
<aside class="cal-sidebar card" id="cal-sidebar"></aside>
|
|
<div class="cal-main">
|
|
<div id="cal-grid"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<footer class="colophon">Panel del administrador</footer>
|
|
</div>
|
|
|
|
<!-- Barra de acción para aprobar/rechazar/quitar un día concreto -->
|
|
<div class="actionbar" id="cal-actionbar">
|
|
<div class="inner">
|
|
<span class="label" id="cal-action-label"></span>
|
|
<div class="acts">
|
|
<button class="btn btn--small act-approve" data-status="approved">Aprobar</button>
|
|
<button class="btn btn--small act-reject" data-status="rejected">Rechazar</button>
|
|
<button class="btn btn--small btn--ghost" data-status="pending">Pendiente</button>
|
|
<button class="btn btn--small btn--ghost" data-status="none">Quitar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script src="/js/admin.js"></script>
|
|
</body>
|
|
</html>
|