juavillo
bc4e232a80
- Admin puede bloquear/desbloquear días (rounds.blocked) desde la vista de ocupación; los trabajadores no pueden elegirlos (🔒). - El admin puede asignar cualquier día aunque supere el límite por día/cargo o esté bloqueado (override explícito en requests/set). - Editar el nombre de la ronda con edición inline en el calendario (PUT /api/admin/rounds/:id/name). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
122 lines
5.0 KiB
HTML
122 lines
5.0 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>
|
|
<button class="btn btn--ghost btn--small" id="cal-name-edit" title="Editar nombre de la ronda">✎ Nombre</button>
|
|
</div>
|
|
</div>
|
|
<div id="cal-name-editor" class="cal-name-editor hidden">
|
|
<input id="cal-name-input" type="text" maxlength="80" placeholder="Nombre del local" />
|
|
<button class="btn btn--small" id="cal-name-save">Guardar</button>
|
|
<button class="btn btn--ghost btn--small" id="cal-name-cancel">Cancelar</button>
|
|
</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>
|