Hugging Face's logo

Spaces:
geethareddy
/
BiryaniHubflaskgeethu
Sleeping

App Files Community
lokesh341 commited on
Commit
de2814c
·
verified ·
1 Parent(s): 527f1a4

Update templates/menu.html

Browse files
Files changed (1) hide show
  1. templates/menu.html +179 -154
templates/menu.html CHANGED
@@ -135,7 +135,7 @@
135
  top: 50%;
136
  transform: translateY(-50%);
137
  display: flex;
138
- align-items: right;
139
  justify-content: center;
140
  }
141
  .avatar-icon {
@@ -264,6 +264,9 @@
264
  position: relative;
265
  margin-right: 10px;
266
  }
 
 
 
267
  .addon-section .form-check-input:checked {
268
  background-color: #006400;
269
  border-color: #006400;
@@ -276,6 +279,16 @@
276
  left: 4px;
277
  color: white;
278
  }
 
 
 
 
 
 
 
 
 
 
279
  .addon-section .form-check-label {
280
  font-size: 16px;
281
  margin-left: 5px;
@@ -730,7 +743,6 @@
730
  </style>
731
  </head>
732
  <body>
733
-
734
  <div class="fixed-top-bar">
735
  <div class="avatar-dropdown-container">
736
  <div class="avatar-icon">
@@ -786,7 +798,7 @@
786
  <div class="row">
787
  {% for item in items %}
788
  <div class="col-md-6 mb-4">
789
- <div class="card menu-card" data-item-name="{{ item.Name | default('Unnamed Item') }}">
790
  <video
791
  class="card-img-top menu-video"
792
  muted
@@ -814,7 +826,9 @@
814
  data-item-price="{{ item.Price__c | default('0.00') }}"
815
  data-item-image="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
816
  data-item-section="{{ item.Section__c | default(section) }}"
817
- data-item-category="{{ selected_category }}">
 
 
818
  {% if item.Section__c == 'Soft Drinks' %}
819
  <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
820
  {% else %}
@@ -1089,6 +1103,130 @@
1089
  }
1090
  }
1091
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1092
  document.addEventListener('DOMContentLoaded', function () {
1093
  // Avatar Dropdown
1094
  const avatarContainer = document.querySelector('.avatar-dropdown-container');
@@ -1115,21 +1253,47 @@
1115
  window.location.href = '/search';
1116
  });
1117
 
1118
- // Highlight selected item from search
1119
  const selectedItem = localStorage.getItem('selectedItem');
1120
  if (selectedItem) {
1121
- const menuCards = document.querySelectorAll('.menu-card');
1122
- menuCards.forEach(card => {
1123
- const itemName = card.getAttribute('data-item-name');
1124
- if (itemName === selectedItem) {
1125
- card.classList.add('highlighted');
1126
- card.scrollIntoView({ behavior: 'smooth', block: 'center' });
1127
- const toggleLink = card.querySelector('.toggle-details');
1128
- if (toggleLink) {
1129
- toggleLink.click();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1130
  }
1131
  }
1132
- });
 
 
1133
  localStorage.removeItem('selectedItem');
1134
  }
1135
 
@@ -1363,145 +1527,6 @@
1363
  micIcon.style.display = 'none';
1364
  }
1365
  });
1366
-
1367
- function showItemDetails(name, price, image, description, section, selectedCategory) {
1368
- document.getElementById('modal-name').innerText = name;
1369
- document.getElementById('modal-price').innerText = `$${price}`;
1370
- const modalImg = document.getElementById('modal-img');
1371
- modalImg.src = image || '/static/placeholder.jpg';
1372
- document.getElementById('modal-description').innerText = description || 'No description available.';
1373
- document.getElementById('addons-list').innerHTML = 'Loading customization options...';
1374
- document.getElementById('modal-instructions').value = '';
1375
- const modalSectionEl = document.getElementById('modal-section');
1376
- modalSectionEl.setAttribute('data-section', section);
1377
- modalSectionEl.setAttribute('data-category', selectedCategory);
1378
- document.getElementById('quantityInput').value = 1;
1379
-
1380
- fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
1381
- .then(response => response.json())
1382
- .then(data => {
1383
- const addonsList = document.getElementById('addons-list');
1384
- addonsList.innerHTML = '';
1385
- if (!data.success || !data.addons || data.addons.length === 0) {
1386
- addonsList.innerHTML = '<p>No customization options available.</p>';
1387
- return;
1388
- }
1389
- data.addons.forEach(addon => {
1390
- const sectionDiv = document.createElement('div');
1391
- sectionDiv.classList.add('addon-section');
1392
- const title = document.createElement('h6');
1393
- title.innerText = addon.name;
1394
- sectionDiv.appendChild(title);
1395
- const optionsContainer = document.createElement('div');
1396
- addon.options.forEach((option, index) => {
1397
- const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
1398
- const listItem = document.createElement('div');
1399
- listItem.classList.add('form-check');
1400
- listItem.innerHTML = `
1401
- <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
1402
- data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
1403
- <label class="form-check-label" for="${optionId}">
1404
- ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
1405
- </label>
1406
- `;
1407
- optionsContainer.appendChild(listItem);
1408
- });
1409
- sectionDiv.appendChild(optionsContainer);
1410
- addonsList.appendChild(sectionDiv);
1411
- });
1412
- })
1413
- .catch(err => {
1414
- console.error('Error fetching add-ons:', err);
1415
- document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
1416
- });
1417
- }
1418
-
1419
- document.addEventListener('click', function(event) {
1420
- if (event.target.classList.contains('addon-option')) {
1421
- handleAddonClick(event.target);
1422
- }
1423
- });
1424
-
1425
- function handleAddonClick(checkbox) {
1426
- const groupName = checkbox.getAttribute('data-group');
1427
- const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo", "Beverages", "Sauces"].includes(groupName);
1428
- if (!isMultiSelectGroup) {
1429
- const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
1430
- checkboxes.forEach(otherCheckbox => {
1431
- if (otherCheckbox !== checkbox) {
1432
- otherCheckbox.checked = false;
1433
- }
1434
- });
1435
- }
1436
- }
1437
-
1438
- function addToCartFromModal() {
1439
- const itemName = document.getElementById('modal-name').innerText;
1440
- let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
1441
- if (isNaN(itemPrice)) {
1442
- alert('Invalid price for the item. Please check the item details.');
1443
- return;
1444
- }
1445
- const itemImage = document.getElementById('modal-img').src;
1446
- const modalSectionEl = document.getElementById('modal-section');
1447
- const section = modalSectionEl.getAttribute('data-section');
1448
- const selectedCategory = modalSectionEl.getAttribute('data-category');
1449
- if (!itemName || !itemPrice || !section || !itemImage) {
1450
- console.error('Missing data for cart item:', { itemName, itemPrice, section, itemImage });
1451
- return;
1452
- }
1453
- const selectedAddOns = Array.from(
1454
- document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
1455
- ).map(addon => ({
1456
- name: addon.getAttribute('data-name'),
1457
- price: parseFloat(addon.getAttribute('data-price')) || 0
1458
- }));
1459
- const instructions = document.getElementById('modal-instructions').value;
1460
- const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
1461
- if (isProcessingRequest) return;
1462
- isProcessingRequest = true;
1463
- const cartPayload = {
1464
- itemName: itemName,
1465
- itemPrice: itemPrice,
1466
- itemImage: itemImage,
1467
- section: section,
1468
- category: selectedCategory,
1469
- addons: selectedAddOns,
1470
- instructions: instructions,
1471
- quantity: quantity
1472
- };
1473
- fetch('/cart/add', {
1474
- method: 'POST',
1475
- headers: {
1476
- 'Content-Type': 'application/json',
1477
- },
1478
- body: JSON.stringify(cartPayload)
1479
- })
1480
- .then(response => response.json())
1481
- .then(data => {
1482
- if (data.success) {
1483
- updateCartUI(data.cart);
1484
- const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
1485
- modal.hide();
1486
- } else {
1487
- console.error('Failed to add item to cart:', data.error);
1488
- const cart = addToCartLocalStorage(cartPayload);
1489
- updateCartUI(cart);
1490
- const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
1491
- modal.hide();
1492
- }
1493
- })
1494
- .catch(err => {
1495
- console.error('Error adding item to cart:', err);
1496
- const cart = addToCartLocalStorage(cartPayload);
1497
- updateCartUI(cart);
1498
- const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
1499
- modal.hide();
1500
- })
1501
- .finally(() => {
1502
- isProcessingRequest = false;
1503
- });
1504
- }
1505
  </script>
1506
  </body>
1507
  </html>
 
135
  top: 50%;
136
  transform: translateY(-50%);
137
  display: flex;
138
+ align-items: center;
139
  justify-content: center;
140
  }
141
  .avatar-icon {
 
264
  position: relative;
265
  margin-right: 10px;
266
  }
267
+ .addon-section .form-check-input[type="radio"] {
268
+ border-radius: 50%;
269
+ }
270
  .addon-section .form-check-input:checked {
271
  background-color: #006400;
272
  border-color: #006400;
 
279
  left: 4px;
280
  color: white;
281
  }
282
+ .addon-section .form-check-input[type="radio"]:checked::before {
283
+ content: '';
284
+ width: 12px;
285
+ height: 12px;
286
+ border-radius: 50%;
287
+ background-color: #006400;
288
+ position: absolute;
289
+ top: 4px;
290
+ left: 4px;
291
+ }
292
  .addon-section .form-check-label {
293
  font-size: 16px;
294
  margin-left: 5px;
 
743
  </style>
744
  </head>
745
  <body>
 
746
  <div class="fixed-top-bar">
747
  <div class="avatar-dropdown-container">
748
  <div class="avatar-icon">
 
798
  <div class="row">
799
  {% for item in items %}
800
  <div class="col-md-6 mb-4">
801
+ <div class="card menu-card" data-item-name="{{ item.Name | default('Unnamed Item') }}" data-item-section="{{ item.Section__c | default(section) }}">
802
  <video
803
  class="card-img-top menu-video"
804
  muted
 
826
  data-item-price="{{ item.Price__c | default('0.00') }}"
827
  data-item-image="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
828
  data-item-section="{{ item.Section__c | default(section) }}"
829
+ data-item-category="{{ selected_category }}"
830
+ data-item-description="{{ item.Description__c | default('No description') }}"
831
+ data-item-image2="{{ item.Image2__c | default(item.Image1__c) }}">
832
  {% if item.Section__c == 'Soft Drinks' %}
833
  <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
834
  {% else %}
 
1103
  }
1104
  }
1105
 
1106
+ function showItemDetails(name, price, image, description, section, selectedCategory) {
1107
+ document.getElementById('modal-name').innerText = name;
1108
+ document.getElementById('modal-price').innerText = `$${price}`;
1109
+ const modalImg = document.getElementById('modal-img');
1110
+ modalImg.src = image || '/static/placeholder.jpg';
1111
+ document.getElementById('modal-description').innerText = description || 'No description available.';
1112
+ document.getElementById('addons-list').innerHTML = 'Loading customization options...';
1113
+ document.getElementById('modal-instructions').value = '';
1114
+ const modalSectionEl = document.getElementById('modal-section');
1115
+ modalSectionEl.setAttribute('data-section', section);
1116
+ modalSectionEl.setAttribute('data-category', selectedCategory);
1117
+ document.getElementById('quantityInput').value = 1;
1118
+
1119
+ fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
1120
+ .then(response => response.json())
1121
+ .then(data => {
1122
+ const addonsList = document.getElementById('addons-list');
1123
+ addonsList.innerHTML = '';
1124
+ if (!data.success || !data.addons || data.addons.length === 0) {
1125
+ addonsList.innerHTML = '<p>No customization options available.</p>';
1126
+ return;
1127
+ }
1128
+ data.addons.forEach(addon => {
1129
+ const sectionDiv = document.createElement('div');
1130
+ sectionDiv.classList.add('addon-section');
1131
+ const title = document.createElement('h6');
1132
+ title.innerText = addon.name;
1133
+ sectionDiv.appendChild(title);
1134
+ const optionsContainer = document.createElement('div');
1135
+ addon.options.forEach((option, index) => {
1136
+ const optionId = `addon-${addon.name.replace(/\s+/g, '-')}-${index}`;
1137
+ const formCheck = document.createElement('div');
1138
+ formCheck.classList.add('form-check');
1139
+ const input = document.createElement('input');
1140
+ input.classList.add('form-check-input');
1141
+ input.type = addon.multi_select ? 'checkbox' : 'radio';
1142
+ input.name = addon.multi_select ? optionId : addon.name.replace(/\s+/g, '-');
1143
+ input.id = optionId;
1144
+ input.value = option.name;
1145
+ input.dataset.price = option.price || 0;
1146
+ const label = document.createElement('label');
1147
+ label.classList.add('form-check-label');
1148
+ label.htmlFor = optionId;
1149
+ label.innerText = `${option.name} ${option.price ? `(+$${option.price})` : ''}`;
1150
+ formCheck.appendChild(input);
1151
+ formCheck.appendChild(label);
1152
+ optionsContainer.appendChild(formCheck);
1153
+ });
1154
+ sectionDiv.appendChild(optionsContainer);
1155
+ addonsList.appendChild(sectionDiv);
1156
+ });
1157
+ })
1158
+ .catch(err => {
1159
+ console.error('Error fetching addons:', err);
1160
+ document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
1161
+ });
1162
+ }
1163
+
1164
+ function addToCartFromModal() {
1165
+ if (isProcessingRequest) return;
1166
+ isProcessingRequest = true;
1167
+
1168
+ const modalSectionEl = document.getElementById('modal-section');
1169
+ const section = modalSectionEl.getAttribute('data-section');
1170
+ const selectedCategory = modalSectionEl.getAttribute('data-category');
1171
+ const itemName = document.getElementById('modal-name').innerText;
1172
+ const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', '')) || 0;
1173
+ const itemImage = document.getElementById('modal-img').src;
1174
+ const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
1175
+ const instructions = document.getElementById('modal-instructions').value;
1176
+
1177
+ const addons = [];
1178
+ const addonInputs = document.querySelectorAll('#addons-list .form-check-input:checked');
1179
+ addonInputs.forEach(input => {
1180
+ addons.push({
1181
+ name: input.value,
1182
+ price: parseFloat(input.dataset.price) || 0
1183
+ });
1184
+ });
1185
+
1186
+ const cartPayload = {
1187
+ itemName: itemName,
1188
+ itemPrice: itemPrice,
1189
+ itemImage: itemImage,
1190
+ section: section,
1191
+ category: selectedCategory,
1192
+ addons: addons,
1193
+ instructions: instructions,
1194
+ quantity: quantity
1195
+ };
1196
+
1197
+ fetch('/cart/add', {
1198
+ method: 'POST',
1199
+ headers: {
1200
+ 'Content-Type': 'application/json',
1201
+ },
1202
+ body: JSON.stringify(cartPayload)
1203
+ })
1204
+ .then(response => response.json())
1205
+ .then(data => {
1206
+ if (data.success) {
1207
+ updateCartUI(data.cart);
1208
+ const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
1209
+ modal.hide();
1210
+ } else {
1211
+ console.error('Failed to add item to cart:', data.error);
1212
+ const cart = addToCartLocalStorage(cartPayload);
1213
+ updateCartUI(cart);
1214
+ const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
1215
+ modal.hide();
1216
+ }
1217
+ })
1218
+ .catch(err => {
1219
+ console.error('Error adding item to cart:', err);
1220
+ const cart = addToCartLocalStorage(cartPayload);
1221
+ updateCartUI(cart);
1222
+ const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
1223
+ modal.hide();
1224
+ })
1225
+ .finally(() => {
1226
+ isProcessingRequest = false;
1227
+ });
1228
+ }
1229
+
1230
  document.addEventListener('DOMContentLoaded', function () {
1231
  // Avatar Dropdown
1232
  const avatarContainer = document.querySelector('.avatar-dropdown-container');
 
1253
  window.location.href = '/search';
1254
  });
1255
 
1256
+ // Auto-open modal for selected item
1257
  const selectedItem = localStorage.getItem('selectedItem');
1258
  if (selectedItem) {
1259
+ try {
1260
+ const { name, section } = JSON.parse(selectedItem);
1261
+ const menuCards = document.querySelectorAll('.menu-card');
1262
+ let targetCard = null;
1263
+ let buttonContainer = null;
1264
+
1265
+ menuCards.forEach(card => {
1266
+ const itemName = card.getAttribute('data-item-name');
1267
+ const itemSection = card.getAttribute('data-item-section');
1268
+ if (itemName === name && itemSection === section) {
1269
+ targetCard = card;
1270
+ buttonContainer = card.querySelector('.button-container');
1271
+ card.classList.add('highlighted');
1272
+ card.scrollIntoView({ behavior: 'smooth', block: 'center' });
1273
+ const toggleLink = card.querySelector('.toggle-details');
1274
+ if (toggleLink) {
1275
+ toggleLink.click();
1276
+ }
1277
+ }
1278
+ });
1279
+
1280
+ if (buttonContainer) {
1281
+ if (section === 'Soft Drinks') {
1282
+ showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
1283
+ } else {
1284
+ const name = buttonContainer.getAttribute('data-item-name');
1285
+ const price = buttonContainer.getAttribute('data-item-price');
1286
+ const image = buttonContainer.getAttribute('data-item-image2');
1287
+ const description = buttonContainer.getAttribute('data-item-description');
1288
+ const category = buttonContainer.getAttribute('data-item-category');
1289
+ showItemDetails(name, price, image, description, section, category);
1290
+ const modal = new bootstrap.Modal(document.getElementById('itemModal'));
1291
+ modal.show();
1292
  }
1293
  }
1294
+ } catch (err) {
1295
+ console.error('Error parsing selected item:', err);
1296
+ }
1297
  localStorage.removeItem('selectedItem');
1298
  }
1299
 
 
1527
  micIcon.style.display = 'none';
1528
  }
1529
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1530
  </script>
1531
  </body>
1532
  </html>