Update app.py

app.py

@@ -1,135 +1,116 @@
 import gradio as gr
 import pandas as pd
-from utils.database_handler import check_credentials, save_user
-
-# Function to load the menu data
-def load_menu():
-    menu_file = "menu.xlsx"  # Ensure this file exists in the same directory
-    try:
-        return pd.read_excel(menu_file)
-    except Exception as e:
-        raise ValueError(f"Error loading menu file: {e}")
-
-# Function to filter menu items based on preference
-def filter_menu(preference):
-    menu_data = load_menu()
-    if preference == "Halal/Non-Veg":
-        filtered_data = menu_data[menu_data["Ingredients"].str.contains("Chicken|Mutton|Fish|Prawns|Goat", case=False, na=False)]
-    elif preference == "Vegetarian":
-        filtered_data = menu_data[~menu_data["Ingredients"].str.contains("Chicken|Mutton|Fish|Prawns|Goat", case=False, na=False)]
-    elif preference == "Guilt-Free":
-        filtered_data = menu_data[menu_data["Description"].str.contains(r"Fat: ([0-9]|10)g", case=False, na=False)]
-    else:
-        filtered_data = menu_data
-
-    html_content = ""
-    for _, item in filtered_data.iterrows():
-        html_content += f"""
-        <div style="display: flex; align-items: center; border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);">
-            <div style="flex: 1; margin-right: 15px;">
-                <h3 style="margin: 0; font-size: 18px;">{item['Dish Name']}</h3>
-                <p style="margin: 5px 0; font-size: 16px; color: #888;">${item['Price ($)']}</p>
-                <p style="margin: 5px 0; font-size: 14px; color: #555;">{item['Description']}</p>
+
+# Sample menu data
+menu_data = pd.DataFrame([
+    {"Dish Name": "Veg Samosa", "Price ($)": 9, "Description": "Crispy fried pastry filled with spiced potatoes and peas.", "Image URL": "https://example.com/samosa.jpg"},
+    {"Dish Name": "Prawn Fry", "Price ($)": 15, "Description": "Succulent prawns fried with a blend of spices and herbs.", "Image URL": "https://example.com/prawns.jpg"},
+    {"Dish Name": "Chicken Curry", "Price ($)": 14, "Description": "Traditional chicken curry cooked in a flavorful gravy.", "Image URL": "https://example.com/chickencurry.jpg"},
+    {"Dish Name": "Paneer Butter Masala", "Price ($)": 12, "Description": "Cottage cheese in creamy tomato-based gravy.", "Image URL": "https://example.com/paneer.jpg"},
+    {"Dish Name": "Veg Biryani", "Price ($)": 10, "Description": "Mixed vegetables cooked with fragrant rice.", "Image URL": "https://example.com/vegbiryani.jpg"},
+])
+
+# Global cart
+cart = []
+
+# Function to render the menu
+def render_menu():
+    menu_html = ""
+    for _, item in menu_data.iterrows():
+        menu_html += f"""
+        <div style="display: flex; align-items: center; border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px;">
+            <div style="flex: 1;">
+                <h3>{item['Dish Name']}</h3>
+                <p>${item['Price ($)']}</p>
+                <p>{item['Description']}</p>
             </div>
-            <div style="flex-shrink: 0; text-align: center;">
-                <img src="{item['Image URL']}" alt="{item['Dish Name']}" style="width: 100px; height: 100px; border-radius: 8px; object-fit: cover; margin-bottom: 10px;">
-                <button style="background-color: #28a745; color: white; border: none; padding: 8px 15px; font-size: 14px; border-radius: 5px; cursor: pointer;" onclick="openModal('{item['Dish Name']}', '{item['Image URL']}', '{item['Description']}', '{item['Price ($)']}')">Add</button>
+            <div>
+                <img src="{item['Image URL']}" alt="{item['Dish Name']}" style="width: 100px; height: 100px; object-fit: cover; border-radius: 5px;">
+                <button onclick="openModal('{item['Dish Name']}', {item['Price ($)']})" style="margin-top: 10px; background-color: #28a745; color: white; padding: 8px; border: none; border-radius: 5px;">Add</button>
             </div>
         </div>
         """
-    return html_content
+    return menu_html
+
+# Function to view cart
+def view_cart():
+    if not cart:
+        return "<p>Your cart is empty.</p>"
+
+    cart_html = "<h2>Your Cart</h2><div>"
+    total_amount = 0
+    for item in cart:
+        item_total = item["price"] * item["quantity"]
+        total_amount += item_total
+        extras = ", ".join(item["extras"]) if item["extras"] else "No extras"
+        cart_html += f"""
+        <div style="margin-bottom: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
+            <h3>{item['name']}</h3>
+            <p>Price: ${item['price']}</p>
+            <p>Quantity: {item['quantity']}</p>
+            <p>Extras: {extras} (Extras Total: ${item['extras_total']:.2f})</p>
+            <p>Special Instructions: {item['instructions']}</p>
+            <p><strong>Total: ${item_total:.2f}</strong></p>
+        </div>
+        """
+    cart_html += f"<h3>Grand Total: ${total_amount:.2f}</h3></div>"
+    return cart_html
 
-# Login and Signup Functions
+# Function for login and signup
 def authenticate_user(email, password):
-    if check_credentials(email, password):
-        return gr.update(visible=False), gr.update(visible=True), ""
-    else:
-        return gr.update(visible=True), gr.update(visible=False), "Invalid email or password. Try again."
-
-def navigate_to_signup():
-    return gr.update(visible=False), gr.update(visible=True)
+    # This is a dummy function. Replace with your actual user authentication logic.
+    if email == "test@example.com" and password == "password":
+        return gr.update(visible=False), gr.update(visible=True)
+    return gr.update(visible=True), gr.update(visible=False), "Invalid email or password."
 
-def create_account(name, phone, email, password):
-    if save_user(name, phone, email, password):
-        return "Account created successfully! You can now log in.", gr.update(visible=True), gr.update(visible=False)
-    else:
-        return "Email already exists. Try logging in.", gr.update(visible=False), gr.update(visible=True)
+def create_account(name, email, password):
+    # Dummy function to simulate account creation
+    return f"Account created for {name}. Please log in."
 
-def navigate_to_login():
-    return gr.update(visible=True), gr.update(visible=False)
-
-# Gradio app with popup modal and cart system
+# Gradio App
 def app():
     with gr.Blocks() as demo:
         # Login Page
-        with gr.Column(visible=True) as login_section:
+        with gr.Column(visible=True) as login_page:
             gr.Markdown("# Login Page")
-            email = gr.Textbox(label="Email", placeholder="Enter your email")
-            password = gr.Textbox(label="Password", placeholder="Enter your password", type="password")
-            error_box = gr.Markdown("", visible=False)
+            email = gr.Textbox(label="Email")
+            password = gr.Textbox(label="Password", type="password")
+            login_error = gr.Textbox(visible=False, label="Error", interactive=False)
             login_btn = gr.Button("Login")
-            create_account_btn = gr.Button("Create an Account")
-
-        # Sign-Up Page
-        with gr.Column(visible=False) as signup_section:
-            gr.Markdown("# Sign Up Page")
-            name = gr.Textbox(label="Name", placeholder="Enter your full name")
-            phone = gr.Textbox(label="Phone", placeholder="Enter your phone number")
-            signup_email = gr.Textbox(label="Email", placeholder="Enter your email")
-            signup_password = gr.Textbox(label="Password", placeholder="Enter a password", type="password")
-            success_message = gr.Markdown("", visible=False)
-            error_message = gr.Markdown("", visible=False)
-            submit_btn = gr.Button("Sign Up")
-            back_to_login_btn = gr.Button("Back to Login")
-
-        # Preferences and Menu Section
-        with gr.Column(visible=False) as preference_section:
-            gr.Markdown("## Preferences")
-            selected_preference = gr.Radio(
-                choices=["All", "Vegetarian", "Halal/Non-Veg", "Guilt-Free"],
-                value="All",
-                label="Choose a Preference",
-            )
-            menu_output = gr.HTML(value=filter_menu("All"))
-            cart_output = gr.HTML(value="Your cart is empty.", elem_id="floating-cart")
-            modal_window = gr.HTML("""
-            <div id="modal" style="display: none; position: fixed; top: 10%; left: 50%; transform: translate(-50%, 0); background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000;">
-                <div style="text-align: right;">
-                    <button onclick="closeModal()" style="background: none; border: none; font-size: 20px; cursor: pointer;">&times;</button>
-                </div>
-                <img id="modal-image" style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px;" />
-                <h3 id="modal-name"></h3>
-                <p id="modal-description"></p>
-                <p id="modal-price" style="font-size: 18px; color: #28a745; font-weight: bold;"></p>
-                <label>Extras:</label>
-                <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;">
-                    <label><input type="checkbox" name="extra" value="Thums up" /> Thums up + $2.00</label>
-                    <label><input type="checkbox" name="extra" value="Sprite" /> Sprite + $2.00</label>
-                    <label><input type="checkbox" name="extra" value="Extra Raitha" /> Extra Raitha + $1.00</label>
-                    <label><input type="checkbox" name="extra" value="Extra Salan" /> Extra Salan + $2.00</label>
-                    <label><input type="checkbox" name="extra" value="Extra Onion & Lemon" /> Extra Onion & Lemon + $2.00</label>
-                    <label><input type="checkbox" name="extra" value="Chilli Chicken" /> Chilli Chicken + $14.00</label>
-                    <label><input type="checkbox" name="extra" value="Veg Manchurian" /> Veg Manchurian + $12.00</label>
-                </div>
-                <label for="quantity">Quantity:</label>
-                <input type="number" id="quantity" value="1" min="1" style="width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px;" />
-                <label for="special-instructions">Special Instructions:</label>
-                <textarea id="special-instructions" placeholder="Add special instructions here..." style="width: 100%; height: 60px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 10px;"></textarea>
-                <button onclick="addToCart()" style="width: 100%; padding: 10px; background-color: #28a745; color: white; border: none; border-radius: 5px; font-size: 16px;">Add to Cart</button>
-            </div>
-            """)
-            selected_preference.change(filter_menu, inputs=[selected_preference], outputs=[menu_output])
+            signup_btn = gr.Button("Create Account")
+
+        # Signup Page
+        with gr.Column(visible=False) as signup_page:
+            gr.Markdown("# Signup Page")
+            name = gr.Textbox(label="Name")
+            signup_email = gr.Textbox(label="Email")
+            signup_password = gr.Textbox(label="Password", type="password")
+            signup_message = gr.Textbox(interactive=False, label="Message")
+            create_account_btn = gr.Button("Sign Up")
+            back_to_login = gr.Button("Back to Login")
+
+        # Menu Page
+        with gr.Column(visible=False) as menu_page:
+            gr.Markdown("# Menu")
+            menu_display = gr.HTML(render_menu())
+            view_cart_btn = gr.Button("View Cart")
+
+        # Cart Page
+        with gr.Column(visible=False) as cart_page:
+            cart_display = gr.HTML("")
+            back_to_menu_btn = gr.Button("Back to Menu")
 
         # Button Actions
-        login_btn.click(authenticate_user, inputs=[email, password], outputs=[login_section, preference_section, error_box])
-        create_account_btn.click(navigate_to_signup, inputs=[], outputs=[login_section, signup_section])
-        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])
-
-        # Cart HTML Placeholder
-        gr.HTML('<div id="floating-cart" style="margin-top: 20px;"></div>')
-
-        # JavaScript for Popup and Cart Management
+        login_btn.click(authenticate_user, inputs=[email, password], outputs=[login_page, menu_page, login_error])
+        signup_btn.click(lambda: (gr.update(visible=False), gr.update(visible=True)), outputs=[login_page, signup_page])
+        create_account_btn.click(create_account, inputs=[name, signup_email, signup_password], outputs=[signup_message])
+        back_to_login.click(lambda: (gr.update(visible=True), gr.update(visible=False)), outputs=[login_page, signup_page])
+        view_cart_btn.click(lambda: (gr.update(visible=False), gr.update(visible=True), view_cart()),
+                            outputs=[menu_page, cart_page, cart_display])
+        back_to_menu_btn.click(lambda: (gr.update(visible=True), gr.update(visible=False)),
+                               outputs=[menu_page, cart_page])
+
+        # JavaScript for Modal Popup
         gr.HTML("""
         <script>
         let cart = [];
@@ -138,22 +119,13 @@ def app():
             "Sprite": 2,
             "Extra Raitha": 1,
             "Extra Salan": 2,
-            "Extra Onion & Lemon": 2,
-            "Chilli Chicken": 14,
-            "Veg Manchurian": 12
         };
 
-        function openModal(name, image, description, price) {
+        function openModal(name, price) {
             const modal = document.getElementById('modal');
             modal.style.display = 'block';
-            modal.style.position = 'fixed';
-            modal.style.top = '10%';
-            modal.style.left = '50%';
-            modal.style.transform = 'translate(-50%, 0)';
-            document.getElementById('modal-image').src = image;
             document.getElementById('modal-name').innerText = name;
-            document.getElementById('modal-description').innerText = description;
-            document.getElementById('modal-price').innerText = `$${price}`;
+            document.getElementById('modal-price').innerText = price;
         }
 
         function closeModal() {
@@ -162,59 +134,27 @@ def app():
 
         function addToCart() {
             const name = document.getElementById('modal-name').innerText;
-            const price = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
+            const price = parseFloat(document.getElementById('modal-price').innerText);
             const quantity = parseInt(document.getElementById('quantity').value) || 1;
             const specialInstructions = document.getElementById('special-instructions').value || "None";
 
-            const selectedExtras = Array.from(document.querySelectorAll('input[name="extra"]:checked')).map(extra => extra.value);
-            const extrasCost = selectedExtras.reduce((sum, extra) => sum + (extrasPrices[extra] || 0), 0);
+            const selectedExtras = Array.from(document.querySelectorAll('input[name="extras"]:checked')).map(extra => extra.value);
+            const extrasTotal = selectedExtras.reduce((sum, extra) => sum + (extrasPrices[extra] || 0), 0);
 
-            const itemTotal = (price + extrasCost) * quantity;
+            const itemTotal = (price + extrasTotal) * quantity;
 
             cart.push({
                 name,
                 price,
                 quantity,
-                selectedExtras,
-                extrasCost,
-                itemTotal,
-                specialInstructions
+                extras: selectedExtras,
+                extras_total: extrasTotal,
+                instructions: specialInstructions,
+                item_total: itemTotal
             });
 
             alert(`${name} added to cart!`);
             closeModal();
-            updateCart();
-        }
-
-        function updateCart() {
-            let cartHTML = '<div style="padding: 10px; border: 1px solid #ddd; border-radius: 8px;">';
-            let totalAmount = 0;
-
-            cart.forEach((item, index) => {
-                totalAmount += item.itemTotal;
-                const extrasList = item.selectedExtras.length ? item.selectedExtras.join(', ') : "No extras";
-
-                cartHTML += `
-                    <div style="margin-bottom: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
-                        <strong>${item.name}</strong> <br>
-                        Price: $${item.price.toFixed(2)} <br>
-                        Quantity: ${item.quantity} <br>
-                        Extras: ${extrasList} (Total Extras Cost: $${item.extrasCost.toFixed(2)}) <br>
-                        Special Instructions: ${item.specialInstructions} <br>
-                        Item Total: $${item.itemTotal.toFixed(2)}
-                        <button style="margin-top: 5px; background-color: red; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer;" onclick="removeFromCart(${index})">Remove</button>
-                    </div>
-                `;
-            });
-
-            cartHTML += `<div style="text-align: right; font-size: 16px; font-weight: bold;">Total Amount: $${totalAmount.toFixed(2)}</div>`;
-            cartHTML += '</div>';
-            document.getElementById('floating-cart').innerHTML = cartHTML;
-        }
-
-        function removeFromCart(index) {
-            cart.splice(index, 1);
-            updateCart();
         }
         </script>
         """)