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');
     });
 });