Update app.py

app.py

@@ -5,50 +5,55 @@ from simple_salesforce import Salesforce
 sf = Salesforce(username='[email protected]', password='Sati@1020', security_token='sSSjyhInIsUohKpG8sHzty2q')
 
 # 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']
+def fetch_menu_items():
+    query = "SELECT Id, Name, Price__c, Description__c, Image1__c, Section__c, Veg_NonVeg__c FROM Menu_Item__c"
+    results = sf.query(query)['records']
+    return results
 
 # 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']
+    query = "SELECT Name, Price__c, Menu_Item__c FROM Add_Ons__c"
+    results = sf.query(query)['records']
+    return results
 
-# Generate HTML for the menu items
-def generate_menu_html(menu_items, add_ons, preference):
-    html = ""
-    sections = set(item['Section__c'] for item in menu_items)
+# Generate menu HTML
+def generate_menu_html(menu_items, add_ons):
+    add_ons_by_item = {}
+    for add_on in add_ons:
+        item_id = add_on['Menu_Item__c']
+        if item_id not in add_ons_by_item:
+            add_ons_by_item[item_id] = []
+        add_ons_by_item[item_id].append(f"{add_on['Name']} (+${add_on['Price__c']})")
 
-    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 = ""
+    sections = {item['Section__c'] for item in menu_items}
+    for section in sections:
+        html += f"<h2>{section}</h2><div style='display: flex; flex-wrap: wrap;'>"
+        for item in [i for i in menu_items if i['Section__c'] == section]:
+            add_ons_list = add_ons_by_item.get(item['Id'], [])
+            add_ons_html = "<br>".join(add_ons_list)
+            html += f"""
+            <div style='width: 250px; margin: 10px; border: 1px solid #ccc; border-radius: 8px; padding: 10px;'>
+                <img src='{item['Image1__c']}' alt='{item['Name']}' style='width: 100%; height: 150px; object-fit: cover;'>
+                <h3>{item['Name']}</h3>
+                <p>{item['Description__c']}</p>
+                <p>Price: ${item['Price__c']}</p>
+                <button onclick="openPopup('{item['Id']}', '{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, image, addOnsHtml) {
+    function openPopup(id, name, price, image, addOnsHtml) {
         const popup = document.getElementById('popup');
         popup.style.display = 'block';
-        document.getElementById('popup-name').innerText = name;
+        popup.style.width = '400px';
+        popup.style.height = '600px';
+        popup.style.margin = 'auto';
+        document.getElementById('popup-title').innerText = name;
         document.getElementById('popup-price').innerText = `$${price}`;
         document.getElementById('popup-image').src = image;
         document.getElementById('popup-addons').innerHTML = addOnsHtml;
@@ -60,30 +65,31 @@ popup_script = """
 </script>
 """
 
-# Gradio app
+# Gradio App
+menu_items = fetch_menu_items()
+add_ons = fetch_add_ons()
+menu_html = generate_menu_html(menu_items, add_ons)
+
 with gr.Blocks() as app:
     with gr.Row():
-        gr.Markdown("# Welcome to Biryani Hub")
-
-    preference = gr.Radio(label="Filter Preference", choices=["All", "Veg", "Non-Veg"], value="All")
-    menu_html = gr.HTML()
+        gr.HTML("<h1 style='text-align: center;'>Welcome to Biryani Hub</h1>")
 
     with gr.Row():
-        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)
+        gr.HTML("<div>Filter Preference: <input type='radio' name='filter' value='All' checked> All <input type='radio' name='filter' value='Veg'> Veg <input type='radio' name='filter' value='Non-Veg'> Non-Veg</div>")
 
-    def update_menu(preference):
-        menu_items = fetch_menu()
-        add_ons = fetch_add_ons()
-        return generate_menu_html(menu_items, add_ons, preference)
+    with gr.Row():
+        gr.HTML(menu_html)
 
-    preference.change(update_menu, inputs=preference, outputs=menu_html)
+    # Popup
+    gr.HTML("""
+    <div id='popup' style='display: none; position: fixed; top: 20%; left: 50%; transform: translate(-50%, -20%); background: white; border: 1px solid #ccc; border-radius: 8px; padding: 20px; z-index: 1000;'>
+        <img id='popup-image' src='' style='width: 100%; height: 200px; object-fit: cover;'>
+        <h2 id='popup-title'></h2>
+        <p id='popup-price'></p>
+        <textarea id='popup-instructions' placeholder='Special Instructions' style='width: 100%; height: 80px;'></textarea>
+        <div id='popup-addons'></div>
+        <button onclick='closePopup()'>Close</button>
+    </div>
+    """ + popup_script)
 
 app.launch()