Update static/script.js

static/script.js

@@ -35,6 +35,7 @@ function sendMessage() {
         console.warn('Empty message!');
     }
 }
+
 function handleResponse(userInput) {
     const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
     let botResponse = '';
@@ -48,17 +49,25 @@ function handleResponse(userInput) {
         ];
     } else if (lastMessage.includes('non-vegetarian')) {
         conversation.push({ role: 'user', message: 'Non-Vegetarian' });
+        console.log("Food preference selected: Non-Vegetarian");
         botResponse = 'Great choice! 🍽️ Please select a non-vegetarian option:';
         fetchIngredients('non-vegetarian');
         return;
     } else if (lastMessage.includes('vegetarian')) {
         conversation.push({ role: 'user', message: 'Vegetarian' });
+        console.log("Food preference selected: Vegetarian");
         botResponse = 'Great choice! 🍽️ Here are some vegetarian ingredients:';
         fetchIngredients('vegetarian');
         return;
+    } else if (lastMessage.includes('chicken') || lastMessage.includes('beef') || lastMessage.includes('lamb')) {
+        conversation.push({ role: 'user', message: lastMessage });
+        console.log(`Non-veg option selected: ${lastMessage}`);
+        botResponse = `Great! Here are some ${lastMessage} ingredients available:`;
+        fetchIngredients(lastMessage.toLowerCase());
+        return;
     } else if (lastMessage.includes('yes') && selectedMenuItem) {
-        // New step after "Yes" clicked: Fetch ingredients for 'both'
-        fetchNewStepIngredients(); // This is where ingredients are fetched
+        botResponse = 'Awesome! Let’s customize your dish. Here are some ingredients you can add:';
+        fetchCustomizationIngredients('both'); // New function for customization
         return;
     } else if (lastMessage.includes('no') && selectedMenuItem) {
         addToCart(selectedMenuItem);
@@ -75,160 +84,40 @@ function handleResponse(userInput) {
         displayOptions(options);
     }
 }
-
-function fetchNewStepIngredients() {
+function fetchCustomizationIngredients(foodPreference) {
     fetch('/get_ingredients', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ dietary_preference: 'both' })
+        body: JSON.stringify({ dietary_preference: foodPreference })
     })
     .then(response => response.json())
     .then(data => {
-        // Log the whole response to inspect the structure
-        console.log('API Response:', data);
-
-        // Check if ingredients is present in the response
-        if (data && data.ingredients && Array.isArray(data.ingredients)) {
-            const ingredients = data.ingredients;
-            if (ingredients.length === 0) {
-                addMessage('bot', 'No ingredients found. Please try again later.');
-            } else {
-                addMessage('bot', 'Please select ingredients to add to your dish:');
-                // Display the ingredients without the submit button
-                displayMenuItemIngredientsWithoutSubmit(selectedMenuItem); // Show ingredients for the selected menu item
-                displayCustomizationInput(); // Show the customization input below the ingredients
-            }
+        if (data.error) {
+            addMessage('bot', `Sorry, there was an error fetching customization ingredients: ${data.error}`);
         } else {
-            addMessage('bot', 'Error: Ingredients not found in the response.');
+            const ingredients = data.ingredients || [];
+            addMessage('bot', 'Select ingredients to customize your dish:');
+            displayCustomizationIngredients(ingredients); // New function for customization UI
+            displaySelectedIngredientsForCustomization(); // New function for selected ingredients
         }
     })
     .catch(error => {
         addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
     });
 }
-
-
-function displayIngredientsWithoutSubmit(ingredients) {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) {
-        console.error('Chat messages container not found for ingredients!');
-        return;
-    }
-
-    let ingredientsList = document.querySelector('.ingredients-list-without-submit');
-    if (!ingredientsList) {
-        ingredientsList = document.createElement('div');
-        ingredientsList.className = 'ingredients-list-without-submit';
-        ingredientsList.style.overflowX = 'auto';  // Enable horizontal scrolling
-        ingredientsList.style.whiteSpace = 'nowrap';  // Prevent line breaks to make it horizontal scroll
-        chatMessages.appendChild(ingredientsList);
-    } else {
-        ingredientsList.innerHTML = '';  // Clear previous content
-    }
-
-    // Loop through each ingredient and display it with the "Add" button
-    ingredients.forEach(ingredient => {
-        const item = document.createElement('div');
-        item.className = 'ingredient-item';
-        item.style.display = 'inline-block'; // Align items horizontally
-        item.style.marginRight = '10px'; // Add some space between items
-        item.style.textAlign = 'center'; // Center align the ingredient name and button
-
-        const img = document.createElement('img');
-        img.src = ingredient.image_url || 'https://via.placeholder.com/80';
-        img.alt = ingredient.name;
-        img.style.width = '80px'; // Set the image size
-        img.style.height = '80px'; // Set the image size
-
-        const name = document.createElement('div');
-        name.textContent = ingredient.name;
-        name.style.marginTop = '5px';
-        name.style.fontSize = '12px'; // Adjust the font size of the name
-
-        const button = document.createElement('button');
-        button.textContent = 'Add';
-        button.onclick = () => {
-            if (!selectedIngredients.some(item => item.name === ingredient.name)) {
-                selectedIngredients.push(ingredient);
-                displaySelectedIngredients(); // Optionally update the list of selected ingredients elsewhere
-            }
-        };
-
-        item.appendChild(img);
-        item.appendChild(name);
-        item.appendChild(button);
-        ingredientsList.appendChild(item);
-    });
-}
-// Display selected ingredients for a menu item (without submit button)
-function displayMenuItemIngredientsWithoutSubmit(menuItem) {
+function displayCustomizationIngredients(ingredients) {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {
-        console.error('Chat messages container not found for ingredients!');
+        console.error('Chat messages container not found for customization ingredients!');
         return;
     }
 
-    // Create or find the menu item ingredients list container
-    let ingredientsList = document.querySelector(`.ingredients-list-for-${menuItem.name}`);
+    let ingredientsList = document.querySelector('.customization-ingredients-list');
     if (!ingredientsList) {
         ingredientsList = document.createElement('div');
-        ingredientsList.className = `ingredients-list-for-${menuItem.name}`;
-        ingredientsList.style.overflowX = 'auto';  // Enable horizontal scrolling
-        ingredientsList.style.whiteSpace = 'nowrap';  // Prevent line breaks to make it horizontal scroll
-        chatMessages.appendChild(ingredientsList);
-    } else {
-        ingredientsList.innerHTML = '';  // Clear previous content
-    }
-
-    // Loop through each selected ingredient and display it with the "Add" button
-    menuItem.ingredients.forEach(ingredient => {
-        const item = document.createElement('div');
-        item.className = 'ingredient-item';
-        item.style.display = 'inline-block'; // Align items horizontally
-        item.style.marginRight = '10px'; // Add some space between items
-        item.style.textAlign = 'center'; // Center align the ingredient name and button
-
-        const img = document.createElement('img');
-        img.src = ingredient.image_url || 'https://via.placeholder.com/80';
-        img.alt = ingredient.name;
-        img.style.width = '80px'; // Set the image size
-        img.style.height = '80px'; // Set the image size
-
-        const name = document.createElement('div');
-        name.textContent = ingredient.name;
-        name.style.marginTop = '5px';
-        name.style.fontSize = '12px'; // Adjust the font size of the name
-
-        const button = document.createElement('button');
-        button.textContent = 'Add';
-        button.onclick = () => {
-            if (!selectedIngredients.some(item => item.name === ingredient.name)) {
-                selectedIngredients.push(ingredient); // Add ingredient to the selected list
-                displayMenuItemIngredientsWithoutSubmit(menuItem); // Update the list of selected ingredients
-            }
-        };
-
-        item.appendChild(img);
-        item.appendChild(name);
-        item.appendChild(button);
-        ingredientsList.appendChild(item);
-    });
-}
-
-// Display the fetched ingredients
-function displayIngredientsList(ingredients) {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) {
-        console.error('Chat messages container not found for ingredients!');
-        return;
-    }
-
-    let ingredientsList = document.querySelector('.ingredients-list');
-    if (!ingredientsList) {
-        ingredientsList = document.createElement('div');
-        ingredientsList.className = 'ingredients-list';
+        ingredientsList.className = 'customization-ingredients-list ingredients-list'; // Reuse .ingredients-list CSS
         chatMessages.appendChild(ingredientsList);
     } else {
         ingredientsList.innerHTML = '';
@@ -236,7 +125,7 @@ function displayIngredientsList(ingredients) {
 
     ingredients.forEach(ingredient => {
         const item = document.createElement('div');
-        item.className = 'ingredient-item';
+        item.className = 'ingredient-item'; // Same CSS as original
         const img = document.createElement('img');
         img.src = ingredient.image_url || 'https://via.placeholder.com/80';
         img.alt = ingredient.name;
@@ -250,7 +139,7 @@ function displayIngredientsList(ingredients) {
         button.onclick = () => {
             if (!selectedIngredients.some(item => item.name === ingredient.name)) {
                 selectedIngredients.push(ingredient);
-                displaySelectedIngredients();
+                displaySelectedIngredientsForCustomization();
             }
         };
         item.appendChild(img);
@@ -260,93 +149,6 @@ function displayIngredientsList(ingredients) {
     });
 }
 
-// Show the instruction box for entering custom instructions
-function displayCustomizationInput() {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) {
-        console.error('Chat messages container not found for customization input!');
-        return;
-    }
-
-    let customizationArea = document.querySelector('.customization-input');
-    if (!customizationArea) {
-        customizationArea = document.createElement('div');
-        customizationArea.className = 'customization-input';
-        const textarea = document.createElement('textarea');
-        textarea.placeholder = 'Enter any special instructions...';
-        const submitButton = document.createElement('button');
-        submitButton.textContent = 'Submit Instructions';
-        submitButton.onclick = () => {
-            const instructions = textarea.value.trim();
-            if (instructions) {
-                addMessage('user', instructions);
-                conversation.push({ role: 'user', message: instructions });
-            }
-            addToCart({ ...selectedMenuItem, instructions, ingredients: selectedIngredients });
-            addMessage('bot', 'Item added to cart! Would you like to order more?');
-            const options = [
-                { text: 'Yes', class: 'green' },
-                { text: 'No', class: 'red' }
-            ];
-            displayOptions(options);
-            selectedMenuItem = null;
-            selectedIngredients = [];
-        };
-        customizationArea.appendChild(textarea);
-        customizationArea.appendChild(submitButton);
-        chatMessages.appendChild(customizationArea);
-    }
-}
-
-function addToCart(item) {
-    cart.push(item);
-    console.log('Cart:', cart);
-}
-
-
-// New step to display ingredients from the 'both' condition
-
-
-
-
-
-
-function displayOptions(options) {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) {
-        console.error('Chat messages container not found for options!');
-        return;
-    }
-    options.forEach(opt => {
-        const button = document.createElement('button');
-        button.textContent = opt.text;
-        button.className = `option-button ${opt.class}`;
-        button.onclick = () => {
-            addMessage('user', opt.text);
-            conversation.push({ role: 'user', message: opt.text });
-            chatMessages.innerHTML = '';
-            conversation.forEach(msg => addMessage(msg.role, msg.message));
-            setTimeout(() => handleResponse(opt.text), 500);
-        };
-        chatMessages.appendChild(button);
-    });
-    chatMessages.appendChild(document.createElement('br'));
-    const backButton = document.createElement('button');
-    backButton.textContent = 'Go Back';
-    backButton.className = 'option-button';
-    backButton.onclick = () => {
-        conversation.pop();
-        selectedIngredients = [];
-        selectedMenuItem = null;
-        chatMessages.innerHTML = '';
-        conversation.forEach(msg => addMessage(msg.role, msg.message));
-        setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
-    };
-    chatMessages.appendChild(backButton);
-}
-
-
-
 function fetchIngredients(foodPreference) {
     fetch('/get_ingredients', {
         method: 'POST',
@@ -394,7 +196,47 @@ function fetchMenuItems(category) {
     });
 }
 
+function displayIngredientsList(ingredients) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for ingredients!');
+        return;
+    }
+
+    let ingredientsList = document.querySelector('.ingredients-list');
+    if (!ingredientsList) {
+        ingredientsList = document.createElement('div');
+        ingredientsList.className = 'ingredients-list';
+        chatMessages.appendChild(ingredientsList);
+    } else {
+        ingredientsList.innerHTML = '';
+    }
 
+    ingredients.forEach(ingredient => {
+        const item = document.createElement('div');
+        item.className = 'ingredient-item';
+        const img = document.createElement('img');
+        img.src = ingredient.image_url || 'https://via.placeholder.com/80';
+        img.alt = ingredient.name;
+        const name = document.createElement('div');
+        name.textContent = ingredient.name;
+        name.style.textAlign = 'center';
+        name.style.marginTop = '5px';
+        name.style.fontSize = '12px';
+        const button = document.createElement('button');
+        button.textContent = 'Add';
+        button.onclick = () => {
+            if (!selectedIngredients.some(item => item.name === ingredient.name)) {
+                selectedIngredients.push(ingredient);
+                displaySelectedIngredients();
+            }
+        };
+        item.appendChild(img);
+        item.appendChild(name);
+        item.appendChild(button);
+        ingredientsList.appendChild(item);
+    });
+}
 
 function displayMenuItems(menuItems) {
     const chatMessages = document.getElementById('chatMessages');
@@ -561,7 +403,44 @@ function displayCustomizationInput() {
     }
 }
 
+function addToCart(item) {
+    cart.push(item);
+    console.log('Cart:', cart);
+}
 
+function displayOptions(options) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for options!');
+        return;
+    }
+    options.forEach(opt => {
+        const button = document.createElement('button');
+        button.textContent = opt.text;
+        button.className = `option-button ${opt.class}`;
+        button.onclick = () => {
+            addMessage('user', opt.text);
+            conversation.push({ role: 'user', message: opt.text });
+            chatMessages.innerHTML = '';
+            conversation.forEach(msg => addMessage(msg.role, msg.message));
+            setTimeout(() => handleResponse(opt.text), 500);
+        };
+        chatMessages.appendChild(button);
+    });
+    chatMessages.appendChild(document.createElement('br'));
+    const backButton = document.createElement('button');
+    backButton.textContent = 'Go Back';
+    backButton.className = 'option-button';
+    backButton.onclick = () => {
+        conversation.pop();
+        selectedIngredients = [];
+        selectedMenuItem = null;
+        chatMessages.innerHTML = '';
+        conversation.forEach(msg => addMessage(msg.role, msg.message));
+        setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
+    };
+    chatMessages.appendChild(backButton);
+}
 
 document.getElementById('userInput').addEventListener('keypress', function(e) {
     if (e.key === 'Enter') {