tatiana
/
carritoIA
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: grupos de compra colapsables con contador de items

This commit is contained in:
Tatiana Villa Ema 2026-04-25 19:36:55 +02:00
parent ebb634445c
commit 0d60be2ac3
2 changed files with 53 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
static/css/style.css
View File

@ -72,8 +72,35 @@ h2 {
align-items: center; align-items: center;
gap: .5rem; gap: .5rem;
margin-bottom: .75rem; margin-bottom: .75rem;
cursor: pointer;
user-select: none;
} }
.card-header strong { color: var(--text); font-size: .95rem; } .card-header strong { color: var(--text); font-size: .95rem; }
.card.collapsed .card-header { margin-bottom: 0; }
.card-count {
font-size: .72rem;
color: var(--text-muted);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 20px;
padding: .1rem .5rem;
}
.card-chevron {
margin-left: auto;
font-size: .8rem;
color: var(--text-muted);
transition: transform .25s ease;
line-height: 1;
}
.card.collapsed .card-chevron { transform: rotate(-90deg); }
.prod-list {
overflow: hidden;
max-height: 9999px;
transition: max-height .35s ease;
}
.card.collapsed .prod-list { max-height: 0; }
/* ---- Badges ---- */ /* ---- Badges ---- */
.badge { .badge {

30
templates/index.html
View File

@ -25,6 +25,7 @@
<div class="toolbar"> <div class="toolbar">
<button class="btn btn-primary btn-sm" onclick="marcarSemanal()">Marcar sugeridos esta semana</button> <button class="btn btn-primary btn-sm" onclick="marcarSemanal()">Marcar sugeridos esta semana</button>
<button class="btn btn-secondary btn-sm" onclick="desmarcarTodo()">Desmarcar todo</button> <button class="btn btn-secondary btn-sm" onclick="desmarcarTodo()">Desmarcar todo</button>
<button class="btn btn-secondary btn-sm" onclick="toggleTodos()" id="btnToggle">Plegar todo</button>
</div> </div>
<div class="layout"> <div class="layout">
@ -136,20 +137,41 @@
{ titulo: 'Compra mensual', badge: 'badge-verde', label: 'cada 2-4 semanas', items: predicciones.filter(p => p.frecuencia_dias > 16 && p.frecuencia_dias <= 35) }, { titulo: 'Compra mensual', badge: 'badge-verde', label: 'cada 2-4 semanas', items: predicciones.filter(p => p.frecuencia_dias > 16 && p.frecuencia_dias <= 35) },
{ titulo: 'Compra esporadica', badge: 'badge-gris', label: 'mas de un mes', items: predicciones.filter(p => p.frecuencia_dias > 35) }, { titulo: 'Compra esporadica', badge: 'badge-gris', label: 'mas de un mes', items: predicciones.filter(p => p.frecuencia_dias > 35) },
]; ];
grupos.forEach(grupo => { grupos.forEach((grupo, idx) => {
if (!grupo.items.length) return; if (!grupo.items.length) return;
const card = document.createElement('div'); const card = document.createElement('div');
card.className = 'card'; card.className = 'card' + (idx >= 2 ? ' collapsed' : '');
card.innerHTML = card.innerHTML =
'<div class="card-header"><strong>' + grupo.titulo + '</strong>' + '<div class="card-header">' +
'<span class="badge ' + grupo.badge + '">' + grupo.label + '</span></div>' + '<strong>' + grupo.titulo + '</strong>' +
'<span class="badge ' + grupo.badge + '">' + grupo.label + '</span>' +
'<span class="card-count">' + grupo.items.length + '</span>' +
'<span class="card-chevron">▾</span>' +
'</div>' +
'<div class="prod-list"></div>'; '<div class="prod-list"></div>';
card.querySelector('.card-header').addEventListener('click', () => {
card.classList.toggle('collapsed');
actualizarBotonToggle();
});
contenedor.appendChild(card); contenedor.appendChild(card);
const lista = card.querySelector('.prod-list'); const lista = card.querySelector('.prod-list');
grupo.items.forEach(prod => lista.appendChild(crearItem(prod))); grupo.items.forEach(prod => lista.appendChild(crearItem(prod)));
}); });
} }
function toggleTodos() {
const cards = [...document.querySelectorAll('#columnaProductos .card')];
const todosCollapsed = cards.every(c => c.classList.contains('collapsed'));
cards.forEach(c => c.classList.toggle('collapsed', !todosCollapsed));
actualizarBotonToggle();
}
function actualizarBotonToggle() {
const cards = [...document.querySelectorAll('#columnaProductos .card')];
const todosCollapsed = cards.length > 0 && cards.every(c => c.classList.contains('collapsed'));
document.getElementById('btnToggle').textContent = todosCollapsed ? 'Desplegar todo' : 'Plegar todo';
}
function crearItem(prod) { function crearItem(prod) {
const li = document.createElement('div'); const li = document.createElement('div');
li.className = 'prod-item'; li.className = 'prod-item';