diff --git a/docker/index.html b/docker/index.html
index dd4a32c..d0331cc 100644
--- a/docker/index.html
+++ b/docker/index.html
@@ -1181,6 +1181,13 @@ body {
background: var(--primary-light);
border-color: var(--primary);
}
+.eetmoment-meal-action-btn.eetmoment-delete {
+ color: var(--danger, #e74c3c);
+ border-color: var(--danger, #e74c3c);
+}
+.eetmoment-meal-action-btn.eetmoment-delete:active {
+ background: #fdeaea;
+}
/* ===== Inline portion edit ===== */
.portion-display {
@@ -1941,7 +1948,8 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
/* -- Toast notification -- */
.toast {
position: fixed;
- bottom: 80px;
+ top: auto;
+ bottom: auto;
right: 16px;
max-width: calc(100% - 32px);
background: var(--text);
@@ -2505,6 +2513,12 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
toast.className = 'toast';
toast.textContent = 'Offline modus — sample data gebruikt';
document.getElementById('toastContainer').appendChild(toast);
+ // Position at last click Y or default bottom
+ const y2 = lastClickY || window.innerHeight - 120;
+ const h2 = toast.offsetHeight || 50;
+ const maxY2 = window.innerHeight - h2 - 16;
+ toast.style.top = Math.min(Math.max(y2, 16), maxY2) + 'px';
+ toast.style.bottom = 'auto';
setTimeout(() => toast.remove(), 2000);
}
}
@@ -2810,7 +2824,13 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
${mealItemsHtml}
+
+
@@ -2921,6 +2941,72 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
});
});
+ // Delete meal group from diary
+ listEl.querySelectorAll('[data-action="delete-meal"]').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ const momentId = btn.dataset.moment;
+ const entryIdx = parseInt(btn.dataset.entry);
+ const dayData = getOrCreateDay(activeDate);
+ const entry = (dayData[momentId] || [])[entryIdx];
+ const mealName = (entry && entry.mealNaam) || 'maaltijd';
+ showConfirmModal('Maaltijd verwijderen',
+ 'Deze hele maaltijd verwijderen uit je dagboek?',
+ () => {
+ dayData[momentId].splice(entryIdx, 1);
+ saveDagboek();
+ renderDagboek();
+ });
+ });
+ });
+
+ // Move meal group to different eetmoment
+ listEl.querySelectorAll('[data-action="move-meal"]').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ const momentId = btn.dataset.moment;
+ const entryIdx = parseInt(btn.dataset.entry);
+ const overlay = document.createElement('div');
+ overlay.className = 'modal-overlay';
+ overlay.style.zIndex = '500';
+ const options = EETMOMENTEN.map(m =>
+ ``
+ ).join('');
+ overlay.innerHTML = `
+
+
+
+
+
+
+
+
+
+
+
+ `;
+ document.body.appendChild(overlay);
+ const close = () => {
+ overlay.classList.add('closing');
+ setTimeout(() => overlay.remove(), 250);
+ };
+ overlay.querySelector('#moveCancel').addEventListener('click', close);
+ overlay.querySelector('#moveOk').addEventListener('click', () => {
+ const target = overlay.querySelector('#moveTarget').value;
+ const dayData = getOrCreateDay(activeDate);
+ const entry = (dayData[momentId] || [])[entryIdx];
+ if (!entry) return close();
+ dayData[momentId].splice(entryIdx, 1);
+ if (!dayData[target]) dayData[target] = [];
+ dayData[target].push(entry);
+ saveDagboek();
+ close();
+ renderDagboek();
+ });
+ overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); });
+ });
+ });
+
listEl.querySelectorAll('.eetmoment-add-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
@@ -3901,11 +3987,13 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
e.stopPropagation();
const idx = parseInt(btn.dataset.idx);
const meal = maaltijden[idx];
- if (confirm('Maaltijd "' + meal.naam + '" verwijderen?')) {
- maaltijden.splice(idx, 1);
- saveMaaltijden();
- renderMaaltijden();
- }
+ showConfirmModal('Maaltijd verwijderen',
+ 'Weet je zeker dat je "' + meal.naam + '" wilt verwijderen?',
+ () => {
+ maaltijden.splice(idx, 1);
+ saveMaaltijden();
+ renderMaaltijden();
+ });
});
});
@@ -4141,10 +4229,10 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
toast.textContent = message;
container.appendChild(toast);
// Position at last click Y, or default bottom
- const y = lastClickY || window.innerHeight - 120;
+ const y = lastClickY != null ? lastClickY : window.innerHeight - 120;
const h = toast.offsetHeight || 50;
const maxY = window.innerHeight - h - 16;
- const top = Math.min(y, maxY);
+ const top = Math.min(Math.max(y, 16), maxY);
toast.style.top = top + 'px';
toast.style.bottom = 'auto';
setTimeout(() => {
@@ -4153,6 +4241,42 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
}, 2000);
}
+ function showConfirmModal(title, message, onConfirm) {
+ const overlay = document.createElement('div');
+ overlay.className = 'modal-overlay';
+ overlay.style.zIndex = '500';
+ overlay.innerHTML = `
+
+
+
+
+
${escapeHtml(message)}
+
+
+
+
+
+
+ `;
+ document.body.appendChild(overlay);
+
+ const close = () => {
+ overlay.classList.add('closing');
+ setTimeout(() => overlay.remove(), 250);
+ };
+
+ overlay.querySelector('#confirmCancel').addEventListener('click', close);
+ overlay.querySelector('#confirmOk').addEventListener('click', () => {
+ close();
+ onConfirm();
+ });
+ overlay.addEventListener('click', (e) => {
+ if (e.target === overlay) close();
+ });
+ }
+
function showNameInputModal(title, defaultValue, onSave) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
@@ -4457,12 +4581,14 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
overlay.querySelector('#mealEditSave').addEventListener('click', save);
overlay.querySelector('#mealEditDelete').addEventListener('click', () => {
- if (confirm('Weet je zeker dat je "' + meal.naam + '" wilt verwijderen?')) {
- maaltijden.splice(idx, 1);
- saveMaaltijden();
- close();
- renderMaaltijden();
- }
+ showConfirmModal('Maaltijd verwijderen',
+ 'Weet je zeker dat je "' + meal.naam + '" wilt verwijderen?',
+ () => {
+ maaltijden.splice(idx, 1);
+ saveMaaltijden();
+ close();
+ renderMaaltijden();
+ });
});
}
diff --git a/index.html b/index.html
index bcf750a..d0331cc 100644
--- a/index.html
+++ b/index.html
@@ -1181,6 +1181,13 @@ body {
background: var(--primary-light);
border-color: var(--primary);
}
+.eetmoment-meal-action-btn.eetmoment-delete {
+ color: var(--danger, #e74c3c);
+ border-color: var(--danger, #e74c3c);
+}
+.eetmoment-meal-action-btn.eetmoment-delete:active {
+ background: #fdeaea;
+}
/* ===== Inline portion edit ===== */
.portion-display {
@@ -2506,6 +2513,12 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
toast.className = 'toast';
toast.textContent = 'Offline modus — sample data gebruikt';
document.getElementById('toastContainer').appendChild(toast);
+ // Position at last click Y or default bottom
+ const y2 = lastClickY || window.innerHeight - 120;
+ const h2 = toast.offsetHeight || 50;
+ const maxY2 = window.innerHeight - h2 - 16;
+ toast.style.top = Math.min(Math.max(y2, 16), maxY2) + 'px';
+ toast.style.bottom = 'auto';
setTimeout(() => toast.remove(), 2000);
}
}
@@ -2811,7 +2824,13 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
${mealItemsHtml}
+
+
@@ -2922,6 +2941,72 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
});
});
+ // Delete meal group from diary
+ listEl.querySelectorAll('[data-action="delete-meal"]').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ const momentId = btn.dataset.moment;
+ const entryIdx = parseInt(btn.dataset.entry);
+ const dayData = getOrCreateDay(activeDate);
+ const entry = (dayData[momentId] || [])[entryIdx];
+ const mealName = (entry && entry.mealNaam) || 'maaltijd';
+ showConfirmModal('Maaltijd verwijderen',
+ 'Deze hele maaltijd verwijderen uit je dagboek?',
+ () => {
+ dayData[momentId].splice(entryIdx, 1);
+ saveDagboek();
+ renderDagboek();
+ });
+ });
+ });
+
+ // Move meal group to different eetmoment
+ listEl.querySelectorAll('[data-action="move-meal"]').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ const momentId = btn.dataset.moment;
+ const entryIdx = parseInt(btn.dataset.entry);
+ const overlay = document.createElement('div');
+ overlay.className = 'modal-overlay';
+ overlay.style.zIndex = '500';
+ const options = EETMOMENTEN.map(m =>
+ ``
+ ).join('');
+ overlay.innerHTML = `
+
+
+
+
+
+
+
+
+
+
+
+ `;
+ document.body.appendChild(overlay);
+ const close = () => {
+ overlay.classList.add('closing');
+ setTimeout(() => overlay.remove(), 250);
+ };
+ overlay.querySelector('#moveCancel').addEventListener('click', close);
+ overlay.querySelector('#moveOk').addEventListener('click', () => {
+ const target = overlay.querySelector('#moveTarget').value;
+ const dayData = getOrCreateDay(activeDate);
+ const entry = (dayData[momentId] || [])[entryIdx];
+ if (!entry) return close();
+ dayData[momentId].splice(entryIdx, 1);
+ if (!dayData[target]) dayData[target] = [];
+ dayData[target].push(entry);
+ saveDagboek();
+ close();
+ renderDagboek();
+ });
+ overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); });
+ });
+ });
+
listEl.querySelectorAll('.eetmoment-add-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
@@ -3902,11 +3987,13 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
e.stopPropagation();
const idx = parseInt(btn.dataset.idx);
const meal = maaltijden[idx];
- if (confirm('Maaltijd "' + meal.naam + '" verwijderen?')) {
- maaltijden.splice(idx, 1);
- saveMaaltijden();
- renderMaaltijden();
- }
+ showConfirmModal('Maaltijd verwijderen',
+ 'Weet je zeker dat je "' + meal.naam + '" wilt verwijderen?',
+ () => {
+ maaltijden.splice(idx, 1);
+ saveMaaltijden();
+ renderMaaltijden();
+ });
});
});
@@ -4142,7 +4229,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
toast.textContent = message;
container.appendChild(toast);
// Position at last click Y, or default bottom
- const y = lastClickY || window.innerHeight - 120;
+ const y = lastClickY != null ? lastClickY : window.innerHeight - 120;
const h = toast.offsetHeight || 50;
const maxY = window.innerHeight - h - 16;
const top = Math.min(Math.max(y, 16), maxY);
@@ -4154,6 +4241,42 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
}, 2000);
}
+ function showConfirmModal(title, message, onConfirm) {
+ const overlay = document.createElement('div');
+ overlay.className = 'modal-overlay';
+ overlay.style.zIndex = '500';
+ overlay.innerHTML = `
+
+
+
+
+
${escapeHtml(message)}
+
+
+
+
+
+
+ `;
+ document.body.appendChild(overlay);
+
+ const close = () => {
+ overlay.classList.add('closing');
+ setTimeout(() => overlay.remove(), 250);
+ };
+
+ overlay.querySelector('#confirmCancel').addEventListener('click', close);
+ overlay.querySelector('#confirmOk').addEventListener('click', () => {
+ close();
+ onConfirm();
+ });
+ overlay.addEventListener('click', (e) => {
+ if (e.target === overlay) close();
+ });
+ }
+
function showNameInputModal(title, defaultValue, onSave) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
@@ -4458,12 +4581,14 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
overlay.querySelector('#mealEditSave').addEventListener('click', save);
overlay.querySelector('#mealEditDelete').addEventListener('click', () => {
- if (confirm('Weet je zeker dat je "' + meal.naam + '" wilt verwijderen?')) {
- maaltijden.splice(idx, 1);
- saveMaaltijden();
- close();
- renderMaaltijden();
- }
+ showConfirmModal('Maaltijd verwijderen',
+ 'Weet je zeker dat je "' + meal.naam + '" wilt verwijderen?',
+ () => {
+ maaltijden.splice(idx, 1);
+ saveMaaltijden();
+ close();
+ renderMaaltijden();
+ });
});
}