lokesh341 commited on
Commit
fea5caa
·
verified ·
1 Parent(s): 20c4a07

Update templates/index.html

Browse files
Files changed (1) hide show
  1. 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 Items:';
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 itemName = textInput.value.trim();
696
- fetchSectorItemDetails(itemName);
 
 
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, custom_ingredients: item.custom_ingredients })));
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.filter(item => item.source === 'Sector_Detail__c'));
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, custom_ingredients: '' });
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: 'Description', value: item.description }
 
 
 
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
- custom_ingredients: ''
 
 
 
 
 
 
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
  }