Update templates/Menu.html

templates/Menu.html

@@ -212,43 +212,77 @@
 </div>
 
 <script>
+    let filteredMenu = [];
+
+    // Fetch menu items from Flask backend
     async function fetchMenu() {
         try {
-            const response = await fetch('/get_menu'); // Replace with your API endpoint
+            const response = await fetch('/get_menu');  // Call the Flask API
             const menuItems = await response.json();
-            const menuContainer = document.getElementById("menu");
-            menuContainer.innerHTML = "";
-            menuItems.forEach(item => {
-                const menuItem = document.createElement("div");
-                menuItem.classList.add("menu-item");
-                menuItem.innerHTML = `
-                    <div class="menu-details">
-                        <div class="bestseller">
-                            <img src="bestseller-icon.png" alt="Best Seller"> Bestseller
-                        </div>
-                        <h3>${item.Name}</h3>
-                        <p class="price">$${item.Price__c}</p>
-                        <div class="rating">
-                            ⭐ 4.2 (206)
-                        </div>
-                        <button class="save-btn">❤️ Save to Eatlist</button>
-                        <p class="description">A flavorful dish with fresh ingredients... more</p>
-                    </div>
-                    <div class="add-container">
-                        <img class="menu-img" src="${item.Image1__c}" alt="${item.Name}">
-                        <button class="add-btn">ADD</button>
-                        <p class="customizable">Customisable</p>
-                    </div>
-                `;
-                menuContainer.appendChild(menuItem);
-            });
+
+            // Check if the response is valid
+            if (!Array.isArray(menuItems)) {
+                console.error("Invalid menu data");
+                return;
+            }
+
+            filteredMenu = menuItems; // Save fetched data to filteredMenu
+            displayMenu(filteredMenu); // Display menu items
+
         } catch (error) {
             console.error("Error fetching menu:", error);
         }
     }
 
-    document.addEventListener("DOMContentLoaded", fetchMenu);
-</script>
+    // Display menu items on the page
+    function displayMenu(menuItems) {
+        const menuContainer = document.getElementById("menu");
+        menuContainer.innerHTML = '';
 
+        menuItems.forEach(item => {
+            const menuItem = document.createElement("div");
+            menuItem.classList.add("menu-item");
+            menuItem.innerHTML = `
+                <div class="menu-details">
+                    <div class="bestseller">
+                        <img src="bestseller-icon.png" alt="Best Seller"> Bestseller
+                    </div>
+                    <h3>${item.Name}</h3>
+                    <p class="price">$${item.Price__c}</p>
+                    <div class="rating">
+                        ⭐ 4.2 (206)
+                    </div>
+                    <button class="save-btn">❤️ Save to Eatlist</button>
+                    <p class="description">${item.Description__c}</p>
+                </div>
+                <div class="add-container">
+                    <img class="menu-img" src="${item.Image1__c}" alt="${item.Name}">
+                    <button class="add-btn">ADD</button>
+                    <p class="customizable">Customisable</p>
+                </div>
+            `;
+            menuContainer.appendChild(menuItem);
+        });
+    }
+
+    // Search for menu items
+    function searchMenu() {
+        const query = document.getElementById("search").value.toLowerCase();
+        const filtered = filteredMenu.filter(item => item.Name.toLowerCase().includes(query));
+        displayMenu(filtered);
+    }
+
+    // Filter menu items by category
+    function filterCategory(category) {
+        const filtered = filteredMenu.filter(item => item.Category__c === category);
+        displayMenu(filtered);
+    }
+
+    // Initialize the menu display when the page loads
+    document.addEventListener("DOMContentLoaded", () => {
+        fetchMenu(); // Fetch menu data from the backend
+    });
+
+</script>
 </body>
 </html>