Update app.py

app.py

@@ -40,43 +40,6 @@ def filter_menu(preference):
 
 # JavaScript for modal and cart behavior
 modal_and_cart_js = """
-<style>
-  .cart-container {
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 15px;
-    margin-bottom: 15px;
-    background-color: #f9f9f9;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-  .cart-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid #ddd;
-    padding: 10px 0;
-  }
-  .cart-item:last-child {
-    border-bottom: none;
-  }
-  .cart-item span {
-    font-size: 16px;
-    margin-right: 10px;
-  }
-  .cart-item .quantity-container {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-  }
-  .cart-total {
-    font-size: 18px;
-    font-weight: bold;
-    text-align: right;
-    margin-top: 10px;
-  }
-</style>
 <script>
     let cart = [];
     const extrasPrices = {
@@ -88,13 +51,8 @@ modal_and_cart_js = """
         "Chilli Chicken": 14,
         "Veg Manchurian": 12
     };
-    let finalized = false;
 
     function openModal(name, image, description, price) {
-        if (finalized) {
-            alert("You cannot add more items after finalizing your order.");
-            return;
-        }
         const modal = document.getElementById('modal');
         modal.style.display = 'block';
         modal.style.position = 'fixed';
@@ -121,10 +79,6 @@ modal_and_cart_js = """
     }
 
     function addToCart() {
-        if (finalized) {
-            alert("You cannot add more items after finalizing your order.");
-            return;
-        }
         const name = document.getElementById('modal-name').innerText;
         const price = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
         const quantity = parseInt(document.getElementById('quantity').value) || 1;
@@ -141,72 +95,34 @@ modal_and_cart_js = """
 
     function updateCartDisplay() {
         let totalBill = 0;
-        let cartHTML = "<div class='cart-container'>";
+        let cartHTML = "<h3>Your Cart:</h3><ul style='list-style: none; padding: 0;'>";
         cart.forEach((item, index) => {
             totalBill += item.itemTotal;
             const extras = item.extras.map((extra, i) => {
                 const extraQuantity = item.extrasQuantities ? item.extrasQuantities[i] || 1 : 1;
                 const extraTotal = extrasPrices[extra] * extraQuantity;
                 totalBill += extraTotal;
-                return `<div class='cart-item'>
-                            <span>${extra}</span>
-                            <span>Price: $${extrasPrices[extra].toFixed(2)}</span>
-                            <div class='quantity-container'>
-                                <label for='extra-quantity-${index}-${i}'>Quantity:</label>
-                                <input type='number' id='extra-quantity-${index}-${i}' value='${extraQuantity}' min='1' style='width: 50px;' onchange='updateExtraQuantity(${index}, ${i}, this.value)'>
-                            </div>
-                            <span>Total: $${extraTotal.toFixed(2)}</span>
-                            <input type='checkbox' id='extra-remove-${index}-${i}' onclick='removeExtra(${index}, ${i})'> Remove
-                        </div>`;
-            }).join('');
+                return `${extra} (x${extraQuantity}) - $${extraTotal.toFixed(2)}`;
+            }).join(', ');
 
-            cartHTML += `<div class='cart-item'>
-                            <span>${item.name}</span>
-                            <span>Item Price: $${item.price.toFixed(2)}</span>
-                            <div class='quantity-container'>
-                                <label for='item-quantity-${index}'>Quantity:</label>
-                                <input type='number' id='item-quantity-${index}' value='${item.quantity}' min='1' style='width: 50px;' onchange='updateItemQuantity(${index}, this.value)'>
-                            </div>
-                            <span>Total: $${(item.price * item.quantity).toFixed(2)}</span>
-                            <input type='checkbox' id='item-remove-${index}' onclick='removeItem(${index})'> Remove
-                        </div>
-                        ${extras}
-                        <div class='cart-item'><strong>Instructions:</strong> ${item.instructions || "None"}</div>`;
+            cartHTML += `<li>
+                ${item.name} (x${item.quantity}) - $${item.itemTotal.toFixed(2)}
+                <br>Extras: ${extras}
+                <br>Instructions: ${item.instructions || "None"}
+            </li>`;
         });
-        cartHTML += `</div><p class='cart-total'>Total Bill: $${totalBill.toFixed(2)}</p>`;
-        cartHTML += `<button style='margin-top: 10px; background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 5px; width: 100%; cursor: pointer;' onclick='submitCart()'>Submit</button>`;
+        cartHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
+        cartHTML += `<button style='margin-top: 10px; background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 5px; width: 100%; cursor: pointer;' onclick='navigateToFinalPage()'>Submit</button>`;
         document.getElementById('floating-cart').innerHTML = cartHTML;
     }
 
-    function updateItemQuantity(index, newQuantity) {
-        const quantity = parseInt(newQuantity) || 1;
-        cart[index].quantity = quantity;
-        cart[index].itemTotal = cart[index].price * quantity;
-        updateCartDisplay();
-    }
-
-    function updateExtraQuantity(cartIndex, extraIndex, newQuantity) {
-        const quantity = parseInt(newQuantity) || 1;
-        cart[cartIndex].extrasQuantities = cart[cartIndex].extrasQuantities || [];
-        cart[cartIndex].extrasQuantities[extraIndex] = quantity;
-        updateCartDisplay();
-    }
-
-    function removeExtra(cartIndex, extraIndex) {
-        cart[cartIndex].extras.splice(extraIndex, 1);
-        if (cart[cartIndex].extrasQuantities) {
-            cart[cartIndex].extrasQuantities.splice(extraIndex, 1);
-        }
-        updateCartDisplay();
-    }
-
-    function removeItem(index) {
-        cart.splice(index, 1);
-        updateCartDisplay();
+    function navigateToFinalPage() {
+        const finalOrderHTML = generateFinalOrderHTML();
+        window.location.href = `data:text/html;charset=utf-8,${encodeURIComponent(finalOrderHTML)}`;
     }
 
-    function submitCart() {
-        let finalOrderHTML = "<h3>Final Order:</h3><ul>";
+    function generateFinalOrderHTML() {
+        let finalOrderHTML = "<h3>Final Order:</h3><ul style='list-style: none; padding: 0;'>";
         let totalBill = 0;
         cart.forEach(item => {
             totalBill += item.itemTotal;
@@ -224,8 +140,7 @@ modal_and_cart_js = """
             </li>`;
         });
         finalOrderHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
-        document.getElementById('final-order').innerHTML = finalOrderHTML;
-        alert("Your final order has been submitted!");
+        return finalOrderHTML;
     }
 </script>
 """
@@ -248,9 +163,6 @@ def app():
         # Floating cart display
         cart_output = gr.HTML(value="Your cart is empty.", elem_id="floating-cart")
 
-        # Final order display
-        final_order_output = gr.HTML(value="", elem_id="final-order")
-
         # Modal window
         modal_window = gr.HTML("""
         <div id="modal" style="display: none; position: fixed; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000;">
@@ -291,7 +203,6 @@ def app():
         gr.Row(menu_output)
         gr.Row(cart_output)
         gr.Row(modal_window)
-        gr.Row(final_order_output)
         gr.HTML(modal_and_cart_js)
 
     return demo