Update templates/menu_page.html

templates/menu_page.html

@@ -68,21 +68,24 @@
         <!-- Dynamic Menu Item List -->
         <div id="menu-items">
             <!-- Menu items will be populated here from the backend -->
+            {% for item in menu_items %}
+            <div class="menu-item">
+                <div class="details">
+                    <h3>{{ item.name }}</h3>
+                    <p><strong>Ingredients:</strong> {{ item.ingredients }}</p>
+                    <p><strong>Category:</strong> {{ item.category }}</p>
+                    <p class="price">Price: ₹{{ item.price }}</p>
+                </div>
+                <button class="order-btn" onclick="addToCart('{{ item.name }}', {{ item.price }})">Add to Cart</button>
+            </div>
+            {% endfor %}
         </div>
 
         <button id="listen-btn">Say "Order" to order an item</button>
-        <div id="cart-summary" style="display:none;">
-            <h2>Your Cart:</h2>
-            <div id="cart-details"></div>
-            <button id="place-order-btn" onclick="placeOrder()">Place Final Order</button>
-        </div>
     </div>
 
     <script>
         const listenButton = document.getElementById("listen-btn");
-        const cartSummary = document.getElementById("cart-summary");
-        const cartDetails = document.getElementById("cart-details");
-        let cart = [];  // Global cart variable to store items
         const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
         recognition.lang = "en-US";
         recognition.interimResults = false;
@@ -93,77 +96,6 @@
             window.speechSynthesis.speak(msg);
         }
 
-        // Function to fetch and populate the menu
-        function fetchMenu() {
-            fetch("/menu")
-                .then(response => response.json())
-                .then(data => {
-                    let menuContent = "";
-                    data.forEach(item => {
-                        menuContent += `
-                            <div class="menu-item">
-                                <div class="details">
-                                    <h3>${item.name}</h3>
-                                    <p><strong>Ingredients:</strong> ${item.ingredients}</p>
-                                    <p><strong>Category:</strong> ${item.category}</p>
-                                    <p class="price">Price: ₹${item.price}</p>
-                                </div>
-                                <button class="order-btn" onclick="addToCart('${item.name}', ${item.price})">Order</button>
-                            </div>
-                        `;
-                    });
-                    document.getElementById('menu-items').innerHTML = menuContent;
-                })
-                .catch(error => console.error("Error fetching menu:", error));
-        }
-
-        // Function to add item to the cart
-        function addToCart(itemName, itemPrice) {
-            const quantity = prompt(`How many ${itemName} would you like?`);
-            if (quantity && !isNaN(quantity) && quantity > 0) {
-                cart.push({ name: itemName, price: itemPrice, quantity: parseInt(quantity) });
-                speak(`${quantity} x ${itemName} added to your cart.`);
-                showCartDetails();
-            }
-        }
-
-        // Function to display cart details
-        function showCartDetails() {
-            if (cart.length > 0) {
-                let cartHtml = "";
-                cart.forEach(item => {
-                    cartHtml += `<p>${item.quantity} x ${item.name} - ₹${item.price * item.quantity}</p>`;
-                });
-                cartDetails.innerHTML = cartHtml;
-                cartSummary.style.display = "block";
-            } else {
-                speak("Your cart is empty.");
-            }
-        }
-
-        // Function to place the final order
-        function placeOrder() {
-            fetch("/place_order", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ cart: cart })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.message === "Order placed successfully!") {
-                    speak("Your order has been placed successfully.");
-                    cart = [];  // Clear cart after order
-                    cartSummary.style.display = "none";  // Hide cart summary
-                } else {
-                    speak("An error occurred while placing the order. Please try again.");
-                }
-            })
-            .catch(error => {
-                speak("An error occurred while placing the order. Please try again.");
-            });
-        }
-
-        // Event listener for listening button
         listenButton.addEventListener("click", () => {
             speak("Please say the item you want to order.");
             recognition.start();
@@ -172,10 +104,10 @@
         recognition.onresult = (event) => {
             const command = event.results[0][0].transcript.toLowerCase();
             console.log("User said:", command);
+            // Add logic to recognize specific items or trigger actions based on the command
             if (command.includes("order")) {
-                speak("Which item would you like to order?");
-            } else {
-                speak("Sorry, I couldn't understand that. Please try again.");
+                // For example, navigate or process an order (customize as needed)
+                speak("Your order has been placed.");
             }
         };
 
@@ -184,94 +116,28 @@
             speak("Sorry, I couldn't understand that. Please try again.");
         };
 
-        // Load menu on page load
-        window.onload = function() {
-            fetchMenu();
+        function addToCart(itemName, itemPrice) {
+            const quantity = prompt(`How many of ${itemName} would you like to add?`);
+            if (quantity && !isNaN(quantity) && quantity > 0) {
+                // Send the data to the server to add to the cart
+                fetch("/add_to_cart", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                        item_name: itemName,
+                        quantity: parseInt(quantity),
+                    }),
+                }).then((response) => response.json())
+                  .then((data) => {
+                      speak(data.message);
+                  });
+            } else {
+                speak("Invalid quantity.");
+            }
         }
     </script>
 
 </body>
 </html>
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Your Cart</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f4f4f4;
-            margin: 0;
-            padding: 0;
-        }
-        .container {
-            width: 80%;
-            margin: 50px auto;
-        }
-        h1 {
-            text-align: center;
-            color: #333;
-        }
-        .cart-item {
-            background-color: #fff;
-            padding: 20px;
-            margin: 10px 0;
-            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-        }
-        .item-name {
-            font-size: 1.5em;
-            color: #4CAF50;
-        }
-        .item-quantity {
-            font-size: 1.2em;
-            color: #555;
-        }
-        .item-price {
-            font-size: 1.2em;
-            font-weight: bold;
-            color: #000;
-        }
-        .btn-proceed {
-            padding: 12px 20px;
-            background-color: #4CAF50;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            text-decoration: none;
-            display: block;
-            margin-top: 20px;
-            text-align: center;
-        }
-        .btn-proceed:hover {
-            background-color: #45a049;
-        }
-    </style>
-</head>
-<body>
-
-    <div class="container">
-        <h1>Your Cart</h1>
-
-        {% if cart_items %}
-        <div id="cart-items">
-            {% for item in cart_items %}
-            <div class="cart-item">
-                <div class="item-name">{{ item.name }}</div>
-                <div class="item-quantity">Quantity: {{ item.quantity }}</div>
-                <div class="item-price">$ {{ item.price }}</div>
-            </div>
-            {% endfor %}
-        </div>
-
-        <a href="/order-summary" class="btn-proceed">Proceed to Order Summary</a>
-        {% else %}
-        <p>Your cart is empty. Please add items to your cart.</p>
-        {% endif %}
-    </div>
-
-</body>
-</html>