Update static/script.js

static/script.js

@@ -36,7 +36,6 @@ function sendMessage() {
     }
 }
 
-
 function handleResponse(userInput) {
     const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
     let botResponse = '';
@@ -53,14 +52,20 @@ function handleResponse(userInput) {
         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) {
-        botResponse = 'Here are some ingredients with both options:';
-        fetchIngredients('both');  // Show both vegetarian and non-vegetarian ingredients
+        botResponse = 'Here are some ingredients to customize your dish:';
+        fetchIngredients('both');  // Fetch both vegetarian and non-vegetarian ingredients for customization
         return;
     } else if (lastMessage.includes('no') && selectedMenuItem) {
         addToCart(selectedMenuItem);
@@ -70,6 +75,10 @@ function handleResponse(userInput) {
             { text: 'No', class: 'red' }
         ];
         selectedMenuItem = null;
+    } else if (lastMessage.includes('add') && selectedMenuItem) {
+        botResponse = 'Please provide any special instructions for your dish:';
+        displayCustomizationInput(); // Display input box for special instructions
+        return;
     }
 
     addMessage('bot', botResponse);
@@ -102,7 +111,29 @@ function fetchIngredients(foodPreference) {
     });
 }
 
-// This will remain the same as Step 3
+function fetchMenuItems(category) {
+    fetch('/get_menu_items', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ category: category })
+    })
+    .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:');
+            displayMenuItems(menuItems);
+        }
+    })
+    .catch(error => {
+        addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
+    });
+}
+
 function displayIngredientsList(ingredients) {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {
@@ -168,149 +199,17 @@ function displaySelectedIngredients() {
     });
 
     if (selectedIngredients.length > 0) {
-        // New functionality after clicking "Yes" (Step 5 onward)
-        let instructionsArea = document.querySelector('.instructions-area');
-        if (!instructionsArea) {
-            instructionsArea = document.createElement('div');
-            instructionsArea.className = 'instructions-area';
-            const textarea = document.createElement('textarea');
-            textarea.placeholder = 'Enter any special instructions...';
-            const submitButton = document.createElement('button');
-            submitButton.textContent = 'Submit';
-            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 = [];
-            };
-            instructionsArea.appendChild(textarea);
-            instructionsArea.appendChild(submitButton);
-            chatMessages.appendChild(instructionsArea);
+        let submitButton = document.querySelector('.submit-button');
+        if (!submitButton) {
+            submitButton = document.createElement('button');
+            submitButton.className = 'submit-button';
+            submitButton.textContent = 'Submit Ingredients';
+            submitButton.onclick = submitIngredients;
+            chatMessages.appendChild(submitButton);
         }
     }
 }
 
-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);
-}
-
-
-
-function fetchMenuItems(category) {
-    fetch('/get_menu_items', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ category: category })
-    })
-    .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:');
-            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;
-    }
-
-    let menuItemsList = document.querySelector('.menu-items-list');
-    if (!menuItemsList) {
-        menuItemsList = document.createElement('div');
-        menuItemsList.className = 'menu-items-list';
-        chatMessages.appendChild(menuItemsList);
-    } else {
-        menuItemsList.innerHTML = '';
-    }
-
-    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/80';
-        img.alt = item.name;
-        const name = document.createElement('div');
-        name.textContent = item.name;
-        name.style.textAlign = 'center';
-        name.style.marginTop = '5px';
-        name.style.fontSize = '12px';
-        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' }
-            ];
-            displayOptions(options);
-        };
-        menuItem.appendChild(img);
-        menuItem.appendChild(name);
-        menuItem.appendChild(button);
-        menuItemsList.appendChild(menuItem);
-    });
-}
-
-
 function submitIngredients() {
     fetch('/submit_ingredients', {
         method: 'POST',
@@ -336,30 +235,6 @@ function submitIngredients() {
     });
 }
 
-function fetchMenuItems(ingredientNames) {
-    fetch('/get_menu_items', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ ingredient_names: ingredientNames })
-    })
-    .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 selected ingredients:');
-            displayMenuItems(menuItems);
-        }
-    })
-    .catch(error => {
-        addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
-    });
-}
-
-
 function displayCustomizationInput() {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {
@@ -397,7 +272,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') {
@@ -405,4 +317,4 @@ document.getElementById('userInput').addEventListener('keypress', function(e) {
     }
 });
 
-console.log('Script loaded successfully');
+console.log('Script loaded successfully');