Update app.py

app.py

@@ -112,22 +112,23 @@ def filter_menu(preference):
 
     return html_content
 
-# Function to generate final order
-def submit_cart():
-    final_order_html = "<h3>Final Order:</h3><ul>"
-    total_bill = 0
+# Function to finalize order
+def finalize_order(cart):
+    total_cost = sum(item['totalCost'] for item in cart)
+    order_details = ''
     for item in cart:
-        total_bill += item['totalCost']
-        extras = ", ".join([f"{extra['name']} (+${extra['price'] * extra['quantity']})" for extra in item['extras']])
-        final_order_html += f"""
-        <li>
-            {item['name']} (x{item['quantity']}) - ${item['totalCost']:.2f}
-            <br>Extras: {extras if extras else "None"}
-            <br>Special Instructions: {item['instructions'] if item['instructions'] else "None"}
-        </li>
+        order_details += f"""
+        <div>
+            <h3>{item['name']} (x{item['quantity']})</h3>
+            <p>Add-ons: {', '.join([extra['name'] for extra in item['extras']]) if item['extras'] else 'None'}</p>
+            <p>Special Instructions: {item['instructions']}</p>
+            <p>Cost: ${item['totalCost']}</p>
+        </div>
         """
-    final_order_html += f"</ul><p><strong>Total Bill: ${total_bill:.2f}</strong></p>"
-    return final_order_html
+    order_details += f"<h2>Total Cart Cost: ${total_cost}</h2>"
+    return order_details
+
+# Create Modal Window HTML
 def create_modal_window():
     add_ons = load_add_ons_from_salesforce()
     add_ons_html = ""
@@ -159,8 +160,7 @@ def create_modal_window():
         <button style="background-color: #28a745; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 5px; cursor: pointer;" onclick="addToCart()">Add to Cart</button>
     </div>
     """
-    return modal_html
-
+    return modal_html 
 
 # JavaScript for Modal and Cart
 def modal_js():
@@ -187,81 +187,65 @@ def modal_js():
         function closeModal() {
             document.getElementById('modal').style.display = 'none';
         }
+        function resetAddOns() {
+            const checkboxes = document.querySelectorAll('input[name="biryani-extra"]');
+            checkboxes.forEach(checkbox => checkbox.checked = false);  // Uncheck all add-ons
+        }
         function addToCart() {
             const name = document.getElementById('modal-name').innerText;
             const price = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
             const quantity = parseInt(document.getElementById('quantity').value) || 1;
-            const instructions = document.getElementById('special-instructions').value;
-            const selectedAddOns = Array.from(document.querySelectorAll('input[name="biryani-extra"]:checked'));
-            const extras = selectedAddOns.map(extra => ({
-                name: extra.value,
-                price: parseFloat(extra.getAttribute('data-price')),
-                quantity: 1  // Default quantity for add-ons is 1
-            }));
-            const extrasCost = extras.reduce((total, extra) => total + (extra.price * extra.quantity), 0);
-            const totalCost = (price * quantity) + extrasCost;
-            // Add the item to the cart with its specific add-ons
-            cart.push({ name, price, quantity, extras, instructions, totalCost });
-            totalCartCost += totalCost;  // Update the total cost of the cart
-            updateCartButton();
-            updateCartTotalCost();  // Update total cost displayed
+            const extras = Array.from(document.querySelectorAll('input[name="biryani-extra"]:checked'))
+                .map(checkbox => ({ name: checkbox.value, price: parseFloat(checkbox.getAttribute('data-price')) }));
+
+            const specialInstructions = document.getElementById('special-instructions').value;
+
+            const item = {
+                name,
+                quantity,
+                extras,
+                instructions: specialInstructions,
+                totalCost: (price + extras.reduce((acc, extra) => acc + extra.price, 0)) * quantity
+            };
+
+            cart.push(item);
+            totalCartCost += item.totalCost;
+
+            updateCart();
             closeModal();
         }
-        function updateCartButton() {
-            const cartButton = document.getElementById('cart-button');
-            cartButton.innerText = `View Cart (${cart.length} items)`;
+
+        function updateCart() {
+            let cartItemsHtml = '';
+            cart.forEach(item => {
+                cartItemsHtml += `<div><h3>${item.name} (x${item.quantity})</h3>
+                                    <p>Special Instructions: ${item.instructions}</p>
+                                    <p>Add-ons: ${item.extras.map(extra => extra.name).join(', ')}</p>
+                                    <p>Cost: $${item.totalCost}</p></div>`;
+            });
+            document.getElementById('cart-items').innerHTML = cartItemsHtml;
+            document.getElementById('cart-total-cost').innerText = 'Total Cart Cost: $' + totalCartCost.toFixed(2);
         }
+
         function openCartModal() {
-            const cartModal = document.getElementById('cart-modal');
-            const cartItemsContainer = document.getElementById('cart-items');
-            cartItemsContainer.innerHTML = "";
-            cart.forEach((item, index) => {
-                const extrasList = item.extras.map(extra => `${extra.name} x<input type="number" value="${extra.quantity}" min="1" style="width: 50px;" onchange="updateCartItem(${index}, 'extra', this.value)" /> (+$${(extra.price * extra.quantity).toFixed(2)})`).join(', ');
-                cartItemsContainer.innerHTML += `
-                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px;">
-                        <h3>${item.name}</h3>
-                        <p>Quantity: <input type="number" value="${item.quantity}" min="1" style="width: 50px;" onchange="updateCartItem(${index}, 'item', this.value)" /></p>
-                        <p>Extras: ${extrasList || 'None'}</p>
-                        <p>Special Instructions: ${item.instructions || 'None'}</p>
-                        <p>Total Cost: $<span id="item-${index}-total">${item.totalCost.toFixed(2)}</span></p>
-                        <button onclick="removeFromCart(${index})" style="color: red;">Remove</button>
-                    </div>
-                `;
-            });
-            cartModal.style.display = 'block';
+            document.getElementById('cart-modal').style.display = 'block';
         }
+
         function closeCartModal() {
             document.getElementById('cart-modal').style.display = 'none';
         }
-        function removeFromCart(index) {
-            totalCartCost -= cart[index].totalCost;  // Deduct the cost of the removed item from total cost
-            cart.splice(index, 1);
-            updateCartButton();
-            updateCartTotalCost();  // Update total cost displayed
-            openCartModal();
-        }
-        function updateCartItem(index, type, value) {
-            if (type === 'item') {
-                cart[index].quantity = parseInt(value);
-            } else if (type === 'extra') {
-                cart[index].extras[0].quantity = parseInt(value); // Assuming one add-on for simplicity
-            }
-            const item = cart[index];
-            const price = item.price;
-            const extrasCost = item.extras.reduce((total, extra) => total + (extra.price * extra.quantity), 0);
-            item.totalCost = (price * item.quantity) + extrasCost;
-            document.getElementById(`item-${index}-total`).innerText = item.totalCost.toFixed(2);
-            updateCartTotalCost();  // Update total cost displayed
+
+        function proceedToCheckout() {
+            alert('Proceeding to Checkout!');
         }
-        function updateCartTotalCost() {
-            const totalCostElement = document.getElementById('cart-total-cost');
-            totalCartCost = cart.reduce((total, item) => total + item.totalCost, 0);
-            totalCostElement.innerText = `Total Cart Cost: $${totalCartCost.toFixed(2)}`;
+        // Reset all selected add-ons when opening a new item modal
+        function resetAddOns() {
+            const checkboxes = document.querySelectorAll('input[name="biryani-extra"]');
+            checkboxes.forEach(checkbox => checkbox.checked = false);  // Uncheck all add-ons
         }
     </script>
     """
     return modal_script
-
 # Gradio App
 with gr.Blocks() as app:
     with gr.Row():
@@ -289,11 +273,9 @@ with gr.Blocks() as app:
         with gr.Column():
             preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Filter Preference", value="All")
             menu_output = gr.HTML()
-            gr.HTML("<div id='cart-button' onclick='openCartModal()'>View Cart</div>")
-            gr.HTML("<div id='cart-modal' style='display: none;'>")
-            gr.HTML("<div id='cart-items'></div>")
-            gr.HTML("<button onclick='submitCart()'>Proceed to Checkout</button>")
-            gr.HTML("</div>")
+            gr.HTML("<div id='cart-button' style='position: fixed; top: 20px; right: 20px; background: #28a745; color: white; padding: 10px 20px; border-radius: 30px; cursor: pointer; z-index: 1000;' onclick='openCartModal()'>View Cart</div>")
+            gr.HTML("<div id='cart-modal' style='display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000; overflow-y: auto;'><div style='padding: 20px;'><div style='text-align: right;'><button onclick='closeCartModal()' style='background: none; border: none; font-size: 24px; cursor: pointer;'>&times;</button></div><h1>Your Cart</h1><div id='cart-items'></div><p id='cart-total-cost' style='font-size: 1.2em; font-weight: bold;'>Total Cart Cost: $0.00</p><button style='background: #ff5722; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='proceedToCheckout()'>Proceed to Checkout</button></div></div>")
+            gr.HTML(create_modal_window())
             gr.HTML(modal_js())
 
     login_button.click(
@@ -303,4 +285,4 @@ with gr.Blocks() as app:
     )
     preference.change(lambda pref: filter_menu(pref), [preference], menu_output)
 
-app.launch()
+app.launch()