diff --git a/apps/Recipes/Templates/single.php b/apps/Recipes/Templates/single.php index 0cd22ae..925223d 100644 --- a/apps/Recipes/Templates/single.php +++ b/apps/Recipes/Templates/single.php @@ -12,6 +12,7 @@ the_header( ?> +
diff --git a/assets/js/single.js b/assets/js/single.js index fd96f5b..c8754d7 100644 --- a/assets/js/single.js +++ b/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 => { + 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', () => { + 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'); }); }); @@ -42,20 +70,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 +92,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 +113,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 +121,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'); }); \ No newline at end of file