${escapeHtml(displayNaam(item.naam))}
- ${escapeHtml(item.cat)}
+ ${escapeHtml(displayCategory(item.cat))}
${formatKh(kh)}
@@ -3352,28 +3484,71 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
if (el._clickAttached) return;
el._clickAttached = true;
el.addEventListener('click', () => {
- const idx = parseInt(el.dataset.index);
- if (idx >= 0 && idx < voedingsmiddelen.length) {
- showDetail(voedingsmiddelen[idx]);
+ const nummer = el.dataset.nummer;
+ if (!nummer || !voedingsmiddelenByN.has(nummer)) {
+ // If the item is not in the local lookup (e.g. pure API item),
+ // try finding by index in the food list as last resort
+ const items = listEl.querySelectorAll('.food-item');
+ const idx = Array.from(items).indexOf(el);
+ if (idx >= 0) {
+ showToast('Item niet gevonden in lokale data');
+ }
+ return;
+ }
+ const item = voedingsmiddelenByN.get(nummer);
+ // If in add-to-moment mode, go directly to add modal with preselected moment
+ if (window._targetMoment) {
+ showAddToMeal(item, window._targetMoment);
+ } else {
+ showDetail(item);
}
});
});
}
- function setupSearchObserver(allItems) {
+ function setupSearchObserver() {
disconnectSearchObserver();
const sentinel = document.getElementById('searchSentinel');
if (!sentinel) return;
- searchObserver = new IntersectionObserver((entries) => {
- if (entries[0].isIntersecting) {
- // Load up to 3 batches at once when user scrolls fast
- // This keeps the sentinel pushed far ahead of the viewport
- let batchesLoaded = 0;
- const maxBatches = 3;
- while (batchesLoaded < maxBatches && searchVisibleCount < allItems.length) {
- appendSearchBatch(allItems);
- batchesLoaded++;
+ searchObserver = new IntersectionObserver(async (entries) => {
+ if (entries[0].isIntersecting && !isSearchLoading) {
+ isSearchLoading = true;
+ try {
+ if (searchTotal > 0) {
+ // API mode: fetch next page
+ const nextPage = searchPage + 1;
+ const apiResult = await fetchFoodPage(searchQuery, selectedCategory, nextPage, SEARCH_PAGE_SIZE);
+ if (apiResult && apiResult.data.length > 0) {
+ appendSearchBatchFromApi(apiResult.data);
+ searchPage = nextPage;
+ // All items loaded — hide sentinel and disconnect
+ if (searchVisibleCount >= searchTotal) {
+ disconnectSearchObserver();
+ const sentinelEl = document.getElementById('searchSentinel');
+ if (sentinelEl) sentinelEl.classList.add('hidden');
+ }
+ } else if (!apiResult) {
+ // API failed — try fallback from local data if available
+ const fallbackItems = getFilteredItems();
+ if (searchVisibleCount < fallbackItems.length) {
+ appendSearchBatchLocal(fallbackItems);
+ }
+ } else {
+ // API returned empty — all done
+ disconnectSearchObserver();
+ const sentinelEl = document.getElementById('searchSentinel');
+ if (sentinelEl) sentinelEl.classList.add('hidden');
+ }
+ } else {
+ // Fallback mode: slice from local filtered items
+ const fallbackItems = getFilteredItems();
+ if (searchVisibleCount < fallbackItems.length) {
+ appendSearchBatchLocal(fallbackItems);
+ }
+ }
+ } finally {
+ isSearchLoading = false;
}
}
}, { rootMargin: '1200px' });
@@ -3381,7 +3556,17 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
searchObserver.observe(sentinel);
}
- function appendSearchBatch(allItems) {
+ function appendSearchBatchFromApi(items) {
+ const listEl = document.getElementById('foodList');
+ const sentinelEl = document.getElementById('searchSentinel');
+ if (!listEl) return;
+
+ listEl.insertAdjacentHTML('beforeend', renderFoodItemsHtml(items, searchVisibleCount));
+ attachFoodItemHandlers(listEl);
+ searchVisibleCount += items.length;
+ }
+
+ function appendSearchBatchLocal(allItems) {
const listEl = document.getElementById('foodList');
const sentinelEl = document.getElementById('searchSentinel');
if (!listEl || !sentinelEl) return;
@@ -3415,6 +3600,8 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
function resetSearchPagination() {
searchVisibleCount = SEARCH_PAGE_SIZE;
+ searchPage = 1;
+ searchTotal = 0;
disconnectSearchObserver();
}
@@ -3751,7 +3938,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
body.innerHTML = `
${escapeHtml(displayNaam(item.naam))}
- ${escapeHtml(item.cat)}
+ ${escapeHtml(displayCategory(item.cat))}
@@ -3924,30 +4111,26 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
});
}
- function openAddToMealForMoment(momentId) {
- // Open a mini search-to-add flow from diary
- switchTab('zoeken');
- // Give user a hint
- const moment = EETMOMENTEN.find(m => m.id === momentId);
- showToast(`Selecteer een voedingsmiddel voor ${moment.name}`);
- // Store the target moment so next food tap adds to it
- window._targetMoment = momentId;
+ function clearAddContext() {
+ window._targetMoment = null;
+ const banner = document.getElementById('addContextBanner');
+ if (banner) banner.classList.add('hidden');
+ }
- // Use event delegation so dynamically loaded items also work
- const listEl = document.getElementById('foodList');
- const handler = (e) => {
- const itemEl = e.target.closest('.food-item');
- if (!itemEl) return;
- const idx = parseInt(itemEl.dataset.index);
- if (idx >= 0 && idx < voedingsmiddelen.length && window._targetMoment) {
- e.stopPropagation();
- e.preventDefault();
- showAddToMeal(voedingsmiddelen[idx], window._targetMoment);
- window._targetMoment = null;
- listEl.removeEventListener('click', handler);
- }
- };
- listEl.addEventListener('click', handler);
+ function openAddToMealForMoment(momentId) {
+ // Navigate to search page with eetmoment context
+ switchTab('zoeken');
+ const moment = EETMOMENTEN.find(m => m.id === momentId);
+ if (!moment) return;
+ // Store the target moment so clicking a food item adds to it
+ window._targetMoment = momentId;
+ // Show visual context banner instead of toast
+ const banner = document.getElementById('addContextBanner');
+ const textEl = document.getElementById('addContextText');
+ if (banner && textEl) {
+ textEl.innerHTML = ` Voeg toe aan: ${moment.icon} ${moment.name}`;
+ banner.classList.remove('hidden');
+ }
}
function addToMeal(item, portie, momentId) {
@@ -4220,7 +4403,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
${escapeHtml(displayNaam(mealItem.item.naam))}
- ${escapeHtml(mealItem.item.cat || '')} · ${formatKh(itemKh)} g kh
+ ${escapeHtml(displayCategory(mealItem.item.cat || ''))} · ${formatKh(itemKh)} g kh
@@ -4323,6 +4506,8 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
// ===== Tab Switching =====
function switchTab(tab) {
+ // Clear add-to-moment context when switching tabs
+ clearAddContext();
activeTab = tab;
const panels = ['tabZoeken','tabDagboek','tabMaaltijden'];
@@ -4870,7 +5055,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
${escapeHtml(displayNaam(e.item.naam))}
- ${escapeHtml(e.item.cat)} · ${ikh} g kh
+ ${escapeHtml(displayCategory(e.item.cat))} · ${ikh} g kh
@@ -5200,7 +5385,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
@@ -2650,6 +2701,22 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
return CATEGORY_MAP[itemCat] || 'Overig';
}
+ // Map internal category names to user-friendly display labels
+ const CATEGORY_DISPLAY = {
+ 'Brood': 'Brood',
+ 'Zuivel': 'Zuivel',
+ 'Fruit': 'Fruit',
+ 'Groente': 'Groente',
+ 'Vlees/Vis': 'Vlees/Vis',
+ 'Dranken': 'Dranken',
+ 'Tussendoortjes': 'Tussendoor',
+ 'Snoep/Koek': 'Snoep/Koek',
+ 'Overig': 'Overig',
+ };
+ function displayCategory(cat) {
+ return CATEGORY_DISPLAY[cat] || cat || '';
+ }
+
// ===== Prikmomenten voor glucose =====
const PRICKMOMENTEN = [
{ key: 'nuchter', label: 'Nuchter (voor ontbijt)', targetMin: 0, targetMax: 5.4, momentId: null },
@@ -2730,6 +2797,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
// ===== State =====
let voedingsmiddelen = [];
+ const voedingsmiddelenByN = new Map(); // n → item, for click-handler lookup
let dagboek = {}; // { "2026-07-23": { "Ontbijt": [{item, portie}, ...], ... } }
let activeDate = formatDate(new Date());
let activeTab = 'zoeken';
@@ -2740,9 +2808,12 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
let dataLoaded = false;
let maaltijden = []; // [{ id, naam, items: [{item, portie}, ...], khTotaal }]
let glucose = {}; // { '2026-07-24': { nuchter: 5.1, naOntbijt: 6.2, naLunch: null, naAvondeten: null } }
- const SEARCH_PAGE_SIZE = 50;
+ const SEARCH_PAGE_SIZE = 200;
let searchVisibleCount = SEARCH_PAGE_SIZE;
let searchObserver = null;
+ let searchTotal = 0; // total matching items from API
+ let searchPage = 1; // current API page (1-based)
+ let isSearchLoading = false;
// ===== Utility Functions =====
function formatDate(d) {
@@ -3110,6 +3181,10 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
const data = await response.json();
if (Array.isArray(data) && data.length > 0) {
voedingsmiddelen = data;
+ // Build lookup map by NEVO number (n)
+ for (const item of data) {
+ if (item.n != null) voedingsmiddelenByN.set(item.n, item);
+ }
buildSearchIndex();
console.log(`✅ ${data.length} voedingsmiddelen geladen uit data/voedingsmiddelen.json`);
} else {
@@ -3118,6 +3193,9 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
} catch (err) {
console.warn('⚠️ Externe data niet geladen, gebruik sample data:', err.message);
voedingsmiddelen = [...SAMPLE_DATA];
+ for (const item of voedingsmiddelen) {
+ if (item.n != null) voedingsmiddelenByN.set(item.n, item);
+ }
buildSearchIndex();
// Show error only if we haven't loaded data before
if (!dataLoaded) {
@@ -3281,11 +3359,30 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
}
// ===== Rendering =====
- function renderZoeken() {
+
+ /** Fetch a paginated page of food items from the API */
+ async function fetchFoodPage(q, cat, page, limit) {
+ const params = new URLSearchParams();
+ if (q) params.set('q', q);
+ if (cat) params.set('cat', cat);
+ params.set('page', String(page));
+ params.set('limit', String(limit));
+ const url = `/api/food?${params.toString()}`;
+ try {
+ const resp = await fetch(url);
+ if (!resp.ok) throw new Error('API returned ' + resp.status);
+ const json = await resp.json();
+ return { data: json.data || [], total: json.total || 0 };
+ } catch (e) {
+ console.warn('API fetch mislukt, fallback naar lokale data:', e.message);
+ return null;
+ }
+ }
+
+ async function renderZoeken() {
if (!dataLoaded) return;
if (activeTab !== 'zoeken') return;
- const items = getFilteredItems();
const listEl = document.getElementById('foodList');
const countEl = document.getElementById('resultsCount');
const emptyEl = document.getElementById('emptyState');
@@ -3293,35 +3390,70 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
// Reset pagination on new search/filter
searchVisibleCount = SEARCH_PAGE_SIZE;
+ searchPage = 1;
disconnectSearchObserver();
- // Show results count
- countEl.textContent = items.length === 0
- ? 'Geen resultaten'
- : `${items.length} ${items.length === 1 ? 'resultaat' : 'resultaten'}`;
+ // Try API first, fall back to local filtering
+ const apiResult = await fetchFoodPage(searchQuery, selectedCategory, 1, SEARCH_PAGE_SIZE);
+ if (apiResult) {
+ // API mode: use paginated results
+ searchTotal = apiResult.total;
+ const items = apiResult.data;
- // Render list
- if (items.length === 0) {
- listEl.innerHTML = '';
- emptyEl.classList.remove('hidden');
- sentinelEl.classList.add('hidden');
- return;
- }
+ // Show results count
+ countEl.textContent = items.length === 0
+ ? 'Geen resultaten'
+ : `${searchTotal} ${searchTotal === 1 ? 'resultaat' : 'resultaten'}`;
- emptyEl.classList.add('hidden');
+ if (items.length === 0) {
+ listEl.innerHTML = '';
+ emptyEl.classList.remove('hidden');
+ sentinelEl.classList.add('hidden');
+ return;
+ }
- // Render first batch
- const batch = items.slice(0, SEARCH_PAGE_SIZE);
- listEl.innerHTML = renderFoodItemsHtml(batch, 0);
- attachFoodItemHandlers(listEl);
+ emptyEl.classList.add('hidden');
- // Setup infinite scroll if more items exist
- if (items.length > SEARCH_PAGE_SIZE) {
- sentinelEl.classList.remove('hidden');
- setupSearchObserver(items);
+ // Render first batch
+ listEl.innerHTML = renderFoodItemsHtml(items, 0);
+ attachFoodItemHandlers(listEl);
+
+ // Setup infinite scroll if more items exist
+ if (searchVisibleCount < searchTotal) {
+ sentinelEl.classList.remove('hidden');
+ setupSearchObserver();
+ } else {
+ sentinelEl.classList.add('hidden');
+ disconnectSearchObserver();
+ }
} else {
- sentinelEl.classList.add('hidden');
- disconnectSearchObserver();
+ // Fallback mode: use local data (original behaviour)
+ const items = getFilteredItems();
+
+ countEl.textContent = items.length === 0
+ ? 'Geen resultaten'
+ : `${items.length} ${items.length === 1 ? 'resultaat' : 'resultaten'}`;
+
+ if (items.length === 0) {
+ listEl.innerHTML = '';
+ emptyEl.classList.remove('hidden');
+ sentinelEl.classList.add('hidden');
+ return;
+ }
+
+ emptyEl.classList.add('hidden');
+
+ const batch = items.slice(0, SEARCH_PAGE_SIZE);
+ listEl.innerHTML = renderFoodItemsHtml(batch, 0);
+ attachFoodItemHandlers(listEl);
+
+ if (items.length > SEARCH_PAGE_SIZE) {
+ sentinelEl.classList.remove('hidden');
+ setupSearchObserver();
+ } else {
+ sentinelEl.classList.add('hidden');
+ disconnectSearchObserver();
+ }
}
}
@@ -3331,10 +3463,10 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
// Cap --i at batch size: max animation delay = 49 × 50ms = 2.45s
const animIdx = idx % SEARCH_PAGE_SIZE;
return `
-
+
${escapeHtml(displayNaam(entry.item.naam))}
- ${escapeHtml(entry.item.cat)} · ${formatKh(itemKh)} g kh
+ ${escapeHtml(displayCategory(entry.item.cat))} · ${formatKh(itemKh)} g kh
@@ -5343,7 +5528,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
resultsEl.innerHTML = matches.map((item, i) => `
`).join('');
resultsEl.querySelectorAll('.meal-search-item').forEach(el => {
@@ -5601,6 +5786,9 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
renderZoeken();
});
+ // Cancel add-to-moment context banner
+ document.getElementById('addContextCancel').addEventListener('click', clearAddContext);
+
// Tab navigation
document.getElementById('navZoeken').addEventListener('click', () => switchTab('zoeken'));
document.getElementById('navDagboek').addEventListener('click', () => switchTab('dagboek'));
diff --git a/index.html b/index.html
index 6ffdc3b..61c7c4e 100644
--- a/index.html
+++ b/index.html
@@ -257,6 +257,51 @@ body {
width: 100%;
}
+.add-context-banner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background: var(--primary);
+ color: #fff;
+ padding: 10px 14px;
+ margin: 0 16px 10px;
+ border-radius: 10px;
+ font-weight: 500;
+ font-size: 0.92rem;
+ animation: slideDown 0.25s ease-out both;
+}
+.add-context-banner.hidden {
+ display: none;
+}
+.add-context-banner .add-context-cancel {
+ background: rgba(255,255,255,0.2);
+ border: none;
+ color: #fff;
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.85rem;
+ transition: background 0.15s;
+}
+.add-context-banner .add-context-cancel:hover {
+ background: rgba(255,255,255,0.35);
+}
+.add-context-banner .add-context-cancel:active {
+ background: rgba(255,255,255,0.5);
+}
+.add-context-banner .add-context-cancel i {
+ pointer-events: none;
+}
+
+@keyframes slideDown {
+ from { opacity: 0; transform: translateY(-8px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
.search-loading {
display: flex;
justify-content: center;
@@ -2414,6 +2459,12 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
+
+
+
${escapeHtml(displayNaam(item.naam))}
- ${escapeHtml(item.cat)} · ${escapeHtml(item.kh)} g kh/100g
+ ${escapeHtml(displayCategory(item.cat))} · ${escapeHtml(item.kh)} g kh/100g
${escapeHtml(displayNaam(item.naam))}
- ${escapeHtml(item.cat)}
+ ${escapeHtml(displayCategory(item.cat))}
${formatKh(kh)}
@@ -3352,28 +3484,71 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
if (el._clickAttached) return;
el._clickAttached = true;
el.addEventListener('click', () => {
- const idx = parseInt(el.dataset.index);
- if (idx >= 0 && idx < voedingsmiddelen.length) {
- showDetail(voedingsmiddelen[idx]);
+ const nummer = el.dataset.nummer;
+ if (!nummer || !voedingsmiddelenByN.has(nummer)) {
+ // If the item is not in the local lookup (e.g. pure API item),
+ // try finding by index in the food list as last resort
+ const items = listEl.querySelectorAll('.food-item');
+ const idx = Array.from(items).indexOf(el);
+ if (idx >= 0) {
+ showToast('Item niet gevonden in lokale data');
+ }
+ return;
+ }
+ const item = voedingsmiddelenByN.get(nummer);
+ // If in add-to-moment mode, go directly to add modal with preselected moment
+ if (window._targetMoment) {
+ showAddToMeal(item, window._targetMoment);
+ } else {
+ showDetail(item);
}
});
});
}
- function setupSearchObserver(allItems) {
+ function setupSearchObserver() {
disconnectSearchObserver();
const sentinel = document.getElementById('searchSentinel');
if (!sentinel) return;
- searchObserver = new IntersectionObserver((entries) => {
- if (entries[0].isIntersecting) {
- // Load up to 3 batches at once when user scrolls fast
- // This keeps the sentinel pushed far ahead of the viewport
- let batchesLoaded = 0;
- const maxBatches = 3;
- while (batchesLoaded < maxBatches && searchVisibleCount < allItems.length) {
- appendSearchBatch(allItems);
- batchesLoaded++;
+ searchObserver = new IntersectionObserver(async (entries) => {
+ if (entries[0].isIntersecting && !isSearchLoading) {
+ isSearchLoading = true;
+ try {
+ if (searchTotal > 0) {
+ // API mode: fetch next page
+ const nextPage = searchPage + 1;
+ const apiResult = await fetchFoodPage(searchQuery, selectedCategory, nextPage, SEARCH_PAGE_SIZE);
+ if (apiResult && apiResult.data.length > 0) {
+ appendSearchBatchFromApi(apiResult.data);
+ searchPage = nextPage;
+ // All items loaded — hide sentinel and disconnect
+ if (searchVisibleCount >= searchTotal) {
+ disconnectSearchObserver();
+ const sentinelEl = document.getElementById('searchSentinel');
+ if (sentinelEl) sentinelEl.classList.add('hidden');
+ }
+ } else if (!apiResult) {
+ // API failed — try fallback from local data if available
+ const fallbackItems = getFilteredItems();
+ if (searchVisibleCount < fallbackItems.length) {
+ appendSearchBatchLocal(fallbackItems);
+ }
+ } else {
+ // API returned empty — all done
+ disconnectSearchObserver();
+ const sentinelEl = document.getElementById('searchSentinel');
+ if (sentinelEl) sentinelEl.classList.add('hidden');
+ }
+ } else {
+ // Fallback mode: slice from local filtered items
+ const fallbackItems = getFilteredItems();
+ if (searchVisibleCount < fallbackItems.length) {
+ appendSearchBatchLocal(fallbackItems);
+ }
+ }
+ } finally {
+ isSearchLoading = false;
}
}
}, { rootMargin: '1200px' });
@@ -3381,7 +3556,17 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
searchObserver.observe(sentinel);
}
- function appendSearchBatch(allItems) {
+ function appendSearchBatchFromApi(items) {
+ const listEl = document.getElementById('foodList');
+ const sentinelEl = document.getElementById('searchSentinel');
+ if (!listEl) return;
+
+ listEl.insertAdjacentHTML('beforeend', renderFoodItemsHtml(items, searchVisibleCount));
+ attachFoodItemHandlers(listEl);
+ searchVisibleCount += items.length;
+ }
+
+ function appendSearchBatchLocal(allItems) {
const listEl = document.getElementById('foodList');
const sentinelEl = document.getElementById('searchSentinel');
if (!listEl || !sentinelEl) return;
@@ -3415,6 +3600,8 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
function resetSearchPagination() {
searchVisibleCount = SEARCH_PAGE_SIZE;
+ searchPage = 1;
+ searchTotal = 0;
disconnectSearchObserver();
}
@@ -3751,7 +3938,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
body.innerHTML = `
${escapeHtml(displayNaam(item.naam))}
- ${escapeHtml(item.cat)}
+ ${escapeHtml(displayCategory(item.cat))}
@@ -3924,30 +4111,26 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
});
}
- function openAddToMealForMoment(momentId) {
- // Open a mini search-to-add flow from diary
- switchTab('zoeken');
- // Give user a hint
- const moment = EETMOMENTEN.find(m => m.id === momentId);
- showToast(`Selecteer een voedingsmiddel voor ${moment.name}`);
- // Store the target moment so next food tap adds to it
- window._targetMoment = momentId;
+ function clearAddContext() {
+ window._targetMoment = null;
+ const banner = document.getElementById('addContextBanner');
+ if (banner) banner.classList.add('hidden');
+ }
- // Use event delegation so dynamically loaded items also work
- const listEl = document.getElementById('foodList');
- const handler = (e) => {
- const itemEl = e.target.closest('.food-item');
- if (!itemEl) return;
- const idx = parseInt(itemEl.dataset.index);
- if (idx >= 0 && idx < voedingsmiddelen.length && window._targetMoment) {
- e.stopPropagation();
- e.preventDefault();
- showAddToMeal(voedingsmiddelen[idx], window._targetMoment);
- window._targetMoment = null;
- listEl.removeEventListener('click', handler);
- }
- };
- listEl.addEventListener('click', handler);
+ function openAddToMealForMoment(momentId) {
+ // Navigate to search page with eetmoment context
+ switchTab('zoeken');
+ const moment = EETMOMENTEN.find(m => m.id === momentId);
+ if (!moment) return;
+ // Store the target moment so clicking a food item adds to it
+ window._targetMoment = momentId;
+ // Show visual context banner instead of toast
+ const banner = document.getElementById('addContextBanner');
+ const textEl = document.getElementById('addContextText');
+ if (banner && textEl) {
+ textEl.innerHTML = ` Voeg toe aan: ${moment.icon} ${moment.name}`;
+ banner.classList.remove('hidden');
+ }
}
function addToMeal(item, portie, momentId) {
@@ -4220,7 +4403,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
${escapeHtml(displayNaam(mealItem.item.naam))}
- ${escapeHtml(mealItem.item.cat || '')} · ${formatKh(itemKh)} g kh
+ ${escapeHtml(displayCategory(mealItem.item.cat || ''))} · ${formatKh(itemKh)} g kh
@@ -4323,6 +4506,8 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
// ===== Tab Switching =====
function switchTab(tab) {
+ // Clear add-to-moment context when switching tabs
+ clearAddContext();
activeTab = tab;
const panels = ['tabZoeken','tabDagboek','tabMaaltijden'];
@@ -4870,7 +5055,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
${escapeHtml(displayNaam(e.item.naam))}
- ${escapeHtml(e.item.cat)} · ${ikh} g kh
+ ${escapeHtml(displayCategory(e.item.cat))} · ${ikh} g kh
@@ -5200,7 +5385,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
${escapeHtml(displayNaam(entry.item.naam))}
- ${escapeHtml(entry.item.cat)} · ${formatKh(itemKh)} g kh
+ ${escapeHtml(displayCategory(entry.item.cat))} · ${formatKh(itemKh)} g kh
@@ -5343,7 +5528,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
resultsEl.innerHTML = matches.map((item, i) => `
`).join('');
resultsEl.querySelectorAll('.meal-search-item').forEach(el => {
@@ -5601,6 +5786,9 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
renderZoeken();
});
+ // Cancel add-to-moment context banner
+ document.getElementById('addContextCancel').addEventListener('click', clearAddContext);
+
// Tab navigation
document.getElementById('navZoeken').addEventListener('click', () => switchTab('zoeken'));
document.getElementById('navDagboek').addEventListener('click', () => switchTab('dagboek'));
${escapeHtml(displayNaam(item.naam))}
- ${escapeHtml(item.cat)} · ${escapeHtml(item.kh)} g kh/100g
+ ${escapeHtml(displayCategory(item.cat))} · ${escapeHtml(item.kh)} g kh/100g