Update templates/index.html

templates/index.html

@@ -805,91 +805,177 @@
             });
         }
 
-
-        function fetchMenuItems(params) {
-            fetch('/get_menu_items', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(params)
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.error) {
-                        addMessage('bot', `Sorry, there was an error fetching menu items: ${data.error}`);
-                    } else {
-                        const menuItems = data.menu_items || [];
-                        addMessage('bot', 'Here are some dishes based on your selection:');
-                        currentStep = 'menu_display';
-                        displayMenuItems(menuItems);
-                    }
-                })
-                .catch(error => {
-                    addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
-                });
+      function fetchRecipeItems(params) {
+    fetch('/get_recipe_items', {  // Change endpoint to '/get_recipe_items'
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(params)
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.error) {
+            addMessage('bot', `Sorry, there was an error fetching recipe items: ${data.error}`);
+        } else {
+            const recipeItems = data.recipe_items || [];
+            addMessage('bot', 'Here are some recipes based on your selection:');
+            currentStep = 'recipe_display';
+            displayRecipeItems(recipeItems);
         }
+    })
+    .catch(error => {
+        addMessage('bot', `Error: Unable to connect to the recipe database. ${error.message}`);
+    });
+}
+
+function displayRecipeItems(recipeItems) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for recipe items!');
+        return;
+    }
+
+    // Clear previous recipe items if they exist
+    let recipeItemsList = document.querySelector('.recipe-items-list');
+    if (!recipeItemsList) {
+        recipeItemsList = document.createElement('div');
+        recipeItemsList.className = 'recipe-items-list';
+        chatMessages.appendChild(recipeItemsList);
+    } else {
+        // Clear existing items to avoid duplication
+        recipeItemsList.innerHTML = '';
+    }
+
+    // Log to verify the recipes being fetched
+    console.log('Fetched recipe items:', recipeItems);
+
+    // If recipeItems is an empty array, add a message indicating no items found
+    if (recipeItems.length === 0) {
+        const noItemsMessage = document.createElement('div');
+        noItemsMessage.textContent = 'No recipes available at the moment.';
+        recipeItemsList.appendChild(noItemsMessage);
+    } else {
+        recipeItems.forEach(item => {
+            const recipeItem = document.createElement('div');
+            recipeItem.className = 'recipe-item';
+            const img = document.createElement('img');
+            img.src = item.image_url || 'https://via.placeholder.com/120';
+            img.alt = item.name;
+            const name = document.createElement('div');
+            name.textContent = item.name;
+            const button = document.createElement('button');
+            button.textContent = 'Add to Cart';
+            button.onclick = () => {
+                selectedRecipeItem = item;
+                addMessage('bot', `Great choice! Would you like to customize your recipe further?`);
+                const options = [
+                    { text: 'Yes', class: 'green' },
+                    { text: 'No', class: 'red' }
+                ];
+                currentStep = 'customization';
+                displayOptions(options);
+            };
+            recipeItem.appendChild(img);
+            recipeItem.appendChild(name);
+            recipeItem.appendChild(button);
+            recipeItemsList.appendChild(recipeItem);
+        });
+    }
+
+    // Ensure the display is scrolled to the latest message
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+
+    // Log that recipe items were displayed
+    console.log('Recipe items displayed');
+}
+
+
+
+      
+
+        // function fetchMenuItems(params) {
+        //     fetch('/get_menu_items', {
+        //         method: 'POST',
+        //         headers: { 'Content-Type': 'application/json' },
+        //         body: JSON.stringify(params)
+        //     })
+        //         .then(response => response.json())
+        //         .then(data => {
+        //             if (data.error) {
+        //                 addMessage('bot', `Sorry, there was an error fetching menu items: ${data.error}`);
+        //             } else {
+        //                 const menuItems = data.menu_items || [];
+        //                 addMessage('bot', 'Here are some dishes based on your selection:');
+        //                 currentStep = 'menu_display';
+        //                 displayMenuItems(menuItems);
+        //             }
+        //         })
+        //         .catch(error => {
+        //             addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
+        //         });
+        // }
 
        
         
-        function displayMenuItems(menuItems) {
-            const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found for menu items!');
-                return;
-            }
+        // function displayMenuItems(menuItems) {
+        //     const chatMessages = document.getElementById('chatMessages');
+        //     if (!chatMessages) {
+        //         console.error('Chat messages container not found for menu items!');
+        //         return;
+        //     }
         
-            // Clear previous menu items if they exist
-            let menuItemsList = document.querySelector('.menu-items-list');
-            if (!menuItemsList) {
-                menuItemsList = document.createElement('div');
-                menuItemsList.className = 'menu-items-list';
-                chatMessages.appendChild(menuItemsList);
-            } else {
-                // Clear existing items to avoid duplication
-                menuItemsList.innerHTML = '';
-            }
+        //     // Clear previous menu items if they exist
+        //     let menuItemsList = document.querySelector('.menu-items-list');
+        //     if (!menuItemsList) {
+        //         menuItemsList = document.createElement('div');
+        //         menuItemsList.className = 'menu-items-list';
+        //         chatMessages.appendChild(menuItemsList);
+        //     } else {
+        //         // Clear existing items to avoid duplication
+        //         menuItemsList.innerHTML = '';
+        //     }
         
-            // Log to verify the dishes being fetched
-            console.log('Fetched menu items:', menuItems);
+        //     // Log to verify the dishes being fetched
+        //     console.log('Fetched menu items:', menuItems);
         
-            // If menuItems is an empty array, add a message indicating no items found
-            if (menuItems.length === 0) {
-                const noItemsMessage = document.createElement('div');
-                noItemsMessage.textContent = 'No dishes available at the moment.';
-                menuItemsList.appendChild(noItemsMessage);
-            } else {
-                menuItems.forEach(item => {
-                    const menuItem = document.createElement('div');
-                    menuItem.className = 'menu-item';
-                    const img = document.createElement('img');
-                    img.src = item.image_url || 'https://via.placeholder.com/120';
-                    img.alt = item.name;
-                    const name = document.createElement('div');
-                    name.textContent = item.name;
-                    const button = document.createElement('button');
-                    button.textContent = 'Add to Cart';
-                    button.onclick = () => {
-                        selectedMenuItem = item;
-                        addMessage('bot', `World-class selection! Would you like to customize your dish further?`);
-                        const options = [
-                            { text: 'Yes', class: 'green' },
-                            { text: 'No', class: 'red' }
-                        ];
-                        currentStep = 'customization';
-                        displayOptions(options);
-                    };
-                    menuItem.appendChild(img);
-                    menuItem.appendChild(name);
-                    menuItem.appendChild(button);
-                    menuItemsList.appendChild(menuItem);
-                });
-            }
+        //     // If menuItems is an empty array, add a message indicating no items found
+        //     if (menuItems.length === 0) {
+        //         const noItemsMessage = document.createElement('div');
+        //         noItemsMessage.textContent = 'No dishes available at the moment.';
+        //         menuItemsList.appendChild(noItemsMessage);
+        //     } else {
+        //         menuItems.forEach(item => {
+        //             const menuItem = document.createElement('div');
+        //             menuItem.className = 'menu-item';
+        //             const img = document.createElement('img');
+        //             img.src = item.image_url || 'https://via.placeholder.com/120';
+        //             img.alt = item.name;
+        //             const name = document.createElement('div');
+        //             name.textContent = item.name;
+        //             const button = document.createElement('button');
+        //             button.textContent = 'Add to Cart';
+        //             button.onclick = () => {
+        //                 selectedMenuItem = item;
+        //                 addMessage('bot', `World-class selection! Would you like to customize your dish further?`);
+        //                 const options = [
+        //                     { text: 'Yes', class: 'green' },
+        //                     { text: 'No', class: 'red' }
+        //                 ];
+        //                 currentStep = 'customization';
+        //                 displayOptions(options);
+        //             };
+        //             menuItem.appendChild(img);
+        //             menuItem.appendChild(name);
+        //             menuItem.appendChild(button);
+        //             menuItemsList.appendChild(menuItem);
+        //         });
+        //     }
         
-            // Ensure the display is scrolled to the latest message
-            chatMessages.scrollTop = chatMessages.scrollHeight;
+        //     // Ensure the display is scrolled to the latest message
+        //     chatMessages.scrollTop = chatMessages.scrollHeight;
         
-            // Log that menu items were displayed
-            console.log('Menu items displayed');
-        }
+        //     // Log that menu items were displayed
+        //     console.log('Menu items displayed');
+        // }