TIST-39: added ajax to daily meals select

apps/Recipes/Templates/single.php

@@ -12,6 +12,7 @@ the_header(
 ?>
 
 <div id="recipe-id" hidden><?= $context['recipe']->get_id() ?></div>
+<div id="in-usermenu" hidden></div>
 
 <div class="container">
     <div class="single-recipe">

assets/js/single.js

@@ -17,11 +17,30 @@ document.addEventListener('click', (e) => {
 const options = document.querySelectorAll('.dropdown-item');
 
 options.forEach(option => {
-    option.addEventListener('click', () => {
+    option.addEventListener('click', async (e) => {
         const selectedValue = option.getAttribute('data-value');
 
         options.forEach(opt => opt.classList.remove('dropdown-selected'));
 
+        const formData = new FormData();
+        formData.append('action', 'usermenu');
+        formData.append('recipe_id', recipeId);
+        formData.append('dayofweek', selectedValue);
+
+        const response = await fetch('/ajax', {
+            method: 'POST',
+            body: formData
+        });
+
+        const json = await response.json();
+
+        if (!response.ok) {
+            const message = json.error;
+            showToastify(message, 'error');
+            return;
+        }
+
+
         if (selectedValue === 'remove') {
             toggleBtn.textContent = 'Add to list';
         } else {
@@ -31,7 +50,7 @@ options.forEach(option => {
 
         dropdown.classList.add('hidden');
 
-        alert(`You selected: ${selectedValue}`);
+        showToastify(json.success, 'success');
     });
 });
 
@@ -42,20 +61,20 @@ const qrPopup = document.querySelector(".qr-popup");
 const overlay = document.getElementById('overlay');
 
 qrBtn.addEventListener("click", () => {
-    
+
     qrPopup.classList.toggle("hidden")
     overlay.classList.toggle("hidden")
-    
+
     qrContainer.innerHTML = "";
 
-    
+
     new QRCode(qrContainer, {
         text: window.location.href,
         width: 200,
         height: 200
     });
 
-    
+
     setTimeout(() => {
         const qrImg = qrContainer.querySelector("img");
         if (qrImg) {
@@ -64,8 +83,8 @@ qrBtn.addEventListener("click", () => {
     }, 500);
 });
 
-document.addEventListener('click', (e) =>{
-    if(!qrPopup.contains(e.target) && !qrBtn.contains(e.target)){
+document.addEventListener('click', (e) => {
+    if (!qrPopup.contains(e.target) && !qrBtn.contains(e.target)) {
         qrPopup.classList.add("hidden");
         overlay.classList.add("hidden");
     }
@@ -85,7 +104,7 @@ favoriteBtn.addEventListener('click', async (e) => {
     formData.append('type', type);
 
     favoriteBtn.disabled = true;
-    const response = await fetch('/ajax', { 
+    const response = await fetch('/ajax', {
         method: 'POST',
         body: formData
     });
@@ -93,20 +112,20 @@ favoriteBtn.addEventListener('click', async (e) => {
 
     const json = await response.json();
 
-    if(!response.ok) {
+    if (!response.ok) {
         const message = json.error;
         showToastify(message, 'error');
         return;
     }
     favoriteBtn.classList.toggle('active');
 
-    if(type == 'add') {
+    if (type == 'add') {
         favoriteIcon.classList.remove('fa-regular');
         favoriteIcon.classList.add('fa-solid');
     } else {
         favoriteIcon.classList.add('fa-regular');
         favoriteIcon.classList.remove('fa-solid');
     }
-    
+
     showToastify(json.success, 'success');
 });