Hugging Face's logo

Spaces:
nagasurendra
/
BiryaniHubflaskImplent
Runtime error

App Files Community
lokesh341 commited on
Commit
3b95b48
·
verified ·
1 Parent(s): 7fa6b81

Update templates/menu.html

Browse files
Files changed (1) hide show
  1. templates/menu.html +82 -34
templates/menu.html CHANGED
@@ -344,6 +344,21 @@
344
  height: 35px;
345
  }
346
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
347
  </style>
348
  </head>
349
  <body>
@@ -454,10 +469,17 @@
454
  <p id="modal-price" class="text-muted text-center"></p>
455
  <p id="modal-description" class="text-secondary"></p>
456
 
457
- <!-- Choose Preparation Style (for Starters only) -->
458
- <div id="prep-style-section" class="mt-4" style="display: none;">
459
- <h6>Choose Preparation Style</h6>
460
- <div id="prep-style-options" class="addon-section"></div>
 
 
 
 
 
 
 
461
  </div>
462
 
463
  <div id="modal-addons" class="modal-addons mt-4">
@@ -500,15 +522,17 @@
500
 
501
  document.getElementById('quantityInput').value = 1;
502
 
503
- const prepStyleSection = document.getElementById('prep-style-section');
504
- const prepStyleOptions = document.getElementById('prep-style-options');
 
505
 
506
- prepStyleOptions.innerHTML = '';
 
507
 
508
  if (section.toLowerCase() === 'starters') {
509
- prepStyleSection.style.display = 'block';
510
  } else {
511
- prepStyleSection.style.display = 'none';
512
  }
513
 
514
  fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
@@ -524,35 +548,40 @@
524
 
525
  if (section.toLowerCase() === 'starters') {
526
  data.addons.forEach(addon => {
527
- if (addon.name.toLowerCase() === "choose preparation style") {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
528
  addon.options.forEach(option => {
529
- const optionId = `prep-style-${option}`;
530
  const optionHTML = `
531
  <div class="form-check">
532
- <input type="checkbox" class="form-check-input" id="${optionId}" value="${option}" data-name="${option}" data-group="Choose Preparation Style">
533
  <label class="form-check-label" for="${optionId}">
534
  ${option}
535
  </label>
536
  </div>
537
  `;
538
- prepStyleOptions.innerHTML += optionHTML;
539
  });
540
  }
541
  });
542
  }
543
 
544
- const desiredOrder = [
545
- "Spice Level",
546
- "Choose Preparation Style",
547
- "Select Dip/Sauce",
548
- "Extra Add-ons",
549
- "Make it a Combo",
550
- "Type"
551
- ];
552
-
553
- const sections = {};
554
  data.addons.forEach(addon => {
555
- if (section.toLowerCase() === 'starters' && addon.name.toLowerCase() === "choose preparation style") {
 
556
  return;
557
  }
558
 
@@ -579,18 +608,31 @@
579
  optionsContainer.appendChild(listItem);
580
  });
581
  sectionDiv.appendChild(optionsContainer);
582
- sections[addon.name] = sectionDiv;
583
  });
584
 
 
 
 
 
 
 
 
 
 
 
 
 
585
  desiredOrder.forEach(sectionName => {
586
- if (sections[sectionName]) {
587
- addonsList.appendChild(sections[sectionName]);
 
588
  }
589
  });
590
 
591
- Object.keys(sections).forEach(sectionName => {
592
- if (!desiredOrder.includes(sectionName)) {
593
- addonsList.appendChild(sections[sectionName]);
594
  }
595
  });
596
  })
@@ -676,13 +718,19 @@
676
  }));
677
 
678
  if (section.toLowerCase() === 'starters') {
679
- const prepStyleOptions = Array.from(
680
- document.querySelectorAll('#prep-style-options input[type="checkbox"]:checked')
 
 
 
 
 
 
681
  ).map(option => ({
682
- name: option.getAttribute('data-name') || 'Default Preparation Style',
683
  price: 0
684
  }));
685
- selectedAddOns = [...selectedAddOns, ...prepStyleOptions];
686
  }
687
 
688
  const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
 
344
  height: 35px;
345
  }
346
  }
347
+ #first-row .col-6 {
348
+ padding: 10px;
349
+ }
350
+ #type-options, #spice-level-options {
351
+ background-color: #fff;
352
+ border: 2px solid #6c757d;
353
+ border-radius: 8px;
354
+ padding: 12px;
355
+ }
356
+ #type-options .form-check, #spice-level-options .form-check {
357
+ display: inline-flex;
358
+ align-items: center;
359
+ margin-left: 10px;
360
+ color: #343a40;
361
+ }
362
  </style>
363
  </head>
364
  <body>
 
469
  <p id="modal-price" class="text-muted text-center"></p>
470
  <p id="modal-description" class="text-secondary"></p>
471
 
472
+ <div id="first-row">
473
+ <div class="row">
474
+ <div class="col-6">
475
+ <h6>Type</h6>
476
+ <div id="type-options"></div>
477
+ </div>
478
+ <div class="col-6">
479
+ <h6>Spice Level</h6>
480
+ <div id="spice-level-options"></div>
481
+ </div>
482
+ </div>
483
  </div>
484
 
485
  <div id="modal-addons" class="modal-addons mt-4">
 
522
 
523
  document.getElementById('quantityInput').value = 1;
524
 
525
+ const typeOptions = document.getElementById('type-options');
526
+ const spiceLevelOptions = document.getElementById('spice-level-options');
527
+ const firstRow = document.getElementById('first-row');
528
 
529
+ typeOptions.innerHTML = '';
530
+ spiceLevelOptions.innerHTML = '';
531
 
532
  if (section.toLowerCase() === 'starters') {
533
+ firstRow.style.display = 'block';
534
  } else {
535
+ firstRow.style.display = 'none';
536
  }
537
 
538
  fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
 
548
 
549
  if (section.toLowerCase() === 'starters') {
550
  data.addons.forEach(addon => {
551
+ if (addon.name.toLowerCase() === "type") {
552
+ addon.options.forEach(option => {
553
+ const optionId = `addon-type-${option}`;
554
+ const optionHTML = `
555
+ <div class="form-check">
556
+ <input type="checkbox" class="form-check-input" id="${optionId}" value="${option}" data-name="${option}" data-group="Type">
557
+ <label class="form-check-label" for="${optionId}">
558
+ ${option}
559
+ </label>
560
+ </div>
561
+ `;
562
+ typeOptions.innerHTML += optionHTML;
563
+ });
564
+ }
565
+ if (addon.name.toLowerCase() === "spice level") {
566
  addon.options.forEach(option => {
567
+ const optionId = `addon-spice-level-${option}`;
568
  const optionHTML = `
569
  <div class="form-check">
570
+ <input type="checkbox" class="form-check-input" id="${optionId}" value="${option}" data-name="${option}" data-group="Spice Level">
571
  <label class="form-check-label" for="${optionId}">
572
  ${option}
573
  </label>
574
  </div>
575
  `;
576
+ spiceLevelOptions.innerHTML += optionHTML;
577
  });
578
  }
579
  });
580
  }
581
 
 
 
 
 
 
 
 
 
 
 
582
  data.addons.forEach(addon => {
583
+ if (section.toLowerCase() === 'starters' &&
584
+ (addon.name.toLowerCase() === "type" || addon.name.toLowerCase() === "spice level")) {
585
  return;
586
  }
587
 
 
608
  optionsContainer.appendChild(listItem);
609
  });
610
  sectionDiv.appendChild(optionsContainer);
611
+ addonsList.appendChild(sectionDiv);
612
  });
613
 
614
+ const desiredOrder = [
615
+ "Spice Level",
616
+ "Choose Preparation Style",
617
+ "Select Dip/Sauce",
618
+ "Extra Add-ons",
619
+ "Make it a Combo",
620
+ "Type"
621
+ ];
622
+
623
+ const sections = Array.from(addonsList.children);
624
+ addonsList.innerHTML = '';
625
+
626
  desiredOrder.forEach(sectionName => {
627
+ const section = sections.find(s => s.getAttribute('data-addon-name') === sectionName);
628
+ if (section) {
629
+ addonsList.appendChild(section);
630
  }
631
  });
632
 
633
+ sections.forEach(section => {
634
+ if (!desiredOrder.includes(section.getAttribute('data-addon-name'))) {
635
+ addonsList.appendChild(section);
636
  }
637
  });
638
  })
 
718
  }));
719
 
720
  if (section.toLowerCase() === 'starters') {
721
+ const typeOptions = Array.from(
722
+ document.querySelectorAll('#type-options input[type="checkbox"]:checked')
723
+ ).map(option => ({
724
+ name: option.getAttribute('data-name') || 'Default Type',
725
+ price: 0
726
+ }));
727
+ const spiceLevelOptions = Array.from(
728
+ document.querySelectorAll('#spice-level-options input[type="checkbox"]:checked')
729
  ).map(option => ({
730
+ name: option.getAttribute('data-name') || 'Default Spice Level',
731
  price: 0
732
  }));
733
+ selectedAddOns = [...selectedAddOns, ...typeOptions, ...spiceLevelOptions];
734
  }
735
 
736
  const quantity = parseInt(document.getElementById('quantityInput').value) || 1;