voicemenuspe

Running

App Files Files Community

lokesh341 commited on 11 days ago

Commit

bfde81f

verified ·

1 Parent(s): 421e5e8

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +80 -57

templates/menu_page.html CHANGED Viewed

@@ -63,13 +63,18 @@
 <body>
     <div class="menu-container">
-        <h1>Welcome to the Menu</h1>
-        <!-- Dynamic Menu Item List -->
-        <div id="menu-items">
-            <!-- Menu items will be populated here from the backend -->
         </div>
         <button id="listen-btn">Say "Order" to order an item</button>
         <div id="cart-summary" style="display:none;">
             <h2>Your Cart:</h2>
@@ -83,8 +88,11 @@
         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";
         recognition.interimResults = false;
@@ -108,7 +116,6 @@
             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")) {
                 showCartDetails();
@@ -122,7 +129,49 @@
             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();
@@ -135,7 +184,7 @@
                     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 {
@@ -162,64 +211,38 @@
             };
         }
-        // Function to show 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";
-                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 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());
         }
-        // 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;
-            // Voice reading of menu items
-            let itemsText = "The menu includes: ";
-            menuItems.forEach(item => {
-                itemsText += item.name + ", ";
             });
-            speak(itemsText); // Speak all the item names
-        }
     </script>
 </body>

 <body>
     <div class="menu-container">
+        <h1>Welcome to Biryani Hub</h1>
+        <h3 id="category-title">Please select a category:</h3>
+        <!-- Buttons for selecting categories -->
+        <div id="category-buttons">
+            <button id="main-course-btn">Main Course</button>
+            <button id="appetizer-btn">Appetizers</button>
         </div>
+        <!-- Dynamic Menu Item List -->
+        <div id="menu-items"></div>
         <button id="listen-btn">Say "Order" to order an item</button>
         <div id="cart-summary" style="display:none;">
             <h2>Your Cart:</h2>
         const placeOrderButton = document.getElementById("place-order-btn");
         const cartSummary = document.getElementById("cart-summary");
         const cartDetails = document.getElementById("cart-details");
+        const categoryButtons = document.getElementById("category-buttons");
         let isListening = false;
         let cart = [];  // Global cart variable to store items
+        let menuData = {};  // Will store menu items based on categories
         const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
         recognition.lang = "en-US";
         recognition.interimResults = false;
             console.log("User said:", command);
             // Add logic to recognize specific items or trigger actions based on the command
             if (command.includes("order")) {
                 processOrder();
             } else if (command.includes("cart details")) {
                 showCartDetails();
             speak("Sorry, I couldn't understand that. Please try again.");
         };
+        // Function to populate the menu based on selected category
+        function displayMenuItems(category) {
+            const menuContainer = document.getElementById('menu-items');
+            menuContainer.innerHTML = '';  // Clear previous menu
+            if (menuData[category]) {
+                menuData[category].forEach(item => {
+                    const itemElement = document.createElement('div');
+                    itemElement.classList.add('menu-item');
+                    itemElement.innerHTML = `
+                        <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>
+                    `;
+                    menuContainer.appendChild(itemElement);
+                });
+            }
+        }
+        // Function to add an item to the cart
+        function addToCart(itemName, quantity) {
+            cart.push({ name: itemName, price: 250, quantity: quantity });
+            speak(`${itemName} added to your cart.`);
+        }
+        // Function to show 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";
+                speak(`Your cart contains ${cart.length} items.`);
+            } else {
+                speak("Your cart is empty.");
+            }
+        }
+        // Function to handle the order process
         function processOrder() {
             speak("Which item would you like to order?");
             recognition.start();
                     recognition.onresult = (event) => {
                         const quantity = parseInt(event.results[0][0].transcript);
                         if (quantity) {
+                            addToCart(item.name, quantity);
                             speak(`${quantity} ${item.name} added to your cart.`);
                             askMoreItems();
                         } else {
             };
         }
         // Function to find item in the menu
         function findItem(itemName) {
+            const menu = menuData['Biryanis']; // Default category to check first
             return menu.find(item => item.name.toLowerCase() === itemName.toLowerCase());
         }
+        // Function to populate the menu categories and items
         window.onload = function() {
+            // Sample menu data for Main Course and Appetizers
+            menuData = {
+                'Main Course': [
+                    { name: "Chicken Biryani", price: 250 },
+                    { name: "Veg Biryani", price: 200 },
+                    { name: "Mutton Biryani", price: 300 }
+                ],
+                'Appetizers': [
+                    { name: "Paneer Tikka", price: 180 },
+                    { name: "Chicken Wings", price: 220 }
+                ]
+            };
+            // Populate categories dynamically
+            document.getElementById("main-course-btn").addEventListener("click", () => {
+                displayMenuItems('Main Course');
             });
+            document.getElementById("appetizer-btn").addEventListener("click", () => {
+                displayMenuItems('Appetizers');
+            });
+            // Voice greeting for menu categories
+            speak("Welcome to Biryani Hub! We have the following categories: Main Course and Appetizers.");
+        };
     </script>
 </body>