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>
76 lines
2.8 KiB
HTML
76 lines
2.8 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>Pedir 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">
|
|
<header class="masthead">
|
|
<p class="kicker">Ronda de vacaciones</p>
|
|
<h1 id="round-title">Cargando…</h1>
|
|
<p class="sub" id="round-sub"></p>
|
|
</header>
|
|
|
|
<div id="closed-banner" class="closed-banner hidden">
|
|
🔒 Esta ronda está cerrada. Solo puedes consultar tu petición.
|
|
</div>
|
|
|
|
<!-- Registro -->
|
|
<section id="join-card" class="card hidden">
|
|
<h2>¿Quién eres?</h2>
|
|
<form id="join-form">
|
|
<label for="name">Tu nombre y apellido</label>
|
|
<input id="name" type="text" autocomplete="name" maxlength="60" placeholder="P. ej. María García" required />
|
|
|
|
<label>Tu cargo</label>
|
|
<div class="role-grid" id="role-grid"></div>
|
|
|
|
<div class="error-msg" id="join-error"></div>
|
|
<button class="btn btn--accent" type="submit">Empezar a elegir días</button>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Calendario -->
|
|
<section id="calendar-section" class="hidden">
|
|
<div class="me-strip">
|
|
<div class="who">
|
|
<small id="me-role"></small>
|
|
<span id="me-name"></span>
|
|
</div>
|
|
<div class="tally"><b id="me-count">0</b> días</div>
|
|
</div>
|
|
<p class="hint" id="calendar-hint">
|
|
Toca los días que quieres pedir. El número <span class="chip">2</span> indica
|
|
cuántas personas de tu mismo cargo ya han pedido ese día. Los días completos
|
|
para tu cargo, pasados o de hoy no se pueden elegir.
|
|
</p>
|
|
<div class="legend hidden" id="calendar-legend">
|
|
<span class="legend-item"><i class="sw sw--choosing"></i>Eligiendo</span>
|
|
<span class="legend-item"><i class="sw sw--pending"></i>Pendiente</span>
|
|
<span class="legend-item"><i class="sw sw--approved"></i>Aprobado</span>
|
|
<span class="legend-item"><i class="sw sw--rejected"></i>Rechazado</span>
|
|
</div>
|
|
<div id="calendar"></div>
|
|
<footer class="colophon">Buen servicio · Buen descanso</footer>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="savebar" id="savebar">
|
|
<div class="inner">
|
|
<span class="label" id="save-label"></span>
|
|
<button class="btn" id="save-btn">Guardar</button>
|
|
</div>
|
|
</div>
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script src="/js/round.js"></script>
|
|
</body>
|
|
</html>
|