Update app.py

app.py

@@ -1,6 +1,6 @@
 import gradio as gr
 import pandas as pd
-from utils.database_handler import check_credentials, save_user  # Placeholder for actual database handling
+from utils.database_handler import check_credentials, save_user
 
 # Function to load the menu data
 def load_menu():
@@ -58,7 +58,7 @@ def create_account(name, phone, email, password):
 def navigate_to_login():
     return gr.update(visible=True), gr.update(visible=False)
 
-# Gradio app with popup modal
+# Gradio app with popup modal and cart system
 def app():
     with gr.Blocks() as demo:
         # Login Page
@@ -101,21 +101,12 @@ def app():
                 <h2 id="modal-name" style="margin: 0; font-size: 22px; color: #333;"></h2>
                 <p id="modal-description" style="margin: 10px 0; font-size: 16px; color: #666;"></p>
                 <p id="modal-price" style="font-size: 18px; color: #28a745; font-weight: bold;"></p>
-                <label for="extras" style="display: block; font-size: 16px; margin-top: 10px;">Biryani Extras:</label>
-                <div style="margin-bottom: 15px;">
-                    <label><input type="checkbox" name="extra" value="Thums up" data-price="2" /> Thums up + $2.00</label><br>
-                    <label><input type="checkbox" name="extra" value="Sprite" data-price="2" /> Sprite + $2.00</label><br>
-                    <label><input type="checkbox" name="extra" value="Extra Raitha" data-price="1" /> Extra Raitha + $1.00</label><br>
-                    <label><input type="checkbox" name="extra" value="Extra Salan" data-price="2" /> Extra Salan + $2.00</label><br>
-                    <label><input type="checkbox" name="extra" value="Chilli Chicken" data-price="14" /> Chilli Chicken + $14.00</label><br>
-                    <label><input type="checkbox" name="extra" value="Veg Manchurian" data-price="12" /> Veg Manchurian + $12.00</label>
-                </div>
-                <label for="quantity" style="display: block; font-size: 16px; margin-top: 10px;">Quantity:</label>
-                <input type="number" id="quantity" value="1" min="1" style="width: 100%; padding: 5px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px;" />
+                <label for="extras" style="display: block; font-size: 16px; margin-top: 10px;">Extras:</label>
                 <textarea id="special-instructions" placeholder="Add special instructions here..." style="width: 100%; height: 80px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px;"></textarea>
                 <button style="background-color: #28a745; color: white; border: none; padding: 10px 20px; font-size: 16px; border-radius: 5px; cursor: pointer; width: 100%;" onclick="addToCart()">Add to Cart</button>
             </div>
             """)
+            selected_preference.change(filter_menu, inputs=[selected_preference], outputs=[menu_output])
 
         # Button Actions
         login_btn.click(authenticate_user, inputs=[email, password], outputs=[login_section, preference_section, error_box])
@@ -123,6 +114,52 @@ def app():
         submit_btn.click(create_account, inputs=[name, phone, signup_email, signup_password], outputs=[success_message, signup_section, login_section])
         back_to_login_btn.click(navigate_to_login, inputs=[], outputs=[login_section, signup_section])
 
+        # JavaScript for Popup and Cart Management
+        gr.HTML("""
+        <script>
+        let cart = [];
+        function openModal(name, image, description, price) {
+            const modal = document.getElementById('modal');
+            modal.style.display = 'block';
+            document.getElementById('modal-image').src = image;
+            document.getElementById('modal-name').innerText = name;
+            document.getElementById('modal-description').innerText = description;
+            document.getElementById('modal-price').innerText = `$${price}`;
+        }
+        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 instructions = document.getElementById('special-instructions').value || "None";
+            cart.push({ name, price, instructions });
+            alert(`${name} added to cart!`);
+            closeModal();
+            updateCart();
+        }
+        function updateCart() {
+            let totalBill = 0;
+            let cartHTML = '<div style="border: 1px solid #ddd; padding: 10px; border-radius: 8px;">';
+            cart.forEach((item, index) => {
+                totalBill += item.price;
+                cartHTML += `<div style="display: flex; justify-content: space-between; padding: 5px 0;">
+                                <span>${item.name}</span>
+                                <span>$${item.price.toFixed(2)}</span>
+                                <span>Instructions: ${item.instructions}</span>
+                                <button onclick="removeFromCart(${index})">Remove</button>
+                            </div>`;
+            });
+            cartHTML += `<div><strong>Total Bill: $${totalBill.toFixed(2)}</strong></div></div>`;
+            document.getElementById('floating-cart').innerHTML = cartHTML;
+        }
+        function removeFromCart(index) {
+            cart.splice(index, 1);
+            updateCart();
+        }
+        </script>
+        """)
+
     return demo
 
 if __name__ == "__main__":