BiryaniHubMenu0304

Build error

App Files Files Community

nagasurendra commited on Feb 28

Commit

a150a72

verified ·

1 Parent(s): 4dc7878

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +74 -15

templates/menu.html CHANGED Viewed

@@ -127,9 +127,30 @@
         .dropdown-menu .dropdown-item:hover {
             background-color: #f1f1f1;
         }
     </style>
 </head>
 <body>
     <div class="d-flex justify-content-between align-items-center p-3" style="background-color: #5bbfc1; color: white;">
         <!-- Removed Reward Points and Referral Code -->
         <div class="d-flex align-items-center">
@@ -175,25 +196,27 @@
             </select>
         </form>
-        <!-- Display Menu Items by Section -->
         {% for section, items in ordered_menu.items() %}
-        <h3 class="mt-4">{{ section }}</h3>
-        <div class="row">
-            {% for item in items %}
-            <div class="col-md-6 mb-4">
-                <div class="card menu-card">
-                    <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
-                    <div class="card-body">
-                        <h5 class="card-title">{{ item.Name }}</h5>
-                        <p class="card-text">${{ item.Price__c }}</p>
-                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal"
-                            onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{item.Section__c}}','{{ selected_category }}')">
-                            Add +
-                        </button>
                     </div>
                 </div>
             </div>
-            {% endfor %}
         </div>
         {% endfor %}
     </div>
@@ -286,6 +309,42 @@
                     document.getElementById('addons-list').innerHTML = 'Unable to fetch add-ons. Please try again later.';
                 });
         }
         function addToCartFromModal() {
             const itemName = document.getElementById('modal-name').innerText; // Get item name
             const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', '')); // Get item price

         .dropdown-menu .dropdown-item:hover {
             background-color: #f1f1f1;
         }
+        .fixed-search-container {
+            position: fixed;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 80%;
+            max-width: 600px;
+            z-index: 1000;
+            background-color: white;
+            padding: 10px;
+            border-radius: 25px;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+        }
+        /* Add some margin to the menu container so it doesn't overlap with the search bar */
+        .container {
+            margin-top: 70px;
+        }
     </style>
 </head>
 <body>
+    <div class="fixed-search-container">
+        <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
+    </div>
     <div class="d-flex justify-content-between align-items-center p-3" style="background-color: #5bbfc1; color: white;">
         <!-- Removed Reward Points and Referral Code -->
         <div class="d-flex align-items-center">
             </select>
         </form>
         {% for section, items in ordered_menu.items() %}
+        <div class="menu-section">
+            <h3 class="mt-4">{{ section }}</h3>
+            <div class="row">
+                {% for item in items %}
+                <div class="col-md-6 mb-4">
+                    <div class="card menu-card">
+                        <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
+                        <div class="card-body">
+                            <h5 class="card-title">{{ item.Name }}</h5>
+                            <p class="card-text">${{ item.Price__c }}</p>
+                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal"
+                                onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{item.Section__c}}','{{ selected_category }}')">
+                                Add +
+                            </button>
+                        </div>
                     </div>
                 </div>
+                {% endfor %}
             </div>
         </div>
         {% endfor %}
     </div>
                     document.getElementById('addons-list').innerHTML = 'Unable to fetch add-ons. Please try again later.';
                 });
         }
+        function filterMenu() {
+            let input = document.getElementById('searchBar').value.toLowerCase();
+            let sections = document.querySelectorAll('.menu-section'); // Select all sections
+            let items = document.querySelectorAll('.menu-card'); // Select all items
+            // Hide all sections initially
+            sections.forEach(section => {
+                section.style.display = 'none';
+            });
+            // Hide all items initially
+            items.forEach(item => {
+                item.style.display = 'none';
+            });
+            let matchedSections = new Set(); // Store matched sections
+            // Show items that match the search query
+            items.forEach(item => {
+                let itemName = item.querySelector('.card-title').innerText.toLowerCase();
+                let itemSection = item.closest('.menu-section')?.querySelector('h3')?.innerText.toLowerCase();
+                // If item name or section name matches the search query, show it
+                if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
+                    item.style.display = 'block';
+                    matchedSections.add(item.closest('.menu-section')); // Store the section
+                }
+            });
+            // Show matched sections
+            matchedSections.forEach(section => {
+                section.style.display = 'block';
+            });
+        }
         function addToCartFromModal() {
             const itemName = document.getElementById('modal-name').innerText; // Get item name
             const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', '')); // Get item price