Update app.py

app.py

@@ -1,4 +1,3 @@
-
 import bcrypt
 import gradio as gr
 from simple_salesforce import Salesforce
@@ -112,7 +111,8 @@ def filter_menu(preference):
         return "<p>No items match your filter.</p>"
 
     return html_content
-    # Create Modal Window HTML
+
+# Create Modal Window HTML
 def create_modal_window():
     add_ons = load_add_ons_from_salesforce()
     add_ons_html = ""
@@ -146,37 +146,7 @@ def create_modal_window():
     """
     return modal_html
 
-# Updated Cart Modal HTML
-def create_cart_modal():
-    cart_modal_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>
-            <button style="background: #007bff; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;" onclick="submitOrder()">Submit Order</button>
-        </div>
-    </div>
-    """
-    return cart_modal_html
-
-# Final Order Page HTML
-def create_final_order_page():
-    final_order_html = """
-    <div id="final-order-page" style="display: none; padding: 20px; max-width: 1200px; margin: auto;">
-        <h1>Final Order</h1>
-        <div id="final-order-items"></div>
-        <p id="final-order-total-cost" style="font-size: 1.2em; font-weight: bold;">Total Order Cost: $0.00</p>
-        <button onclick="confirmOrder()" style="background-color: #28a745; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer;">Confirm Order</button>
-    </div>
-    """
-    return final_order_html
-
-# Updated JavaScript for Submit Order
+# JavaScript for Modal and Cart
 def modal_js():
     modal_script = """
     <script>
@@ -185,10 +155,17 @@ def modal_js():
         function openModal(name, image2, description, price) {
             const modal = document.getElementById('modal');
             modal.style.display = 'block';
+            modal.style.position = 'fixed';
+            modal.style.width = window.innerWidth <= 768 ? '90%' : '30%';
+            modal.style.top = `${event.clientY}px`;
+            modal.style.left = '50%';
+            modal.style.transform = 'translate(-50%, -50%)';
             document.getElementById('modal-image').src = image2;
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-description').innerText = description;
             document.getElementById('modal-price').innerText = price;
+            document.getElementById('quantity').value = 1;
+            document.getElementById('special-instructions').value = '';
             resetAddOns();  // Reset add-ons when opening the modal
         }
         function closeModal() {
@@ -203,14 +180,15 @@ def modal_js():
             const extras = selectedAddOns.map(extra => ({
                 name: extra.value,
                 price: parseFloat(extra.getAttribute('data-price')),
-                quantity: 1
+                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;
+            totalCartCost += totalCost;  // Update the total cost of the cart
             updateCartButton();
-            updateCartTotalCost();
+            updateCartTotalCost();  // Update total cost displayed
             closeModal();
         }
         function updateCartButton() {
@@ -222,31 +200,58 @@ def modal_js():
             const cartItemsContainer = document.getElementById('cart-items');
             cartItemsContainer.innerHTML = "";
             cart.forEach((item, index) => {
-                const extrasList = item.extras.map(extra => `${extra.name} (+$${(extra.price * extra.quantity).toFixed(2)})`).join(', ');
+                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;">
+                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px;">
                         <h3>${item.name}</h3>
-                        <p>Quantity: ${item.quantity}</p>
+                        <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: $${item.totalCost.toFixed(2)}</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>
                 `;
             });
-            document.getElementById('cart-total-cost').innerText = `Total Cart Cost: $${totalCartCost.toFixed(2)}`;
             cartModal.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 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)}`;
+        }
+        function proceedToCheckout() {
+            alert("Proceeding to checkout...");
+        }
+
+        // Submit Order and go to Final Order Page
         function submitOrder() {
-            const finalOrderPage = document.getElementById('final-order-page');
-            const finalOrderItemsContainer = document.getElementById('final-order-items');
-            finalOrderItemsContainer.innerHTML = "";
-            cart.forEach((item) => {
-                const extrasList = item.extras.map(extra => `${extra.name} (+$${(extra.price * extra.quantity).toFixed(2)})`).join(', ');
-                finalOrderItemsContainer.innerHTML += `
-                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px;">
+            const orderDetails = cart.map(item => {
+                const extrasList = item.extras.map(extra => `${extra.name} x${extra.quantity} (+$${(extra.price * extra.quantity).toFixed(2)})`).join(', ');
+                return `
+                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px;">
                         <h3>${item.name}</h3>
                         <p>Quantity: ${item.quantity}</p>
                         <p>Extras: ${extrasList || 'None'}</p>
@@ -254,18 +259,21 @@ def modal_js():
                         <p>Total Cost: $${item.totalCost.toFixed(2)}</p>
                     </div>
                 `;
-            });
-            document.getElementById('final-order-total-cost').innerText = `Total Order Cost: $${totalCartCost.toFixed(2)}`;
+            }).join('');
+
+            const finalOrderPage = document.getElementById('final-order-page');
+            const orderDetailsContainer = document.getElementById('order-details');
+            orderDetailsContainer.innerHTML = orderDetails;
+
+            // Show the final order page and hide the cart page
             finalOrderPage.style.display = 'block';
             document.getElementById('cart-modal').style.display = 'none';
         }
-        function confirmOrder() {
-            alert("Order confirmed! Thank you for your purchase.");
-            cart = [];
-            totalCartCost = 0;
-            updateCartButton();
-            updateCartTotalCost();
+
+        // Go back to Menu Page from Final Order Page
+        function goBackToMenu() {
             document.getElementById('final-order-page').style.display = 'none';
+            document.getElementById('menu-page').style.display = 'block';
         }
     </script>
     """
@@ -298,19 +306,23 @@ 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' style='position: fixed; top: 20px; right: 20px; background: #28a745; color: white; padding: 10px 20px; border-radius: 30px; cursor: pointer;' 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><button style='background: #007bff; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='submitOrder()'>Submit Order</button></div></div>")
-
-            # Add Final Order Page
-            gr.HTML(create_final_order_page())
-
+            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 onclick='submitOrder()' style='background: #007bff; color: white; padding: 10px 20px; border-radius: 5px;'>Submit Order</button></div></div>")
             gr.HTML(create_modal_window())
             gr.HTML(modal_js())
 
+    # Final Order Page
+    with gr.Row(visible=False) as final_order_page:
+        with gr.Column():
+            gr.HTML("<h1 style='text-align: center;'>Final Order</h1>")
+            order_details_output = gr.HTML()
+            gr.HTML("<button onclick='goBackToMenu()' style='background: #28a745; color: white; padding: 10px 20px; border-radius: 5px;'>Back to Menu</button>")
+
     login_button.click(
         lambda email, password: (gr.update(visible=False), gr.update(visible=True), gr.update(value=filter_menu("All")), "Login successful!")
         if login(email, password)[0] == "Login successful!" else (gr.update(), gr.update(), gr.update(), "Invalid email or password."),
         [login_email, login_password], [login_page, menu_page, menu_output, login_output]
     )
+    preference.change(lambda pref: filter_menu(pref), [preference], menu_output)
 
 app.launch()