This commit is contained in:
Lizandro Guarnizo
2026-06-16 15:37:34 -05:00
parent 7f84c7f3ae
commit acbc1d0714
2 changed files with 91 additions and 90 deletions
+50 -32
View File
@@ -195,42 +195,43 @@ $_hasVideo = (bool)$_tvVideo;
height: 100%;
}
.ultimos-llamados .ul-label {
font-size: 1.2rem; font-weight: 700; text-transform: uppercase;
font-size: 1rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 2px; color: #94a3b8;
padding: .8rem .8rem .3rem; flex-shrink: 0;
padding: .65rem .85rem .3rem; flex-shrink: 0;
}
.ul-thead {
display: grid; grid-template-columns: 82px 1fr;
padding: .25rem .85rem;
background: color-mix(in srgb, var(--brand) 12%, #f1f5f9);
border-top: 1px solid #e2e8f0; border-bottom: 2px solid #e2e8f0;
font-size: .62rem; font-weight: 800;
text-transform: uppercase; letter-spacing: .1em; color: #64748b;
flex-shrink: 0;
}
.ultimos-llamados .ul-scroll {
flex: 1; overflow-y: auto; padding: 0 .5rem .5rem;
flex: 1; overflow-y: auto; padding: .3rem .4rem .5rem;
scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent;
}
.ul-item {
display: flex; align-items: center; gap: .45rem;
padding: .5rem .75rem; border-radius: 10px;
margin-bottom: .35rem;
display: grid; grid-template-columns: 82px 1fr;
align-items: center;
padding: .38rem .45rem; border-radius: 8px;
margin-bottom: .25rem;
background: #fff; border: 1px solid #e2e8f0;
border-left: 4px solid color-mix(in srgb, var(--brand, #1565c0) 50%, transparent);
border-left: 3px solid color-mix(in srgb, var(--brand, #1565c0) 55%, transparent);
}
.ul-item.activo {
background: var(--brand);
border-color: var(--brand);
border-left-color: rgba(255,255,255,.4);
color: #fff;
border-left-color: #fff;
}
.ul-item.activo .ul-nom,
.ul-item.activo .ul-dest { color: rgba(255,255,255,.75); }
.ul-item .ul-left { flex: 0 0 auto; min-width: 0; }
.ul-item .ul-cod { font-weight: 800; font-size: 1.55rem; display: block; }
.ul-item .ul-nom {
font-size: .8rem; font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
display: block;
}
.ul-item .ul-cod { font-weight: 800; font-size: 1.45rem; line-height: 1; }
.ul-item .ul-dest {
font-size: 1.1rem; font-weight: 700; color: #1e293b;
flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-size: .92rem; font-weight: 600; color: #1e293b;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ul-item.activo .ul-dest { color: #fff; }
.ul-item .ul-dest i { margin-right: 3px; }
.ul-item.activo .ul-dest { color: rgba(255,255,255,.85); }
/* ── Video reel ── */
.reel-wrap {
@@ -405,6 +406,10 @@ $_hasVideo = (bool)$_tvVideo;
<div class="left-area">
<div class="ultimos-llamados" id="ultimos-llamados" style="display:none">
<div class="ul-label"><i class="fas fa-history me-1"></i>Llamados</div>
<div class="ul-thead">
<span>Turno</span>
<span>Lugar</span>
</div>
<div class="ul-scroll" id="ul-scroll"></div>
</div>
</div>
@@ -565,8 +570,9 @@ function showAnnouncement({ codigo, destino, paciente, color }) {
}
/* ── State ── */
let lastSeenKeys = new Set(); // clave por turno+destino+llamado_at
let llamados = [];
let lastSeenKeys = new Set();
let llamados = [];
let _firstLoad = true;
function renderSnapshot(snap) {
const codEl = document.getElementById('codigo-activo');
@@ -584,7 +590,7 @@ function renderSnapshot(snap) {
if (l.turno) allTurnos.push({ ...l.turno, destino: l.lugar_nombre });
});
// Detectar turno nuevo en CUALQUIER estación y anunciar
// Detectar turnos nuevos y anunciar
const currentKeys = new Set();
let anuncioNuevo = false;
allTurnos.forEach(t => {
@@ -592,13 +598,29 @@ function renderSnapshot(snap) {
currentKeys.add(key);
if (!lastSeenKeys.has(key)) {
const c = t.prioridad_color || '<?= $_labColor ?>';
queueAnnouncement({ _key: key, codigo: t.codigo, destino: t.destino, paciente: t.paciente_nombre, color: c });
// En primera carga silenciar todos; el más reciente se anuncia abajo
if (!_firstLoad) {
queueAnnouncement({ _key: key, codigo: t.codigo, destino: t.destino, paciente: t.paciente_nombre, color: c });
}
llamados.unshift({ codigo: t.codigo, destino: t.destino, paciente: t.paciente_nombre, color: c });
if (llamados.length > 30) llamados.pop();
anuncioNuevo = true;
}
});
lastSeenKeys = currentKeys;
if (_firstLoad) {
_firstLoad = false;
// Anunciar solo el turno más reciente al cargar la página
const sorted = allTurnos.slice().sort((a, b) => new Date(b.llamado_at || 0) - new Date(a.llamado_at || 0));
if (sorted.length > 0) {
const t = sorted[0];
const c = t.prioridad_color || '<?= $_labColor ?>';
const key = t.codigo + '|' + t.destino + '|' + (t.llamado_at || '');
queueAnnouncement({ _key: key, codigo: t.codigo, destino: t.destino, paciente: t.paciente_nombre, color: c });
}
}
if (anuncioNuevo) renderLlamados();
// zona-activo: mostrar el turno llamado más recientemente
@@ -659,16 +681,12 @@ function renderLlamados() {
if (!wrap || !sc) return;
if (llamados.length === 0) { wrap.style.display = 'none'; return; }
wrap.style.display = '';
const activo = llamados[0];
sc.innerHTML = llamados.map((l, i) => {
const isActivo = i === 0;
const c = l.color || '<?= $_labColor ?>';
return `<div class="ul-item${isActivo ? ' activo' : ''}"${isActivo ? ' style="--brand:' + c + '"' : ''}>
<div class="ul-left">
<span class="ul-cod">${esc(l.codigo)}</span>
${l.paciente ? `<span class="ul-nom">${esc(l.paciente)}</span>` : ''}
</div>
<span class="ul-dest"><i class="fas fa-arrow-right"></i>${esc(l.destino)}</span>
return `<div class="ul-item${isActivo ? ' activo' : ''}"${isActivo ? ` style="--brand:${c}"` : ''}>
<span class="ul-cod">${esc(l.codigo)}</span>
<span class="ul-dest">${esc(l.destino)}</span>
</div>`;
}).join('');
}