Update templates/menu.html

templates/menu.html

@@ -836,12 +836,7 @@
                                                      data-item-section="{{ item.Section__c | default(section) }}" 
                                                      data-item-category="{{ selected_category }}">
                                                     {% if item.Section__c == 'Soft Drinks' %}
-                                                        <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">0</span>
-                                                            <button class="btn btn-outline-secondary increase-btn" onclick="increaseQuantity(this)">+</button>
-                                                        </div>
+                                                        <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
                                                     {% else %}
                                                         <button class="btn btn-primary" 
                                                                 data-bs-toggle="modal" 
@@ -913,9 +908,37 @@
         </div>
     </div>
 
+    <!-- Modal for Soft Drinks Quantity Selection -->
+    <div class="modal fade" id="softDrinkModal" tabindex="-1" aria-labelledby="softDrinkModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="softDrinkModalLabel">Select Quantity</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="text-center mb-3">
+                        <h5 id="soft-drink-name"></h5>
+                        <p id="soft-drink-price"></p>
+                    </div>
+                    <div class="d-flex justify-content-center align-items-center mb-4">
+                        <button type="button" class="btn btn-outline-secondary" id="soft-drink-decrease">-</button>
+                        <input type="text" class="form-control text-center mx-2" id="soft-drink-quantity" value="1" readonly style="width: 60px;">
+                        <button type="button" class="btn btn-outline-secondary" id="soft-drink-increase">+</button>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()">Add to Cart</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         let isProcessingRequest = false;
+        let currentSoftDrinkButton = null;
 
         const menuItems = [
             {% for section, items in ordered_menu.items() %}
@@ -1080,68 +1103,32 @@
             };
         }
 
-        function handleSoftDrinkAdd(button) {
+        function showSoftDrinkModal(button) {
+            currentSoftDrinkButton = button;
             const buttonContainer = button.closest('.button-container');
-            const quantitySelector = buttonContainer.querySelector('.quantity-selector');
-            const addButton = buttonContainer.querySelector('.add-to-cart-btn');
-            const quantityDisplay = quantitySelector.querySelector('.quantity-display');
+            const itemName = buttonContainer.getAttribute('data-item-name');
+            const itemPrice = buttonContainer.getAttribute('data-item-price');
             
-            addButton.style.display = 'none';
-            quantitySelector.style.display = 'flex';
+            document.getElementById('soft-drink-name').textContent = itemName;
+            document.getElementById('soft-drink-price').textContent = `$${itemPrice}`;
+            document.getElementById('soft-drink-quantity').value = '1';
             
-            if (parseInt(quantityDisplay.innerText) === 0) {
-                quantityDisplay.innerText = '1';
-                updateCartQuantity(buttonContainer, 1);
-            }
+            const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
+            modal.show();
         }
 
-        function increaseQuantity(button) {
-            if (isProcessingRequest) return;
-            isProcessingRequest = true;
-
-            const buttonContainer = button.closest('.button-container');
-            const quantityDisplay = buttonContainer.querySelector('.quantity-display');
-            let currentQuantity = parseInt(quantityDisplay.innerText) || 0;
-
-            if (currentQuantity < 10) {
-                const newQuantity = currentQuantity + 1;
-                quantityDisplay.innerText = newQuantity;
-                debouncedUpdateCart(buttonContainer, newQuantity);
-            } else {
-                console.log('Maximum quantity of 10 reached for Soft Drinks');
-                isProcessingRequest = false;
-            }
-        }
-
-        function decreaseQuantity(button) {
-            if (isProcessingRequest) return;
-            isProcessingRequest = true;
-
-            const buttonContainer = button.closest('.button-container');
-            const quantityDisplay = buttonContainer.querySelector('.quantity-display');
-            const addButton = buttonContainer.querySelector('.add-to-cart-btn');
-            const quantitySelector = buttonContainer.querySelector('.quantity-selector');
-            const currentQuantity = parseInt(quantityDisplay.innerText) || 0;
-
-            if (currentQuantity <= 1) {
-                quantityDisplay.innerText = '0';
-                addButton.style.display = 'block';
-                quantitySelector.style.display = 'none';
-                updateCartQuantity(buttonContainer, 0);
-            } else {
-                const newQuantity = currentQuantity - 1;
-                quantityDisplay.innerText = newQuantity;
-                debouncedUpdateCart(buttonContainer, newQuantity);
-            }
-        }
-
-        function updateCartQuantity(buttonContainer, newQuantity) {
+        function addSoftDrinkToCart() {
+            if (!currentSoftDrinkButton) return;
+            
+            const buttonContainer = currentSoftDrinkButton.closest('.button-container');
+            const quantity = parseInt(document.getElementById('soft-drink-quantity').value) || 1;
+            
             const itemName = buttonContainer.getAttribute('data-item-name');
             const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
             const itemImage = buttonContainer.getAttribute('data-item-image');
             const section = buttonContainer.getAttribute('data-item-section');
             const selectedCategory = buttonContainer.getAttribute('data-item-category');
-
+            
             const cartPayload = {
                 itemName: itemName,
                 itemPrice: itemPrice,
@@ -1150,65 +1137,39 @@
                 category: selectedCategory,
                 addons: [],
                 instructions: '',
-                quantity: newQuantity
+                quantity: quantity
             };
-
-            if (newQuantity > 0) {
-                fetch('/cart/add', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(cartPayload)
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        updateCartUI(data.cart);
-                    } else {
-                        console.error('Failed to update cart:', data.error);
-                        const cart = addToCartLocalStorage(cartPayload);
-                        updateCartUI(cart);
-                    }
-                })
-                .catch(err => {
-                    console.error('Error updating cart:', err);
+            
+            fetch('/cart/add', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(cartPayload)
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    updateCartUI(data.cart);
+                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
+                    modal.hide();
+                } else {
+                    console.error('Failed to add item to cart:', data.error);
                     const cart = addToCartLocalStorage(cartPayload);
                     updateCartUI(cart);
-                })
-                .finally(() => {
-                    isProcessingRequest = false;
-                });
-            } else {
-                fetch(`/cart/remove?item_name=${encodeURIComponent(itemName)}&instructions=&addons=[]`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    }
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        updateCartUI(data.cart);
-                    } else {
-                        console.error('Failed to remove item:', data.error);
-                        const cart = removeFromCartLocalStorage(itemName, 1, '', []);
-                        updateCartUI(cart);
-                    }
-                })
-                .catch(err => {
-                    console.error('Error removing item:', err);
-                    const cart = removeFromCartLocalStorage(itemName, 1, '', []);
-                    updateCartUI(cart);
-                })
-                .finally(() => {
-                    isProcessingRequest = false;
-                });
-            }
+                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
+                    modal.hide();
+                }
+            })
+            .catch(err => {
+                console.error('Error adding item to cart:', err);
+                const cart = addToCartLocalStorage(cartPayload);
+                updateCartUI(cart);
+                const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
+                modal.hide();
+            });
         }
 
-        const debouncedUpdateCart = debounce(updateCartQuantity, 300);
-
         function updateCartUI(cart) {
             if (!Array.isArray(cart)) {
                 console.error('Invalid cart data:', cart);
@@ -1225,32 +1186,6 @@
                 cartItemCount.innerText = totalQuantity;
                 cartItemCount.style.display = totalQuantity > 0 ? 'inline-flex' : 'none';
             }
-
-            const buttonContainers = document.querySelectorAll('.button-container');
-            buttonContainers.forEach(container => {
-                const itemName = container.getAttribute('data-item-name');
-                const section = container.getAttribute('data-item-section');
-                const quantityDisplay = container.querySelector('.quantity-display');
-                const addButton = container.querySelector('.add-to-cart-btn');
-                const quantitySelector = container.querySelector('.quantity-selector');
-
-                const cartItem = cart.find(item => 
-                    item.itemName === itemName && 
-                    item.section === section &&
-                    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';
-                }
-            });
         }
 
         document.addEventListener('DOMContentLoaded', function () {
@@ -1480,6 +1415,27 @@
                 quantityInput.value = currentQuantity;
             });
 
+            // Soft Drinks modal quantity controls
+            const softDrinkDecreaseBtn = document.getElementById('soft-drink-decrease');
+            const softDrinkIncreaseBtn = document.getElementById('soft-drink-increase');
+            const softDrinkQuantityInput = document.getElementById('soft-drink-quantity');
+            
+            softDrinkDecreaseBtn.addEventListener('click', function() {
+                let currentQuantity = parseInt(softDrinkQuantityInput.value);
+                if (currentQuantity > 1) {
+                    currentQuantity--;
+                    softDrinkQuantityInput.value = currentQuantity;
+                }
+            });
+            
+            softDrinkIncreaseBtn.addEventListener('click', function() {
+                let currentQuantity = parseInt(softDrinkQuantityInput.value);
+                if (currentQuantity < 10) {
+                    currentQuantity++;
+                    softDrinkQuantityInput.value = currentQuantity;
+                }
+            });
+
             const micIcon = document.getElementById('micIcon');
             if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
                 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;