Update templates/menu_page.html

templates/menu_page.html

@@ -74,16 +74,14 @@
         <div id="cart-summary" style="display:none;">
             <h2>Your Cart:</h2>
             <div id="cart-details"></div>
-            <button id="place-order-btn">Place Final Order</button>
+            <button id="place-order-btn" onclick="placeOrder()">Place Final Order</button>
         </div>
     </div>
 
     <script>
         const listenButton = document.getElementById("listen-btn");
-        const placeOrderButton = document.getElementById("place-order-btn");
         const cartSummary = document.getElementById("cart-summary");
         const cartDetails = document.getElementById("cart-details");
-        let isListening = false;
         let cart = [];  // Global cart variable to store items
         const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
         recognition.lang = "en-US";
@@ -95,74 +93,41 @@
             window.speechSynthesis.speak(msg);
         }
 
-        listenButton.addEventListener("click", () => {
-            if (!isListening) {
-                isListening = true;
-                speak("Please say the item you want to order.");
-                recognition.start();
-            }
-        });
+        // 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));
+        }
 
-        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")) {
-                // Process ordering logic here (e.g., find item in menu and add to cart)
-                processOrder();
-            } else if (command.includes("cart details")) {
+        // 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();
-            } else {
-                speak("Sorry, I couldn't understand that. Please try again.");
             }
-        };
-
-        recognition.onerror = (event) => {
-            console.error("Speech recognition error:", event.error);
-            speak("Sorry, I couldn't understand that. Please try again.");
-        };
-
-        // Function to process order
-        function processOrder() {
-            speak("Which item would you like to order?");
-            recognition.start();
-            recognition.onresult = (event) => {
-                const itemName = event.results[0][0].transcript.toLowerCase();
-                const item = findItem(itemName);
-                if (item) {
-                    speak(`You selected ${item.name}. How many would you like?`);
-                    recognition.start();
-                    recognition.onresult = (event) => {
-                        const quantity = parseInt(event.results[0][0].transcript);
-                        if (quantity) {
-                            addToCart(item, quantity);
-                            speak(`${quantity} ${item.name} added to your cart.`);
-                            askMoreItems();
-                        } else {
-                            speak("Please say a valid quantity.");
-                        }
-                    };
-                } else {
-                    speak("Sorry, I couldn't find that item. Please try again.");
-                }
-            };
-        }
-
-        // Function to ask if the user wants to order more items
-        function askMoreItems() {
-            speak("Would you like to order more items?");
-            recognition.start();
-            recognition.onresult = (event) => {
-                const response = event.results[0][0].transcript.toLowerCase();
-                if (response.includes("yes")) {
-                    processOrder();
-                } else {
-                    showCartDetails();
-                }
-            };
         }
 
-        // Function to show cart details
+        // Function to display cart details
         function showCartDetails() {
             if (cart.length > 0) {
                 let cartHtml = "";
@@ -171,54 +136,57 @@
                 });
                 cartDetails.innerHTML = cartHtml;
                 cartSummary.style.display = "block";
-                speak(`Your cart contains ${cart.length} items.`);
             } else {
                 speak("Your cart is empty.");
             }
         }
 
-        // Function to add an item to the cart
-        function addToCart(item, quantity) {
-            cart.push({ name: item.name, price: item.price, quantity: quantity });
+        // 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.");
+            });
         }
 
-        // Function to find item in the menu
-        function findItem(itemName) {
-            const menu = [
-                { name: "Chicken Biryani", price: 250 },
-                { name: "Veg Biryani", price: 200 },
-                { name: "Mutton Biryani", price: 300 }
-            ];
-            return menu.find(item => item.name.toLowerCase() === itemName.toLowerCase());
-        }
+        // Event listener for listening button
+        listenButton.addEventListener("click", () => {
+            speak("Please say the item you want to order.");
+            recognition.start();
+        });
 
-        // Function to populate the menu dynamically and speak it on load
-        window.onload = function() {
-            const menuItems = [
-                { name: "Chicken Biryani", price: 250 },
-                { name: "Veg Biryani", price: 200 },
-                { name: "Mutton Biryani", price: 300 }
-            ];
-            let menuContent = "";
-            menuItems.forEach(item => {
-                menuContent += `
-                    <div class="menu-item">
-                        <div class="details">
-                            <h3>${item.name}</h3>
-                            <p class="price">Price: ₹${item.price}</p>
-                        </div>
-                        <button class="order-btn" onclick="addToCart(${item.name}, 1)">Order</button>
-                    </div>
-                `;
-            });
-            document.getElementById('menu-items').innerHTML = menuContent;
+        recognition.onresult = (event) => {
+            const command = event.results[0][0].transcript.toLowerCase();
+            console.log("User said:", command);
+            if (command.includes("order")) {
+                speak("Which item would you like to order?");
+            } else {
+                speak("Sorry, I couldn't understand that. Please try again.");
+            }
+        };
 
-            // Voice reading of menu items
-            let itemsText = "The menu includes: ";
-            menuItems.forEach(item => {
-                itemsText += item.name + ", ";
-            });
-            speak(itemsText); // Speak all the item names
+        recognition.onerror = (event) => {
+            console.error("Speech recognition error:", event.error);
+            speak("Sorry, I couldn't understand that. Please try again.");
+        };
+
+        // Load menu on page load
+        window.onload = function() {
+            fetchMenu();
         }
     </script>