payfrit/payfrit-biz
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add expandable modifiers to KDS order items

Browse source 
Modifiers and remarks are now collapsed by default with a count badge.
Tap to expand/collapse. Matches the Works Android behavior.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
John Mizerek 2026-03-12 11:29:00 -07:00
parent 4a13bd7583
commit f64a321afd
2 changed files with 25 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
kds/index.html
View file

@ -44,10 +44,15 @@
.line-items { margin-bottom: 15px; } .line-items { margin-bottom: 15px; }
.line-item { margin-bottom: 10px; padding: 10px; background: #0a0a0a; border-radius: 6px; } .line-item { margin-bottom: 10px; padding: 10px; background: #0a0a0a; border-radius: 6px; }
.line-item-main { display: flex; justify-content: space-between; align-items: flex-start; } .line-item-main { display: flex; justify-content: space-between; align-items: flex-start; cursor: pointer; }
.item-name { font-size: 14px; font-weight: 500; color: #aaa; flex: 1; } .item-name { font-size: 14px; font-weight: 500; color: #aaa; flex: 1; }
.item-qty { font-size: 14px; font-weight: 600; color: #666; margin-left: 10px; } .item-qty { font-size: 14px; font-weight: 600; color: #666; margin-left: 10px; }
.modifiers { margin-left: 12px; margin-top: 6px; } .mod-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px; background: #1a1a2e; border-radius: 10px; font-size: 11px; color: #888; cursor: pointer; }
.mod-badge .chevron { font-size: 10px; transition: transform 0.2s; }
.mod-badge .chevron.open { transform: rotate(180deg); }
.mod-extras { margin-left: 12px; margin-top: 6px; overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.mod-extras.open { max-height: 500px; }
.modifiers { }
.modifier { font-size: 12px; color: #555; margin-bottom: 3px; padding-left: 10px; border-left: 1px solid #333; } .modifier { font-size: 12px; color: #555; margin-bottom: 3px; padding-left: 10px; border-left: 1px solid #333; }
.item-remark { margin-top: 6px; padding: 6px 8px; background: #1a1500; border-left: 2px solid #f59e0b; font-size: 12px; color: #a58a2a; font-style: italic; } .item-remark { margin-top: 6px; padding: 6px 8px; background: #1a1500; border-left: 2px solid #f59e0b; font-size: 12px; color: #a58a2a; font-style: italic; }
.order-remarks { margin-bottom: 12px; padding: 8px; background: #1a0a0a; border-left: 2px solid #ef4444; font-size: 12px; color: #a55; font-style: italic; } .order-remarks { margin-bottom: 12px; padding: 8px; background: #1a0a0a; border-left: 2px solid #ef4444; font-size: 12px; color: #a55; font-style: italic; }

22
kds/kds.js
View file

@ -370,20 +370,26 @@ function renderOrder(order) {
`; `;
} }
// Render line item with modifiers // Render line item with expandable modifiers
function renderLineItem(item, allItems, isOtherStation = false) { function renderLineItem(item, allItems, isOtherStation = false) {
const modifiers = allItems.filter(mod => mod.ParentOrderLineItemID === item.OrderLineItemID); const modifiers = allItems.filter(mod => mod.ParentOrderLineItemID === item.OrderLineItemID);
console.log(`Item: ${item.Name} (ID: ${item.OrderLineItemID}) has ${modifiers.length} direct modifiers:`, modifiers.map(m => m.Name)); console.log(`Item: ${item.Name} (ID: ${item.OrderLineItemID}) has ${modifiers.length} direct modifiers:`, modifiers.map(m => m.Name));
const otherClass = isOtherStation ? ' other-station' : ''; const otherClass = isOtherStation ? ' other-station' : '';
const doneClass = (item.StatusID === 1) ? ' line-item-done' : ''; const doneClass = (item.StatusID === 1) ? ' line-item-done' : '';
const hasExtras = modifiers.length > 0 || item.Remark;
const extrasCount = modifiers.length + (item.Remark ? 1 : 0);
const extrasId = `extras-${item.OrderLineItemID}`;
return ` return `
<div class="line-item${otherClass}${doneClass}"> <div class="line-item${otherClass}${doneClass}">
<div class="line-item-main"> <div class="line-item-main"${hasExtras ? ` onclick="toggleExtras('${extrasId}', this)"` : ''}>
<div class="item-name">${escapeHtml(item.Name)}</div> <div class="item-name">${escapeHtml(item.Name)}</div>
${hasExtras ? `<span class="mod-badge">${extrasCount}<span class="chevron">▼</span></span>` : ''}
<div class="item-qty">x${item.Quantity}</div> <div class="item-qty">x${item.Quantity}</div>
</div> </div>
${modifiers.length > 0 ? renderAllModifiers(modifiers, allItems) : ''} ${hasExtras ? `<div class="mod-extras" id="${extrasId}">
${item.Remark ? `<div class="item-remark">Note: ${escapeHtml(item.Remark)}</div>` : ''} ${modifiers.length > 0 ? renderAllModifiers(modifiers, allItems) : ''}
${item.Remark ? `<div class="item-remark">Note: ${escapeHtml(item.Remark)}</div>` : ''}
</div>` : ''}
</div> </div>
`; `;
} }
@ -586,6 +592,14 @@ function formatSubmitTime(dateString) {
return new Date(dateString).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); return new Date(dateString).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
} }
function toggleExtras(id, mainEl) {
const el = document.getElementById(id);
if (!el) return;
el.classList.toggle('open');
const chevron = mainEl.querySelector('.chevron');
if (chevron) chevron.classList.toggle('open');
}
function escapeHtml(text) { function escapeHtml(text) {
if (!text) return ''; if (!text) return '';
const div = document.createElement('div'); const div = document.createElement('div');