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 = ` + + `; + 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 = ` + + `; + 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(); + }); }); }