Update app.py

app.py

@@ -40,6 +40,43 @@ 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 = {
@@ -51,8 +88,12 @@ 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';
@@ -73,12 +114,14 @@ modal_and_cart_js = """
         document.getElementById('quantity').value = 1;
         document.getElementById('special-instructions').value = '';
     }
-
     function closeModal() {
         document.getElementById('modal').style.display = 'none';
     }
-
     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;
@@ -92,40 +135,68 @@ modal_and_cart_js = """
         updateCartDisplay();
         closeModal();
     }
-
     function updateCartDisplay() {
         let totalBill = 0;
-        let cartHTML = "<h3>Your Cart:</h3><ul style='list-style: none; padding: 0;'>";
+        let cartHTML = "<div class='cart-container'>";
         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 `${extra} (x${extraQuantity}) - $${extraTotal.toFixed(2)}`;
-            }).join(', ');
-
-            cartHTML += `<li>
-                ${item.name} (x${item.quantity}) - $${item.itemTotal.toFixed(2)}
-                <br>Extras: ${extras}
-                <br>Instructions: ${item.instructions || "None"}
-            </li>`;
+                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('');
+            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 += `</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>`;
+        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>`;
         document.getElementById('floating-cart').innerHTML = cartHTML;
     }
-
-    function navigateToFinalPage() {
-        const finalOrderHTML = generateFinalOrderHTML();
-        const newPage = window.open();
-        newPage.document.write(finalOrderHTML);
-        newPage.document.close();
+    function updateItemQuantity(index, newQuantity) {
+        const quantity = parseInt(newQuantity) || 1;
+        cart[index].quantity = quantity;
+        cart[index].itemTotal = cart[index].price * quantity;
+        updateCartDisplay();
     }
-
-    function generateFinalOrderHTML() {
-        let finalOrderHTML = "<html><head><title>Final Order</title></head><body style='font-family: Arial, sans-serif; margin: 20px;'>";
-        finalOrderHTML += "<h3>Final Order:</h3><ul style='list-style: none; padding: 0;'>";
+    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 submitCart() {
+        let finalOrderHTML = "<h3>Final Order:</h3><ul>";
         let totalBill = 0;
         cart.forEach(item => {
             totalBill += item.itemTotal;
@@ -135,7 +206,6 @@ modal_and_cart_js = """
                 totalBill += extraTotal;
                 return `${extra} (x${extraQuantity}) - $${extraTotal.toFixed(2)}`;
             }).join(', ');
-
             finalOrderHTML += `<li>
                 ${item.name} (x${item.quantity}) - $${item.itemTotal.toFixed(2)}
                 <br>Extras: ${extras}
@@ -143,8 +213,8 @@ modal_and_cart_js = """
             </li>`;
         });
         finalOrderHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
-        finalOrderHTML += "</body></html>";
-        return finalOrderHTML;
+        document.getElementById('final-order').innerHTML = finalOrderHTML;
+        alert("Your final order has been submitted!");
     }
 </script>
 """
@@ -167,6 +237,9 @@ 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;">
@@ -207,10 +280,11 @@ 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
 
 if __name__ == "__main__":
     demo = app()
-    demo.launch()
+    demo.launch()