Update app.py

app.py

@@ -4,81 +4,54 @@ from simple_salesforce import Salesforce
 # Salesforce Connection
 sf = Salesforce(username='[email protected]', password='Sati@1020', security_token='sSSjyhInIsUohKpG8sHzty2q')
 
-
-# Function to fetch menu items from Salesforce
-def load_menu_from_salesforce():
-    try:
-        query = "SELECT Id, Name, Price__c, Description__c, Image1__c, Veg_NonVeg__c, Section__c FROM Menu_Item__c"
-        result = sf.query(query)
-        return result['records']
-    except Exception as e:
-        print(f"Error fetching menu items: {e}")
-        return []
-
-# Function to fetch add-ons from Salesforce
-def load_add_ons_from_salesforce():
-    try:
-        query = "SELECT Name, Price__c, Menu_Item__c FROM Add_Ons__c"
-        result = sf.query(query)
-        return result['records']
-    except Exception as e:
-        print(f"Error fetching add-ons: {e}")
-        return []
-
-# Function to generate HTML for menu items
-def generate_menu_html(menu_items, add_ons):
-    add_ons_by_item = {}
-    for add_on in add_ons:
-        menu_item_id = add_on.get('Menu_Item__c', None)
-        if menu_item_id:
-            if menu_item_id not in add_ons_by_item:
-                add_ons_by_item[menu_item_id] = []
-            add_ons_by_item[menu_item_id].append({
-                "name": add_on["Name"],
-                "price": add_on["Price__c"]
-            })
-
+# Fetch menu items from Salesforce
+def fetch_menu():
+    query = "SELECT Id, Name, Price__c, Description__c, Image1__c, Veg_NonVeg__c, Section__c FROM Menu_Item__c"
+    result = sf.query(query)
+    return result['records']
+
+# Fetch add-ons from Salesforce
+def fetch_add_ons():
+    query = "SELECT Id, Name, Price__c, Menu_Item__c FROM Add_Ons__c"
+    result = sf.query(query)
+    return result['records']
+
+# Generate HTML for the menu items
+def generate_menu_html(menu_items, add_ons, preference):
     html = ""
-    current_section = None
-    for item in menu_items:
-        if item["Section__c"] != current_section:
-            if current_section is not None:
-                html += "</div>"
-            current_section = item["Section__c"]
-            html += f"<h2>{current_section}</h2><div class='menu-section'>"
-
-        add_ons_list = add_ons_by_item.get(item['Id'], [])
-        html += f"""
-        <div class="menu-item">
-            <img src="{item.get('Image1__c', '')}" alt="{item['Name']}" style="width: 150px; height: 150px; object-fit: cover;">
-            <h3>{item['Name']}</h3>
-            <p>{item.get('Description__c', 'No description available.')}</p>
-            <p>Price: ${item['Price__c']}</p>
-            <button onclick="openPopup('{item['Name']}', '{item['Price__c']}', {add_ons_list})">Customize & Add</button>
-        </div>
-        """
-
-    if current_section is not None:
+    sections = set(item['Section__c'] for item in menu_items)
+
+    for section in sorted(sections):
+        html += f"<h2>{section}</h2><div style='display: flex; flex-wrap: wrap; gap: 20px;'>"
+        for item in menu_items:
+            if item['Section__c'] == section and (preference == 'All' or item['Veg_NonVeg__c'] == preference):
+                item_add_ons = [addon for addon in add_ons if addon['Menu_Item__c'] == item['Id']]
+                add_ons_html = "".join(
+                    f"<div><input type='checkbox' value='{addon['Name']}' data-price='{addon['Price__c']}'> {addon['Name']} (+${addon['Price__c']})</div>"
+                    for addon in item_add_ons
+                )
+                html += f"""
+                <div style='width: 300px; border: 1px solid #ddd; padding: 10px; border-radius: 8px;'>
+                    <img src='{item['Image1__c']}' alt='{item['Name']}' style='width: 100%; height: 150px; object-fit: cover; border-radius: 8px;'>
+                    <h3>{item['Name']}</h3>
+                    <p>{item['Description__c']}</p>
+                    <p>Price: ${item['Price__c']}</p>
+                    <button onclick="openPopup('{item['Name']}', '{item['Price__c']}', '{item['Image1__c']}', `{add_ons_html}`)">Customize & Add</button>
+                </div>
+                """
         html += "</div>"
     return html
 
 # JavaScript for popup functionality
 popup_script = """
 <script>
-    function openPopup(name, price, addOns) {
+    function openPopup(name, price, image, addOnsHtml) {
         const popup = document.getElementById('popup');
-        const addOnsContainer = document.getElementById('add-ons-container');
-        
         popup.style.display = 'block';
-        document.getElementById('popup-item-name').innerText = name;
-        document.getElementById('popup-item-price').innerText = `Price: $${price}`;
-
-        addOnsContainer.innerHTML = "";
-        addOns.forEach(addOn => {
-            const addOnElement = document.createElement('div');
-            addOnElement.innerHTML = `${addOn.name} (+$${addOn.price}) <input type='checkbox' value='${addOn.name}'>`;
-            addOnsContainer.appendChild(addOnElement);
-        });
+        document.getElementById('popup-name').innerText = name;
+        document.getElementById('popup-price').innerText = `$${price}`;
+        document.getElementById('popup-image').src = image;
+        document.getElementById('popup-addons').innerHTML = addOnsHtml;
     }
 
     function closePopup() {
@@ -87,27 +60,30 @@ popup_script = """
 </script>
 """
 
-# Load data from Salesforce
-menu_items = load_menu_from_salesforce()
-add_ons = load_add_ons_from_salesforce()
-menu_html = generate_menu_html(menu_items, add_ons)
-
 # Gradio app
 with gr.Blocks() as app:
     with gr.Row():
-        gr.HTML("<h1>Welcome to Biryani Hub</h1>")
+        gr.Markdown("# Welcome to Biryani Hub")
+
+    preference = gr.Radio(label="Filter Preference", choices=["All", "Veg", "Non-Veg"], value="All")
+    menu_html = gr.HTML()
 
     with gr.Row():
-        gr.HTML(menu_html)
+        gr.HTML("""
+        <div id='popup' style='display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);'>
+            <img id='popup-image' src='' alt='' style='width: 100%; height: 150px; object-fit: cover; border-radius: 8px;'>
+            <h2 id='popup-name'></h2>
+            <p id='popup-price'></p>
+            <div id='popup-addons'></div>
+            <button onclick='closePopup()'>Close</button>
+        </div>
+        """ + popup_script)
+
+    def update_menu(preference):
+        menu_items = fetch_menu()
+        add_ons = fetch_add_ons()
+        return generate_menu_html(menu_items, add_ons, preference)
 
-    gr.HTML(popup_script)
-    gr.HTML("""
-    <div id="popup" style="display: none; position: fixed; top: 20%; left: 30%; width: 40%; background: white; padding: 20px; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);">
-        <h2 id="popup-item-name"></h2>
-        <p id="popup-item-price"></p>
-        <div id="add-ons-container"></div>
-        <button onclick="closePopup()">Close</button>
-    </div>
-    """)
+    preference.change(update_menu, inputs=preference, outputs=menu_html)
 
 app.launch()