Update app.py

app.py

@@ -64,6 +64,15 @@ def load_menu_from_salesforce():
     except Exception as e:
         return []
 
+# Function to load add-ons data
+def load_add_ons_from_salesforce():
+    try:
+        query = "SELECT Name, Price__c FROM Add_Ons__c"
+        result = sf.query(query)
+        return result['records']
+    except Exception as e:
+        return []
+
 # Function to filter menu items
 def filter_menu(preference):
     menu_data = load_menu_from_salesforce()
@@ -103,7 +112,40 @@ def filter_menu(preference):
 
     return html_content
 
-# JavaScript for Modal and Cart
+# Create Modal Window HTML
+def create_modal_window():
+    add_ons = load_add_ons_from_salesforce()
+    add_ons_html = ""
+    for add_on in add_ons:
+        add_ons_html += f"""
+        <label>
+            <input type="checkbox" name="biryani-extra" value="{add_on['Name']}" data-price="{add_on['Price__c']}" />
+            {add_on['Name']} + ${add_on['Price__c']}
+        </label>
+        """
+
+    modal_html = f"""
+    <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;">
+        <div style="text-align: right;">
+            <button onclick="closeModal()" style="background: none; border: none; font-size: 18px; cursor: pointer;">&times;</button>
+        </div>
+        <img id="modal-image" style="width: 100%; height: 300px; border-radius: 8px; margin-bottom: 20px;" />
+        <h2 id="modal-name"></h2>
+        <p id="modal-description"></p>
+        <p id="modal-price"></p>
+        <label for="biryani-extras"><strong>Add-ons :</strong></label>
+        <div id="biryani-extras-options" style="display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0;">
+            {add_ons_html}
+        </div>
+        <label for="quantity">Quantity:</label>
+        <input type="number" id="quantity" value="1" min="1" style="width: 50px;" />
+        <textarea id="special-instructions" placeholder="Add your special instructions here..." style="width: 100%; height: 60px;"></textarea>
+        <button style="background-color: #28a745; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 5px; cursor: pointer;" onclick="addToCart()">Add to Cart</button>
+    </div>
+    """
+    return modal_html
+
+# JavaScript for Modal Functionality
 def modal_js():
     modal_script = """
     <script>
@@ -111,23 +153,22 @@ def modal_js():
 
         function openModal(name, image2, description, price) {
             const modal = document.getElementById('modal');
-            modal.style.display = 'block'; // Make the modal visible
+            modal.style.display = 'block';
             modal.style.position = 'fixed';
             modal.style.width = window.innerWidth <= 768 ? '90%' : '30%';
-            modal.style.top = '50%';
+            modal.style.top = ${event.clientY}px;
             modal.style.left = '50%';
             modal.style.transform = 'translate(-50%, -50%)';
-            document.getElementById('modal-image').src = image2 || ''; // Set image or leave empty
+            document.getElementById('modal-image').src = image2;
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-description').innerText = description;
             document.getElementById('modal-price').innerText = price;
-            document.getElementById('quantity').value = 1; // Reset quantity
-            document.getElementById('special-instructions').value = ''; // Reset special instructions
+            document.getElementById('quantity').value = 1;
+            document.getElementById('special-instructions').value = '';
         }
 
         function closeModal() {
-            const modal = document.getElementById('modal');
-            modal.style.display = 'none'; // Hide the modal
+            document.getElementById('modal').style.display = 'none';
         }
 
         function addToCart() {
@@ -142,22 +183,16 @@ def modal_js():
             const extrasCost = extras.reduce((total, extra) => total + extra.price, 0);
             const totalCost = (price + extrasCost) * quantity;
             cart.push({ name, price, quantity, extras, instructions, totalCost });
-            updateCartButton();
+            updateCartUI();
             closeModal();
         }
 
-        function updateCartButton() {
-            const cartButton = document.getElementById('cart-button');
-            cartButton.textContent = `View Cart (${cart.length} items)`;
-        }
-
-        function openCartModal() {
-            const cartModal = document.getElementById('cart-modal');
-            const cartItemsContainer = document.getElementById('cart-items');
-            cartItemsContainer.innerHTML = "";
+        function updateCartUI() {
+            const cartContainer = document.getElementById('cart-container');
+            cartContainer.innerHTML = "";
             cart.forEach((item, index) => {
-                const extrasList = item.extras.map(extra => `${extra.name} (+$${extra.price.toFixed(2)})`).join(', ');
-                cartItemsContainer.innerHTML += `
+                const extrasList = item.extras.map(extra => ${extra.name} (+$${extra.price.toFixed(2)})).join(', ');
+                cartContainer.innerHTML += 
                     <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px;">
                         <h3>${item.name}</h3>
                         <p>Quantity: ${item.quantity}</p>
@@ -166,29 +201,19 @@ def modal_js():
                         <p>Total Cost: $${item.totalCost.toFixed(2)}</p>
                         <button onclick="removeFromCart(${index})" style="color: red;">Remove</button>
                     </div>
-                `;
+                ;
             });
-            cartModal.style.display = 'block'; // Make the cart modal visible
-        }
-
-        function closeCartModal() {
-            const cartModal = document.getElementById('cart-modal');
-            cartModal.style.display = 'none'; // Hide the cart modal
         }
 
         function removeFromCart(index) {
             cart.splice(index, 1);
-            updateCartButton();
-            openCartModal(); // Refresh the cart modal
-        }
-
-        function proceedToCheckout() {
-            alert("Proceeding to checkout...");
+            updateCartUI();
         }
     </script>
     """
     return modal_script
 
+
 # Gradio App
 with gr.Blocks() as app:
     with gr.Row():
@@ -202,12 +227,27 @@ with gr.Blocks() as app:
             signup_button = gr.Button("Go to Signup")
             login_output = gr.Textbox(label="Status")
 
+    with gr.Row(visible=False) as signup_page:
+        with gr.Column():
+            signup_name = gr.Textbox(label="Name")
+            signup_email = gr.Textbox(label="Email")
+            signup_phone = gr.Textbox(label="Phone")
+            signup_password = gr.Textbox(label="Password", type="password")
+            submit_signup = gr.Button("Signup")
+            login_redirect = gr.Button("Go to Login")
+            signup_output = gr.Textbox(label="Status")
+
     with gr.Row(visible=False) as menu_page:
         with gr.Column():
             preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Filter Preference", value="All")
+
+            # Duplicate View Cart at the top
+            gr.HTML("<div id='cart-container-top' style='margin-top: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9;'>Your cart is empty.</div>")
+
             menu_output = gr.HTML()
-            gr.HTML("<div id='cart-modal' style='display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000; overflow-y: auto;'><div style='padding: 20px;'><div style='text-align: right;'><button onclick='closeCartModal()' style='background: none; border: none; font-size: 24px; cursor: pointer;'>&times;</button></div><h1>Your Cart</h1><div id='cart-items'></div><button style='background: #ff5722; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='proceedToCheckout()'>Proceed to Checkout</button></div></div>")
-            gr.HTML(modal_js())
+            gr.HTML("<div id='cart-container' style='margin-top: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9;'>Your cart is empty.</div>")
+            gr.HTML(create_modal_window())  # Add modal window HTML
+            gr.HTML(modal_js())  # Add modal JavaScript
 
     login_button.click(
         lambda email, password: (gr.update(visible=False), gr.update(visible=True), gr.update(value=filter_menu("All")), "Login successful!")