fix: event-delegatie voor meal-group acties (move/delete/toggle werken nu) + dialog-knoppen gebruiken bestaande Karby-classes (btn-cancel, btn-save, btn-danger-outline) + e2e test voor confirm modal

docker/index.html

@@ -2913,40 +2913,32 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
       });
     });
 
-    // Meal group toggle collaps/expand
+    // === Unified meal-group action delegation ===
-    listEl.querySelectorAll('[data-action="toggle-meal"]').forEach(el => {
+    listEl.addEventListener('click', (e) => {
-      el.addEventListener('click', () => {
+      const btn = e.target.closest('[data-action]');
-        const group = el.closest('.eetmoment-meal-group');
+      if (!btn) return;
+      const action = btn.dataset.action;
+      const momentId = btn.dataset.moment;
+      const entryIdx = btn.dataset.entry != null ? parseInt(btn.dataset.entry) : null;
+
+      if (action === 'toggle-meal') {
+        const group = btn.closest('.eetmoment-meal-group');
         if (!group) return;
         const wrap = group.querySelector('.eetmoment-meal-items-wrap');
         const actions = group.querySelector('.eetmoment-meal-actions');
         if (wrap) {
           wrap.classList.toggle('hidden');
           if (actions) actions.classList.toggle('hidden');
-          const arrow = el.querySelector('span:last-child i');
+          const arrow = btn.querySelector('span:last-child i');
           if (arrow) {
             arrow.className = wrap.classList.contains('hidden') ? 'fas fa-chevron-down' : 'fas fa-chevron-up';
           }
         }
-      });
+      }
-    });
+      else if (action === 'edit-porties') {
-
-    // Meal group bulk edit button
-    listEl.querySelectorAll('[data-action="edit-porties"]').forEach(btn => {
-      btn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        const momentId = btn.dataset.moment;
-        const entryIdx = parseInt(btn.dataset.entry);
         showBulkPortieEdit(activeDate, momentId, entryIdx);
-      });
+      }
-    });
+      else if (action === 'delete-meal') {
-
-    // 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';
@@ -2957,15 +2949,8 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
             saveDagboek();
             renderDagboek();
           });
-      });
+      }
-    });
+      else if (action === 'move-meal') {
-
-    // 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';
@@ -2979,8 +2964,8 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
             <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-cancel" id="moveCancel">Annuleren</button>
-                <button class="btn" style="flex:1;" id="moveOk">Verplaatsen</button>
+                <button class="btn-save" id="moveOk" style="flex:1;">Verplaatsen</button>
               </div>
             </div>
           </div>
@@ -3003,8 +2988,8 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
           close();
           renderDagboek();
         });
-        overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); });
+        overlay.addEventListener('click', (ev) => { if (ev.target === overlay) close(); });
-      });
+      }
     });
 
     listEl.querySelectorAll('.eetmoment-add-btn').forEach(btn => {
@@ -4255,8 +4240,8 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
           <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-cancel" style="flex:1;" id="confirmCancel">Annuleren</button>
-          <button class="btn" style="flex:1;background:var(--danger, #e74c3c);color:white;" id="confirmOk">Verwijderen</button>
+          <button class="btn-danger-outline" style="flex:1;" id="confirmOk">Verwijderen</button>
         </div>
       </div>
     `;

index.html

@@ -2913,40 +2913,32 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
       });
     });
 
-    // Meal group toggle collaps/expand
+    // === Unified meal-group action delegation ===
-    listEl.querySelectorAll('[data-action="toggle-meal"]').forEach(el => {
+    listEl.addEventListener('click', (e) => {
-      el.addEventListener('click', () => {
+      const btn = e.target.closest('[data-action]');
-        const group = el.closest('.eetmoment-meal-group');
+      if (!btn) return;
+      const action = btn.dataset.action;
+      const momentId = btn.dataset.moment;
+      const entryIdx = btn.dataset.entry != null ? parseInt(btn.dataset.entry) : null;
+
+      if (action === 'toggle-meal') {
+        const group = btn.closest('.eetmoment-meal-group');
         if (!group) return;
         const wrap = group.querySelector('.eetmoment-meal-items-wrap');
         const actions = group.querySelector('.eetmoment-meal-actions');
         if (wrap) {
           wrap.classList.toggle('hidden');
           if (actions) actions.classList.toggle('hidden');
-          const arrow = el.querySelector('span:last-child i');
+          const arrow = btn.querySelector('span:last-child i');
           if (arrow) {
             arrow.className = wrap.classList.contains('hidden') ? 'fas fa-chevron-down' : 'fas fa-chevron-up';
           }
         }
-      });
+      }
-    });
+      else if (action === 'edit-porties') {
-
-    // Meal group bulk edit button
-    listEl.querySelectorAll('[data-action="edit-porties"]').forEach(btn => {
-      btn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        const momentId = btn.dataset.moment;
-        const entryIdx = parseInt(btn.dataset.entry);
         showBulkPortieEdit(activeDate, momentId, entryIdx);
-      });
+      }
-    });
+      else if (action === 'delete-meal') {
-
-    // 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';
@@ -2957,15 +2949,8 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
             saveDagboek();
             renderDagboek();
           });
-      });
+      }
-    });
+      else if (action === 'move-meal') {
-
-    // 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';
@@ -2979,8 +2964,8 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
             <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-cancel" id="moveCancel">Annuleren</button>
-                <button class="btn" style="flex:1;" id="moveOk">Verplaatsen</button>
+                <button class="btn-save" id="moveOk" style="flex:1;">Verplaatsen</button>
               </div>
             </div>
           </div>
@@ -3003,8 +2988,8 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
           close();
           renderDagboek();
         });
-        overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); });
+        overlay.addEventListener('click', (ev) => { if (ev.target === overlay) close(); });
-      });
+      }
     });
 
     listEl.querySelectorAll('.eetmoment-add-btn').forEach(btn => {
@@ -4255,8 +4240,8 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
           <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-cancel" style="flex:1;" id="confirmCancel">Annuleren</button>
-          <button class="btn" style="flex:1;background:var(--danger, #e74c3c);color:white;" id="confirmOk">Verwijderen</button>
+          <button class="btn-danger-outline" style="flex:1;" id="confirmOk">Verwijderen</button>
         </div>
       </div>
     `;

tests/e2e.spec.js

@@ -354,4 +354,48 @@ test.describe('Karby Eetdagboek', () => {
     await expect(chevronUp).toBeVisible();
   });
 
+  // ---------- Confirm + delete dialogs ----------
+
+  test('confirm modal: deletion dialog shows design-conforme buttons', async ({ page }) => {
+    await page.goto(BASE);
+    // Go to maaltijden tab
+    await page.locator('#navMaaltijden').click();
+    await page.waitForTimeout(600);
+    // Quick-save a meal first if none exist (via search)
+    await page.locator('.search-input').fill('brood');
+    await page.waitForTimeout(500);
+    await page.locator('.food-item').first().click();
+    await page.waitForTimeout(500);
+    await page.locator('#detailAddBtn').click();
+    await page.waitForTimeout(500);
+    await page.locator('#addMealSubmit').click();
+    await page.waitForTimeout(600);
+    // Navigate to diary, save as meal
+    await page.locator('#navDagboek').click();
+    await page.waitForTimeout(600);
+    const saveBtn = page.locator('.save-meal-btn');
+    if (await saveBtn.count() === 0) { test.skip(); return; }
+    await saveBtn.first().click();
+    await page.waitForTimeout(500);
+    await page.locator('#mealNameInput').fill('Test');
+    await page.locator('#mealNameSave').click();
+    await page.waitForTimeout(600);
+    // Now go to maaltijden and delete
+    await page.locator('#navMaaltijden').click();
+    await page.waitForTimeout(600);
+    // Open first meal edit
+    await page.locator('.meal-card-main').first().click();
+    await page.waitForTimeout(500);
+    // Click delete
+    const deleteBtn = page.locator('#mealEditDelete');
+    if (await deleteBtn.isVisible().catch(() => false)) {
+      await deleteBtn.click();
+      await page.waitForTimeout(300);
+      // Confirm modal should show
+      await expect(page.locator('#confirmOk')).toBeVisible({ timeout: 3000 });
+      await expect(page.locator('#confirmCancel')).toBeVisible();
+      await page.locator('#confirmCancel').click();
+    }
+  });
+
 });