Update static/script.js

static/script.js

@@ -1,7 +1,9 @@
 let conversation = [
-    { role: 'bot', message: 'Hi there! I\'m Chef Bot! May I know your name?' }
+    { role: 'bot', message: "Hi there! I'm Chef Bot! May I know your name?" }
 ];
 let selectedIngredients = [];
+let selectedMenuItem = null;
+let cart = [];
 
 function addMessage(role, message) {
     const chatMessages = document.getElementById('chatMessages');
@@ -28,10 +30,7 @@ function sendMessage() {
         addMessage('user', message);
         conversation.push({ role: 'user', message: message });
         userInput.value = '';
-
-        setTimeout(() => {
-            handleResponse(message);
-        }, 500);
+        setTimeout(() => handleResponse(message), 500);
     } else {
         console.warn('Empty message!');
     }
@@ -42,52 +41,45 @@ function handleResponse(userInput) {
     let botResponse = '';
     let options = [];
 
-    // Store food preference (Vegetarian or Non-Vegetarian)
     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') || lastMessage.includes('non veg') || lastMessage.includes('nonveg')) {
-        conversation.push({ role: 'user', message: 'Non-Vegetarian' }); // Store Non-Vegetarian preference
+    } 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('veg');
+        return;
+    } else if (lastMessage.includes('non-vegetarian')) {
+        conversation.push({ role: 'user', message: 'Non-Vegetarian' });
         console.log("Food preference selected: Non-Vegetarian");
-        console.log("Conversation Array after storing Non-Vegetarian:", conversation); // Debugging: Log conversation
-        botResponse = 'Great choice! 🍽️ We have some amazing non-vegetarian options! What\'s your dietary preference?';
+        botResponse = 'Great choice! 🍽️ Would you like fish-based dishes?';
         options = [
-            { text: 'Low Carb', class: '' },
-            { text: 'Dairy-Free', class: '' },
-            { text: 'Keto', class: '' },
-            { text: 'Halal', class: '' }
+            { text: 'Yes', class: 'green' },
+            { text: 'No', class: 'red' }
         ];
-    } else if (lastMessage.includes('vegetarian')) {
-        conversation.push({ role: 'user', message: 'Vegetarian' }); // Store Vegetarian preference
-        console.log("Food preference selected: Vegetarian");
-        console.log("Conversation Array after storing Vegetarian:", conversation); // Debugging: Log conversation
-        botResponse = 'Great choice! 🍽️ We have some amazing vegetarian options! What\'s your dietary preference?';
+    } else if (lastMessage.includes('yes') && conversation.some(msg => msg.message.toLowerCase().includes('non-vegetarian'))) {
+        fetchMenuItems('fish');
+        return;
+    } else if (lastMessage.includes('no') && conversation.some(msg => msg.message.toLowerCase().includes('non-vegetarian'))) {
+        botResponse = 'Alright, here are some non-vegetarian ingredients:';
+        fetchIngredients('non-vegetarian');
+        return;
+    } else if (lastMessage.includes('yes') && selectedMenuItem) {
+        botResponse = 'Here are some ingredients to customize your dish:';
+        fetchIngredients('non-vegetarian');
+        return;
+    } else if (lastMessage.includes('no') && selectedMenuItem) {
+        addToCart(selectedMenuItem);
+        botResponse = 'Item added to cart! Would you like to order more?';
         options = [
-            { text: 'Vegan', class: '' },
-            { text: 'Gluten-Free', class: '' },
-            { text: 'Low Carb', class: '' },
-            { text: 'Dairy-Free', class: '' },
-            { text: 'Keto', class: '' },
-            { text: 'Halal', class: '' }
+            { text: 'Yes', class: 'green' },
+            { text: 'No', class: 'red' }
         ];
-    } else if (lastMessage.includes('low carb') || lastMessage.includes('dairy-free') || lastMessage.includes('keto') || lastMessage.includes('halal') || lastMessage.includes('gluten-free') || lastMessage.includes('vegan') || lastMessage.includes('vegetarian')) {
-        // Fetch ingredients based on previous food preference (Vegetarian or Non-Vegetarian)
-        console.log("Conversation Array before finding food preference:", conversation); // Debugging
-        const foodPreference = conversation.find(msg => msg.role === 'user' && (msg.message.toLowerCase().includes('vegetarian') || msg.message.toLowerCase().includes('non-vegetarian')))?.message.toLowerCase();
-
-        console.log("Previous food preference: " + foodPreference); // Debug which food preference is selected
-
-        if (foodPreference === 'vegetarian') {
-            console.log("Fetching Vegetarian ingredients..."); // Debug when fetching vegetarian ingredients
-            fetchIngredients('veg'); // Fetch Vegetarian ingredients
-        } else if (foodPreference === 'non-vegetarian') {
-            console.log("Fetching Non-Vegetarian ingredients..."); // Debug when fetching non-vegetarian ingredients
-            fetchIngredients('non-vegetarian'); // Fetch Non-Vegetarian ingredients
-        }
-        return; // Exit early to fetch ingredients
+        selectedMenuItem = null;
     }
 
     addMessage('bot', botResponse);
@@ -96,16 +88,13 @@ function handleResponse(userInput) {
     }
 }
 
-
-
-
 function fetchIngredients(foodPreference) {
     fetch('/get_ingredients', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ dietary_preference: foodPreference }) // Send the food preference to the backend
+        body: JSON.stringify({ dietary_preference: foodPreference })
     })
     .then(response => response.json())
     .then(data => {
@@ -113,7 +102,7 @@ function fetchIngredients(foodPreference) {
             addMessage('bot', `Sorry, there was an error fetching ingredients: ${data.error}`);
         } else {
             const ingredients = data.ingredients || [];
-            addMessage('bot', 'Here are some available ingredients:');
+            addMessage('bot', 'Please select ingredients:');
             displayIngredientsList(ingredients);
             displaySelectedIngredients();
         }
@@ -123,6 +112,28 @@ function fetchIngredients(foodPreference) {
     });
 }
 
+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 fish-based dishes:');
+            displayMenuItems(menuItems);
+        }
+    })
+    .catch(error => {
+        addMessage('bot', `Error: Unable to connect to the menu database. ${error.message}`);
+    });
+}
 
 function displayIngredientsList(ingredients) {
     const chatMessages = document.getElementById('chatMessages');
@@ -131,7 +142,6 @@ function displayIngredientsList(ingredients) {
         return;
     }
 
-    // Create or update ingredients list
     let ingredientsList = document.querySelector('.ingredients-list');
     if (!ingredientsList) {
         ingredientsList = document.createElement('div');
@@ -145,7 +155,7 @@ function displayIngredientsList(ingredients) {
         const item = document.createElement('div');
         item.className = 'ingredient-item';
         const img = document.createElement('img');
-        img.src = ingredient.image_url || 'https://via.placeholder.com/80'; // Fallback image
+        img.src = ingredient.image_url || 'https://via.placeholder.com/80';
         img.alt = ingredient.name;
         const name = document.createElement('div');
         name.textContent = ingredient.name;
@@ -167,6 +177,50 @@ function displayIngredientsList(ingredients) {
     });
 }
 
+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 displaySelectedIngredients() {
     const chatMessages = document.getElementById('chatMessages');
@@ -175,7 +229,6 @@ function displaySelectedIngredients() {
         return;
     }
 
-    // Create or update selected ingredients area
     let selectedArea = document.querySelector('.selected-ingredients');
     if (!selectedArea) {
         selectedArea = document.createElement('div');
@@ -191,23 +244,19 @@ function displaySelectedIngredients() {
         selectedArea.appendChild(div);
     });
 
-    // Check if there are selected ingredients
     if (selectedIngredients.length > 0) {
-        // Create and display the Submit button
         let submitButton = document.querySelector('.submit-button');
         if (!submitButton) {
             submitButton = document.createElement('button');
             submitButton.className = 'submit-button';
             submitButton.textContent = 'Submit Ingredients';
-            submitButton.onclick = () => {
-                submitIngredients(selectedIngredients);
-            };
+            submitButton.onclick = submitIngredients;
             chatMessages.appendChild(submitButton);
         }
     }
 }
 
-function submitIngredients(selectedIngredients) {
+function submitIngredients() {
     fetch('/submit_ingredients', {
         method: 'POST',
         headers: {
@@ -218,21 +267,8 @@ function submitIngredients(selectedIngredients) {
     .then(response => response.json())
     .then(data => {
         if (data.success) {
-            // Now fetch dish suggestions
-            fetch('/get_dish_suggestions', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ ingredients: selectedIngredients })
-            })
-            .then(response => response.json())
-            .then(suggestionData => {
-                if (suggestionData.suggestions) {
-                    // Display dish suggestions
-                    displayDishSuggestions(suggestionData.suggestions);
-                }
-            });
+            addMessage('bot', 'Great choice! Would you like to add any special instructions for your dish?');
+            displayCustomizationInput();
         } else {
             addMessage('bot', 'There was an issue submitting your ingredients. Please try again.');
         }
@@ -242,22 +278,47 @@ function submitIngredients(selectedIngredients) {
     });
 }
 
-function displayDishSuggestions(suggestions) {
+function displayCustomizationInput() {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {
-        console.error('Chat messages container not found for dish suggestions!');
+        console.error('Chat messages container not found for customization input!');
         return;
     }
-    addMessage('bot', `Based on your ingredients, here are some dish suggestions:`);
-    
-    // Create and display the suggestions
-    const suggestionDiv = document.createElement('div');
-    suggestionDiv.className = 'suggestions-list';
-    suggestionDiv.textContent = suggestions;
-    chatMessages.appendChild(suggestionDiv);
-}
 
+    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);
+}
 
 function displayOptions(options) {
     const chatMessages = document.getElementById('chatMessages');
@@ -272,7 +333,7 @@ function displayOptions(options) {
         button.onclick = () => {
             addMessage('user', opt.text);
             conversation.push({ role: 'user', message: opt.text });
-            chatMessages.innerHTML = ''; // Clear previous messages
+            chatMessages.innerHTML = '';
             conversation.forEach(msg => addMessage(msg.role, msg.message));
             setTimeout(() => handleResponse(opt.text), 500);
         };
@@ -283,21 +344,20 @@ function displayOptions(options) {
     backButton.textContent = 'Go Back';
     backButton.className = 'option-button';
     backButton.onclick = () => {
-        conversation.pop(); // Remove last user input
-        selectedIngredients = []; // Clear selected ingredients
-        chatMessages.innerHTML = ''; // Clear previous messages
+        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);
 }
 
-// Add event listener for Enter key
 document.getElementById('userInput').addEventListener('keypress', function(e) {
     if (e.key === 'Enter') {
         sendMessage();
     }
 });
 
-// Initial load check
 console.log('Script loaded successfully');