Merge pull request 'TIST-39: added ajax to daily meals select' (#33) from TIST-39 into develop

Reviewed-on: #33
Reviewed-by: steve_dekart <stevedekart2020@gmail.com>

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><?= $context['recipe']->in_usermenu; ?></div>
 
 <div class="container">
     <div class="single-recipe">

assets/js/single.js

@@ -15,13 +15,41 @@ document.addEventListener('click', (e) => {
 
 
 const options = document.querySelectorAll('.dropdown-item');
+const inUsermenu = document.getElementById('in-usermenu').textContent;
 
+if (inUsermenu) {
     options.forEach(option => {
-    option.addEventListener('click', () => {
+        if (option.getAttribute('data-value') === inUsermenu && option.getAttribute('data-value') !== 'remove') {
+            option.classList.add('dropdown-selected');
+            toggleBtn.textContent = option.textContent;
+        }
+    });
+}
+options.forEach(option => {
+    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 +59,7 @@ options.forEach(option => {
 
         dropdown.classList.add('hidden');
 
-        alert(`You selected: ${selectedValue}`);
+        showToastify(json.success, 'success');
     });
 });