bryan_garcia
8f044567c0
- Módulo HITL (/cases): 6 patrones de formularios dinámicos para 53 tipos de caso con validación Zod - Módulo Monitor (/monitor): streaming token-a-token en tiempo real, auto-scroll y notas internas vía WebSocket - Arquitectura híbrida: REST (canal autoritativo) + WebSocket (difusión/streaming) - MSW para desarrollo sin backend, hooks de notificaciones/sonido/título preservados - Backend legacy movido a legacy/, archivos residuales eliminados de raíz
660 lines
22 KiB
JavaScript
660 lines
22 KiB
JavaScript
// Claro Cases Frontend Controller
|
|
let requests = [];
|
|
let selectedRequest = null;
|
|
let searchQuery = '';
|
|
let currentTab = 'all';
|
|
|
|
// Independent Multi-Timer State
|
|
// Structure: { [caseId]: { elapsed: 0, isRunning: false, lastStarted: timestamp } }
|
|
let caseTimers = {};
|
|
|
|
// Tab/Title Notification State
|
|
let unreadCount = 0;
|
|
let titleInterval = null;
|
|
let isTabFocused = true;
|
|
|
|
// Audio Context State
|
|
let audioCtx = null;
|
|
|
|
// DOM Elements
|
|
const casesList = document.getElementById('cases-list');
|
|
const casesCount = document.getElementById('cases-count');
|
|
const caseDetails = document.getElementById('case-details');
|
|
const searchInput = document.getElementById('search-input');
|
|
const connectionStatus = document.getElementById('connection-status');
|
|
const connectionText = document.getElementById('connection-text');
|
|
|
|
// Initialize
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
loadTimers();
|
|
fetchRequests();
|
|
setupSSE();
|
|
setupSearch();
|
|
setupTheme();
|
|
setupTabs();
|
|
setupWindowFocusListeners();
|
|
startGlobalInterval();
|
|
|
|
// Request desktop notification permissions
|
|
if (window.Notification && Notification.permission === 'default') {
|
|
Notification.requestPermission();
|
|
}
|
|
});
|
|
|
|
// Window Focus Listeners to clear unread counts
|
|
function setupWindowFocusListeners() {
|
|
window.addEventListener('focus', () => {
|
|
isTabFocused = true;
|
|
unreadCount = 0;
|
|
stopTitleFlashing();
|
|
document.title = 'Claro Cases Dashboard';
|
|
});
|
|
|
|
window.addEventListener('blur', () => {
|
|
isTabFocused = false;
|
|
});
|
|
|
|
// Enable AudioContext on first click/keypress gesture to bypass Chrome's autoplay policies
|
|
const resumeAudio = () => {
|
|
if (!audioCtx) {
|
|
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
|
}
|
|
if (audioCtx.state === 'suspended') {
|
|
audioCtx.resume();
|
|
}
|
|
};
|
|
document.addEventListener('click', resumeAudio);
|
|
document.addEventListener('keydown', resumeAudio);
|
|
}
|
|
|
|
// Load case timers from localStorage and calculate offset elapsed time for running ones
|
|
function loadTimers() {
|
|
const saved = localStorage.getItem('caseTimers');
|
|
if (saved) {
|
|
try {
|
|
caseTimers = JSON.parse(saved);
|
|
// For any running timer, calculate elapsed time since last reload
|
|
for (const [id, timer] of Object.entries(caseTimers)) {
|
|
if (timer.isRunning) {
|
|
const timeDiff = Math.floor((Date.now() - timer.lastStarted) / 1000);
|
|
timer.elapsed += (timeDiff > 0 ? timeDiff : 0);
|
|
timer.lastStarted = Date.now(); // reset start mark to now
|
|
}
|
|
}
|
|
saveTimers();
|
|
} catch (e) {
|
|
console.error('Failed to parse saved timers:', e);
|
|
caseTimers = {};
|
|
}
|
|
}
|
|
}
|
|
|
|
// Save case timers to localStorage
|
|
function saveTimers() {
|
|
localStorage.setItem('caseTimers', JSON.stringify(caseTimers));
|
|
}
|
|
|
|
// Fetch all existing requests
|
|
async function fetchRequests() {
|
|
try {
|
|
const response = await fetch('/api/requests');
|
|
if (!response.ok) throw new Error('Error al obtener solicitudes');
|
|
requests = await response.json();
|
|
renderList();
|
|
} catch (error) {
|
|
console.error('Fetch error:', error);
|
|
casesList.innerHTML = `<div class="loading-placeholder" style="color: #ff3b30">Error al cargar solicitudes. Verifica la base de datos.</div>`;
|
|
}
|
|
}
|
|
|
|
// Connect to Server-Sent Events (SSE) for real-time updates
|
|
function setupSSE() {
|
|
const sse = new EventSource('/api/sse');
|
|
|
|
sse.onopen = () => {
|
|
connectionStatus.className = 'status-dot connected';
|
|
connectionText.textContent = 'En línea';
|
|
};
|
|
|
|
sse.onerror = (error) => {
|
|
console.error('SSE Error:', error);
|
|
connectionStatus.className = 'status-dot disconnected';
|
|
connectionText.textContent = 'Reconectando...';
|
|
};
|
|
|
|
sse.onmessage = (event) => {
|
|
try {
|
|
const newRequest = JSON.parse(event.data);
|
|
// Prepend new request to local state
|
|
requests.unshift(newRequest);
|
|
renderList();
|
|
|
|
// Play alert chime, send desktop notification and flash tab title
|
|
playNotificationSound();
|
|
showDesktopNotification(newRequest);
|
|
triggerTitleNotification();
|
|
|
|
console.log('🔔 Nueva solicitud recibida:', newRequest);
|
|
} catch (err) {
|
|
console.error('Error parsing SSE data:', err);
|
|
}
|
|
};
|
|
}
|
|
|
|
// Search Filter
|
|
function setupSearch() {
|
|
searchInput.addEventListener('input', (e) => {
|
|
searchQuery = e.target.value.toLowerCase().trim();
|
|
renderList();
|
|
});
|
|
}
|
|
|
|
// Render Request Cards List
|
|
function renderList() {
|
|
const filtered = requests.filter(req => {
|
|
// Tab filter
|
|
if (currentTab === 'pending' && req.status.toLowerCase() === 'finalizado') {
|
|
return false;
|
|
}
|
|
if (currentTab === 'finalizado' && req.status.toLowerCase() !== 'finalizado') {
|
|
return false;
|
|
}
|
|
|
|
const titleMatch = req.title.toLowerCase().includes(searchQuery);
|
|
const extIdMatch = req.external_id && req.external_id.toLowerCase().includes(searchQuery);
|
|
const descMatch = req.description && req.description.toLowerCase().includes(searchQuery);
|
|
const cedulaMatch = req.cedula && req.cedula.toLowerCase().includes(searchQuery);
|
|
const tipoMatch = req.tipo_solicitud && req.tipo_solicitud.toLowerCase().includes(searchQuery);
|
|
return titleMatch || extIdMatch || descMatch || cedulaMatch || tipoMatch;
|
|
});
|
|
|
|
casesCount.textContent = filtered.length;
|
|
|
|
if (filtered.length === 0) {
|
|
casesList.innerHTML = `<div class="loading-placeholder">No se encontraron solicitudes.</div>`;
|
|
return;
|
|
}
|
|
|
|
casesList.innerHTML = '';
|
|
filtered.forEach(req => {
|
|
const card = document.createElement('div');
|
|
const isActive = selectedRequest && selectedRequest.id === req.id;
|
|
card.className = `case-card ${isActive ? 'active' : ''}`;
|
|
|
|
const formattedDate = new Date(req.created_at).toLocaleString();
|
|
const statusClass = `status-${req.status.toLowerCase()}`;
|
|
|
|
// Get time from this case's timer if active
|
|
const timer = caseTimers[req.id];
|
|
let timerTag = '';
|
|
if (timer) {
|
|
const elapsedTotal = timer.elapsed + (timer.isRunning ? Math.floor((Date.now() - timer.lastStarted) / 1000) : 0);
|
|
timerTag = ` <span class="timing-badge" id="card-timer-${req.id}">⏳ ${formatTime(elapsedTotal)}</span>`;
|
|
}
|
|
|
|
card.innerHTML = `
|
|
<div class="case-card-header">
|
|
<span class="case-title">${escapeHTML(req.title)}${timerTag}</span>
|
|
<span class="case-status-badge ${statusClass}">${escapeHTML(req.status)}</span>
|
|
</div>
|
|
<p class="case-desc-preview">${escapeHTML(req.description || 'Sin descripción')}</p>
|
|
<div class="case-footer">
|
|
<span class="case-id">${req.external_id ? escapeHTML(req.external_id) : '#' + req.id}</span>
|
|
${req.tipo_solicitud ? `<span class="case-type-badge">${escapeHTML(req.tipo_solicitud)}</span>` : ''}
|
|
<span class="case-time">${formattedDate}</span>
|
|
</div>
|
|
`;
|
|
|
|
card.addEventListener('click', () => {
|
|
document.querySelectorAll('.case-card').forEach(c => c.classList.remove('active'));
|
|
card.classList.add('active');
|
|
|
|
selectedRequest = req;
|
|
renderDetails();
|
|
});
|
|
|
|
casesList.appendChild(card);
|
|
});
|
|
}
|
|
|
|
// Render Selected Request Details
|
|
function renderDetails() {
|
|
if (!selectedRequest) {
|
|
caseDetails.innerHTML = `
|
|
<div class="empty-state">
|
|
<div class="empty-icon">📁</div>
|
|
<h3>Selecciona una solicitud</h3>
|
|
<p>Haz clic en cualquier elemento de la lista de la izquierda para ver su información detallada y acciones de gestión.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
const formattedDate = new Date(selectedRequest.created_at).toLocaleString();
|
|
const statusClass = `status-${selectedRequest.status.toLowerCase()}`;
|
|
|
|
// Parse Payload JSON
|
|
let payloadObj = selectedRequest.payload;
|
|
if (typeof payloadObj === 'string') {
|
|
try {
|
|
payloadObj = JSON.parse(payloadObj);
|
|
} catch (e) {
|
|
payloadObj = {};
|
|
}
|
|
}
|
|
|
|
// Try to find cedula in root or payload fallbacks
|
|
let displayCedula = selectedRequest.cedula;
|
|
if (!displayCedula && payloadObj) {
|
|
displayCedula = payloadObj.cedula || payloadObj.cédula || payloadObj.documento || payloadObj.identification || payloadObj.id || payloadObj.cc;
|
|
}
|
|
|
|
// Generate HTML for payload fields
|
|
let payloadFieldsHTML = '';
|
|
if (payloadObj && Object.keys(payloadObj).length > 0) {
|
|
payloadFieldsHTML = '<div class="info-grid">';
|
|
for (const [key, value] of Object.entries(payloadObj)) {
|
|
const displayValue = typeof value === 'object' ? JSON.stringify(value) : value;
|
|
payloadFieldsHTML += `
|
|
<div class="info-item">
|
|
<span class="info-label">${escapeHTML(key)}</span>
|
|
<span class="info-value">${escapeHTML(displayValue)}</span>
|
|
</div>
|
|
`;
|
|
}
|
|
payloadFieldsHTML += '</div>';
|
|
} else {
|
|
payloadFieldsHTML = '<div class="no-payload">Sin datos adicionales</div>';
|
|
}
|
|
|
|
// Interactive buttons and status management panel HTML
|
|
let actionsPanelHTML = '';
|
|
const isFinalizado = selectedRequest.status.toLowerCase() === 'finalizado';
|
|
const timer = caseTimers[selectedRequest.id];
|
|
|
|
if (isFinalizado) {
|
|
const formattedHandlingTime = formatSavedTime(selectedRequest.handling_time);
|
|
actionsPanelHTML = `
|
|
<div class="actions-panel finished-panel">
|
|
<div class="timer-display">
|
|
<span class="timer-lbl">Tiempo de Gestión:</span>
|
|
<span class="timer-val">${formattedHandlingTime}</span>
|
|
</div>
|
|
<button class="btn btn-danger" onclick="deleteCase(${selectedRequest.id})">Eliminar Caso</button>
|
|
</div>
|
|
`;
|
|
} else if (timer && timer.isRunning) {
|
|
const elapsedTotal = timer.elapsed + Math.floor((Date.now() - timer.lastStarted) / 1000);
|
|
const isValidation = selectedRequest.tipo_solicitud &&
|
|
selectedRequest.tipo_solicitud.toLowerCase().includes('validacion');
|
|
actionsPanelHTML = `
|
|
<div class="actions-panel active-panel">
|
|
<div class="timer-display">
|
|
<span class="timer-lbl animate-pulse">⏳ Tiempo transcurrido:</span>
|
|
<span class="timer-val" id="active-timer">${formatTime(elapsedTotal)}</span>
|
|
</div>
|
|
${isValidation ? `
|
|
<div class="validation-section" style="display: flex; flex-direction: column; gap: 8px;">
|
|
<span style="font-weight: 600; color: var(--text-primary); font-size: 12px; margin-bottom: 4px;">¿El usuario es válido?</span>
|
|
<div class="button-group">
|
|
<button class="btn btn-success" onclick="finalizeCase(${selectedRequest.id})">Sí</button>
|
|
<button class="btn btn-danger" onclick="finalizeCase(${selectedRequest.id})">No</button>
|
|
</div>
|
|
</div>
|
|
` : `
|
|
<div class="input-resolution-section" style="display: flex; flex-direction: column; gap: 8px; width: 100%;">
|
|
<span style="font-weight: 600; color: var(--text-primary); font-size: 12px; margin-bottom: 2px;">Ingrese el valor de resolución:</span>
|
|
<input type="text" id="resolution-input-${selectedRequest.id}" placeholder="Ej. Pago verificado, Pendiente por revisar..." style="padding: 8px 12px; font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text-primary); outline: none; margin-bottom: 4px;" />
|
|
<div class="button-group">
|
|
<button class="btn btn-success" onclick="submitResolution(${selectedRequest.id})">Finalizar Caso</button>
|
|
<button class="btn btn-danger" onclick="deleteCase(${selectedRequest.id})">Eliminar</button>
|
|
</div>
|
|
</div>
|
|
`}
|
|
</div>
|
|
`;
|
|
} else {
|
|
// Show total handling time if there was some time saved, otherwise none
|
|
const timeDisplay = selectedRequest.handling_time ? `
|
|
<div class="timer-display">
|
|
<span class="timer-lbl">Último tiempo guardado:</span>
|
|
<span class="timer-val">${formatSavedTime(selectedRequest.handling_time)}</span>
|
|
</div>
|
|
` : '';
|
|
|
|
actionsPanelHTML = `
|
|
<div class="actions-panel idle-panel">
|
|
${timeDisplay}
|
|
<div class="button-group">
|
|
<button class="btn btn-primary" onclick="startTimer(${selectedRequest.id})">Gestionar Caso</button>
|
|
<button class="btn btn-danger" onclick="deleteCase(${selectedRequest.id})">Eliminar Caso</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
caseDetails.innerHTML = `
|
|
<div class="detail-view">
|
|
<div class="detail-header">
|
|
<div class="detail-meta">
|
|
<span class="case-status-badge ${statusClass}">${escapeHTML(selectedRequest.status)}</span>
|
|
<span class="detail-time">Creado el ${formattedDate}</span>
|
|
</div>
|
|
<h2 class="detail-title">${escapeHTML(selectedRequest.title)}</h2>
|
|
|
|
<div class="header-metadata-grid">
|
|
<div class="meta-item">
|
|
<span class="meta-label">ID de Referencia:</span>
|
|
<strong class="meta-value">${selectedRequest.external_id ? escapeHTML(selectedRequest.external_id) : '#' + selectedRequest.id}</strong>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">Cédula del Cliente:</span>
|
|
<strong class="meta-value highlight-meta">${displayCedula ? escapeHTML(String(displayCedula)) : 'No especificada'}</strong>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">Tipo de Solicitud:</span>
|
|
<strong class="meta-value">${selectedRequest.tipo_solicitud ? escapeHTML(selectedRequest.tipo_solicitud) : 'No especificado'}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Panel with Buttons and Stopwatch -->
|
|
<div class="detail-section">
|
|
<h4>Panel de Operación</h4>
|
|
${actionsPanelHTML}
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h4>Descripción</h4>
|
|
<p class="description-text">${escapeHTML(selectedRequest.description || 'No se proporcionó una descripción.')}</p>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h4>Datos de la Solicitud</h4>
|
|
${payloadFieldsHTML}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Timer Functions
|
|
function startTimer(requestId) {
|
|
// Initialize timer entry if not existing
|
|
if (!caseTimers[requestId]) {
|
|
caseTimers[requestId] = {
|
|
elapsed: 0,
|
|
isRunning: false,
|
|
lastStarted: 0
|
|
};
|
|
}
|
|
|
|
const timer = caseTimers[requestId];
|
|
timer.isRunning = true;
|
|
timer.lastStarted = Date.now();
|
|
saveTimers();
|
|
|
|
// Re-render UI to show ticking elements
|
|
renderDetails();
|
|
renderList();
|
|
}
|
|
|
|
// Global ticking function running once per second for all active timers
|
|
let globalInterval = null;
|
|
function startGlobalInterval() {
|
|
if (globalInterval) clearInterval(globalInterval);
|
|
globalInterval = setInterval(() => {
|
|
for (const [id, timer] of Object.entries(caseTimers)) {
|
|
if (timer.isRunning) {
|
|
const timeDiff = Math.floor((Date.now() - timer.lastStarted) / 1000);
|
|
const currentTotal = timer.elapsed + timeDiff;
|
|
|
|
// Update list card if visible
|
|
const cardTimer = document.getElementById(`card-timer-${id}`);
|
|
if (cardTimer) {
|
|
cardTimer.textContent = `⏳ ${formatTime(currentTotal)}`;
|
|
}
|
|
|
|
// Update active details stopwatch if selected
|
|
if (selectedRequest && selectedRequest.id === parseInt(id)) {
|
|
const activeTimer = document.getElementById('active-timer');
|
|
if (activeTimer) {
|
|
activeTimer.textContent = formatTime(currentTotal);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
function formatTime(totalSeconds) {
|
|
const mins = Math.floor(totalSeconds / 60);
|
|
const secs = totalSeconds % 60;
|
|
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
function formatSavedTime(totalSeconds) {
|
|
if (!totalSeconds) return '0s';
|
|
const mins = Math.floor(totalSeconds / 60);
|
|
const secs = totalSeconds % 60;
|
|
return mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
|
|
}
|
|
|
|
async function finalizeCase(requestId, additionalPayload = null) {
|
|
const timer = caseTimers[requestId];
|
|
let finalTime = 0;
|
|
|
|
if (timer) {
|
|
if (timer.isRunning) {
|
|
const timeDiff = Math.floor((Date.now() - timer.lastStarted) / 1000);
|
|
finalTime = timer.elapsed + timeDiff;
|
|
} else {
|
|
finalTime = timer.elapsed;
|
|
}
|
|
// Delete timer entry from tracking
|
|
delete caseTimers[requestId];
|
|
saveTimers();
|
|
}
|
|
|
|
try {
|
|
const bodyData = { status: 'Finalizado', handling_time: finalTime };
|
|
if (additionalPayload) {
|
|
const currentReq = requests.find(r => r.id === requestId);
|
|
let payloadObj = {};
|
|
if (currentReq && currentReq.payload) {
|
|
try {
|
|
payloadObj = typeof currentReq.payload === 'string' ? JSON.parse(currentReq.payload) : currentReq.payload;
|
|
} catch (e) {
|
|
payloadObj = {};
|
|
}
|
|
}
|
|
bodyData.payload = { ...payloadObj, ...additionalPayload };
|
|
}
|
|
|
|
const response = await fetch(`/api/requests/${requestId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(bodyData)
|
|
});
|
|
if (!response.ok) throw new Error('Error al finalizar caso');
|
|
const updated = await response.json();
|
|
|
|
// Update local state list
|
|
const index = requests.findIndex(r => r.id === requestId);
|
|
if (index !== -1) {
|
|
requests[index] = updated;
|
|
}
|
|
selectedRequest = updated;
|
|
renderList();
|
|
renderDetails();
|
|
} catch (error) {
|
|
console.error(error);
|
|
alert('Error al actualizar el estado del caso en el servidor.');
|
|
}
|
|
}
|
|
|
|
function submitResolution(requestId) {
|
|
const input = document.getElementById(`resolution-input-${requestId}`);
|
|
const val = input ? input.value.trim() : '';
|
|
finalizeCase(requestId, { valor_cierre: val || 'No especificado' });
|
|
}
|
|
|
|
async function deleteCase(requestId) {
|
|
if (!confirm('¿Estás seguro de que deseas eliminar esta solicitud?')) return;
|
|
|
|
// Clear timer tracking for this case
|
|
if (caseTimers[requestId]) {
|
|
delete caseTimers[requestId];
|
|
saveTimers();
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/requests/${requestId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
if (!response.ok) throw new Error('Error al eliminar');
|
|
|
|
// Remove from local state
|
|
requests = requests.filter(r => r.id !== requestId);
|
|
selectedRequest = null;
|
|
renderList();
|
|
renderDetails();
|
|
} catch (error) {
|
|
console.error(error);
|
|
alert('Error al eliminar la solicitud.');
|
|
}
|
|
}
|
|
|
|
// Helper to escape HTML tags
|
|
function escapeHTML(str) {
|
|
if (!str) return '';
|
|
return str.replace(/[&<>'"]/g,
|
|
tag => ({
|
|
'&': '&',
|
|
'<': '<',
|
|
'>': '>',
|
|
"'": ''',
|
|
'"': '"'
|
|
}[tag] || tag)
|
|
);
|
|
}
|
|
|
|
// Theme Switcher
|
|
function setupTheme() {
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
|
|
// Check theme settings in local storage
|
|
const currentTheme = localStorage.getItem('theme') || 'light';
|
|
if (currentTheme === 'dark') {
|
|
document.body.classList.add('dark-mode');
|
|
themeToggle.textContent = '☀️';
|
|
} else {
|
|
themeToggle.textContent = '🌙';
|
|
}
|
|
|
|
themeToggle.addEventListener('click', () => {
|
|
document.body.classList.toggle('dark-mode');
|
|
const isDark = document.body.classList.contains('dark-mode');
|
|
themeToggle.textContent = isDark ? '☀️' : '🌙';
|
|
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
|
});
|
|
}
|
|
|
|
// Tab Switcher
|
|
function setupTabs() {
|
|
const tabs = document.querySelectorAll('.tab-btn');
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
tabs.forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
currentTab = tab.dataset.tab;
|
|
renderList();
|
|
});
|
|
});
|
|
}
|
|
|
|
// Play notification sound using Web Audio API
|
|
function playNotificationSound() {
|
|
try {
|
|
// If not initialized yet due to autoplay limits
|
|
if (!audioCtx) {
|
|
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
|
}
|
|
|
|
// If it's still suspended (needs user gesture first)
|
|
if (audioCtx.state === 'suspended') {
|
|
console.warn('AudioContext is suspended. Click on the dashboard page first to enable sound alerts.');
|
|
return;
|
|
}
|
|
|
|
const now = audioCtx.currentTime;
|
|
|
|
const osc = audioCtx.createOscillator();
|
|
const gain = audioCtx.createGain();
|
|
|
|
osc.type = 'sine';
|
|
osc.connect(gain);
|
|
gain.connect(audioCtx.destination);
|
|
|
|
// Play a friendly two-tone notification sound (chime)
|
|
osc.frequency.setValueAtTime(523.25, now); // Tone C5
|
|
osc.frequency.setValueAtTime(659.25, now + 0.12); // Tone E5
|
|
|
|
gain.gain.setValueAtTime(0.08, now);
|
|
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.45);
|
|
|
|
osc.start(now);
|
|
osc.stop(now + 0.5);
|
|
} catch (error) {
|
|
console.warn('AudioContext is blocked or unsupported:', error);
|
|
}
|
|
}
|
|
|
|
// Show HTML5 desktop notification
|
|
function showDesktopNotification(request) {
|
|
if (!window.Notification) return;
|
|
|
|
if (Notification.permission === 'granted') {
|
|
const title = `Claro Cases: ${request.title}`;
|
|
const options = {
|
|
body: request.description || `ID Referencia: ${request.external_id || '#' + request.id}`,
|
|
icon: 'favicon.ico'
|
|
};
|
|
|
|
const notification = new Notification(title, options);
|
|
|
|
// Clicking the notification automatically selects the request in the UI
|
|
notification.onclick = () => {
|
|
window.focus();
|
|
selectedRequest = request;
|
|
renderList();
|
|
renderDetails();
|
|
};
|
|
}
|
|
}
|
|
|
|
// Tab Title Flashing Alert (Unread cases)
|
|
function triggerTitleNotification() {
|
|
if (isTabFocused) return;
|
|
unreadCount++;
|
|
startTitleFlashing();
|
|
}
|
|
|
|
function startTitleFlashing() {
|
|
if (titleInterval) clearInterval(titleInterval);
|
|
|
|
let showAlt = false;
|
|
titleInterval = setInterval(() => {
|
|
showAlt = !showAlt;
|
|
document.title = showAlt
|
|
? `(🔔 ${unreadCount}) ¡Nuevo Caso!`
|
|
: `(${unreadCount}) Claro Cases Dashboard`;
|
|
}, 1000);
|
|
}
|
|
|
|
function stopTitleFlashing() {
|
|
if (titleInterval) {
|
|
clearInterval(titleInterval);
|
|
titleInterval = null;
|
|
}
|
|
}
|