Update app.py

app.py

@@ -152,7 +152,6 @@ def modal_js():
     <script>
         let cart = [];
         let totalCartCost = 0;
-
         function openModal(name, image2, description, price) {
             const modal = document.getElementById('modal');
             modal.style.display = 'block';
@@ -167,68 +166,57 @@ def modal_js():
             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() {
             document.getElementById('modal').style.display = 'none';
         }
-
         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
             closeModal();
         }
-
         function updateCartButton() {
             const cartButton = document.getElementById('cart-button');
             cartButton.innerText = `View Cart (${cart.length} items)`;
         }
-
         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} (+$${(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; 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>
                 `;
             });
             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);
@@ -236,32 +224,40 @@ def modal_js():
             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() {
-            const checkoutPage = document.getElementById('checkout-page');
-            const cartSummaryContainer = document.getElementById('cart-summary');
-            cartSummaryContainer.innerHTML = "";
-            cart.forEach(item => {
-                const extrasList = item.extras.map(extra => `${extra.name} (+$${(extra.price * extra.quantity).toFixed(2)})`).join(', ');
-                cartSummaryContainer.innerHTML += `
-                    <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>
-                        <p>Special Instructions: ${item.instructions || 'None'}</p>
-                        <p>Total Cost: $${item.totalCost.toFixed(2)}</p>
+            const checkoutModal = document.getElementById('final-order-section');
+            let finalOrderHTML = "<h1>Final Order</h1>";
+            cart.forEach((item) => {
+                finalOrderHTML += `
+                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px;">
+                        <h3>${item.name} (x${item.quantity})</h3>
+                        <p>Extras: ${item.extras.map(extra => `${extra.name} (+$${(extra.price * extra.quantity).toFixed(2)})`).join(', ') || 'None'}</p>
+                        <p>Total: $${item.totalCost.toFixed(2)}</p>
                     </div>
                 `;
             });
-            cartSummaryContainer.innerHTML += `<h3>Total Price: $${totalCartCost.toFixed(2)}</h3>`;
-            checkoutPage.style.display = 'block';
-            closeCartModal();
+            finalOrderHTML += `<h3>Total Bill: $${totalCartCost.toFixed(2)}</h3>`;
+            checkoutModal.innerHTML = finalOrderHTML;
+            checkoutModal.style.display = 'block';
+            closeCartModal();  // Close cart modal
         }
     </script>
     """
@@ -272,7 +268,6 @@ with gr.Blocks() as app:
     with gr.Row():
         gr.HTML("<h1 style='text-align: center;'>Welcome to Biryani Hub</h1>")
 
-    # Login Page
     with gr.Row(visible=True) as login_page:
         with gr.Column():
             login_email = gr.Textbox(label="Email")
@@ -281,7 +276,6 @@ with gr.Blocks() as app:
             signup_button = gr.Button("Go to Signup")
             login_output = gr.Textbox(label="Status")
 
-    # Signup Page
     with gr.Row(visible=False) as signup_page:
         with gr.Column():
             signup_name = gr.Textbox(label="Name")
@@ -292,7 +286,6 @@ with gr.Blocks() as app:
             login_redirect = gr.Button("Go to Login")
             signup_output = gr.Textbox(label="Status")
 
-    # Menu Page
     with gr.Row(visible=False) as menu_page:
         with gr.Column():
             preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Filter Preference", value="All")
@@ -302,19 +295,11 @@ with gr.Blocks() as app:
             gr.HTML(create_modal_window())
             gr.HTML(modal_js())
 
-    # Checkout Page
-    with gr.Row(visible=False) as checkout_page:
-        with gr.Column():
-            gr.HTML("<h2 style='text-align: center;'>Final Order</h2>")
-            cart_summary = gr.HTML()
-            gr.Button("Confirm Order")
-
     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()