Hugging Face's logo

Spaces:
DSatishchandra
/
BiryaniHubflask37
Sleeping

App Files Community
3
DSatishchandra commited on
Commit
5f7fe09
·
verified ·
1 Parent(s): 7136825

Update templates/menu.html

Browse files
Files changed (1) hide show
  1. templates/menu.html +12 -45
templates/menu.html CHANGED
@@ -54,7 +54,6 @@
54
  border-color: #1e7e34;
55
  box-shadow: none;
56
  }
57
-
58
  .view-cart-container {
59
  position: fixed;
60
  bottom: 20px;
@@ -78,11 +77,9 @@
78
  background-color: #4a5d68;
79
  text-decoration: none;
80
  }
81
-
82
  .avatar-dropdown-container {
83
  position: relative;
84
  }
85
-
86
  .avatar-icon {
87
  width: 40px;
88
  height: 40px;
@@ -96,7 +93,6 @@
96
  font-size: 20px;
97
  font-weight: bold;
98
  }
99
-
100
  .dropdown-menu {
101
  position: absolute;
102
  right: 0;
@@ -107,11 +103,9 @@
107
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
108
  display: none;
109
  }
110
-
111
  .avatar-dropdown-container:hover .dropdown-menu {
112
  display: block;
113
  }
114
-
115
  .dropdown-menu .dropdown-item {
116
  padding: 10px 15px;
117
  text-decoration: none;
@@ -119,11 +113,9 @@
119
  border-bottom: 1px solid #ddd;
120
  display: block; /* Make each item stack vertically */
121
  }
122
-
123
  .dropdown-menu .dropdown-item:last-child {
124
  border-bottom: none; /* Remove the bottom border from the last item */
125
  }
126
-
127
  .dropdown-menu .dropdown-item:hover {
128
  background-color: #f1f1f1;
129
  }
@@ -140,17 +132,14 @@
140
  border-radius: 25px;
141
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
142
  }
143
-
144
  /* Ensure the category filter dropdown does not overlap */
145
  form.text-center.mb-4 {
146
  margin-top: 120px !important; /* Increase spacing below search bar */
147
  }
148
-
149
  /* Ensure the container has enough margin so nothing is overlapped */
150
  .container {
151
  margin-top: 180px; /* Adjust spacing based on navbar and search bar */
152
  }
153
-
154
  .fixed-top-bar {
155
  position: fixed;
156
  top: 0;
@@ -172,7 +161,6 @@
172
  padding: 12px;
173
  margin-bottom: 15px; /* Spacing between sections */
174
  }
175
-
176
  /* Customization section title */
177
  .addon-section h6 {
178
  margin-bottom: 10px;
@@ -180,12 +168,10 @@
180
  font-weight: bold;
181
  color: #333;
182
  }
183
-
184
  /* Style for add-on checkboxes */
185
  .addon-section .form-check {
186
  margin-left: 10px;
187
  }
188
-
189
  </style>
190
  </head>
191
  <body>
@@ -214,6 +200,7 @@
214
  <div class="dropdown-menu">
215
  <!-- Direct links without grouping into columns -->
216
  <a href="{{ url_for('customer_details') }}" class="dropdown-item">View Profile</a>
 
217
  <a href="{{ url_for('order_history') }}" class="dropdown-item">Order History</a>
218
  <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
219
  </div>
@@ -225,20 +212,22 @@
225
 
226
  <!-- Category Filter -->
227
  <!-- Category Filter -->
 
228
  <form method="get" action="/menu" class="text-center mb-4">
229
- <label for="category" class="form-label fw-bold">Filter by Category:</label>
230
- <select id="category" name="category" class="form-select" onchange="this.form.submit()">
231
  {% for category in categories %}
232
- <option value="{{ category }}" {% if selected_category == category %}selected{% endif %}>
233
- {{ category }}
234
- </option>
235
  {% endfor %}
236
- <option value="Customized Dish" {% if selected_category == "Customized Dish" %}selected{% endif %}>
237
- Customized Dish
238
- </option>
239
- </select>
240
  </form>
241
 
 
242
  <!-- Display text boxes for Customized Dish -->
243
  {% if selected_category == "Customized Dish" %}
244
  <div id="custom-dish-form" class="mt-4">
@@ -349,12 +338,10 @@
349
  document.getElementById('modal-description').innerText = description || 'No description available.';
350
  document.getElementById('addons-list').innerHTML = 'Loading customization options...';
351
  document.getElementById('modal-instructions').value = '';
352
-
353
  // Set section and category for reference
354
  const modalSectionEl = document.getElementById('modal-section');
355
  modalSectionEl.setAttribute('data-section', section);
356
  modalSectionEl.setAttribute('data-category', selectedCategory);
357
-
358
  // Fetch customization options based on the section
359
  fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
360
  .then(response => response.json())
@@ -366,25 +353,20 @@
366
  addonsList.innerHTML = '<p>No customization options available.</p>';
367
  return;
368
  }
369
-
370
  // Display customization options inside styled divs
371
  data.addons.forEach(addon => {
372
  const sectionDiv = document.createElement('div');
373
  sectionDiv.classList.add('addon-section'); // Add styling class
374
-
375
  // Add section title
376
  const title = document.createElement('h6');
377
  title.innerText = addon.name;
378
  sectionDiv.appendChild(title);
379
-
380
  // Create options list
381
  const optionsContainer = document.createElement('div');
382
-
383
  addon.options.forEach((option, index) => {
384
  const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
385
  const listItem = document.createElement('div');
386
  listItem.classList.add('form-check');
387
-
388
  listItem.innerHTML = `
389
  <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
390
  data-name="${option}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
@@ -394,7 +376,6 @@
394
  `;
395
  optionsContainer.appendChild(listItem);
396
  });
397
-
398
  sectionDiv.appendChild(optionsContainer);
399
  addonsList.appendChild(sectionDiv);
400
  });
@@ -408,14 +389,11 @@
408
  let input = document.getElementById('searchBar').value.toLowerCase();
409
  let sections = document.querySelectorAll('h3'); // Select section headers
410
  let items = document.querySelectorAll('.menu-card'); // Select all items
411
-
412
  let matchedSections = new Set(); // Store matched sections
413
-
414
  // Hide all items initially
415
  items.forEach(item => {
416
  let itemName = item.querySelector('.card-title').innerText.toLowerCase();
417
  let itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase(); // Get section name
418
-
419
  if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
420
  item.style.display = 'block'; // Show item if it matches search
421
  matchedSections.add(item.closest('.row')); // Add section to matched list
@@ -423,7 +401,6 @@
423
  item.style.display = 'none'; // Hide item if not matched
424
  }
425
  });
426
-
427
  // Show or hide sections based on matched items
428
  sections.forEach(section => {
429
  let sectionRow = section.nextElementSibling; // The row containing items
@@ -436,8 +413,6 @@
436
  }
437
  });
438
  }
439
-
440
-
441
  function addToCartFromModal() {
442
  const itemName = document.getElementById('modal-name').innerText;
443
  const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
@@ -445,7 +420,6 @@
445
  const modalSectionEl = document.getElementById('modal-section');
446
  const section = modalSectionEl.getAttribute('data-section');
447
  const selectedCategory = modalSectionEl.getAttribute('data-category');
448
-
449
  // Collect selected add-ons
450
  const selectedAddOns = Array.from(
451
  document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
@@ -453,14 +427,11 @@
453
  name: addon.getAttribute('data-name'),
454
  price: parseFloat(addon.getAttribute('data-price'))
455
  }));
456
-
457
  const instructions = document.getElementById('modal-instructions').value;
458
-
459
  if (!itemName || !itemPrice) {
460
  alert('Failed to add item to cart. Please try again.');
461
  return;
462
  }
463
-
464
  const cartPayload = {
465
  itemName: itemName,
466
  itemPrice: itemPrice,
@@ -470,7 +441,6 @@
470
  addons: selectedAddOns,
471
  instructions: instructions
472
  };
473
-
474
  fetch('/cart/add', {
475
  method: 'POST',
476
  headers: {
@@ -494,7 +464,6 @@
494
  alert('An error occurred while adding the item to the cart.');
495
  });
496
  }
497
-
498
  // Function to round reward points to a single digit
499
  function roundRewardPoints() {
500
  let rewardPointsElement = document.getElementById('reward-points');
@@ -504,10 +473,8 @@
504
  rewardPointsElement.innerText = rewardPoints.toFixed(1); // Rounds to 1 decimal place
505
  }
506
  }
507
-
508
  // Run the function when the page loads
509
  window.onload = roundRewardPoints;
510
-
511
 
512
  </script>
513
 
 
54
  border-color: #1e7e34;
55
  box-shadow: none;
56
  }
 
57
  .view-cart-container {
58
  position: fixed;
59
  bottom: 20px;
 
77
  background-color: #4a5d68;
78
  text-decoration: none;
79
  }
 
80
  .avatar-dropdown-container {
81
  position: relative;
82
  }
 
83
  .avatar-icon {
84
  width: 40px;
85
  height: 40px;
 
93
  font-size: 20px;
94
  font-weight: bold;
95
  }
 
96
  .dropdown-menu {
97
  position: absolute;
98
  right: 0;
 
103
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
104
  display: none;
105
  }
 
106
  .avatar-dropdown-container:hover .dropdown-menu {
107
  display: block;
108
  }
 
109
  .dropdown-menu .dropdown-item {
110
  padding: 10px 15px;
111
  text-decoration: none;
 
113
  border-bottom: 1px solid #ddd;
114
  display: block; /* Make each item stack vertically */
115
  }
 
116
  .dropdown-menu .dropdown-item:last-child {
117
  border-bottom: none; /* Remove the bottom border from the last item */
118
  }
 
119
  .dropdown-menu .dropdown-item:hover {
120
  background-color: #f1f1f1;
121
  }
 
132
  border-radius: 25px;
133
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
134
  }
 
135
  /* Ensure the category filter dropdown does not overlap */
136
  form.text-center.mb-4 {
137
  margin-top: 120px !important; /* Increase spacing below search bar */
138
  }
 
139
  /* Ensure the container has enough margin so nothing is overlapped */
140
  .container {
141
  margin-top: 180px; /* Adjust spacing based on navbar and search bar */
142
  }
 
143
  .fixed-top-bar {
144
  position: fixed;
145
  top: 0;
 
161
  padding: 12px;
162
  margin-bottom: 15px; /* Spacing between sections */
163
  }
 
164
  /* Customization section title */
165
  .addon-section h6 {
166
  margin-bottom: 10px;
 
168
  font-weight: bold;
169
  color: #333;
170
  }
 
171
  /* Style for add-on checkboxes */
172
  .addon-section .form-check {
173
  margin-left: 10px;
174
  }
 
175
  </style>
176
  </head>
177
  <body>
 
200
  <div class="dropdown-menu">
201
  <!-- Direct links without grouping into columns -->
202
  <a href="{{ url_for('customer_details') }}" class="dropdown-item">View Profile</a>
203
+ <!--<a href="{{ url_for('rewards') }}" class="dropdown-item">View Profile</a>-->
204
  <a href="{{ url_for('order_history') }}" class="dropdown-item">Order History</a>
205
  <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
206
  </div>
 
212
 
213
  <!-- Category Filter -->
214
  <!-- Category Filter -->
215
+ <!-- Category Filter with Radio Buttons -->
216
  <form method="get" action="/menu" class="text-center mb-4">
217
+ <label class="form-label fw-bold">Filter by Category:</label>
218
+ <div class="form-check">
219
  {% for category in categories %}
220
+ <input type="radio" id="category-{{ category }}" name="category" value="{{ category }}" class="form-check-input"
221
+ {% if selected_category == category %}checked{% endif %} onchange="this.form.submit()">
222
+ <label class="form-check-label" for="category-{{ category }}">{{ category }}</label>
223
  {% endfor %}
224
+ <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish" class="form-check-input"
225
+ {% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
226
+ <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
227
+ </div>
228
  </form>
229
 
230
+
231
  <!-- Display text boxes for Customized Dish -->
232
  {% if selected_category == "Customized Dish" %}
233
  <div id="custom-dish-form" class="mt-4">
 
338
  document.getElementById('modal-description').innerText = description || 'No description available.';
339
  document.getElementById('addons-list').innerHTML = 'Loading customization options...';
340
  document.getElementById('modal-instructions').value = '';
 
341
  // Set section and category for reference
342
  const modalSectionEl = document.getElementById('modal-section');
343
  modalSectionEl.setAttribute('data-section', section);
344
  modalSectionEl.setAttribute('data-category', selectedCategory);
 
345
  // Fetch customization options based on the section
346
  fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
347
  .then(response => response.json())
 
353
  addonsList.innerHTML = '<p>No customization options available.</p>';
354
  return;
355
  }
 
356
  // Display customization options inside styled divs
357
  data.addons.forEach(addon => {
358
  const sectionDiv = document.createElement('div');
359
  sectionDiv.classList.add('addon-section'); // Add styling class
 
360
  // Add section title
361
  const title = document.createElement('h6');
362
  title.innerText = addon.name;
363
  sectionDiv.appendChild(title);
 
364
  // Create options list
365
  const optionsContainer = document.createElement('div');
 
366
  addon.options.forEach((option, index) => {
367
  const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
368
  const listItem = document.createElement('div');
369
  listItem.classList.add('form-check');
 
370
  listItem.innerHTML = `
371
  <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
372
  data-name="${option}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
 
376
  `;
377
  optionsContainer.appendChild(listItem);
378
  });
 
379
  sectionDiv.appendChild(optionsContainer);
380
  addonsList.appendChild(sectionDiv);
381
  });
 
389
  let input = document.getElementById('searchBar').value.toLowerCase();
390
  let sections = document.querySelectorAll('h3'); // Select section headers
391
  let items = document.querySelectorAll('.menu-card'); // Select all items
 
392
  let matchedSections = new Set(); // Store matched sections
 
393
  // Hide all items initially
394
  items.forEach(item => {
395
  let itemName = item.querySelector('.card-title').innerText.toLowerCase();
396
  let itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase(); // Get section name
 
397
  if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
398
  item.style.display = 'block'; // Show item if it matches search
399
  matchedSections.add(item.closest('.row')); // Add section to matched list
 
401
  item.style.display = 'none'; // Hide item if not matched
402
  }
403
  });
 
404
  // Show or hide sections based on matched items
405
  sections.forEach(section => {
406
  let sectionRow = section.nextElementSibling; // The row containing items
 
413
  }
414
  });
415
  }
 
 
416
  function addToCartFromModal() {
417
  const itemName = document.getElementById('modal-name').innerText;
418
  const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
 
420
  const modalSectionEl = document.getElementById('modal-section');
421
  const section = modalSectionEl.getAttribute('data-section');
422
  const selectedCategory = modalSectionEl.getAttribute('data-category');
 
423
  // Collect selected add-ons
424
  const selectedAddOns = Array.from(
425
  document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
 
427
  name: addon.getAttribute('data-name'),
428
  price: parseFloat(addon.getAttribute('data-price'))
429
  }));
 
430
  const instructions = document.getElementById('modal-instructions').value;
 
431
  if (!itemName || !itemPrice) {
432
  alert('Failed to add item to cart. Please try again.');
433
  return;
434
  }
 
435
  const cartPayload = {
436
  itemName: itemName,
437
  itemPrice: itemPrice,
 
441
  addons: selectedAddOns,
442
  instructions: instructions
443
  };
 
444
  fetch('/cart/add', {
445
  method: 'POST',
446
  headers: {
 
464
  alert('An error occurred while adding the item to the cart.');
465
  });
466
  }
 
467
  // Function to round reward points to a single digit
468
  function roundRewardPoints() {
469
  let rewardPointsElement = document.getElementById('reward-points');
 
473
  rewardPointsElement.innerText = rewardPoints.toFixed(1); // Rounds to 1 decimal place
474
  }
475
  }
 
476
  // Run the function when the page loads
477
  window.onload = roundRewardPoints;
 
478
 
479
  </script>
480