Spaces:
Sleeping
Sleeping
Update templates/index.html
Browse files- templates/index.html +99 -62
templates/index.html
CHANGED
@@ -252,7 +252,6 @@
|
|
252 |
padding: 3px 8px;
|
253 |
border-radius: 5px;
|
254 |
font-size: 11px;
|
255 |
-
flex-wrap: wrap;
|
256 |
}
|
257 |
|
258 |
.selected-item-image {
|
@@ -317,21 +316,6 @@
|
|
317 |
width: 100px;
|
318 |
}
|
319 |
|
320 |
-
.custom-ingredients-input {
|
321 |
-
padding: 4px;
|
322 |
-
border: 1px solid #0288d1;
|
323 |
-
border-radius: 5px;
|
324 |
-
font-size: 11px;
|
325 |
-
width: 120px;
|
326 |
-
margin-left: 5px;
|
327 |
-
}
|
328 |
-
|
329 |
-
.custom-ingredients-label {
|
330 |
-
font-size: 11px;
|
331 |
-
margin-left: 5px;
|
332 |
-
color: #555;
|
333 |
-
}
|
334 |
-
|
335 |
@media (max-width: 480px) {
|
336 |
.chat-header {
|
337 |
font-size: 14px;
|
@@ -424,10 +408,6 @@
|
|
424 |
font-size: 11px;
|
425 |
padding: 3px;
|
426 |
}
|
427 |
-
.custom-ingredients-input {
|
428 |
-
width: 100px;
|
429 |
-
font-size: 10px;
|
430 |
-
}
|
431 |
}
|
432 |
|
433 |
@media (min-width: 481px) and (max-width: 768px) {
|
@@ -504,10 +484,6 @@
|
|
504 |
width: 50px;
|
505 |
font-size: 12px;
|
506 |
}
|
507 |
-
.custom-ingredients-input {
|
508 |
-
width: 110px;
|
509 |
-
font-size: 11px;
|
510 |
-
}
|
511 |
}
|
512 |
</style>
|
513 |
</head>
|
@@ -573,13 +549,16 @@
|
|
573 |
botResponse = `Hi ${userInput}! 🍳 Search for a dish or choose a preference below!`;
|
574 |
displayOptions([
|
575 |
{ text: 'Vegetarian', class: 'green' },
|
576 |
-
{ text: 'Non-Vegetarian', class: 'red' }
|
|
|
577 |
]);
|
578 |
addMessage('bot', botResponse);
|
579 |
-
} else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian') {
|
580 |
botResponse = `Fetching ${lowerInput} dishes...`;
|
581 |
addMessage('bot', botResponse);
|
582 |
fetchMenuItems(lowerInput);
|
|
|
|
|
583 |
} else {
|
584 |
botResponse = `Looking for "${userInput}"...`;
|
585 |
addMessage('bot', botResponse);
|
@@ -587,6 +566,62 @@
|
|
587 |
}
|
588 |
}
|
589 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
590 |
function updateSelectionBox() {
|
591 |
const chatMessages = document.getElementById('chatMessages');
|
592 |
if (!chatMessages) return;
|
@@ -619,8 +654,18 @@
|
|
619 |
};
|
620 |
selectionBox.appendChild(nonVegButton);
|
621 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
622 |
const label = document.createElement('span');
|
623 |
-
label.textContent = 'Selected
|
624 |
selectionBox.appendChild(label);
|
625 |
|
626 |
selectedItems.forEach((item, index) => {
|
@@ -641,28 +686,6 @@
|
|
641 |
itemSpan.textContent = `${item.name} (Qty: ${item.quantity || 1})`;
|
642 |
contentDiv.appendChild(itemSpan);
|
643 |
|
644 |
-
const customLabel = document.createElement('span');
|
645 |
-
customLabel.className = 'custom-ingredients-label';
|
646 |
-
customLabel.textContent = 'Custom Ingredients:';
|
647 |
-
contentDiv.appendChild(customLabel);
|
648 |
-
|
649 |
-
const customInput = document.createElement('input');
|
650 |
-
customInput.type = 'text';
|
651 |
-
customInput.className = 'custom-ingredients-input';
|
652 |
-
customInput.placeholder = 'e.g., extra cheese';
|
653 |
-
customInput.value = item.custom_ingredients || '';
|
654 |
-
customInput.addEventListener('input', (e) => {
|
655 |
-
selectedItems[index].custom_ingredients = e.target.value.trim();
|
656 |
-
});
|
657 |
-
contentDiv.appendChild(customInput);
|
658 |
-
|
659 |
-
if (item.custom_ingredients) {
|
660 |
-
const customDisplay = document.createElement('span');
|
661 |
-
customDisplay.textContent = `Customized: ${item.name} with ${item.custom_ingredients}`;
|
662 |
-
customDisplay.className = 'custom-ingredients-label';
|
663 |
-
contentDiv.appendChild(customDisplay);
|
664 |
-
}
|
665 |
-
|
666 |
if (item.source === 'Sector_Detail__c') {
|
667 |
const showButton = document.createElement('button');
|
668 |
showButton.textContent = 'Show';
|
@@ -688,12 +711,14 @@
|
|
688 |
|
689 |
const textInput = document.createElement('input');
|
690 |
textInput.type = 'text';
|
691 |
-
textInput.placeholder = 'Add item
|
692 |
textInput.className = 'manual-input';
|
693 |
textInput.addEventListener('keypress', (e) => {
|
694 |
if (e.key === 'Enter' && textInput.value.trim()) {
|
695 |
-
const
|
696 |
-
|
|
|
|
|
697 |
textInput.value = '';
|
698 |
}
|
699 |
});
|
@@ -723,7 +748,7 @@
|
|
723 |
|
724 |
chatMessages.appendChild(selectionBox);
|
725 |
chatMessages.scrollTop = chatMessages.scrollHeight;
|
726 |
-
console.log('Updated selection box:', selectedItems.map(item => ({ name: item.name, category: item.category
|
727 |
}
|
728 |
|
729 |
function fetchMenuItems(dietaryPreference = '', searchTerm = '') {
|
@@ -741,7 +766,7 @@
|
|
741 |
addMessage('bot', `Error: ${data.error}. Try again!`);
|
742 |
} else if (data.menu_items.length > 0) {
|
743 |
addMessage('bot', `--- Found ${data.menu_items.length} item${data.menu_items.length > 1 ? 's' : ''} ---`);
|
744 |
-
displayItemsList(data.menu_items
|
745 |
} else {
|
746 |
addMessage('bot', `No matches for "${searchTerm || dietaryPreference}". Try "paneer"!`);
|
747 |
}
|
@@ -765,10 +790,10 @@
|
|
765 |
addMessage('bot', `No "${itemName}" found. Try another!`);
|
766 |
} else {
|
767 |
const details = data.item_details;
|
768 |
-
if (selectedItems.some(item => item.name === details.name)) {
|
769 |
addMessage('bot', `"${details.name}" already selected!`);
|
770 |
} else {
|
771 |
-
selectedItems.push({ ...details, quantity: 1
|
772 |
addMessage('bot', `Added "${details.name}"!`);
|
773 |
updateSelectionBox();
|
774 |
}
|
@@ -826,8 +851,14 @@
|
|
826 |
contentDiv.appendChild(nameDiv);
|
827 |
|
828 |
const fields = [
|
|
|
|
|
|
|
829 |
{ label: 'Category', value: item.category },
|
830 |
-
{ label: '
|
|
|
|
|
|
|
831 |
];
|
832 |
fields.forEach(field => {
|
833 |
if (field.value) {
|
@@ -854,9 +885,15 @@
|
|
854 |
description: item.description || 'No description available',
|
855 |
source: item.source,
|
856 |
quantity: 1,
|
857 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
858 |
};
|
859 |
-
if (selectedItems.some(existing => existing.name === selectedItem.name)) {
|
860 |
addMessage('bot', `"${selectedItem.name}" already selected!`);
|
861 |
} else {
|
862 |
selectedItems.push(selectedItem);
|
@@ -927,8 +964,7 @@
|
|
927 |
category: item.category || 'Not specified',
|
928 |
description: item.description || 'No description available',
|
929 |
image_url: item.image_url || '',
|
930 |
-
quantity: parseInt(quantity) || 1
|
931 |
-
custom_ingredients: item.custom_ingredients || ''
|
932 |
}));
|
933 |
|
934 |
fetch('/submit_items', {
|
@@ -966,7 +1002,8 @@
|
|
966 |
conversation.forEach(msg => addMessage(msg.role, msg.message));
|
967 |
displayOptions([
|
968 |
{ text: 'Vegetarian', class: 'green' },
|
969 |
-
{ text: 'Non-Vegetarian', class: 'red' }
|
|
|
970 |
]);
|
971 |
updateSelectionBox();
|
972 |
}
|
|
|
252 |
padding: 3px 8px;
|
253 |
border-radius: 5px;
|
254 |
font-size: 11px;
|
|
|
255 |
}
|
256 |
|
257 |
.selected-item-image {
|
|
|
316 |
width: 100px;
|
317 |
}
|
318 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
319 |
@media (max-width: 480px) {
|
320 |
.chat-header {
|
321 |
font-size: 14px;
|
|
|
408 |
font-size: 11px;
|
409 |
padding: 3px;
|
410 |
}
|
|
|
|
|
|
|
|
|
411 |
}
|
412 |
|
413 |
@media (min-width: 481px) and (max-width: 768px) {
|
|
|
484 |
width: 50px;
|
485 |
font-size: 12px;
|
486 |
}
|
|
|
|
|
|
|
|
|
487 |
}
|
488 |
</style>
|
489 |
</head>
|
|
|
549 |
botResponse = `Hi ${userInput}! 🍳 Search for a dish or choose a preference below!`;
|
550 |
displayOptions([
|
551 |
{ text: 'Vegetarian', class: 'green' },
|
552 |
+
{ text: 'Non-Vegetarian', class: 'red' },
|
553 |
+
{ text: 'Both', class: 'gray' }
|
554 |
]);
|
555 |
addMessage('bot', botResponse);
|
556 |
+
} else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
|
557 |
botResponse = `Fetching ${lowerInput} dishes...`;
|
558 |
addMessage('bot', botResponse);
|
559 |
fetchMenuItems(lowerInput);
|
560 |
+
} else if (lowerInput.startsWith('add')) {
|
561 |
+
handleAddItem(lowerInput);
|
562 |
} else {
|
563 |
botResponse = `Looking for "${userInput}"...`;
|
564 |
addMessage('bot', botResponse);
|
|
|
566 |
}
|
567 |
}
|
568 |
|
569 |
+
function handleAddItem(input) {
|
570 |
+
const addMatch = input.match(/^add\s+(.+?)(?:\s+with\s+(.+))?$/i);
|
571 |
+
if (!addMatch) {
|
572 |
+
addMessage('bot', 'Please use format: "Add [dish name] [with extra ingredients]"');
|
573 |
+
return;
|
574 |
+
}
|
575 |
+
const dishName = addMatch[1].trim();
|
576 |
+
const extraIngredients = addMatch[2] ? addMatch[2].trim() : '';
|
577 |
+
fetch('/get_sector_item_details', {
|
578 |
+
method: 'POST',
|
579 |
+
headers: { 'Content-Type': 'application/json' },
|
580 |
+
body: JSON.stringify({ item_name: dishName })
|
581 |
+
})
|
582 |
+
.then(response => response.json())
|
583 |
+
.then(data => {
|
584 |
+
if (data.error) {
|
585 |
+
addMessage('bot', `No "${dishName}" found. Try another dish!`);
|
586 |
+
return;
|
587 |
+
}
|
588 |
+
const item = data.item_details;
|
589 |
+
const originalItem = {
|
590 |
+
name: item.name,
|
591 |
+
image_url: item.image_url || '',
|
592 |
+
category: item.category || 'Not specified',
|
593 |
+
description: item.description || 'No description available',
|
594 |
+
source: item.source,
|
595 |
+
quantity: 1
|
596 |
+
};
|
597 |
+
if (selectedItems.some(existing => existing.name === originalItem.name && !existing.custom)) {
|
598 |
+
addMessage('bot', `"${originalItem.name}" already added!`);
|
599 |
+
} else {
|
600 |
+
selectedItems.push(originalItem);
|
601 |
+
addMessage('bot', `Added "${originalItem.name}"!`);
|
602 |
+
}
|
603 |
+
if (extraIngredients) {
|
604 |
+
const customItem = {
|
605 |
+
...originalItem,
|
606 |
+
name: `${item.name} (Custom)`,
|
607 |
+
description: `${item.description}, ${extraIngredients}`,
|
608 |
+
custom: true
|
609 |
+
};
|
610 |
+
if (selectedItems.some(existing => existing.name === customItem.name)) {
|
611 |
+
addMessage('bot', `"${customItem.name}" already added!`);
|
612 |
+
} else {
|
613 |
+
selectedItems.push(customItem);
|
614 |
+
addMessage('bot', `Added customized "${customItem.name}" with ${extraIngredients}!`);
|
615 |
+
}
|
616 |
+
}
|
617 |
+
updateSelectionBox();
|
618 |
+
})
|
619 |
+
.catch(error => {
|
620 |
+
addMessage('bot', `Error fetching "${dishName}": ${error.message}. Retrying...`);
|
621 |
+
setTimeout(() => fetchSectorItemDetails(dishName), 2000);
|
622 |
+
});
|
623 |
+
}
|
624 |
+
|
625 |
function updateSelectionBox() {
|
626 |
const chatMessages = document.getElementById('chatMessages');
|
627 |
if (!chatMessages) return;
|
|
|
654 |
};
|
655 |
selectionBox.appendChild(nonVegButton);
|
656 |
|
657 |
+
const bothButton = document.createElement('button');
|
658 |
+
bothButton.textContent = 'Both';
|
659 |
+
bothButton.className = 'dietary-button gray';
|
660 |
+
bothButton.onclick = () => {
|
661 |
+
addMessage('user', 'Both');
|
662 |
+
conversation.push({ role: 'user', message: 'Both' });
|
663 |
+
handleResponse('both');
|
664 |
+
};
|
665 |
+
selectionBox.appendChild(bothButton);
|
666 |
+
|
667 |
const label = document.createElement('span');
|
668 |
+
label.textContent = 'Selected:';
|
669 |
selectionBox.appendChild(label);
|
670 |
|
671 |
selectedItems.forEach((item, index) => {
|
|
|
686 |
itemSpan.textContent = `${item.name} (Qty: ${item.quantity || 1})`;
|
687 |
contentDiv.appendChild(itemSpan);
|
688 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
689 |
if (item.source === 'Sector_Detail__c') {
|
690 |
const showButton = document.createElement('button');
|
691 |
showButton.textContent = 'Show';
|
|
|
711 |
|
712 |
const textInput = document.createElement('input');
|
713 |
textInput.type = 'text';
|
714 |
+
textInput.placeholder = 'Add item (e.g., Paneer Tikka with onions)';
|
715 |
textInput.className = 'manual-input';
|
716 |
textInput.addEventListener('keypress', (e) => {
|
717 |
if (e.key === 'Enter' && textInput.value.trim()) {
|
718 |
+
const input = textInput.value.trim();
|
719 |
+
addMessage('user', `Add ${input}`);
|
720 |
+
conversation.push({ role: 'user', message: `Add ${input}` });
|
721 |
+
handleAddItem(`add ${input}`);
|
722 |
textInput.value = '';
|
723 |
}
|
724 |
});
|
|
|
748 |
|
749 |
chatMessages.appendChild(selectionBox);
|
750 |
chatMessages.scrollTop = chatMessages.scrollHeight;
|
751 |
+
console.log('Updated selection box:', selectedItems.map(item => ({ name: item.name, category: item.category })));
|
752 |
}
|
753 |
|
754 |
function fetchMenuItems(dietaryPreference = '', searchTerm = '') {
|
|
|
766 |
addMessage('bot', `Error: ${data.error}. Try again!`);
|
767 |
} else if (data.menu_items.length > 0) {
|
768 |
addMessage('bot', `--- Found ${data.menu_items.length} item${data.menu_items.length > 1 ? 's' : ''} ---`);
|
769 |
+
displayItemsList(data.menu_items);
|
770 |
} else {
|
771 |
addMessage('bot', `No matches for "${searchTerm || dietaryPreference}". Try "paneer"!`);
|
772 |
}
|
|
|
790 |
addMessage('bot', `No "${itemName}" found. Try another!`);
|
791 |
} else {
|
792 |
const details = data.item_details;
|
793 |
+
if (selectedItems.some(item => item.name === details.name && !item.custom)) {
|
794 |
addMessage('bot', `"${details.name}" already selected!`);
|
795 |
} else {
|
796 |
+
selectedItems.push({ ...details, quantity: 1 });
|
797 |
addMessage('bot', `Added "${details.name}"!`);
|
798 |
updateSelectionBox();
|
799 |
}
|
|
|
851 |
contentDiv.appendChild(nameDiv);
|
852 |
|
853 |
const fields = [
|
854 |
+
{ label: 'Price', value: item.price ? `$${item.price.toFixed(2)}` : 'N/A' },
|
855 |
+
{ label: 'Veg/Non-Veg', value: item.veg_nonveg },
|
856 |
+
{ label: 'Spice', value: item.spice_levels },
|
857 |
{ label: 'Category', value: item.category },
|
858 |
+
{ label: 'Ingredients', value: item.ingredients },
|
859 |
+
{ label: 'Nutrition', value: item.nutritional_info },
|
860 |
+
{ label: 'Sector', value: item.sector },
|
861 |
+
{ label: 'Dynamic', value: item.dynamic_dish ? 'Yes' : 'No' }
|
862 |
];
|
863 |
fields.forEach(field => {
|
864 |
if (field.value) {
|
|
|
885 |
description: item.description || 'No description available',
|
886 |
source: item.source,
|
887 |
quantity: 1,
|
888 |
+
ingredients: item.ingredients,
|
889 |
+
nutritional_info: item.nutritional_info,
|
890 |
+
price: item.price,
|
891 |
+
sector: item.sector,
|
892 |
+
spice_levels: item.spice_levels,
|
893 |
+
veg_nonveg: item.veg_nonveg,
|
894 |
+
dynamic_dish: item.dynamic_dish
|
895 |
};
|
896 |
+
if (selectedItems.some(existing => existing.name === selectedItem.name && !existing.custom)) {
|
897 |
addMessage('bot', `"${selectedItem.name}" already selected!`);
|
898 |
} else {
|
899 |
selectedItems.push(selectedItem);
|
|
|
964 |
category: item.category || 'Not specified',
|
965 |
description: item.description || 'No description available',
|
966 |
image_url: item.image_url || '',
|
967 |
+
quantity: parseInt(quantity) || 1
|
|
|
968 |
}));
|
969 |
|
970 |
fetch('/submit_items', {
|
|
|
1002 |
conversation.forEach(msg => addMessage(msg.role, msg.message));
|
1003 |
displayOptions([
|
1004 |
{ text: 'Vegetarian', class: 'green' },
|
1005 |
+
{ text: 'Non-Vegetarian', class: 'red' },
|
1006 |
+
{ text: 'Both', class: 'gray' }
|
1007 |
]);
|
1008 |
updateSelectionBox();
|
1009 |
}
|