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

Actualizar servicios.html

Browse Source
This commit is contained in:
marsalva
2026-02-22 16:13:25 +00:00
parent 2f9f33b251
commit 3f130ce7d5
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
servicios.html
View File

@@ -354,24 +354,29 @@
} }
// 2. RENDERIZAR BOTONERA DE ESTADOS (CHIPS) // 2. RENDERIZAR BOTONERA DE ESTADOS (CHIPS)
function renderStatusPills() { function renderStatusPills() {
const container = document.getElementById('statusPills'); const container = document.getElementById('statusPills');
let html = ` let html = `
<button onclick="setStatusFilter('ALL')" class="px-5 py-2 rounded-xl text-xs font-bold transition-all border ${activeStatusFilter === 'ALL' ? 'bg-slate-800 text-white border-slate-800 shadow-md' : 'bg-white border-slate-200 text-slate-500 hover:bg-slate-50'}"> <button onclick="setStatusFilter('ALL')" class="px-5 py-2 rounded-xl text-xs font-black tracking-widest transition-all border ${activeStatusFilter === 'ALL' ? 'bg-slate-900 text-white border-slate-900 shadow-md' : 'bg-white border-slate-200 text-slate-500 hover:bg-slate-50'}">
TODOS TODOS
</button> </button>
`; `;
systemStatuses.forEach(st => { systemStatuses.forEach(st => {
const isActive = activeStatusFilter === String(st.id); const isActive = activeStatusFilter === String(st.id);
const colorData = colorDict[st.color] || colorDict['gray']; // Usamos tu diccionario directamente para evitar fallos de Tailwind
const c = colorDict[st.color] || colorDict['gray'];
const activeClasses = `bg-white border-${st.color}-400 text-${st.color}-700 shadow-md ring-2 ring-${st.color}-100`; // Extraemos el nombre del color base (ej: de 'bg-blue-100' sacamos 'blue')
const colorBase = c.bg.split('-')[1];
// Clases seguras
const activeClasses = `bg-white border-${colorBase}-400 text-${colorBase}-700 shadow-md ring-2 ring-${colorBase}-100`;
const inactiveClasses = `bg-white border-slate-200 text-slate-500 hover:bg-slate-50`; const inactiveClasses = `bg-white border-slate-200 text-slate-500 hover:bg-slate-50`;
html += ` html += `
<button onclick="setStatusFilter('${st.id}')" class="px-4 py-2 rounded-xl text-xs font-bold border transition-all flex items-center gap-2 ${isActive ? activeClasses : inactiveClasses}"> <button onclick="setStatusFilter('${st.id}')" class="px-4 py-2 rounded-xl text-xs font-bold border transition-all flex items-center gap-2 ${isActive ? activeClasses : inactiveClasses}">
<div class="w-2 h-2 rounded-full ${colorData.dot}"></div> <div class="w-2 h-2 rounded-full ${c.dot}"></div>
${st.name} ${st.name}
</button> </button>
`; `;