openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: wrap shopping items in swipe-row

Browse Source
This commit is contained in:
Ulas
2026-03-31 12:47:37 +02:00
parent dc2e874cb2
commit 33bef8eb3f
1 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/pages/shopping.js
+25 -14
View File
@@ -182,22 +182,33 @@ function renderItems() {
} }
function renderItem(item) { function renderItem(item) {
const isDone = Boolean(item.is_checked);
return ` return `
<div class="shopping-item ${item.is_checked ? 'shopping-item--checked' : ''}" <div class="swipe-row" data-swipe-id="${item.id}" data-swipe-checked="${item.is_checked}">
data-item-id="${item.id}"> <div class="swipe-reveal swipe-reveal--done" aria-hidden="true">
<button class="item-check ${item.is_checked ? 'item-check--checked' : ''}" <i data-lucide="${isDone ? 'rotate-ccw' : 'check'}" style="width:22px;height:22px" aria-hidden="true"></i>
data-action="toggle-item" data-id="${item.id}" data-checked="${item.is_checked}" <span>${isDone ? 'Zurück' : 'Abhaken'}</span>
aria-label="${item.name} ${item.is_checked ? 'als nicht erledigt markieren' : 'abhaken'}"> </div>
<i data-lucide="check" class="item-check__icon" aria-hidden="true"></i> <div class="swipe-reveal swipe-reveal--delete" aria-hidden="true">
</button> <i data-lucide="trash-2" style="width:22px;height:22px" aria-hidden="true"></i>
<div class="item-body"> <span>Löschen</span>
<div class="item-name">${item.name}</div> </div>
${item.quantity ? `<div class="item-quantity">${item.quantity}</div>` : ''} <div class="shopping-item ${isDone ? 'shopping-item--checked' : ''}"
data-item-id="${item.id}">
<button class="item-check ${isDone ? 'item-check--checked' : ''}"
data-action="toggle-item" data-id="${item.id}" data-checked="${item.is_checked}"
aria-label="${item.name} ${isDone ? 'als nicht erledigt markieren' : 'abhaken'}">
<i data-lucide="check" class="item-check__icon" aria-hidden="true"></i>
</button>
<div class="item-body">
<div class="item-name">${item.name}</div>
${item.quantity ? `<div class="item-quantity">${item.quantity}</div>` : ''}
</div>
<button class="item-delete" data-action="delete-item" data-id="${item.id}"
aria-label="${item.name} löschen">
<i data-lucide="x" style="width:16px;height:16px" aria-hidden="true"></i>
</button>
</div> </div>
<button class="item-delete" data-action="delete-item" data-id="${item.id}"
aria-label="${item.name} löschen">
<i data-lucide="x" style="width:16px;height:16px" aria-hidden="true"></i>
</button>
</div>`; </div>`;
} }