marsalva/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar automatizaciones.html

Browse Source
This commit is contained in:
marsalva
2026-02-15 19:52:07 +00:00
parent 6d9e9b4fd5
commit 9d8fe96aff
1 changed files with 58 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
automatizaciones.html
View File

@@ -84,13 +84,12 @@
} catch (e) { console.error(e); } } catch (e) { console.error(e); }
} }
function renderCards(activeServices) { function renderCards(activeServices) {
const container = document.getElementById('automation-list'); const container = document.getElementById('automation-list');
if (activeServices.length === 0) { if (activeServices.length === 0) {
container.innerHTML = ` container.innerHTML = `<div class="col-span-full py-12 text-center border-2 border-dashed border-gray-200 rounded-2xl">
<div class="col-span-full py-12 text-center border-2 border-dashed border-gray-200 rounded-2xl">
<i data-lucide="ghost" class="w-12 h-12 text-gray-300 mx-auto mb-3"></i> <i data-lucide="ghost" class="w-12 h-12 text-gray-300 mx-auto mb-3"></i>
<p class="text-gray-400 font-bold uppercase text-xs">No hay automatismos en curso ahora</p> <p class="text-gray-400 font-bold uppercase text-xs">No hay automatismos en curso</p>
</div>`; </div>`;
lucide.createIcons(); lucide.createIcons();
return; return;
@@ -98,15 +97,21 @@
container.innerHTML = activeServices.map(s => { container.innerHTML = activeServices.map(s => {
const raw = s.raw_data; const raw = s.raw_data;
// Calculamos el tiempo restante para la barra de progreso
const now = new Date();
const expires = new Date(s.token_expires_at);
const diff = Math.max(0, Math.floor((expires - now) / 1000));
const percent = Math.min(100, (diff / 300) * 100); // 300 seg = 5 min
return ` return `
<div class="bg-white rounded-2xl border-2 border-blue-50 shadow-sm overflow-hidden flex flex-col"> <div class="bg-white rounded-2xl border-2 border-blue-50 shadow-sm overflow-hidden flex flex-col fade-in">
<div class="p-5 border-b border-gray-50 bg-blue-50/30"> <div class="p-5 border-b border-gray-50 bg-blue-50/30">
<div class="flex justify-between items-start mb-2"> <div class="flex justify-between items-start mb-2">
<span class="text-[10px] font-black bg-blue-600 text-white px-2 py-0.5 rounded uppercase">${s.provider}</span> <span class="text-[10px] font-black bg-blue-600 text-white px-2 py-0.5 rounded uppercase">${s.provider}</span>
<span class="text-xs font-black text-blue-600">Ref: ${s.service_ref}</span> <span class="text-xs font-black text-blue-600">Ref: ${s.service_ref}</span>
</div> </div>
<h4 class="font-black text-slate-800 uppercase truncate">${raw["Nombre Cliente"] || 'Sin nombre'}</h4> <h4 class="font-black text-slate-800 uppercase truncate">${raw["Nombre Cliente"] || raw["CLIENTE"] || 'Sin nombre'}</h4>
<p class="text-[10px] text-gray-500 font-bold uppercase tracking-tighter">📍 CP: ${raw["Código Postal"]} | ${raw["Gremio"] || 'Gremio'}</p> <p class="text-[10px] text-gray-500 font-bold uppercase tracking-tighter">📍 CP: ${raw["Código Postal"] || raw["C.P."] || '---'}</p>
</div> </div>
<div class="p-5 flex-1 space-y-4"> <div class="p-5 flex-1 space-y-4">
@@ -116,30 +121,31 @@
</div> </div>
<div> <div>
<p class="text-[10px] text-gray-400 font-bold uppercase leading-none">Turno actual:</p> <p class="text-[10px] text-gray-400 font-bold uppercase leading-none">Turno actual:</p>
<p class="font-black text-slate-700 uppercase">Marco Rincón</p> </div> <p class="font-black text-slate-700 uppercase">${s.current_worker_name || 'Buscando...'}</p>
</div>
</div> </div>
<div class="space-y-1"> <div class="space-y-1">
<div class="flex justify-between text-[10px] font-bold uppercase tracking-widest text-blue-500"> <div class="flex justify-between text-[10px] font-bold uppercase tracking-widest text-blue-500">
<span>Tiempo de espera</span> <span>Respuesta en</span>
<span>5m</span> <span>${Math.floor(diff / 60)}m ${diff % 60}s</span>
</div> </div>
<div class="w-full bg-gray-100 h-1.5 rounded-full overflow-hidden"> <div class="w-full bg-gray-100 h-1.5 rounded-full overflow-hidden">
<div class="bg-blue-500 h-full progress-bar" style="width: 45%"></div> <div class="bg-blue-500 h-full progress-bar" style="width: ${percent}%"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="p-3 bg-gray-50 flex gap-2"> <div class="p-3 bg-gray-50 flex gap-2">
<button onclick="stopAutomation(${s.id})" class="flex-1 bg-white border border-red-200 text-red-500 py-2 rounded-lg text-[10px] font-black uppercase hover:bg-red-50 transition-colors"> <button onclick="stopAutomation(${s.id})" class="flex-1 bg-white border border-red-200 text-red-500 py-2 rounded-lg text-[10px] font-black uppercase hover:bg-red-50 transition-colors">
Detener rueda Abortar Rueda
</button> </button>
</div> </div>
</div> </div>
`; `;
}).join(''); }).join('');
lucide.createIcons(); lucide.createIcons();
} }
function renderFailedTable(failedServices) { function renderFailedTable(failedServices) {
const tbody = document.getElementById('failed-list'); const tbody = document.getElementById('failed-list');