diff --git a/docker/index.html b/docker/index.html index 444998f..6805b5e 100644 --- a/docker/index.html +++ b/docker/index.html @@ -1246,28 +1246,62 @@ body { opacity: 0.6; } -/* ===== Save Meal Icon in Header ===== */ -.save-meal-btn { - display: inline-flex; +/* ===== Save Meal — checkbox + footer ===== */ +.item-checkbox-wrapper { + display: none; align-items: center; - justify-content: center; - width: 24px; - height: 24px; - font-size: 14px; - color: var(--primary-dark); + flex-shrink: 0; +} +.eetmoment-card.has-multi-items .item-checkbox-wrapper { + display: inline-flex; +} +.item-checkbox { + flex-shrink: 0; + width: 18px; + height: 18px; + accent-color: var(--primary); cursor: pointer; - border-radius: 50%; - transition: background 0.15s, transform 0.15s; - user-select: none; - -webkit-user-select: none; + margin: 0 6px 0 0; } -.save-meal-btn:hover { +/* Meal-group checkbox: on the header line */ +.eetmoment-meal-group .item-checkbox { + margin: 0 6px 0 -2px; +} + +.save-meal-footer { + padding: 4px 14px 10px; +} +.save-meal-footer-btn { + display: block; + width: 100%; + padding: 10px 16px; background: var(--primary-light); - transform: scale(1.1); + border: 1px solid var(--primary); + border-radius: var(--radius-sm); + color: var(--primary-dark); + font-size: var(--font-sm); + font-weight: 600; + cursor: pointer; + transition: background 0.15s, opacity 0.15s; + text-align: center; + font-family: var(--body-font); + min-height: var(--touch-min); + line-height: 1.3; } -.save-meal-btn:active { - background: var(--accent); - transform: scale(0.95); +.save-meal-footer-btn:hover { + background: var(--primary); + color: var(--white); +} +.save-meal-footer-btn:active { + background: var(--primary-dark); + color: var(--white); +} +.save-meal-footer-btn:disabled { + opacity: 0.4; + cursor: default; + background: var(--primary-lighter); + color: var(--primary-dark); + border-color: var(--border); } /* ===== Diary — nested meal groups ===== */ @@ -3322,6 +3356,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food- return `
  • + 🍽 ${escapeHtml(entry.mealNaam)} ${formatKh(mealKh)} g @@ -3349,6 +3384,9 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food- const itemOverLimit = overLimit && itemKh > 0; return `
  • + + +
    ${escapeHtml(displayNaam(entry.item.naam))}
    @@ -3372,21 +3410,26 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food- const inlineGlucoseHtml = glucoseMoment ? renderInlineGlucoseItem(glucoseMoment) : ''; return ` -
  • +
  • ${moment.icon} ${moment.name}
    ${roundedKh > 0 ? formatKh(roundedKh) + ' g' : '—'} - ${items.length > 0 ? '' : ''} - ${items.length > 0 ? '' : ''} + ${items.length > 0 ? '' : ''}
    ${items.length > 0 ? `` : ''} ${inlineGlucoseHtml}
    + Voedingsmiddel toevoegen
    + ${items.length > 0 ? ` +
    + +
    ` : ''}
    • `; }).join(''); @@ -3443,18 +3486,43 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food- }); }); - // Save meal buttons - listEl.querySelectorAll('.save-meal-btn').forEach(btn => { + // Save meal footer button + listEl.querySelectorAll('.save-meal-footer-btn').forEach(btn => { btn.addEventListener('click', (e) => { e.stopPropagation(); - saveCurrentMomentAsMeal(btn.dataset.moment); + const momentId = btn.dataset.moment; + const card = btn.closest('.eetmoment-card'); + // Collect selected indices from checked checkboxes + const checked = card.querySelectorAll('.item-checkbox:checked'); + const selectedIndices = Array.from(checked).map(cb => parseInt(cb.dataset.index)); + saveCurrentMomentAsMeal(momentId, selectedIndices); + }); + }); + + // Checkbox change → update save button text + listEl.querySelectorAll('.item-checkbox').forEach(cb => { + cb.addEventListener('change', () => { + const card = cb.closest('.eetmoment-card'); + if (!card) return; + const footer = card.querySelector('.save-meal-footer'); + if (!footer) return; + const btn = footer.querySelector('.save-meal-footer-btn'); + const checked = card.querySelectorAll('.item-checkbox:checked').length; + const total = card.querySelectorAll('.item-checkbox').length; + if (checked === 0) { + btn.disabled = true; + btn.textContent = '⭐ 0 geselecteerde items als maaltijd'; + } else { + btn.disabled = false; + btn.textContent = `⭐ Opslaan ${checked} geselecteerde ${checked === 1 ? 'item' : 'items'} als maaltijd`; + } }); }); // Meal group toggle expand/collapse listEl.querySelectorAll('.meal-group-header').forEach(header => { header.addEventListener('click', (e) => { - if (e.target.closest('.meal-group-edit, .eetmoment-remove')) return; + if (e.target.closest('.meal-group-edit, .eetmoment-remove, .item-checkbox')) return; header.classList.toggle('expanded'); }); }); @@ -4286,13 +4354,19 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food- return r; } - function saveCurrentMomentAsMeal(momentId) { + function saveCurrentMomentAsMeal(momentId, selectedIndices) { const dayData = getOrCreateDay(activeDate); const rawItems = dayData[momentId] || []; if (rawItems.length === 0) return; + // Filter to only selected items (by index in rawItems) + const filteredRaw = selectedIndices + ? rawItems.filter((_, i) => selectedIndices.includes(i)) + : rawItems; + if (filteredRaw.length === 0) return; + // Flatten: unwrap meal-group entries into uniform {item, portie} items - const items = flattenEntries(rawItems); + const items = flattenEntries(filteredRaw); // Calculate total kh let khTotaal = 0; @@ -4325,7 +4399,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
    - +
    ${previewText}
    diff --git a/index.html b/index.html index 444998f..6805b5e 100644 --- a/index.html +++ b/index.html @@ -1246,28 +1246,62 @@ body { opacity: 0.6; } -/* ===== Save Meal Icon in Header ===== */ -.save-meal-btn { - display: inline-flex; +/* ===== Save Meal — checkbox + footer ===== */ +.item-checkbox-wrapper { + display: none; align-items: center; - justify-content: center; - width: 24px; - height: 24px; - font-size: 14px; - color: var(--primary-dark); + flex-shrink: 0; +} +.eetmoment-card.has-multi-items .item-checkbox-wrapper { + display: inline-flex; +} +.item-checkbox { + flex-shrink: 0; + width: 18px; + height: 18px; + accent-color: var(--primary); cursor: pointer; - border-radius: 50%; - transition: background 0.15s, transform 0.15s; - user-select: none; - -webkit-user-select: none; + margin: 0 6px 0 0; } -.save-meal-btn:hover { +/* Meal-group checkbox: on the header line */ +.eetmoment-meal-group .item-checkbox { + margin: 0 6px 0 -2px; +} + +.save-meal-footer { + padding: 4px 14px 10px; +} +.save-meal-footer-btn { + display: block; + width: 100%; + padding: 10px 16px; background: var(--primary-light); - transform: scale(1.1); + border: 1px solid var(--primary); + border-radius: var(--radius-sm); + color: var(--primary-dark); + font-size: var(--font-sm); + font-weight: 600; + cursor: pointer; + transition: background 0.15s, opacity 0.15s; + text-align: center; + font-family: var(--body-font); + min-height: var(--touch-min); + line-height: 1.3; } -.save-meal-btn:active { - background: var(--accent); - transform: scale(0.95); +.save-meal-footer-btn:hover { + background: var(--primary); + color: var(--white); +} +.save-meal-footer-btn:active { + background: var(--primary-dark); + color: var(--white); +} +.save-meal-footer-btn:disabled { + opacity: 0.4; + cursor: default; + background: var(--primary-lighter); + color: var(--primary-dark); + border-color: var(--border); } /* ===== Diary — nested meal groups ===== */ @@ -3322,6 +3356,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food- return `
  • + 🍽 ${escapeHtml(entry.mealNaam)} ${formatKh(mealKh)} g @@ -3349,6 +3384,9 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food- const itemOverLimit = overLimit && itemKh > 0; return `
  • + + +
    ${escapeHtml(displayNaam(entry.item.naam))}
    @@ -3372,21 +3410,26 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food- const inlineGlucoseHtml = glucoseMoment ? renderInlineGlucoseItem(glucoseMoment) : ''; return ` -
  • +
  • ${moment.icon} ${moment.name}
    ${roundedKh > 0 ? formatKh(roundedKh) + ' g' : '—'} - ${items.length > 0 ? '' : ''} - ${items.length > 0 ? '' : ''} + ${items.length > 0 ? '' : ''}
    ${items.length > 0 ? `
      ${itemsHtml}
    ` : ''} ${inlineGlucoseHtml}
    + Voedingsmiddel toevoegen
    + ${items.length > 0 ? ` +
    + +
    ` : ''}
    • `; }).join(''); @@ -3443,18 +3486,43 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food- }); }); - // Save meal buttons - listEl.querySelectorAll('.save-meal-btn').forEach(btn => { + // Save meal footer button + listEl.querySelectorAll('.save-meal-footer-btn').forEach(btn => { btn.addEventListener('click', (e) => { e.stopPropagation(); - saveCurrentMomentAsMeal(btn.dataset.moment); + const momentId = btn.dataset.moment; + const card = btn.closest('.eetmoment-card'); + // Collect selected indices from checked checkboxes + const checked = card.querySelectorAll('.item-checkbox:checked'); + const selectedIndices = Array.from(checked).map(cb => parseInt(cb.dataset.index)); + saveCurrentMomentAsMeal(momentId, selectedIndices); + }); + }); + + // Checkbox change → update save button text + listEl.querySelectorAll('.item-checkbox').forEach(cb => { + cb.addEventListener('change', () => { + const card = cb.closest('.eetmoment-card'); + if (!card) return; + const footer = card.querySelector('.save-meal-footer'); + if (!footer) return; + const btn = footer.querySelector('.save-meal-footer-btn'); + const checked = card.querySelectorAll('.item-checkbox:checked').length; + const total = card.querySelectorAll('.item-checkbox').length; + if (checked === 0) { + btn.disabled = true; + btn.textContent = '⭐ 0 geselecteerde items als maaltijd'; + } else { + btn.disabled = false; + btn.textContent = `⭐ Opslaan ${checked} geselecteerde ${checked === 1 ? 'item' : 'items'} als maaltijd`; + } }); }); // Meal group toggle expand/collapse listEl.querySelectorAll('.meal-group-header').forEach(header => { header.addEventListener('click', (e) => { - if (e.target.closest('.meal-group-edit, .eetmoment-remove')) return; + if (e.target.closest('.meal-group-edit, .eetmoment-remove, .item-checkbox')) return; header.classList.toggle('expanded'); }); }); @@ -4286,13 +4354,19 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food- return r; } - function saveCurrentMomentAsMeal(momentId) { + function saveCurrentMomentAsMeal(momentId, selectedIndices) { const dayData = getOrCreateDay(activeDate); const rawItems = dayData[momentId] || []; if (rawItems.length === 0) return; + // Filter to only selected items (by index in rawItems) + const filteredRaw = selectedIndices + ? rawItems.filter((_, i) => selectedIndices.includes(i)) + : rawItems; + if (filteredRaw.length === 0) return; + // Flatten: unwrap meal-group entries into uniform {item, portie} items - const items = flattenEntries(rawItems); + const items = flattenEntries(filteredRaw); // Calculate total kh let khTotaal = 0; @@ -4325,7 +4399,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
    - +
    ${previewText}
    diff --git a/tests/e2e.spec.js b/tests/e2e.spec.js index 7d28287..d499c5b 100644 --- a/tests/e2e.spec.js +++ b/tests/e2e.spec.js @@ -192,7 +192,7 @@ test.describe('Karby Eetdagboek', () => { // ---------- Maaltijden ---------- - test('meal save: name input is empty by default', async ({ page }) => { + test('meal save: name input pre-filled with smart suggestion', async ({ page }) => { await page.goto(BASE); await page.locator('.search-input').fill('brood'); await page.waitForTimeout(800); @@ -203,13 +203,14 @@ test.describe('Karby Eetdagboek', () => { // Item toevoegen via addMealSubmit → sluit modal + gaat naar dagboek await page.locator('#addMealSubmit').click(); await page.waitForTimeout(800); - const saveBtn = page.locator('.save-meal-btn'); + const saveBtn = page.locator('.save-meal-footer-btn'); await expect(saveBtn.first()).toBeVisible({ timeout: 5000 }); await saveBtn.first().click(); await page.waitForTimeout(500); const nameInput = page.locator('#mealNameInput'); await expect(nameInput).toBeVisible({ timeout: 5000 }); - await expect(nameInput).toHaveValue(''); + // Smart suggestion should pre-fill with a non-empty name + await expect(nameInput).not.toHaveValue(''); await page.locator('#mealNameCancel').click(); await page.waitForTimeout(300); }); @@ -224,13 +225,14 @@ test.describe('Karby Eetdagboek', () => { await page.waitForTimeout(500); await page.locator('#addMealSubmit').click(); await page.waitForTimeout(800); - const saveBtn = page.locator('.save-meal-btn'); + const saveBtn = page.locator('.save-meal-footer-btn'); await expect(saveBtn.first()).toBeVisible({ timeout: 5000 }); await saveBtn.first().click(); await page.waitForTimeout(500); const nameInput = page.locator('#mealNameInput'); await expect(nameInput).toBeVisible({ timeout: 5000 }); - await expect(nameInput).toHaveValue(''); + // Clear the smart-suggested name to test empty validation + await nameInput.fill(''); // Opslaan zonder naam → validatiefout await page.locator('#mealNameSave').click(); await page.waitForTimeout(300); @@ -301,7 +303,7 @@ test.describe('Karby Eetdagboek', () => { await page.locator('#addMealSubmit').click(); await page.waitForTimeout(800); // Stap 2: Sla op als maaltijd - const saveBtn = page.locator('.save-meal-btn'); + const saveBtn = page.locator('.save-meal-footer-btn'); await expect(saveBtn.first()).toBeVisible({ timeout: 5000 }); await saveBtn.first().click(); await page.waitForTimeout(500); @@ -370,7 +372,7 @@ test.describe('Karby Eetdagboek', () => { // Navigate to diary, save as meal await page.locator('#navDagboek').click(); await page.waitForTimeout(600); - const saveBtn = page.locator('.save-meal-btn'); + const saveBtn = page.locator('.save-meal-footer-btn'); if (await saveBtn.count() === 0) { test.skip(); return; } await saveBtn.first().click(); await page.waitForTimeout(500);