Update templates/menu.html

templates/menu.html

@@ -396,7 +396,8 @@
             font-weight: bold;
             line-height: 30px;
         }
-        .quantity-selector .quantity-to-add {
+        .quantity-selector .quantity-to-add,
+        .quantity-selector .quantity-to-remove {
             width: 50px;
             height: 30px;
             font-size: 14px;
@@ -526,14 +527,17 @@
                                                     <button class="btn btn-primary add-to-cart-btn" onclick="handleSoftDrinkAdd(this)">ADD</button>
                                                     <div class="quantity-selector" style="display: none;">
                                                         <button class="btn btn-outline-secondary decrease-btn" onclick="decreaseQuantity(this)">-</button>
-                                                        <span class="quantity-display">1</span>
+                                                        <select class="quantity-to-remove">
+                                                            {% for i in range(1, 21) %}
+                                                                <option value="{{ i }}">{{ i }}</option>
+                                                            {% endfor %}
+                                                        </select>
+                                                        <span class="quantity-display">0</span>
                                                         <button class="btn btn-outline-secondary increase-btn" onclick="increaseQuantity(this)">+</button>
                                                         <select class="quantity-to-add">
-                                                            <option value="1">1</option>
-                                                            <option value="3">3</option>
-                                                            <option value="5">5</option>
-                                                            <option value="10">10</option>
-                                                            <option value="20">20</option>
+                                                            {% for i in range(1, 21) %}
+                                                                <option value="{{ i }}">{{ i }}</option>
+                                                            {% endfor %}
                                                         </select>
                                                     </div>
                                                 {% else %}
@@ -716,6 +720,45 @@
             }
         };
 
+        // Local Storage Fallback Functions (Temporary)
+        function addToCartLocalStorage(payload) {
+            let cart = JSON.parse(localStorage.getItem('cart')) || [];
+            const existingItem = cart.find(item => 
+                item.itemName === payload.itemName && 
+                item.instructions === payload.instructions && 
+                JSON.stringify(item.addons) === JSON.stringify(payload.addons)
+            );
+            if (existingItem) {
+                existingItem.quantity += payload.quantity;
+            } else {
+                cart.push(payload);
+            }
+            localStorage.setItem('cart', JSON.stringify(cart));
+            return cart;
+        }
+
+        function removeFromCartLocalStorage(itemName, quantityToRemove, instructions, addons) {
+            let cart = JSON.parse(localStorage.getItem('cart')) || [];
+            const itemIndex = cart.findIndex(item => 
+                item.itemName === itemName && 
+                item.instructions === instructions && 
+                JSON.stringify(item.addons) === JSON.stringify(addons)
+            );
+            if (itemIndex !== -1) {
+                if (quantityToRemove >= cart[itemIndex].quantity) {
+                    cart.splice(itemIndex, 1);
+                } else {
+                    cart[itemIndex].quantity -= quantityToRemove;
+                }
+            }
+            localStorage.setItem('cart', JSON.stringify(cart));
+            return cart;
+        }
+
+        function getCartLocalStorage() {
+            return JSON.parse(localStorage.getItem('cart')) || [];
+        }
+
         // Populate Item Details on Page Load
         document.addEventListener('DOMContentLoaded', function () {
             const menuCards = document.querySelectorAll('.menu-card');
@@ -1147,6 +1190,12 @@
             .catch(err => {
                 console.error('Error adding item to cart:', err);
                 alert('An error occurred while adding the item to the cart: ' + err.message);
+                // Fallback to localStorage
+                const cart = addToCartLocalStorage(cartPayload);
+                updateCartUI(cart);
+                const modal = document.getElementById('itemModal');
+                const modalInstance = bootstrap.Modal.getInstance(modal);
+                modalInstance.hide();
             });
         }
 
@@ -1207,9 +1256,10 @@
             .catch(err => {
                 console.error('Error adding item to cart:', err);
                 alert('An error occurred while adding the item to the cart: ' + err.message);
-                // Revert UI if addition fails
-                addButton.style.display = 'block';
-                quantitySelector.style.display = 'none';
+                // Fallback to localStorage
+                const cart = addToCartLocalStorage(cartPayload);
+                updateCartUI(cart);
+                quantityDisplay.innerText = 1;
             });
         }
 
@@ -1238,7 +1288,7 @@
                 category: category,
                 addons: [],
                 instructions: '',
-                quantity: quantityToAdd // Add the selected quantity
+                quantity: quantityToAdd
             };
 
             // Disable the button to prevent multiple clicks
@@ -1272,9 +1322,9 @@
             .catch(err => {
                 console.error('Error adding item to cart:', err);
                 alert('An error occurred while adding the item to the cart: ' + err.message);
-                // Revert quantity if addition fails
-                currentQuantity -= quantityToAdd;
-                quantityDisplay.innerText = currentQuantity;
+                // Fallback to localStorage
+                const cart = addToCartLocalStorage(cartPayload);
+                updateCartUI(cart);
             })
             .finally(() => {
                 button.disabled = false; // Re-enable the button
@@ -1284,14 +1334,16 @@
         function decreaseQuantity(button) {
             const buttonContainer = button.closest('.button-container');
             const quantityDisplay = buttonContainer.querySelector('.quantity-display');
+            const quantityToRemoveSelect = buttonContainer.querySelector('.quantity-to-remove');
+            const quantityToRemove = parseInt(quantityToRemoveSelect.value);
             const addButton = buttonContainer.querySelector('.add-to-cart-btn');
             const quantitySelector = buttonContainer.querySelector('.quantity-selector');
-            let quantity = parseInt(quantityDisplay.innerText);
+            let currentQuantity = parseInt(quantityDisplay.innerText);
 
-            if (quantity <= 1) {
+            if (currentQuantity <= quantityToRemove) {
                 // Remove the item from the cart completely
                 const itemName = buttonContainer.getAttribute('data-item-name');
-                fetch(`/cart/remove?item_name=${encodeURIComponent(itemName)}`, {
+                fetch(`/cart/remove?item_name=${encodeURIComponent(itemName)}&quantity=${currentQuantity}&instructions=&addons=[]`, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
@@ -1309,6 +1361,7 @@
                         // Hide quantity selector and show ADD button
                         addButton.style.display = 'block';
                         quantitySelector.style.display = 'none';
+                        quantityDisplay.innerText = 0;
                     } else {
                         console.error('Failed to remove item from cart:', data.error);
                         alert(data.error || 'Failed to remove item from cart.');
@@ -1317,13 +1370,19 @@
                 .catch(err => {
                     console.error('Error removing item from cart:', err);
                     alert('An error occurred while removing the item from the cart: ' + err.message);
+                    // Fallback to localStorage
+                    const cart = removeFromCartLocalStorage(itemName, currentQuantity, '', []);
+                    updateCartUI(cart);
+                    addButton.style.display = 'block';
+                    quantitySelector.style.display = 'none';
+                    quantityDisplay.innerText = 0;
                 });
             } else {
-                quantity--;
-                quantityDisplay.innerText = quantity;
+                currentQuantity -= quantityToRemove;
+                quantityDisplay.innerText = currentQuantity;
 
                 const itemName = buttonContainer.getAttribute('data-item-name');
-                fetch(`/cart/remove?item_name=${encodeURIComponent(itemName)}&quantity=1`, {
+                fetch(`/cart/remove?item_name=${encodeURIComponent(itemName)}&quantity=${quantityToRemove}&instructions=&addons=[]`, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
@@ -1337,19 +1396,21 @@
                 })
                 .then(data => {
                     if (data.success) {
+                        alert(`Removed ${quantityToRemove} item(s) from cart successfully!`);
                         updateCartUI(data.cart);
                     } else {
                         console.error('Failed to remove item from cart:', data.error);
                         alert(data.error || 'Failed to remove item from cart.');
-                        quantity++;
-                        quantityDisplay.innerText = quantity;
+                        currentQuantity += quantityToRemove;
+                        quantityDisplay.innerText = currentQuantity;
                     }
                 })
                 .catch(err => {
                     console.error('Error removing item from cart:', err);
                     alert('An error occurred while removing the item from the cart: ' + err.message);
-                    quantity++;
-                    quantityDisplay.innerText = quantity;
+                    // Fallback to localStorage
+                    const cart = removeFromCartLocalStorage(itemName, quantityToRemove, '', []);
+                    updateCartUI(cart);
                 });
             }
         }
@@ -1372,12 +1433,17 @@
                 const addButton = container.querySelector('.add-to-cart-btn');
                 const quantitySelector = container.querySelector('.quantity-selector');
 
-                const cartItem = cart.find(item => item.itemName === itemName);
+                const cartItem = cart.find(item => 
+                    item.itemName === itemName && 
+                    item.instructions === '' && 
+                    JSON.stringify(item.addons) === JSON.stringify([])
+                );
                 if (cartItem && cartItem.quantity > 0) {
                     quantityDisplay.innerText = cartItem.quantity;
                     addButton.style.display = 'none';
                     quantitySelector.style.display = 'flex';
                 } else {
+                    quantityDisplay.innerText = 0;
                     addButton.style.display = 'block';
                     quantitySelector.style.display = 'none';
                 }
@@ -1435,9 +1501,17 @@
                         updateCartUI(data.cart);
                     } else {
                         console.error('Failed to fetch cart:', data.error);
+                        // Fallback to localStorage
+                        const cart = getCartLocalStorage();
+                        updateCartUI(cart);
                     }
                 })
-                .catch(err => console.error('Error fetching cart:', err));
+                .catch(err => {
+                    console.error('Error fetching cart:', err);
+                    // Fallback to localStorage
+                    const cart = getCartLocalStorage();
+                    updateCartUI(cart);
+                });
         });
     </script>
 </body>