Update templates/menu_page.html

templates/menu_page.html

@@ -97,31 +97,32 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
     <script>
-        const menuItems = [
-            { name: "Samosa", price: 9.0, ingredients: "Potatoes, Peas, Flour, Spices", category: "Appetizer" },
-            { name: "Chilli Gobi", price: 12.0, ingredients: "Cauliflower, Chili Sauce, Spices", category: "Appetizer" },
-            { name: "Veg Biryani", price: 12.0, ingredients: "Mixed Vegetables, Basmati Rice, Spices", category: "Main Course" }
-        ];
-
+        let menuItems = [];
         let selectedItem = "";
         let quantity = 0;
         let step = 0;
 
         const menuItemsContainer = document.getElementById('menu-items');
 
-        // Display menu items
-        menuItems.forEach(item => {
-            const menuItemDiv = document.createElement('div');
-            menuItemDiv.classList.add('menu-item');
-            menuItemDiv.innerHTML = `
-                <h3>${item.name}</h3>
-                <p>Price: $${item.price}</p>
-                <p>Ingredients: ${item.ingredients}</p>
-                <p>Category: ${item.category}</p>
-                <button class="order-btn" data-item="${item.name}">Order</button>
-            `;
-            menuItemsContainer.appendChild(menuItemDiv);
-        });
+        // Fetch menu items from the backend (Flask)
+        fetch('/menu')  // Endpoint that returns the menu data as JSON
+            .then(response => response.json())
+            .then(data => {
+                menuItems = data;
+                menuItems.forEach(item => {
+                    const menuItemDiv = document.createElement('div');
+                    menuItemDiv.classList.add('menu-item');
+                    menuItemDiv.innerHTML = `
+                        <h3>${item.name}</h3>
+                        <p>Price: $${item.price}</p>
+                        <p>Ingredients: ${item.ingredients}</p>
+                        <p>Category: ${item.category}</p>
+                        <button class="order-btn" data-item="${item.name}">Order</button>
+                    `;
+                    menuItemsContainer.appendChild(menuItemDiv);
+                });
+            })
+            .catch(error => console.error('Error fetching menu items:', error));
 
         // Ensure annyang is initialized
         if (annyang) {