Archibald/karby
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: design-conforme bevestigingsmodal + maaltijd verplaatsen/verwijderen uit dagboek

Browse source 
- showConfirmModal vervangt alle confirm() calls met Karby-design modal
- Opslagen maaltijden verwijderen via bevestigingsmodal
- Dagboek: hele maaltijd-groep verwijderen (niet alleen losse items)
- Dagboek: maaltijd verplaatsen naar ander eetmoment
- Delete-knop styling: rode rand + rode tekst
This commit is contained in:
cas 2026-07-24 02:30:24 +02:00
parent b0833297b4
commit 423977e397
2 changed files with 279 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

156
docker/index.html
View file

@ -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-
<div class="eetmoment-meal-items-wrap">${mealItemsHtml}</div>
<div class="eetmoment-meal-actions">
<button class="eetmoment-meal-action-btn" data-action="edit-porties" data-entry="${i}" data-moment="${moment.id}">
<i class="fas fa-pen"></i> Porties wijzigen
<i class="fas fa-pen"></i> Porties
</button>
<button class="eetmoment-meal-action-btn" data-action="move-meal" data-entry="${i}" data-moment="${moment.id}">
<i class="fas fa-arrow-right"></i> Verplaatsen
</button>
<button class="eetmoment-meal-action-btn eetmoment-delete" data-action="delete-meal" data-entry="${i}" data-moment="${moment.id}">
<i class="fas fa-trash"></i> Verwijderen
</button>
</div>
</li>
@ -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 =>
`<option value="${m.id}" ${m.id === momentId ? 'selected' : ''}>${m.icon} ${m.name}</option>`
).join('');
overlay.innerHTML = `
<div class="modal-sheet" style="max-width:360px;border-radius:var(--radius);margin:auto;max-height:none;padding:0;">
<div class="modal-handle"></div>
<div class="modal-header"><h2 class="modal-title">Verplaatsen naar</h2></div>
<div class="modal-body" style="padding:0 20px 20px;">
<select class="add-meal-select" id="moveTarget">${options}</select>
<div style="display:flex;gap:10px;margin-top:16px;">
<button class="btn btn-outline" style="flex:1;" id="moveCancel">Annuleren</button>
<button class="btn" style="flex:1;" id="moveOk">Verplaatsen</button>
</div>
</div>
</div>
`;
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 = `
<div class="modal-sheet" style="max-width:360px;border-radius:var(--radius);margin:auto;max-height:none;padding:0;">
<div class="modal-handle"></div>
<div class="modal-header">
<h2 class="modal-title">${escapeHtml(title)}</h2>
</div>
<div class="modal-body" style="text-align:center;padding:0 20px 20px;">
<p style="color:var(--text-muted);font-size:var(--font-base);margin:0;">${escapeHtml(message)}</p>
</div>
<div style="display:flex;gap:10px;padding:0 20px 20px;">
<button class="btn btn-outline" style="flex:1;" id="confirmCancel">Annuleren</button>
<button class="btn" style="flex:1;background:var(--danger, #e74c3c);color:white;" id="confirmOk">Verwijderen</button>
</div>
</div>
`;
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();
});
});
}

151
index.html
View file

@ -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-
<div class="eetmoment-meal-items-wrap">${mealItemsHtml}</div>
<div class="eetmoment-meal-actions">
<button class="eetmoment-meal-action-btn" data-action="edit-porties" data-entry="${i}" data-moment="${moment.id}">
<i class="fas fa-pen"></i> Porties wijzigen
<i class="fas fa-pen"></i> Porties
</button>
<button class="eetmoment-meal-action-btn" data-action="move-meal" data-entry="${i}" data-moment="${moment.id}">
<i class="fas fa-arrow-right"></i> Verplaatsen
</button>
<button class="eetmoment-meal-action-btn eetmoment-delete" data-action="delete-meal" data-entry="${i}" data-moment="${moment.id}">
<i class="fas fa-trash"></i> Verwijderen
</button>
</div>
</li>
@ -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 =>
`<option value="${m.id}" ${m.id === momentId ? 'selected' : ''}>${m.icon} ${m.name}</option>`
).join('');
overlay.innerHTML = `
<div class="modal-sheet" style="max-width:360px;border-radius:var(--radius);margin:auto;max-height:none;padding:0;">
<div class="modal-handle"></div>
<div class="modal-header"><h2 class="modal-title">Verplaatsen naar</h2></div>
<div class="modal-body" style="padding:0 20px 20px;">
<select class="add-meal-select" id="moveTarget">${options}</select>
<div style="display:flex;gap:10px;margin-top:16px;">
<button class="btn btn-outline" style="flex:1;" id="moveCancel">Annuleren</button>
<button class="btn" style="flex:1;" id="moveOk">Verplaatsen</button>
</div>
</div>
</div>
`;
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 = `
<div class="modal-sheet" style="max-width:360px;border-radius:var(--radius);margin:auto;max-height:none;padding:0;">
<div class="modal-handle"></div>
<div class="modal-header">
<h2 class="modal-title">${escapeHtml(title)}</h2>
</div>
<div class="modal-body" style="text-align:center;padding:0 20px 20px;">
<p style="color:var(--text-muted);font-size:var(--font-base);margin:0;">${escapeHtml(message)}</p>
</div>
<div style="display:flex;gap:10px;padding:0 20px 20px;">
<button class="btn btn-outline" style="flex:1;" id="confirmCancel">Annuleren</button>
<button class="btn" style="flex:1;background:var(--danger, #e74c3c);color:white;" id="confirmOk">Verwijderen</button>
</div>
</div>
`;
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();
});
});
}