Update templates/menu.html

templates/menu.html

@@ -396,6 +396,12 @@
             font-weight: bold;
             line-height: 30px;
         }
+        .quantity-selector .quantity-to-add {
+            width: 50px;
+            height: 30px;
+            font-size: 14px;
+            padding: 0 5px;
+        }
         /* Mobile View Adjustments */
         @media (max-width: 576px) {
             .fixed-top-bar {
@@ -522,6 +528,13 @@
                                                         <button class="btn btn-outline-secondary decrease-btn" onclick="decreaseQuantity(this)">-</button>
                                                         <span class="quantity-display">1</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>
+                                                        </select>
                                                     </div>
                                                 {% else %}
                                                     <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" 
@@ -1113,7 +1126,12 @@
                 },
                 body: JSON.stringify(cartPayload)
             })
-            .then(response => response.json())
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                return response.json();
+            })
             .then(data => {
                 if (data.success) {
                     alert('Item added to cart successfully!');
@@ -1122,12 +1140,13 @@
                     const modalInstance = bootstrap.Modal.getInstance(modal);
                     modalInstance.hide();
                 } else {
+                    console.error('Failed to add item to cart:', data.error);
                     alert(data.error || 'Failed to add item to cart.');
                 }
             })
             .catch(err => {
                 console.error('Error adding item to cart:', err);
-                alert('An error occurred while adding the item to the cart.');
+                alert('An error occurred while adding the item to the cart: ' + err.message);
             });
         }
 
@@ -1166,13 +1185,19 @@
                 },
                 body: JSON.stringify(cartPayload)
             })
-            .then(response => response.json())
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                return response.json();
+            })
             .then(data => {
                 if (data.success) {
                     alert('Item added to cart successfully!');
                     updateCartUI(data.cart);
                     quantityDisplay.innerText = 1; // Set initial quantity
                 } else {
+                    console.error('Failed to add item to cart:', data.error);
                     alert(data.error || 'Failed to add item to cart.');
                     // Revert UI if addition fails
                     addButton.style.display = 'block';
@@ -1181,7 +1206,7 @@
             })
             .catch(err => {
                 console.error('Error adding item to cart:', err);
-                alert('An error occurred while adding the item to the cart.');
+                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';
@@ -1191,10 +1216,13 @@
         function increaseQuantity(button) {
             const buttonContainer = button.closest('.button-container');
             const quantityDisplay = buttonContainer.querySelector('.quantity-display');
-            let quantity = parseInt(quantityDisplay.innerText);
+            const quantityToAddSelect = buttonContainer.querySelector('.quantity-to-add');
+            const quantityToAdd = parseInt(quantityToAddSelect.value);
+            let currentQuantity = parseInt(quantityDisplay.innerText);
 
-            quantity++;
-            quantityDisplay.innerText = quantity;
+            // Update the displayed quantity
+            currentQuantity += quantityToAdd;
+            quantityDisplay.innerText = currentQuantity;
 
             const itemName = buttonContainer.getAttribute('data-item-name');
             const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
@@ -1210,9 +1238,12 @@
                 category: category,
                 addons: [],
                 instructions: '',
-                quantity: 1 // Add one more item
+                quantity: quantityToAdd // Add the selected quantity
             };
 
+            // Disable the button to prevent multiple clicks
+            button.disabled = true;
+
             fetch('/cart/add', {
                 method: 'POST',
                 headers: {
@@ -1220,21 +1251,33 @@
                 },
                 body: JSON.stringify(cartPayload)
             })
-            .then(response => response.json())
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                return response.json();
+            })
             .then(data => {
                 if (data.success) {
+                    alert(`Added ${quantityToAdd} item(s) to cart successfully!`);
                     updateCartUI(data.cart);
                 } else {
+                    console.error('Failed to add item to cart:', data.error);
                     alert(data.error || 'Failed to add item to cart.');
-                    quantity--; // Revert quantity if addition fails
-                    quantityDisplay.innerText = quantity;
+                    // Revert quantity if addition fails
+                    currentQuantity -= quantityToAdd;
+                    quantityDisplay.innerText = currentQuantity;
                 }
             })
             .catch(err => {
                 console.error('Error adding item to cart:', err);
-                alert('An error occurred while adding the item to the cart.');
-                quantity--; // Revert quantity if addition fails
-                quantityDisplay.innerText = quantity;
+                alert('An error occurred while adding the item to the cart: ' + err.message);
+                // Revert quantity if addition fails
+                currentQuantity -= quantityToAdd;
+                quantityDisplay.innerText = currentQuantity;
+            })
+            .finally(() => {
+                button.disabled = false; // Re-enable the button
             });
         }
 
@@ -1254,7 +1297,12 @@
                         'Content-Type': 'application/json',
                     }
                 })
-                .then(response => response.json())
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.json();
+                })
                 .then(data => {
                     if (data.success) {
                         updateCartUI(data.cart);
@@ -1262,12 +1310,13 @@
                         addButton.style.display = 'block';
                         quantitySelector.style.display = 'none';
                     } else {
+                        console.error('Failed to remove item from cart:', data.error);
                         alert(data.error || 'Failed to remove item from cart.');
                     }
                 })
                 .catch(err => {
                     console.error('Error removing item from cart:', err);
-                    alert('An error occurred while removing the item from the cart.');
+                    alert('An error occurred while removing the item from the cart: ' + err.message);
                 });
             } else {
                 quantity--;
@@ -1280,20 +1329,26 @@
                         'Content-Type': 'application/json',
                     }
                 })
-                .then(response => response.json())
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.json();
+                })
                 .then(data => {
                     if (data.success) {
                         updateCartUI(data.cart);
                     } else {
+                        console.error('Failed to remove item from cart:', data.error);
                         alert(data.error || 'Failed to remove item from cart.');
-                        quantity++; // Revert quantity if removal fails
+                        quantity++;
                         quantityDisplay.innerText = quantity;
                     }
                 })
                 .catch(err => {
                     console.error('Error removing item from cart:', err);
-                    alert('An error occurred while removing the item from the cart.');
-                    quantity++; // Revert quantity if removal fails
+                    alert('An error occurred while removing the item from the cart: ' + err.message);
+                    quantity++;
                     quantityDisplay.innerText = quantity;
                 });
             }
@@ -1369,10 +1424,17 @@
 
             // Fetch initial cart state to update UI
             fetch('/cart/get')
-                .then(response => response.json())
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.json();
+                })
                 .then(data => {
                     if (data.success) {
                         updateCartUI(data.cart);
+                    } else {
+                        console.error('Failed to fetch cart:', data.error);
                     }
                 })
                 .catch(err => console.error('Error fetching cart:', err));