lokesh341 commited on
Commit
359ed5c
·
verified ·
1 Parent(s): c8580af

Update static/script.js

Browse files
Files changed (1) hide show
  1. static/script.js +69 -7
static/script.js CHANGED
@@ -18,6 +18,14 @@ function addMessage(role, message) {
18
  console.log(`Added ${role} message: ${message}`);
19
  }
20
 
 
 
 
 
 
 
 
 
21
  function sendMessage() {
22
  const userInput = document.getElementById('userInput');
23
  if (!userInput) {
@@ -30,8 +38,10 @@ function sendMessage() {
30
  conversation.push({ role: 'user', message: message });
31
  selectionBoxVisible = true;
32
  handleResponse(message);
 
33
  } else {
34
  addMessage('bot', 'Please type a dish or preference! 😄');
 
35
  }
36
  userInput.value = '';
37
  updateSelectionBox();
@@ -60,6 +70,14 @@ function handleResponse(userInput) {
60
  }
61
  }
62
 
 
 
 
 
 
 
 
 
63
  function updateSelectionBox() {
64
  const chatMessages = document.getElementById('chatMessages');
65
  if (!chatMessages) return;
@@ -72,33 +90,47 @@ function updateSelectionBox() {
72
  const selectionBox = document.createElement('div');
73
  selectionBox.className = 'selection-box';
74
 
 
 
 
 
 
 
 
 
 
 
 
75
  const vegButton = document.createElement('button');
76
  vegButton.textContent = 'Veg';
77
- vegButton.className = 'dietary-button green';
78
  vegButton.onclick = () => {
79
  addMessage('user', 'Vegetarian');
80
  conversation.push({ role: 'user', message: 'Vegetarian' });
81
  handleResponse('vegetarian');
 
82
  };
83
  selectionBox.appendChild(vegButton);
84
 
85
  const nonVegButton = document.createElement('button');
86
  nonVegButton.textContent = 'Non-Veg';
87
- nonVegButton.className = 'dietary-button red';
88
  nonVegButton.onclick = () => {
89
  addMessage('user', 'Non-Vegetarian');
90
  conversation.push({ role: 'user', message: 'Non-Vegetarian' });
91
  handleResponse('non-vegetarian');
 
92
  };
93
  selectionBox.appendChild(nonVegButton);
94
 
95
  const bothButton = document.createElement('button');
96
  bothButton.textContent = 'Both';
97
- bothButton.className = 'dietary-button gray';
98
  bothButton.onclick = () => {
99
  addMessage('user', 'Both');
100
  conversation.push({ role: 'user', message: 'Both' });
101
  handleResponse('both');
 
102
  };
103
  selectionBox.appendChild(bothButton);
104
 
@@ -140,6 +172,7 @@ function updateSelectionBox() {
140
  removeButton.onclick = () => {
141
  selectedItems.splice(index, 1);
142
  addMessage('bot', `Removed "${item.name}".`);
 
143
  updateSelectionBox();
144
  };
145
  itemContainer.appendChild(removeButton);
@@ -151,13 +184,14 @@ function updateSelectionBox() {
151
  textInput.type = 'text';
152
  textInput.placeholder = 'Add item...';
153
  textInput.className = 'manual-input';
154
- textInput.addEventListener('keypress', (e) => {
155
  if (e.key === 'Enter' && textInput.value.trim()) {
156
  const itemName = textInput.value.trim();
157
  fetchSectorItemDetails(itemName);
158
  textInput.value = '';
 
159
  }
160
- });
161
  selectionBox.appendChild(textInput);
162
 
163
  if (selectedItems.length > 0) {
@@ -191,6 +225,12 @@ function fetchMenuItems(dietaryPreference = '', searchTerm = '') {
191
  const payload = {};
192
  if (dietaryPreference) payload.dietary_preference = dietaryPreference;
193
  if (searchTerm) payload.search_term = searchTerm;
 
 
 
 
 
 
194
  fetch('/get_menu_items', {
195
  method: 'POST',
196
  headers: { 'Content-Type': 'application/json' },
@@ -198,18 +238,23 @@ function fetchMenuItems(dietaryPreference = '', searchTerm = '') {
198
  })
199
  .then(response => response.json())
200
  .then(data => {
 
201
  if (data.error) {
202
  addMessage('bot', `Error: ${data.error}. Try again!`);
 
203
  } else if (data.menu_items.length > 0) {
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 matches for "${searchTerm || dietaryPreference}". Try "paneer"!`);
 
208
  }
209
  console.log(`Fetched items for ${searchTerm || dietaryPreference}:`, data.menu_items);
210
  })
211
  .catch(error => {
 
212
  addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
 
213
  setTimeout(() => fetchMenuItems(dietaryPreference, searchTerm), 2000);
214
  });
215
  }
@@ -224,19 +269,23 @@ function fetchSectorItemDetails(itemName) {
224
  .then(data => {
225
  if (data.error) {
226
  addMessage('bot', `No "${itemName}" found. Try another!`);
 
227
  } else {
228
  const details = data.item_details;
229
  if (selectedItems.some(item => item.name === details.name)) {
230
  addMessage('bot', `"${details.name}" already selected!`);
 
231
  } else {
232
  selectedItems.push({ ...details, quantity: 1 });
233
  addMessage('bot', `Added "${details.name}"!`);
 
234
  updateSelectionBox();
235
  }
236
  }
237
  })
238
  .catch(error => {
239
  addMessage('bot', `Error for "${itemName}". Retrying...`);
 
240
  setTimeout(() => fetchSectorItemDetails(itemName), 2000);
241
  });
242
  }
@@ -250,10 +299,12 @@ function toggleDescription(itemContainer, description, itemName) {
250
  itemContainer.querySelector('.selected-item-content').appendChild(descElement);
251
  itemContainer.dataset.hidden = 'false';
252
  console.log(`Showed description for ${itemName}`);
 
253
  } else {
254
  descElement.remove();
255
  itemContainer.dataset.hidden = 'true';
256
  console.log(`Hid description for ${itemName}`);
 
257
  }
258
  }
259
 
@@ -262,6 +313,7 @@ function displayItemsList(items) {
262
  if (!chatMessages) {
263
  console.error('Chat messages container not found!');
264
  addMessage('bot', 'Display issue. Try again?');
 
265
  return;
266
  }
267
 
@@ -273,7 +325,7 @@ function displayItemsList(items) {
273
  itemDiv.className = 'item-card';
274
 
275
  const img = document.createElement('img');
276
- img.src = item.image_url || 'https://via.placeholder.com/60';
277
  img.alt = item.name;
278
  img.className = 'item-image';
279
  itemDiv.appendChild(img);
@@ -331,9 +383,11 @@ function displayItemsList(items) {
331
  };
332
  if (selectedItems.some(existing => existing.name === selectedItem.name)) {
333
  addMessage('bot', `"${selectedItem.name}" already selected!`);
 
334
  } else {
335
  selectedItems.push(selectedItem);
336
  addMessage('bot', `Added "${selectedItem.name}"!`);
 
337
  updateSelectionBox();
338
  }
339
  };
@@ -366,6 +420,7 @@ function displayOptions(options) {
366
  selectionBoxVisible = true;
367
  handleResponse(opt.text);
368
  updateSelectionBox();
 
369
  };
370
  optionsDiv.appendChild(button);
371
  });
@@ -384,14 +439,17 @@ function promptAndSubmit(quantity) {
384
  const customOrderName = orderNameInput ? orderNameInput.value.trim() : '';
385
  if (confirm(`Submit ${selectedItems.length} items (Qty: ${quantity})?`)) {
386
  submitToSalesforce(customOrderName, quantity);
 
387
  } else {
388
  addMessage('bot', 'Cancelled. Add more items?');
 
389
  }
390
  }
391
 
392
  function submitToSalesforce(customOrderName, quantity) {
393
  if (selectedItems.length === 0) {
394
  addMessage('bot', 'No items selected! Add some dishes! 😊');
 
395
  return;
396
  }
397
 
@@ -412,14 +470,17 @@ function submitToSalesforce(customOrderName, quantity) {
412
  .then(data => {
413
  if (data.error) {
414
  addMessage('bot', `Submission failed: ${data.error}. Try again?`);
 
415
  } else {
416
  addMessage('bot', `Submitted ${data.ingredient_name}! What's next?`);
417
  selectedItems = [];
418
  updateSelectionBox();
 
419
  }
420
  })
421
  .catch(error => {
422
  addMessage('bot', `Submission error: ${error.message}. Retrying...`);
 
423
  setTimeout(() => submitToSalesforce(customOrderName, quantity), 2000);
424
  });
425
  }
@@ -442,6 +503,7 @@ function resetConversation() {
442
  { text: 'Both', class: 'gray' }
443
  ]);
444
  updateSelectionBox();
 
445
  }
446
 
447
  document.getElementById('userInput').addEventListener('keypress', (e) => {
 
18
  console.log(`Added ${role} message: ${message}`);
19
  }
20
 
21
+ function showToast(message) {
22
+ const toast = document.createElement('div');
23
+ toast.className = 'toast';
24
+ toast.textContent = message;
25
+ document.body.appendChild(toast);
26
+ setTimeout(() => toast.remove(), 3000);
27
+ }
28
+
29
  function sendMessage() {
30
  const userInput = document.getElementById('userInput');
31
  if (!userInput) {
 
38
  conversation.push({ role: 'user', message: message });
39
  selectionBoxVisible = true;
40
  handleResponse(message);
41
+ showToast(`Sent: "${message}"`);
42
  } else {
43
  addMessage('bot', 'Please type a dish or preference! 😄');
44
+ showToast('Input is empty!');
45
  }
46
  userInput.value = '';
47
  updateSelectionBox();
 
70
  }
71
  }
72
 
73
+ function debounce(func, wait) {
74
+ let timeout;
75
+ return function (...args) {
76
+ clearTimeout(timeout);
77
+ timeout = setTimeout(() => func.apply(this, args), wait);
78
+ };
79
+ }
80
+
81
  function updateSelectionBox() {
82
  const chatMessages = document.getElementById('chatMessages');
83
  if (!chatMessages) return;
 
90
  const selectionBox = document.createElement('div');
91
  selectionBox.className = 'selection-box';
92
 
93
+ const clearAllButton = document.createElement('button');
94
+ clearAllButton.textContent = 'Clear All';
95
+ clearAllButton.className = 'remove-button';
96
+ clearAllButton.onclick = () => {
97
+ selectedItems = [];
98
+ addMessage('bot', 'Cleared all items.');
99
+ showToast('All items cleared!');
100
+ updateSelectionBox();
101
+ };
102
+ selectionBox.appendChild(clearAllButton);
103
+
104
  const vegButton = document.createElement('button');
105
  vegButton.textContent = 'Veg';
106
+ vegButton.className = 'option-button green';
107
  vegButton.onclick = () => {
108
  addMessage('user', 'Vegetarian');
109
  conversation.push({ role: 'user', message: 'Vegetarian' });
110
  handleResponse('vegetarian');
111
+ showToast('Selected Vegetarian');
112
  };
113
  selectionBox.appendChild(vegButton);
114
 
115
  const nonVegButton = document.createElement('button');
116
  nonVegButton.textContent = 'Non-Veg';
117
+ nonVegButton.className = 'option-button red';
118
  nonVegButton.onclick = () => {
119
  addMessage('user', 'Non-Vegetarian');
120
  conversation.push({ role: 'user', message: 'Non-Vegetarian' });
121
  handleResponse('non-vegetarian');
122
+ showToast('Selected Non-Vegetarian');
123
  };
124
  selectionBox.appendChild(nonVegButton);
125
 
126
  const bothButton = document.createElement('button');
127
  bothButton.textContent = 'Both';
128
+ bothButton.className = 'option-button gray';
129
  bothButton.onclick = () => {
130
  addMessage('user', 'Both');
131
  conversation.push({ role: 'user', message: 'Both' });
132
  handleResponse('both');
133
+ showToast('Selected Both');
134
  };
135
  selectionBox.appendChild(bothButton);
136
 
 
172
  removeButton.onclick = () => {
173
  selectedItems.splice(index, 1);
174
  addMessage('bot', `Removed "${item.name}".`);
175
+ showToast(`Removed "${item.name}"`);
176
  updateSelectionBox();
177
  };
178
  itemContainer.appendChild(removeButton);
 
184
  textInput.type = 'text';
185
  textInput.placeholder = 'Add item...';
186
  textInput.className = 'manual-input';
187
+ textInput.addEventListener('keypress', debounce((e) => {
188
  if (e.key === 'Enter' && textInput.value.trim()) {
189
  const itemName = textInput.value.trim();
190
  fetchSectorItemDetails(itemName);
191
  textInput.value = '';
192
+ showToast(`Searching for "${itemName}"...`);
193
  }
194
+ }, 300));
195
  selectionBox.appendChild(textInput);
196
 
197
  if (selectedItems.length > 0) {
 
225
  const payload = {};
226
  if (dietaryPreference) payload.dietary_preference = dietaryPreference;
227
  if (searchTerm) payload.search_term = searchTerm;
228
+
229
+ const chatMessages = document.getElementById('chatMessages');
230
+ const spinner = document.createElement('div');
231
+ spinner.className = 'spinner';
232
+ chatMessages.appendChild(spinner);
233
+
234
  fetch('/get_menu_items', {
235
  method: 'POST',
236
  headers: { 'Content-Type': 'application/json' },
 
238
  })
239
  .then(response => response.json())
240
  .then(data => {
241
+ spinner.remove();
242
  if (data.error) {
243
  addMessage('bot', `Error: ${data.error}. Try again!`);
244
+ showToast(`Error: ${data.error}`);
245
  } else if (data.menu_items.length > 0) {
246
  addMessage('bot', `--- Found ${data.menu_items.length} item${data.menu_items.length > 1 ? 's' : ''} ---`);
247
  displayItemsList(data.menu_items);
248
  } else {
249
+ addMessage('bot', `No matches for "${searchTerm || dietaryPreference}". Try "paneer" or "chicken curry"!`);
250
+ showToast('No items found!');
251
  }
252
  console.log(`Fetched items for ${searchTerm || dietaryPreference}:`, data.menu_items);
253
  })
254
  .catch(error => {
255
+ spinner.remove();
256
  addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
257
+ showToast('Connection issue!');
258
  setTimeout(() => fetchMenuItems(dietaryPreference, searchTerm), 2000);
259
  });
260
  }
 
269
  .then(data => {
270
  if (data.error) {
271
  addMessage('bot', `No "${itemName}" found. Try another!`);
272
+ showToast(`No "${itemName}" found`);
273
  } else {
274
  const details = data.item_details;
275
  if (selectedItems.some(item => item.name === details.name)) {
276
  addMessage('bot', `"${details.name}" already selected!`);
277
+ showToast(`"${details.name}" already selected`);
278
  } else {
279
  selectedItems.push({ ...details, quantity: 1 });
280
  addMessage('bot', `Added "${details.name}"!`);
281
+ showToast(`Added "${details.name}"`);
282
  updateSelectionBox();
283
  }
284
  }
285
  })
286
  .catch(error => {
287
  addMessage('bot', `Error for "${itemName}". Retrying...`);
288
+ showToast(`Error fetching "${itemName}"`);
289
  setTimeout(() => fetchSectorItemDetails(itemName), 2000);
290
  });
291
  }
 
299
  itemContainer.querySelector('.selected-item-content').appendChild(descElement);
300
  itemContainer.dataset.hidden = 'false';
301
  console.log(`Showed description for ${itemName}`);
302
+ showToast(`Showing details for ${itemName}`);
303
  } else {
304
  descElement.remove();
305
  itemContainer.dataset.hidden = 'true';
306
  console.log(`Hid description for ${itemName}`);
307
+ showToast(`Hid details for ${itemName}`);
308
  }
309
  }
310
 
 
313
  if (!chatMessages) {
314
  console.error('Chat messages container not found!');
315
  addMessage('bot', 'Display issue. Try again?');
316
+ showToast('Display issue!');
317
  return;
318
  }
319
 
 
325
  itemDiv.className = 'item-card';
326
 
327
  const img = document.createElement('img');
328
+ img.src = item.image_url || 'https://via.placeholder.com/120';
329
  img.alt = item.name;
330
  img.className = 'item-image';
331
  itemDiv.appendChild(img);
 
383
  };
384
  if (selectedItems.some(existing => existing.name === selectedItem.name)) {
385
  addMessage('bot', `"${selectedItem.name}" already selected!`);
386
+ showToast(`"${selectedItem.name}" already selected`);
387
  } else {
388
  selectedItems.push(selectedItem);
389
  addMessage('bot', `Added "${selectedItem.name}"!`);
390
+ showToast(`Added "${selectedItem.name}"`);
391
  updateSelectionBox();
392
  }
393
  };
 
420
  selectionBoxVisible = true;
421
  handleResponse(opt.text);
422
  updateSelectionBox();
423
+ showToast(`Selected ${opt.text}`);
424
  };
425
  optionsDiv.appendChild(button);
426
  });
 
439
  const customOrderName = orderNameInput ? orderNameInput.value.trim() : '';
440
  if (confirm(`Submit ${selectedItems.length} items (Qty: ${quantity})?`)) {
441
  submitToSalesforce(customOrderName, quantity);
442
+ showToast('Submitting order...');
443
  } else {
444
  addMessage('bot', 'Cancelled. Add more items?');
445
+ showToast('Order cancelled');
446
  }
447
  }
448
 
449
  function submitToSalesforce(customOrderName, quantity) {
450
  if (selectedItems.length === 0) {
451
  addMessage('bot', 'No items selected! Add some dishes! 😊');
452
+ showToast('No items selected');
453
  return;
454
  }
455
 
 
470
  .then(data => {
471
  if (data.error) {
472
  addMessage('bot', `Submission failed: ${data.error}. Try again?`);
473
+ showToast(`Submission failed: ${data.error}`);
474
  } else {
475
  addMessage('bot', `Submitted ${data.ingredient_name}! What's next?`);
476
  selectedItems = [];
477
  updateSelectionBox();
478
+ showToast('Order submitted!');
479
  }
480
  })
481
  .catch(error => {
482
  addMessage('bot', `Submission error: ${error.message}. Retrying...`);
483
+ showToast('Submission error!');
484
  setTimeout(() => submitToSalesforce(customOrderName, quantity), 2000);
485
  });
486
  }
 
503
  { text: 'Both', class: 'gray' }
504
  ]);
505
  updateSelectionBox();
506
+ showToast('Conversation reset');
507
  }
508
 
509
  document.getElementById('userInput').addEventListener('keypress', (e) => {