usite-sas-bic/whatsapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

uo

Browse Source
This commit is contained in:
Lizandro Guarnizo
2026-04-21 21:36:24 -05:00
parent 3a19f08bf8
commit 4b8b668774
7 changed files with 541 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/turnero/views/kiosko.php
+280 -157
View File
@@ -6,11 +6,27 @@
*/
require_once __DIR__ . '/../../../config/config.php';
// Cargar prioridades activas desde BD
// ── Configuración visual del laboratorio ──────────────────────
$_kioskoCfg = [];
try {
$_kpdo = Database::getInstance()->getConnection();
$_krows = $_kpdo->query(
"SELECT clave, valor FROM lab_config
WHERE clave IN ('empresa_nombre','doc_logo_base64','doc_color')"
)->fetchAll(PDO::FETCH_KEY_PAIR);
$_kioskoCfg = $_krows ?: [];
} catch (\Throwable $_) {}
$_kNombre = htmlspecialchars($_kioskoCfg['empresa_nombre'] ?? 'Laboratorio Clínico');
$_kLogo = $_kioskoCfg['doc_logo_base64'] ?? '';
$_kColor = preg_match('/^#[0-9a-fA-F]{3,8}$/', $_kioskoCfg['doc_color'] ?? '')
? $_kioskoCfg['doc_color'] : '#1565c0';
// ── Cargar prioridades activas desde BD ───────────────────────
$prioridades = [];
try {
$pdo = Database::getInstance()->getConnection();
$stmt = $pdo->query(
$_pdo = Database::getInstance()->getConnection();
$stmt = $_pdo->query(
"SELECT id, codigo, nombre, color, icono, descripcion, orden_peso
FROM turnero_prioridades
WHERE activo = 1
@@ -21,11 +37,11 @@ try {
// Fallback con prioridades por defecto si la BD no está disponible
$prioridades = [
['codigo'=>'A','nombre'=>'Niños', 'color'=>'#ef4444','icono'=>'fas fa-child', 'descripcion'=>'Pacientes menores de edad'],
['codigo'=>'B','nombre'=>'Embarazadas', 'color'=>'#f97316','icono'=>'fas fa-heart', 'descripcion'=>'Mujeres en estado de embarazo'],
['codigo'=>'C','nombre'=>'Adulto mayor', 'color'=>'#eab308','icono'=>'fas fa-person-cane', 'descripcion'=>'Mayores de 60 años'],
['codigo'=>'D','nombre'=>'Discapacidad', 'color'=>'#8b5cf6','icono'=>'fas fa-wheelchair', 'descripcion'=>'Personas con discapacidad'],
['codigo'=>'E','nombre'=>'Paciente general', 'color'=>'#3b82f6','icono'=>'fas fa-user', 'descripcion'=>'Atención general'],
['codigo'=>'F','nombre'=>'Muestra pendiente', 'color'=>'#6b7280','icono'=>'fas fa-vial', 'descripcion'=>'Entrega de muestra tomada'],
['codigo'=>'B','nombre'=>'Embarazadas', 'color'=>'#f97316','icono'=>'fas fa-heart', 'descripcion'=>'Mujeres en estado de embarazo'],
['codigo'=>'C','nombre'=>'Adulto mayor', 'color'=>'#eab308','icono'=>'fas fa-person-cane', 'descripcion'=>'Mayores de 60 años'],
['codigo'=>'D','nombre'=>'Discapacidad', 'color'=>'#8b5cf6','icono'=>'fas fa-wheelchair', 'descripcion'=>'Personas con discapacidad'],
['codigo'=>'E','nombre'=>'Paciente general', 'color'=>'#3b82f6','icono'=>'fas fa-user', 'descripcion'=>'Atención general'],
['codigo'=>'F','nombre'=>'Muestra pendiente','color'=>'#6b7280','icono'=>'fas fa-vial', 'descripcion'=>'Entrega de muestra tomada'],
];
}
@@ -50,176 +66,312 @@ unset($p);
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Kiosko de Turnos</title>
<title>Kiosko – <?= $_kNombre ?></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
:root {
--brand: <?= $_kColor ?>;
--brand-dark: color-mix(in srgb, <?= $_kColor ?> 75%, #000);
--brand-light: color-mix(in srgb, <?= $_kColor ?> 10%, #fff);
--brand-mid: color-mix(in srgb, <?= $_kColor ?> 22%, #fff);
}
/* ── Reset fullscreen ── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
height: 100%; width: 100%;
overflow: hidden;
background: #0f172a;
color: #f8fafc;
background: var(--brand-light);
color: #1e293b;
font-family: 'Segoe UI', system-ui, sans-serif;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* ── Layout general ── */
.kiosko-wrap {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
/* ── Header con logo ── */
.kiosko-topbar {
background: var(--brand);
padding: 14px 28px;
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.kiosko-topbar .logo-img {
height: 48px;
max-width: 140px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.kiosko-topbar .logo-fallback {
width: 46px; height: 46px;
background: rgba(255,255,255,.2);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 1.3rem;
}
.kiosko-topbar .lab-nombre {
color: #fff;
font-size: clamp(1rem, 2.5vw, 1.4rem);
font-weight: 700;
letter-spacing: -.3px;
flex: 1;
}
.kiosko-topbar .turno-badge {
background: rgba(255,255,255,.15);
border: 1.5px solid rgba(255,255,255,.3);
color: #fff;
border-radius: 8px;
padding: 4px 12px;
font-size: .8rem;
font-weight: 600;
}
/* ── Pantalla / paso ── */
.screen {
position: fixed; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 2rem;
transition: opacity .35s ease, transform .35s ease;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1.5rem;
transition: opacity .3s ease, transform .3s ease;
overflow: hidden;
}
.screen.hidden { opacity: 0; pointer-events: none; transform: scale(.97); }
.screen.visible { opacity: 1; pointer-events: all; transform: scale(1); }
.screen.hidden { opacity: 0; pointer-events: none; transform: scale(.98); position: absolute; }
.screen.visible { opacity: 1; pointer-events: all; transform: scale(1); position: relative; }
/* ── Logo / cabecera ── */
.kiosko-header { text-align: center; margin-bottom: 2.5rem; }
.kiosko-header h1 { font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 700; letter-spacing: -.5px; }
.kiosko-header p { font-size: clamp(.9rem, 2vw, 1.2rem); color: #94a3b8; margin: 0; }
/* ── Instrucción central ── */
.kiosko-titulo {
font-size: clamp(1.4rem, 3.5vw, 2.2rem);
font-weight: 700;
color: var(--brand-dark);
text-align: center;
margin-bottom: .4rem;
}
.kiosko-subtitulo {
font-size: clamp(.85rem, 1.8vw, 1.05rem);
color: #64748b;
text-align: center;
margin-bottom: 2rem;
}
/* ── Botones de prioridad ── */
/* ── Grid de prioridades ── */
.prioridad-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: 1rem;
width: 100%;
max-width: 900px;
max-width: 860px;
}
.btn-prioridad {
border: none; border-radius: 16px;
border: 2px solid transparent;
border-radius: 18px;
padding: 1.6rem 1.2rem;
cursor: pointer;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: .6rem;
gap: .5rem;
transition: transform .12s, box-shadow .12s, filter .12s;
color: #fff; font-weight: 600;
box-shadow: 0 4px 20px rgba(0,0,0,.35);
font-weight: 600;
box-shadow: 0 2px 12px rgba(0,0,0,.10);
-webkit-user-select: none; user-select: none;
background: #fff;
}
.btn-prioridad:active { transform: scale(.95); filter: brightness(.88); }
.btn-prioridad .letra { font-size: clamp(2rem, 6vw, 4rem); line-height: 1; font-weight: 800; }
.btn-prioridad .nombre { font-size: clamp(.85rem, 2vw, 1.1rem); text-align: center; line-height: 1.2; }
.btn-prioridad .desc { font-size: clamp(.7rem, 1.5vw, .85rem); opacity: .8; text-align: center; }
.btn-prioridad i { font-size: clamp(1.4rem, 3.5vw, 2.2rem); }
.btn-prioridad:active { transform: scale(.95); filter: brightness(.93); }
.btn-prioridad:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.13); }
.btn-prioridad .icon-wrap {
width: 52px; height: 52px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem;
color: #fff;
margin-bottom: .2rem;
}
.btn-prioridad .letra { font-size: clamp(1rem, 2.5vw, 1.4rem); font-weight: 800; color: #1e293b; }
.btn-prioridad .nombre { font-size: clamp(.82rem, 1.8vw, 1rem); color: #334155; text-align: center; }
.btn-prioridad .desc { font-size: clamp(.68rem, 1.3vw, .8rem); color: #94a3b8; text-align: center; }
/* ── Formulario opcional ── */
.form-kiosko { width: 100%; max-width: 520px; }
.form-kiosko label { color: #cbd5e1; font-size: 1rem; margin-bottom: .35rem; }
/* ── Formulario de datos ── */
.form-kiosko { width: 100%; max-width: 480px; }
.badge-prio-mini {
display: inline-flex; align-items: center; gap: 8px;
padding: .45rem 1.2rem; border-radius: 99px;
font-size: 1rem; font-weight: 700; color: #fff;
margin-bottom: 1.5rem;
}
.form-kiosko label { color: #475569; font-size: .95rem; margin-bottom: .35rem; font-weight: 500; }
.form-kiosko .form-control {
background: #1e293b; border: 1.5px solid #334155;
color: #f8fafc; border-radius: 12px;
padding: .8rem 1rem; font-size: 1.1rem;
background: #fff;
border: 1.5px solid #e2e8f0;
color: #1e293b;
border-radius: 14px;
padding: .85rem 1.1rem;
font-size: 1.05rem;
box-shadow: 0 1px 4px rgba(0,0,0,.05);
transition: border-color .2s, box-shadow .2s;
}
.form-kiosko .form-control:focus {
background: #1e293b; border-color: #60a5fa;
box-shadow: 0 0 0 3px rgba(96,165,250,.2); color: #f8fafc;
border-color: var(--brand);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
outline: none;
}
.form-kiosko .hint { color: #64748b; font-size: .85rem; margin-top: .4rem; }
.form-kiosko .hint { color: #94a3b8; font-size: .82rem; margin-top: .35rem; }
.btn-kiosko-main {
border: none; border-radius: 14px;
padding: 1rem 2.5rem; font-size: 1.15rem; font-weight: 700;
padding: 1rem 2rem; font-size: 1.05rem; font-weight: 700;
cursor: pointer; color: #fff;
background: linear-gradient(135deg, #3b82f6, #6366f1);
box-shadow: 0 4px 16px rgba(99,102,241,.4);
transition: transform .12s, box-shadow .12s;
background: var(--brand);
box-shadow: 0 4px 16px color-mix(in srgb, var(--brand) 40%, transparent);
transition: transform .12s, box-shadow .12s, filter .12s;
width: 100%; margin-top: 1rem;
}
.btn-kiosko-main:active { transform: scale(.97); }
.btn-kiosko-main:active { transform: scale(.97); filter: brightness(.9); }
.btn-kiosko-back {
background: transparent; border: 1.5px solid #475569;
background: transparent;
border: 1.5px solid #e2e8f0;
color: #94a3b8; border-radius: 12px; padding: .7rem 1.5rem;
font-size: .95rem; cursor: pointer; margin-top: .6rem; width: 100%;
transition: background .12s;
font-size: .92rem; cursor: pointer; margin-top: .6rem; width: 100%;
transition: background .12s, border-color .12s;
}
.btn-kiosko-back:active { background: #1e293b; }
.btn-kiosko-back:hover { background: var(--brand-mid); border-color: var(--brand); color: var(--brand-dark); }
/* ── Pantalla de ticket ── */
/* ── Ticket ── */
.ticket-box {
background: #1e293b; border-radius: 24px;
padding: 2.5rem 3rem; text-align: center;
box-shadow: 0 8px 40px rgba(0,0,0,.5);
max-width: 480px; width: 100%;
background: #fff;
border-radius: 24px;
padding: 2.5rem 3rem;
text-align: center;
box-shadow: 0 4px 30px rgba(0,0,0,.10);
max-width: 460px; width: 100%;
border-top: 6px solid var(--brand);
}
.ticket-label { color: #94a3b8; font-size: .85rem; text-transform: uppercase;
letter-spacing: .08em; margin-bottom: .3rem; }
.ticket-codigo {
font-size: clamp(4rem, 18vw, 9rem);
font-weight: 900; line-height: 1;
letter-spacing: -2px;
color: var(--brand);
}
.ticket-subtitle { color: #94a3b8; font-size: 1rem; margin-top: .5rem; }
.ticket-prioridad { font-size: 1.05rem; margin-top: .8rem; }
.ticket-numero { font-size: 2rem; font-weight: 700; color: #e2e8f0; }
.ticket-instruc {
margin-top: 1.5rem; color: #64748b; font-size: .9rem; line-height: 1.5;
.ticket-prio-badge {
display: inline-block; padding: .3rem 1.1rem;
border-radius: 99px; font-weight: 700; color: #fff;
font-size: .95rem; margin-top: .8rem;
}
.ticket-pos {
margin-top: 1.2rem;
background: var(--brand-light);
border-radius: 12px;
padding: .8rem;
}
.ticket-pos .lbl { font-size: .78rem; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
.ticket-pos .num { font-size: 1.8rem; font-weight: 800; color: var(--brand-dark); }
.ticket-instruc { margin-top: 1.4rem; color: #94a3b8; font-size: .88rem; line-height: 1.5; }
.btn-nuevo {
margin-top: 2rem; border: none; border-radius: 14px;
padding: .85rem 2rem; font-size: 1rem; font-weight: 600;
cursor: pointer; color: #fff;
background: #475569;
transition: background .15s;
margin-top: 1.8rem; border: 2px solid var(--brand-mid);
border-radius: 12px; padding: .75rem 2rem;
font-size: .95rem; font-weight: 600; cursor: pointer;
color: var(--brand-dark); background: #fff;
transition: background .15s, border-color .15s;
}
.btn-nuevo:hover { background: #64748b; }
.btn-nuevo:hover { background: var(--brand-light); border-color: var(--brand); }
/* ── Spinner ── */
.spinner-overlay {
position: fixed; inset: 0;
background: rgba(15,23,42,.75);
background: rgba(248,250,252,.8);
display: flex; align-items: center; justify-content: center;
z-index: 999; opacity: 0; pointer-events: none;
transition: opacity .2s;
}
.spinner-overlay.active { opacity: 1; pointer-events: all; }
.spinner { width: 56px; height: 56px; border: 5px solid #334155;
border-top-color: #60a5fa; border-radius: 50%; animation: spin .8s linear infinite; }
.spinner {
width: 52px; height: 52px;
border: 4px solid var(--brand-mid);
border-top-color: var(--brand);
border-radius: 50%;
animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Error toast ── */
/* ── Toast de error ── */
.toast-error {
position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
background: #ef4444; color: #fff; padding: .8rem 1.6rem;
border-radius: 12px; font-size: .95rem; font-weight: 600;
box-shadow: 0 4px 20px rgba(0,0,0,.4);
background: #ef4444; color: #fff; padding: .75rem 1.5rem;
border-radius: 12px; font-size: .92rem; font-weight: 600;
box-shadow: 0 4px 20px rgba(0,0,0,.2);
opacity: 0; pointer-events: none; transition: opacity .25s;
z-index: 1000; white-space: nowrap;
}
.toast-error.show { opacity: 1; }
/* ── Responsive: pantalla grande (TV táctil) ── */
/* ── Footer discreto ── */
.kiosko-footer {
text-align: center;
padding: 8px;
font-size: .7rem;
color: color-mix(in srgb, var(--brand) 55%, #fff);
background: var(--brand-mid);
flex-shrink: 0;
}
/* ── Responsive ── */
@media (min-height: 800px) {
.prioridad-grid { gap: 1.4rem; }
.btn-prioridad { padding: 2rem 1.5rem; }
.prioridad-grid { gap: 1.3rem; }
.btn-prioridad { padding: 1.9rem 1.4rem; }
}
@media (max-width: 480px) {
.kiosko-topbar { padding: 10px 16px; }
.ticket-box { padding: 1.8rem 1.5rem; }
}
</style>
</head>
<body>
<div class="kiosko-wrap">
<!-- ══ Top bar con logo ════════════════════════════════════════ -->
<header class="kiosko-topbar">
<?php if ($_kLogo): ?>
<img src="<?= htmlspecialchars($_kLogo) ?>" alt="Logo" class="logo-img">
<?php else: ?>
<div class="logo-fallback"><i class="fas fa-flask"></i></div>
<?php endif; ?>
<div class="lab-nombre"><?= $_kNombre ?></div>
<div class="turno-badge"><i class="fas fa-ticket-alt me-1"></i>Turnero</div>
</header>
<!-- ══ PASO 1: Selección de prioridad ══════════════════════════ -->
<div id="screen-prio" class="screen visible">
<div class="kiosko-header">
<i class="fas fa-ticket-alt fa-2x mb-3" style="color:#60a5fa"></i>
<h1>Solicitar Turno</h1>
<p>Seleccione su tipo de atención</p>
</div>
<div class="kiosko-titulo">Seleccione su tipo de atención</div>
<div class="kiosko-subtitulo">Toque la categoría que le corresponde para obtener su turno</div>
<div class="prioridad-grid">
<?php foreach ($prioridades as $prio): ?>
<button
class="btn-prioridad"
style="background: <?= htmlspecialchars($prio['color']) ?>;"
style="border-color:<?= htmlspecialchars($prio['color']) ?>22"
data-codigo="<?= htmlspecialchars($prio['codigo']) ?>"
data-nombre="<?= htmlspecialchars($prio['nombre']) ?>"
data-color="<?= htmlspecialchars($prio['color']) ?>"
onclick="seleccionarPrioridad(this)"
>
<i class="<?= htmlspecialchars($prio['icono']) ?>"></i>
<span class="letra"><?= htmlspecialchars($prio['codigo']) ?></span>
<div class="icon-wrap" style="background:<?= htmlspecialchars($prio['color']) ?>">
<i class="<?= htmlspecialchars($prio['icono']) ?>"></i>
</div>
<span class="letra" style="color:<?= htmlspecialchars($prio['color']) ?>"><?= htmlspecialchars($prio['codigo']) ?></span>
<span class="nombre"><?= htmlspecialchars($prio['nombre']) ?></span>
<?php if (!empty($prio['descripcion'])): ?>
<span class="desc"><?= htmlspecialchars($prio['descripcion']) ?></span>
@@ -231,33 +383,31 @@ unset($p);
<!-- ══ PASO 2: Datos del paciente ═══════════════════════════════ -->
<div id="screen-datos" class="screen hidden">
<div class="kiosko-header">
<div id="badge-prio" style="display:inline-block; padding:.5rem 1.4rem; border-radius:40px; font-size:1.2rem; font-weight:700; margin-bottom:1rem;"></div>
<h1>Ingresa tu cédula</h1>
<p>Escribe tu número de documento de identidad</p>
</div>
<div id="badge-prio" class="badge-prio-mini"></div>
<div class="kiosko-titulo">Ingrese su número de cédula</div>
<div class="kiosko-subtitulo">Le ayudará a identificar su turno correctamente</div>
<div class="form-kiosko">
<div class="mb-4">
<div class="mb-3">
<label for="inp-cedula">Número de cédula <span style="color:#ef4444">*</span></label>
<input type="text" id="inp-cedula" class="form-control"
placeholder="Ej: 1234567890" maxlength="20"
autocomplete="off" inputmode="numeric">
</div>
<div class="mb-4">
<div class="mb-3">
<label for="inp-cel">WhatsApp
<span style="color:#64748b;font-size:.85rem;font-weight:400"> (opcional)</span>
<span style="color:#94a3b8;font-size:.82rem;font-weight:400"> (opcional)</span>
</label>
<input type="tel" id="inp-cel" class="form-control"
placeholder="Ej: 3001234567" maxlength="20"
autocomplete="off" inputmode="numeric">
<div class="hint">Para recibir notificaciones de su turno</div>
<div class="hint"><i class="fas fa-bell me-1"></i>Para recibir notificaciones de su turno</div>
</div>
<button class="btn-kiosko-main" onclick="confirmarTurno()">
<i class="fas fa-ticket-alt me-2"></i>Obtener mi turno
</button>
<button class="btn-kiosko-back" onclick="volverPrioridades()">
<i class="fas fa-arrow-left me-1"></i>Cambiar tipo
<i class="fas fa-arrow-left me-1"></i>Cambiar tipo de atención
</button>
</div>
</div>
@@ -265,13 +415,15 @@ unset($p);
<!-- ══ PASO 3: Ticket asignado ══════════════════════════════════ -->
<div id="screen-ticket" class="screen hidden">
<div class="ticket-box">
<div class="ticket-subtitle">Su número de turno es</div>
<div class="ticket-label">Su número de turno es</div>
<div id="tick-codigo" class="ticket-codigo">—</div>
<div id="tick-prioridad" class="ticket-prioridad"></div>
<div class="ticket-subtitle mt-2">Posición en cola</div>
<div id="tick-posicion" class="ticket-numero">—</div>
<div id="tick-prio-badge"></div>
<div class="ticket-pos">
<div class="lbl">Posición en cola</div>
<div class="num" id="tick-posicion">—</div>
</div>
<div class="ticket-instruc">
Por favor espere ser llamado.<br>
Por favor espere a ser llamado.<br>
Recuerde traer su documento de identidad y la orden médica.
</div>
</div>
@@ -280,23 +432,24 @@ unset($p);
</button>
</div>
<!-- ══ Spinner de carga ════════════════════════════════════════ -->
<div class="spinner-overlay" id="spinner">
<div class="spinner"></div>
</div>
<!-- ══ Footer ═════════════════════════════════════════════════ -->
<footer class="kiosko-footer"><?= $_kNombre ?> · Sistema de Turnos</footer>
</div><!-- /kiosko-wrap -->
<!-- ══ Spinner ════════════════════════════════════════════════ -->
<div class="spinner-overlay" id="spinner"><div class="spinner"></div></div>
<!-- ══ Toast de error ════════════════════════════════════════ -->
<div class="toast-error" id="toast-error"></div>
<script>
// ── Estado local ──────────────────────────────────────────
let prioCodigo = '';
let prioNombre = '';
let prioColor = '';
const API_URL = '<?= BASE_URL ?>modules/turnero/api/create_turno.php';
// ── Navegación entre pasos ────────────────────────────────
function mostrar(id) {
document.querySelectorAll('.screen').forEach(s => {
s.classList.toggle('visible', s.id === id);
@@ -309,57 +462,34 @@ unset($p);
prioNombre = btn.dataset.nombre;
prioColor = btn.dataset.color;
document.getElementById('badge-prio').textContent = prioCodigo + ' — ' + prioNombre;
document.getElementById('badge-prio').style.background = prioColor;
const badge = document.getElementById('badge-prio');
badge.textContent = prioCodigo + ' — ' + prioNombre;
badge.style.background = prioColor;
mostrar('screen-datos');
document.getElementById('inp-cedula').focus();
}
function volverPrioridades() {
mostrar('screen-prio');
}
function volverPrioridades() { mostrar('screen-prio'); }
// ── Crear turno ───────────────────────────────────────────
async function confirmarTurno() {
const cedula = document.getElementById('inp-cedula').value.trim();
const cel = document.getElementById('inp-cel').value.trim();
if (!cedula) {
mostrarError('Por favor ingresa tu número de cédula.');
return;
}
if (!/^\d{5,15}$/.test(cedula)) {
mostrarError('La cédula debe contener solo dígitos (mínimo 5).');
return;
}
if (cel && !/^\+?\d{7,15}$/.test(cel.replace(/\s/g, ''))) {
mostrarError('Ingresa un número de WhatsApp válido.');
return;
}
if (!cedula) { mostrarError('Por favor ingrese su número de cédula.'); return; }
if (!/^\d{5,15}$/.test(cedula)) { mostrarError('La cédula debe tener solo dígitos (mínimo 5).'); return; }
if (cel && !/^\+?\d{7,15}$/.test(cel.replace(/\s/g,''))) { mostrarError('Ingrese un número de WhatsApp válido.'); return; }
setSpinner(true);
try {
const res = await fetch(API_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
prioridad_codigo: prioCodigo,
paciente_nombre: cedula, // se guarda como referencia de identificación
paciente_cel: cel || null,
}),
body: JSON.stringify({ prioridad_codigo: prioCodigo, paciente_nombre: cedula, paciente_cel: cel || null }),
});
const json = await res.json();
if (!json.ok) {
throw new Error(json.error ?? 'Error al crear turno');
}
const t = json.turno ?? json.data?.turno;
mostrarTicket(t);
if (!json.ok) throw new Error(json.error ?? 'Error al crear turno');
mostrarTicket(json.turno ?? json.data?.turno);
} catch (err) {
mostrarError(err.message);
} finally {
@@ -367,34 +497,26 @@ unset($p);
}
}
// ── Mostrar ticket ────────────────────────────────────────
function mostrarTicket(t) {
document.getElementById('tick-codigo').textContent = t.codigo;
document.getElementById('tick-codigo').style.color = prioColor;
document.getElementById('tick-prioridad').innerHTML =
'<span style="background:' + prioColor + ';padding:.3rem .9rem;border-radius:20px;font-weight:700;">'
+ prioCodigo + ' — ' + prioNombre + '</span>';
document.getElementById('tick-codigo').textContent = t.codigo;
document.getElementById('tick-codigo').style.color = prioColor;
document.getElementById('tick-posicion').textContent = '#' + t.posicion_cola;
document.getElementById('tick-prio-badge').innerHTML =
`<span class="ticket-prio-badge" style="background:${prioColor}">${prioCodigo} — ${prioNombre}</span>`;
mostrar('screen-ticket');
// Auto-reinicio tras 30 s para liberar el kiosko
clearTimeout(window._reinicioTimer);
window._reinicioTimer = setTimeout(reiniciar, 30000);
clearTimeout(window._timer);
window._timer = setTimeout(reiniciar, 30000);
}
// ── Reinicio ──────────────────────────────────────────────
function reiniciar() {
clearTimeout(window._reinicioTimer);
clearTimeout(window._timer);
document.getElementById('inp-cedula').value = '';
document.getElementById('inp-cel').value = '';
prioCodigo = prioNombre = prioColor = '';
mostrar('screen-prio');
}
// ── Utilidades ────────────────────────────────────────────
function setSpinner(on) {
document.getElementById('spinner').classList.toggle('active', on);
}
function setSpinner(on) { document.getElementById('spinner').classList.toggle('active', on); }
function mostrarError(msg) {
const el = document.getElementById('toast-error');
@@ -405,3 +527,4 @@ unset($p);
</script>
</body>
</html>