lokesh341 commited on
Commit
13534e5
·
verified ·
1 Parent(s): bf6b698

Update static/script.js

Browse files
Files changed (1) hide show
  1. static/script.js +67 -82
static/script.js CHANGED
@@ -3,6 +3,7 @@ let conversation = [
3
  ];
4
  let selectedItems = [];
5
  let selectionBoxVisible = false;
 
6
 
7
  function addMessage(role, message) {
8
  const chatMessages = document.getElementById('chatMessages');
@@ -29,9 +30,10 @@ function sendMessage() {
29
  addMessage('user', message);
30
  conversation.push({ role: 'user', message: message });
31
  selectionBoxVisible = true;
 
32
  handleResponse(message);
33
  } else {
34
- addMessage('bot', 'Please type a dish name! 😄');
35
  }
36
  userInput.value = '';
37
  updateSelectionBox();
@@ -42,23 +44,61 @@ function handleResponse(userInput) {
42
  let botResponse = '';
43
 
44
  if (conversation.length === 2) {
45
- botResponse = `Hi ${userInput}! 🍳 Search for a dish like "chicken" or "paneer"!`;
46
  displayOptions([
47
  { text: 'Vegetarian', class: 'green' },
48
  { text: 'Non-Vegetarian', class: 'red' },
49
  { text: 'Both', class: 'gray' }
50
  ]);
51
  addMessage('bot', botResponse);
 
52
  } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
53
- botResponse = `Selected ${lowerInput}. Search for a dish!`;
54
  addMessage('bot', botResponse);
 
55
  } else {
56
- botResponse = `Looking for "${userInput}"...`;
57
  addMessage('bot', botResponse);
58
- fetchMenuItems(userInput);
59
  }
60
  }
61
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  function updateSelectionBox() {
63
  const chatMessages = document.getElementById('chatMessages');
64
  if (!chatMessages) return;
@@ -74,31 +114,19 @@ function updateSelectionBox() {
74
  const vegButton = document.createElement('button');
75
  vegButton.textContent = 'Veg';
76
  vegButton.className = 'dietary-button green';
77
- vegButton.onclick = () => {
78
- addMessage('user', 'Vegetarian');
79
- conversation.push({ role: 'user', message: 'Vegetarian' });
80
- handleResponse('vegetarian');
81
- };
82
  selectionBox.appendChild(vegButton);
83
 
84
  const nonVegButton = document.createElement('button');
85
  nonVegButton.textContent = 'Non-Veg';
86
  nonVegButton.className = 'dietary-button red';
87
- nonVegButton.onclick = () => {
88
- addMessage('user', 'Non-Vegetarian');
89
- conversation.push({ role: 'user', message: 'Non-Vegetarian' });
90
- handleResponse('non-vegetarian');
91
- };
92
  selectionBox.appendChild(nonVegButton);
93
 
94
  const bothButton = document.createElement('button');
95
  bothButton.textContent = 'Both';
96
  bothButton.className = 'dietary-button gray';
97
- bothButton.onclick = () => {
98
- addMessage('user', 'Both');
99
- conversation.push({ role: 'user', message: 'Both' });
100
- handleResponse('both');
101
- };
102
  selectionBox.appendChild(bothButton);
103
 
104
  const label = document.createElement('span');
@@ -132,19 +160,6 @@ function updateSelectionBox() {
132
  selectionBox.appendChild(itemContainer);
133
  });
134
 
135
- const textInput = document.createElement('input');
136
- textInput.type = 'text';
137
- textInput.placeholder = 'Add item...';
138
- textInput.className = 'manual-input';
139
- textInput.addEventListener('keypress', (e) => {
140
- if (e.key === 'Enter' && textInput.value.trim()) {
141
- const itemName = textInput.value.trim();
142
- fetchSectorItemDetails(itemName);
143
- textInput.value = '';
144
- }
145
- });
146
- selectionBox.appendChild(textInput);
147
-
148
  if (selectedItems.length > 0) {
149
  const quantityInput = document.createElement('input');
150
  quantityInput.type = 'number';
@@ -172,11 +187,14 @@ function updateSelectionBox() {
172
  console.log('Updated selection box:', selectedItems.map(item => ({ name: item.name, category: item.category })));
173
  }
174
 
175
- function fetchMenuItems(searchTerm) {
 
 
 
176
  fetch('/get_menu_items', {
177
  method: 'POST',
178
  headers: { 'Content-Type': 'application/json' },
179
- body: JSON.stringify({ search_term: searchTerm })
180
  })
181
  .then(response => response.json())
182
  .then(data => {
@@ -186,13 +204,13 @@ function fetchMenuItems(searchTerm) {
186
  addMessage('bot', `--- Found ${data.menu_items.length} item${data.menu_items.length > 1 ? 's' : ''} ---`);
187
  displayItemsList(data.menu_items);
188
  } else {
189
- addMessage('bot', `No matches for "${searchTerm}". Try "paneer"!`);
190
  }
191
- console.log(`Fetched items for ${searchTerm}:`, data.menu_items);
192
  })
193
  .catch(error => {
194
  addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
195
- setTimeout(() => fetchMenuItems(searchTerm), 2000);
196
  });
197
  }
198
 
@@ -253,7 +271,7 @@ function displayItemsList(items) {
253
  items.forEach(item => {
254
  const itemDiv = document.createElement('div');
255
  itemDiv.className = 'item-card';
256
- itemDiv.dataset.hidden = item.source === 'Sector_Detail__c' ? 'true' : 'false';
257
 
258
  const img = document.createElement('img');
259
  img.src = item.image_url || 'https://via.placeholder.com/60';
@@ -269,39 +287,16 @@ function displayItemsList(items) {
269
  nameDiv.className = 'item-name';
270
  contentDiv.appendChild(nameDiv);
271
 
272
- if (item.source === 'Menu_Item__c') {
273
- const fields = [
274
- { label: 'Price', value: item.price ? `$${item.price.toFixed(2)}` : 'N/A' },
275
- { label: 'Veg/Non-Veg', value: item.veg_nonveg },
276
- { label: 'Spice', value: item.spice_levels },
277
- { label: 'Category', value: item.category },
278
- { label: 'Ingredients', value: item.ingredients },
279
- { label: 'Nutrition', value: item.nutritional_info },
280
- { label: 'Sector', value: item.sector },
281
- { label: 'Dynamic', value: item.dynamic_dish ? 'Yes' : 'No' }
282
- ];
283
- fields.forEach(field => {
284
- if (field.value) {
285
- const p = document.createElement('p');
286
- p.className = 'item-field';
287
- p.innerHTML = `<strong>${field.label}:</strong> ${field.value}`;
288
- contentDiv.appendChild(p);
289
- }
290
- });
291
- }
292
-
293
  itemDiv.appendChild(contentDiv);
294
 
295
  const buttonContainer = document.createElement('div');
296
  buttonContainer.className = 'button-container';
297
 
298
- if (item.source === 'Sector_Detail__c') {
299
- const showButton = document.createElement('button');
300
- showButton.textContent = 'Show';
301
- showButton.className = 'show-button';
302
- showButton.onclick = () => toggleDescription(itemDiv, item.description, item.name);
303
- buttonContainer.appendChild(showButton);
304
- }
305
 
306
  const addButton = document.createElement('button');
307
  addButton.textContent = 'Add';
@@ -315,15 +310,6 @@ function displayItemsList(items) {
315
  source: item.source,
316
  quantity: 1
317
  };
318
- if (item.source === 'Menu_Item__c') {
319
- selectedItem.ingredients = item.ingredients;
320
- selectedItem.nutritional_info = item.nutritional_info;
321
- selectedItem.price = item.price;
322
- selectedItem.sector = item.sector;
323
- selectedItem.spice_levels = item.spice_levels;
324
- selectedItem.veg_nonveg = item.veg_nonveg;
325
- selectedItem.dynamic_dish = item.dynamic_dish;
326
- }
327
  if (selectedItems.some(existing => existing.name === selectedItem.name)) {
328
  addMessage('bot', `"${selectedItem.name}" already selected!`);
329
  } else {
@@ -356,11 +342,8 @@ function displayOptions(options) {
356
  button.textContent = opt.text;
357
  button.className = `option-button ${opt.class}`;
358
  button.onclick = () => {
359
- addMessage('user', opt.text);
360
- conversation.push({ role: 'user', message: opt.text });
361
- selectionBoxVisible = true;
362
- handleResponse(opt.text);
363
- updateSelectionBox();
364
  };
365
  optionsDiv.appendChild(button);
366
  });
@@ -424,10 +407,11 @@ function resetConversation() {
424
  conversation = [
425
  { role: 'bot', message: `Hello! I’m Chef Bot, your culinary assistant! What’s your name?` },
426
  { role: 'user', message: userName },
427
- { role: 'bot', message: `Hi ${userName}! 🍳 Search for a dish like "chicken" or "paneer"!` }
428
  ];
429
  selectedItems = [];
430
  selectionBoxVisible = true;
 
431
  const chatMessages = document.getElementById('chatMessages');
432
  chatMessages.innerHTML = '';
433
  conversation.forEach(msg => addMessage(msg.role, msg.message));
@@ -436,6 +420,7 @@ function resetConversation() {
436
  { text: 'Non-Vegetarian', class: 'red' },
437
  { text: 'Both', class: 'gray' }
438
  ]);
 
439
  updateSelectionBox();
440
  }
441
 
 
3
  ];
4
  let selectedItems = [];
5
  let selectionBoxVisible = false;
6
+ let filterBoxVisible = false;
7
 
8
  function addMessage(role, message) {
9
  const chatMessages = document.getElementById('chatMessages');
 
30
  addMessage('user', message);
31
  conversation.push({ role: 'user', message: message });
32
  selectionBoxVisible = true;
33
+ filterBoxVisible = true;
34
  handleResponse(message);
35
  } else {
36
+ addMessage('bot', 'Please type a dish name to add! 😄');
37
  }
38
  userInput.value = '';
39
  updateSelectionBox();
 
44
  let botResponse = '';
45
 
46
  if (conversation.length === 2) {
47
+ botResponse = `Hi ${userInput}! 🍳 Type a dish name in the chat to add or use the filter box to browse items!`;
48
  displayOptions([
49
  { text: 'Vegetarian', class: 'green' },
50
  { text: 'Non-Vegetarian', class: 'red' },
51
  { text: 'Both', class: 'gray' }
52
  ]);
53
  addMessage('bot', botResponse);
54
+ createFilterBox();
55
  } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
56
+ botResponse = `Filtering ${lowerInput} items...`;
57
  addMessage('bot', botResponse);
58
+ fetchMenuItems('', lowerInput);
59
  } else {
60
+ botResponse = `Adding "${userInput}"...`;
61
  addMessage('bot', botResponse);
62
+ fetchSectorItemDetails(userInput);
63
  }
64
  }
65
 
66
+ function createFilterBox() {
67
+ const chatMessages = document.getElementById('chatMessages');
68
+ if (!chatMessages) return;
69
+
70
+ const existingFilter = document.querySelector('.filter-box');
71
+ if (existingFilter) existingFilter.remove();
72
+
73
+ if (!filterBoxVisible) return;
74
+
75
+ const filterBox = document.createElement('div');
76
+ filterBox.className = 'filter-box';
77
+
78
+ const filterInput = document.createElement('input');
79
+ filterInput.type = 'text';
80
+ filterInput.placeholder = 'Type a letter (e.g., A) or item name...';
81
+ filterInput.className = 'filter-input';
82
+ filterInput.addEventListener('input', () => {
83
+ const value = filterInput.value.trim();
84
+ if (value.length === 1 && /[a-zA-Z]/.test(value)) {
85
+ fetchMenuItems(value.toUpperCase());
86
+ } else if (value.length === 0) {
87
+ addMessage('bot', 'Type a letter to filter items.');
88
+ }
89
+ });
90
+ filterInput.addEventListener('keypress', (e) => {
91
+ if (e.key === 'Enter' && filterInput.value.trim()) {
92
+ fetchSectorItemDetails(filterInput.value.trim());
93
+ filterInput.value = '';
94
+ }
95
+ });
96
+ filterBox.appendChild(filterInput);
97
+
98
+ chatMessages.appendChild(filterBox);
99
+ chatMessages.scrollTop = chatMessages.scrollHeight;
100
+ }
101
+
102
  function updateSelectionBox() {
103
  const chatMessages = document.getElementById('chatMessages');
104
  if (!chatMessages) return;
 
114
  const vegButton = document.createElement('button');
115
  vegButton.textContent = 'Veg';
116
  vegButton.className = 'dietary-button green';
117
+ vegButton.onclick = () => fetchMenuItems('', 'vegetarian');
 
 
 
 
118
  selectionBox.appendChild(vegButton);
119
 
120
  const nonVegButton = document.createElement('button');
121
  nonVegButton.textContent = 'Non-Veg';
122
  nonVegButton.className = 'dietary-button red';
123
+ nonVegButton.onclick = () => fetchMenuItems('', 'non-vegetarian');
 
 
 
 
124
  selectionBox.appendChild(nonVegButton);
125
 
126
  const bothButton = document.createElement('button');
127
  bothButton.textContent = 'Both';
128
  bothButton.className = 'dietary-button gray';
129
+ bothButton.onclick = () => fetchMenuItems('', 'both');
 
 
 
 
130
  selectionBox.appendChild(bothButton);
131
 
132
  const label = document.createElement('span');
 
160
  selectionBox.appendChild(itemContainer);
161
  });
162
 
 
 
 
 
 
 
 
 
 
 
 
 
 
163
  if (selectedItems.length > 0) {
164
  const quantityInput = document.createElement('input');
165
  quantityInput.type = 'number';
 
187
  console.log('Updated selection box:', selectedItems.map(item => ({ name: item.name, category: item.category })));
188
  }
189
 
190
+ function fetchMenuItems(letter = '', dietaryPreference = '') {
191
+ const payload = {};
192
+ if (letter) payload.letter = letter;
193
+ if (dietaryPreference) payload.dietary_preference = dietaryPreference;
194
  fetch('/get_menu_items', {
195
  method: 'POST',
196
  headers: { 'Content-Type': 'application/json' },
197
+ body: JSON.stringify(payload)
198
  })
199
  .then(response => response.json())
200
  .then(data => {
 
204
  addMessage('bot', `--- Found ${data.menu_items.length} item${data.menu_items.length > 1 ? 's' : ''} ---`);
205
  displayItemsList(data.menu_items);
206
  } else {
207
+ addMessage('bot', `No items found for "${letter || dietaryPreference}". Try another letter!`);
208
  }
209
+ console.log(`Fetched items (letter: ${letter}, dietary: ${dietaryPreference}):`, data.menu_items);
210
  })
211
  .catch(error => {
212
  addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
213
+ setTimeout(() => fetchMenuItems(letter, dietaryPreference), 2000);
214
  });
215
  }
216
 
 
271
  items.forEach(item => {
272
  const itemDiv = document.createElement('div');
273
  itemDiv.className = 'item-card';
274
+ itemDiv.dataset.hidden = 'true';
275
 
276
  const img = document.createElement('img');
277
  img.src = item.image_url || 'https://via.placeholder.com/60';
 
287
  nameDiv.className = 'item-name';
288
  contentDiv.appendChild(nameDiv);
289
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
290
  itemDiv.appendChild(contentDiv);
291
 
292
  const buttonContainer = document.createElement('div');
293
  buttonContainer.className = 'button-container';
294
 
295
+ const showButton = document.createElement('button');
296
+ showButton.textContent = 'Show';
297
+ showButton.className = 'show-button';
298
+ showButton.onclick = () => toggleDescription(itemDiv, item.description, item.name);
299
+ buttonContainer.appendChild(showButton);
 
 
300
 
301
  const addButton = document.createElement('button');
302
  addButton.textContent = 'Add';
 
310
  source: item.source,
311
  quantity: 1
312
  };
 
 
 
 
 
 
 
 
 
313
  if (selectedItems.some(existing => existing.name === selectedItem.name)) {
314
  addMessage('bot', `"${selectedItem.name}" already selected!`);
315
  } else {
 
342
  button.textContent = opt.text;
343
  button.className = `option-button ${opt.class}`;
344
  button.onclick = () => {
345
+ addMessage('bot', `Filtering ${opt.text.toLowerCase()} items...`);
346
+ fetchMenuItems('', opt.text.toLowerCase());
 
 
 
347
  };
348
  optionsDiv.appendChild(button);
349
  });
 
407
  conversation = [
408
  { role: 'bot', message: `Hello! I’m Chef Bot, your culinary assistant! What’s your name?` },
409
  { role: 'user', message: userName },
410
+ { role: 'bot', message: `Hi ${userName}! 🍳 Type a dish name in the chat to add or use the filter box to browse items!` }
411
  ];
412
  selectedItems = [];
413
  selectionBoxVisible = true;
414
+ filterBoxVisible = true;
415
  const chatMessages = document.getElementById('chatMessages');
416
  chatMessages.innerHTML = '';
417
  conversation.forEach(msg => addMessage(msg.role, msg.message));
 
420
  { text: 'Non-Vegetarian', class: 'red' },
421
  { text: 'Both', class: 'gray' }
422
  ]);
423
+ createFilterBox();
424
  updateSelectionBox();
425
  }
426