Update static/script.js

static/script.js

@@ -36,88 +36,7 @@ function sendMessage() {
     }
 }
 
-function handleResponse(userInput) {
-    const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
-    let botResponse = '';
-    let options = [];
-
-    if (conversation.length === 2) { // After name input
-        botResponse = `Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?`;
-        options = [
-            { text: 'Vegetarian', class: 'green' },
-            { text: 'Non-Vegetarian', class: 'red' }
-        ];
-    } else if (lastMessage.includes('non-vegetarian')) {
-        conversation.push({ role: 'user', message: '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' });
-        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 });
-        botResponse = `Great! Here are some ${lastMessage} ingredients available:`;
-        fetchIngredients(lastMessage.toLowerCase());
-        return;
-    } else if (lastMessage.includes('yes') && selectedMenuItem) {
-        // After clicking 'Yes' to customize, show ingredient selection for customization
-        displayCustomizationInput();  // This shows the customization input area
-        return;
-    } else if (lastMessage.includes('no') && selectedMenuItem) {
-        addToCart(selectedMenuItem);
-        botResponse = 'Item added to cart! Would you like to order more?';
-        options = [
-            { text: 'Yes', class: 'green' },
-            { text: 'No', class: 'red' }
-        ];
-        selectedMenuItem = null;
-    }
-
-    addMessage('bot', botResponse);
-    if (options.length > 0) {
-        displayOptions(options);
-    }
-}
-
-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 fetchIngredients(foodPreference) {
     fetch('/get_ingredients', {
@@ -166,47 +85,7 @@ 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');
@@ -373,6 +252,155 @@ function displayCustomizationInput() {
     }
 }
 
+function handleResponse(userInput) {
+    const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
+    let botResponse = '';
+    let options = [];
+
+    if (conversation.length === 2) { // After name input
+        botResponse = `Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?`;
+        options = [
+            { text: 'Vegetarian', class: 'green' },
+            { text: 'Non-Vegetarian', class: 'red' }
+        ];
+    } else if (lastMessage.includes('non-vegetarian')) {
+        conversation.push({ role: 'user', message: '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' });
+        botResponse = 'Great choice! 🍽️ Here are some vegetarian ingredients:';
+        fetchIngredients('vegetarian');
+        return;
+    } else if (lastMessage.includes('yes') && selectedMenuItem) {
+        // New step after "Yes" is clicked: Fetch ingredients based on 'both'
+        fetchNewStepIngredients();
+        return;
+    } else if (lastMessage.includes('no') && selectedMenuItem) {
+        addToCart(selectedMenuItem);
+        botResponse = 'Item added to cart! Would you like to order more?';
+        options = [
+            { text: 'Yes', class: 'green' },
+            { text: 'No', class: 'red' }
+        ];
+        selectedMenuItem = null;
+    }
+
+    addMessage('bot', botResponse);
+    if (options.length > 0) {
+        displayOptions(options);
+    }
+}
+
+// New function to fetch ingredients based on 'both' condition after clicking 'Yes'
+function fetchNewStepIngredients() {
+    fetch('/get_ingredients', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ dietary_preference: 'both' })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.error) {
+            addMessage('bot', `Sorry, there was an error fetching ingredients: ${data.error}`);
+        } else {
+            const ingredients = data.ingredients || [];
+            addMessage('bot', 'Please select ingredients to add to your dish:');
+            displayIngredientsList(ingredients);
+            displaySelectedIngredients();
+            // Show the instruction box
+            displayCustomizationInput();
+        }
+    })
+    .catch(error => {
+        addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
+    });
+}
+
+// New step to display ingredients from the 'both' condition
+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);
+    });
+}
+
+// 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);
@@ -412,6 +440,7 @@ function displayOptions(options) {
     chatMessages.appendChild(backButton);
 }
 
+
 document.getElementById('userInput').addEventListener('keypress', function(e) {
     if (e.key === 'Enter') {
         sendMessage();