// 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 = `Error al cargar solicitudes. Verifica la base de datos.
`;
}
}
// 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 = `No se encontraron solicitudes.
`;
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 = ` ⏳ ${formatTime(elapsedTotal)}`;
}
card.innerHTML = `
${escapeHTML(req.description || 'Sin descripción')}
`;
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 = `
📁
Selecciona una solicitud
Haz clic en cualquier elemento de la lista de la izquierda para ver su información detallada y acciones de gestión.
`;
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 = '';
for (const [key, value] of Object.entries(payloadObj)) {
const displayValue = typeof value === 'object' ? JSON.stringify(value) : value;
payloadFieldsHTML += `
${escapeHTML(key)}
${escapeHTML(displayValue)}
`;
}
payloadFieldsHTML += '
Sin datos adicionales
';
}
// 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 = `
Tiempo de Gestión:
${formattedHandlingTime}
`;
} 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 = `
⏳ Tiempo transcurrido:
${formatTime(elapsedTotal)}
${isValidation ? `
¿El usuario es válido?
` : `
`}
`;
} else {
// Show total handling time if there was some time saved, otherwise none
const timeDisplay = selectedRequest.handling_time ? `
Último tiempo guardado:
${formatSavedTime(selectedRequest.handling_time)}
` : '';
actionsPanelHTML = `
${timeDisplay}
Panel de Operación
${actionsPanelHTML}
Descripción
${escapeHTML(selectedRequest.description || 'No se proporcionó una descripción.')}
Datos de la Solicitud
${payloadFieldsHTML}
`;
}
// 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;
}
}