Update app.py

app.py

@@ -17,20 +17,6 @@ def add_item_to_cart(item_name, price, extras="None"):
     cart.append({"name": item_name, "price": price, "extras": extras, "count": 1})
     return update_cart()
 
-def remove_item_from_cart(item_name):
-    for item in cart:
-        if item['name'] == item_name:
-            item['count'] -= 1
-            if item['count'] == 0:
-                cart.remove(item)
-            break
-    return update_cart()
-
-def clear_cart():
-    global cart
-    cart = []
-    return update_cart()
-
 def update_cart():
     if not cart:
         return "<p>Your cart is empty.</p>"
@@ -60,7 +46,7 @@ def display_dishes(category="ALL"):
             <h4>{dish['name']}</h4>
             <p>{dish['description']}</p>
             <p><strong>Price:</strong> ${dish['price']}</p>
-            <button onclick="addToCart('{dish['name']}', {dish['price']})" style='padding: 5px 10px; background-color: #28a745; color: white; border: none; border-radius: 3px;'>Add to Cart</button>
+            <button onclick="showMenuPopup('{dish['name']}', '{dish['description']}', {dish['price']}, '{dish['image']}')" style='padding: 5px 10px; background-color: #28a745; color: white; border: none; border-radius: 3px;'>Add to Cart</button>
         </div>
         """
     html_content += "</div>"
@@ -96,20 +82,48 @@ with gr.Blocks() as demo:
             <button onclick='placeOrder()' style='margin-top: 10px; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; display: block; width: 100%;'>Place Order</button>
         </div>
 
+        <div id='menu-popup' style='display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px;'>
+            <span onclick='closeMenuPopup()' style='position: absolute; top: 10px; right: 15px; font-size: 20px; font-weight: bold; cursor: pointer;'>&times;</span>
+            <img id='popup-image' src='' style='width: 100%; border-radius: 5px; margin-bottom: 10px;'>
+            <h4 id='popup-title'></h4>
+            <p id='popup-description'></p>
+            <p id='popup-price'></p>
+            <button onclick='addItemToCartFromPopup()' style='padding: 5px 10px; background-color: #28a745; color: white; border: none; border-radius: 5px; width: 100%;'>Add to Cart</button>
+        </div>
+
         <script>
+            let selectedItem = '';
+            let selectedPrice = 0;
+            let selectedExtras = 'None';
+
             window.toggleCartPopup = function() {
                 const popup = document.getElementById('cart-popup');
                 popup.style.display = popup.style.display === 'block' ? 'none' : 'block';
             }
 
-            window.addToCart = function(name, price) {
+            window.showMenuPopup = function(name, description, price, image) {
+                selectedItem = name;
+                selectedPrice = price;
+                document.getElementById('popup-title').textContent = name;
+                document.getElementById('popup-description').textContent = description;
+                document.getElementById('popup-price').textContent = `Price: $${price}`;
+                document.getElementById('popup-image').src = image;
+                document.getElementById('menu-popup').style.display = 'block';
+            }
+
+            window.closeMenuPopup = function() {
+                document.getElementById('menu-popup').style.display = 'none';
+            }
+
+            window.addItemToCartFromPopup = function() {
                 fetch('/run/predict', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ data: [name, price] })
+                    body: JSON.stringify({ data: [selectedItem, selectedPrice, selectedExtras] })
                 }).then(response => response.json()).then(data => {
                     document.getElementById('cart-content').innerHTML = data.data;
-                    alert(`${name} has been added to your cart.`);
+                    alert(`${selectedItem} has been added to your cart.`);
+                    closeMenuPopup();
                 });
             }