ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep checked items in place within their category
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m16s
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Rafał
2026-04-12 00:04:07 +02:00
parent bb529b7bac
commit 71b91b50b4
1 changed files with 11 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
js/views/ShoppingList.js
View File

@@ -123,8 +123,6 @@ function renderBoard() {
if (!root) return;
const items = getKitchenItems();
const unchecked = items.filter((i) => !i.checked);
const checked = items.filter((i) => i.checked);
if (items.length === 0) {
root.innerHTML = `
@@ -138,37 +136,20 @@ function renderBoard() {
return;
}
let html = '';
// Unchecked items grouped by category
if (unchecked.length > 0) {
const groups = groupItemsByCategory(unchecked);
html += groups.map(({ cat, items: catItems }) => {
const icon = CATEGORY_ICONS[cat] || 'fa-jar';
return `
<section class="mb-4">
<div class="flex items-center gap-1.5 mb-2 px-1">
<i class="fas ${icon} text-[10px]" style="color:#9b978f;"></i>
<p class="text-[10px] font-bold uppercase tracking-wider" style="color:#9b978f;">${esc(categoryLabel(cat))}</p>
<span class="text-[10px]" style="color:#6d6c67;">${catItems.length}</span>
</div>
${catItems.map((item) => itemRowHtml(item)).join('')}
</section>`;
}).join('');
}
// Checked items at the bottom
if (checked.length > 0) {
html += `
<section class="mt-4 pt-3" style="border-top:1px solid #3a3a38;">
const groups = groupItemsByCategory(items);
const html = groups.map(({ cat, items: catItems }) => {
const icon = CATEGORY_ICONS[cat] || 'fa-jar';
const uncheckedCount = catItems.filter((i) => !i.checked).length;
return `
<section class="mb-4">
<div class="flex items-center gap-1.5 mb-2 px-1">
<i class="fas fa-check text-[10px]" style="color:#6d6c67;"></i>
<p class="text-[10px] font-bold uppercase tracking-wider" style="color:#6d6c67;">Kupione</p>
<span class="text-[10px]" style="color:#6d6c67;">${checked.length}</span>
<i class="fas ${icon} text-[10px]" style="color:#9b978f;"></i>
<p class="text-[10px] font-bold uppercase tracking-wider" style="color:#9b978f;">${esc(categoryLabel(cat))}</p>
<span class="text-[10px]" style="color:#6d6c67;">${uncheckedCount}/${catItems.length}</span>
</div>
${checked.map((item) => itemRowHtml(item)).join('')}
${catItems.map((item) => itemRowHtml(item)).join('')}
</section>`;
}
}).join('');
root.innerHTML = html;
bindRowEvents(root);