Update templates/menu.html

templates/menu.html

@@ -332,6 +332,24 @@
             height: 40px;
             width: 40px;
         }
+        .loading {
+            display: none;
+            text-align: center;
+            margin: 20px 0;
+        }
+        .loading-spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #0FAA39;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            display: inline-block;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
         @media (max-width: 576px) {
             .modal-dialog {
                 max-width: 98%;
@@ -382,7 +400,7 @@
         </div>
     </form>
 
-    <div class="container mt-4">
+    <div class="container mt-4" id="menu-container">
         {% if selected_category == "Customized Dish" %}
             <div id="custom-dish-form" class="mt-4">
                 <h3>Create Your Custom Dish</h3>
@@ -399,40 +417,56 @@
                 </form>
             </div>
         {% else %}
-            {% for section, items in ordered_menu.items() %}
-                <h3>{{ 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';" loading="lazy">
-                                <div class="addbutton">
-                                    <div class="card-body d-flex align-items-center justify-content-between">
-                                        <div>
-                                            <h5 class="card-title">{{ item.Name }}</h5>
-                                            <p class="card-text">${{ item.Price__c }}</p>
-                                        </div>
-                                        <div class="d-flex flex-column align-item-center justify-content-center">
+            <div id="menu-items">
+                {% for section, items in ordered_menu.items() %}
+                    <h3>{{ section }}</h3>
+                    <div class="row" data-section="{{ section }}">
+                        {% for item in items %}
+                            <div class="col-md-6 mb-4">
+                                <div class="card menu-card">
+                                    <img src="{{ item.Image1__c }}" 
+                                         srcset="{{ item.Image1__c }}?w=350 350w, {{ item.Image1__c }}?w=200 200w" 
+                                         sizes="(max-width: 576px) 200px, 350px" 
+                                         class="card-img-top menu-image" 
+                                         alt="{{ item.Name }}"
+                                         onerror="this.src='/static/placeholder.jpg';" 
+                                         loading="lazy">
+                                    <div class="addbutton">
+                                        <div class="card-body d-flex align-items-center justify-content-between">
                                             <div>
-                                                <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>
+                                                <h5 class="card-title">{{ item.Name }}</h5>
+                                                <p class="card-text">${{ item.Price__c }}</p>
                                             </div>
-                                            <div class="w-100 text-center">
-                                                {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
-                                                    <h5 class="customisable-text">Customisable</h5>
-                                                {% endif %}
+                                            <div class="d-flex flex-column align-item-center justify-content-center">
+                                                <div>
+                                                    <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 class="w-100 text-center">
+                                                    {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
+                                                        <h5 class="customisable-text">Customisable</h5>
+                                                    {% endif %}
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                    {% endfor %}
+                        {% endfor %}
+                    </div>
+                {% endfor %}
+            </div>
+            <div id="loading" class="loading">
+                <div class="loading-spinner"></div>
+                <p>Loading more items...</p>
+            </div>
+            {% if has_more %}
+                <div id="load-more" class="text-center my-4">
+                    <button class="btn btn-primary" onclick="loadMoreItems()">Load More</button>
                 </div>
-            {% endfor %}
+            {% endif %}
         {% endif %}
     </div>
 
@@ -497,6 +531,93 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 
     <script>
+        let currentPage = {{ page | default(1) }};
+        const perPage = {{ per_page | default(10) }};
+        const selectedCategory = '{{ selected_category }}';
+
+        function loadMoreItems() {
+            const loadingEl = document.getElementById('loading');
+            const loadMoreEl = document.getElementById('load-more');
+            loadingEl.style.display = 'block';
+            loadMoreEl.style.display = 'none';
+
+            currentPage++;
+            fetch(`/menu?category=${encodeURIComponent(selectedCategory)}&page=${currentPage}&per_page=${perPage}&ajax=1`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.ordered_menu) {
+                        appendMenuItems(data.ordered_menu);
+                        if (!data.has_more) {
+                            loadMoreEl.style.display = 'none';
+                        } else {
+                            loadMoreEl.style.display = 'block';
+                        }
+                    }
+                    loadingEl.style.display = 'none';
+                })
+                .catch(err => {
+                    console.error('Error loading more items:', err);
+                    alert('Failed to load more items.');
+                    loadingEl.style.display = 'none';
+                    loadMoreEl.style.display = 'block';
+                });
+        }
+
+        function appendMenuItems(orderedMenu) {
+            const menuItemsContainer = document.getElementById('menu-items');
+            for (const [section, items] of Object.entries(orderedMenu)) {
+                let sectionEl = document.querySelector(`.row[data-section="${section}"]`);
+                if (!sectionEl) {
+                    const sectionTitle = document.createElement('h3');
+                    sectionTitle.innerText = section;
+                    menuItemsContainer.appendChild(sectionTitle);
+
+                    sectionEl = document.createElement('div');
+                    sectionEl.classList.add('row');
+                    sectionEl.setAttribute('data-section', section);
+                    menuItemsContainer.appendChild(sectionEl);
+                }
+
+                items.forEach(item => {
+                    const itemHTML = `
+                        <div class="col-md-6 mb-4">
+                            <div class="card menu-card">
+                                <img src="${item.Image1__c}" 
+                                     srcset="${item.Image1__c}?w=350 350w, ${item.Image1__c}?w=200 200w" 
+                                     sizes="(max-width: 576px) 200px, 350px" 
+                                     class="card-img-top menu-image" 
+                                     alt="${item.Name}"
+                                     onerror="this.src='/static/placeholder.jpg';" 
+                                     loading="lazy">
+                                <div class="addbutton">
+                                    <div class="card-body d-flex align-items-center justify-content-between">
+                                        <div>
+                                            <h5 class="card-title">${item.Name}</h5>
+                                            <p class="card-text">$${item.Price__c}</p>
+                                        </div>
+                                        <div class="d-flex flex-column align-item-center justify-content-center">
+                                            <div>
+                                                <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}', '${selectedCategory}')">
+                                                    ADD
+                                                </button>
+                                            </div>
+                                            <div class="w-100 text-center">
+                                                ${item.Section__c !== 'Apetizer' && item.Section__c !== 'Customized dish' && item.Section__c !== 'Soft Drinks' 
+                                                    ? '<h5 class="customisable-text">Customisable</h5>' 
+                                                    : ''}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                    sectionEl.insertAdjacentHTML('beforeend', itemHTML);
+                });
+            }
+        }
+
         function showItemDetails(name, price, image, description, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `$${price}`;
@@ -696,7 +817,7 @@
 
         function filterMenu() {
             let input = document.getElementById('searchBar').value.toLowerCase();
-            let sections = document.querySelectorAll('h3');
+            let sections = document.querySelectorAll('#menu-items h3');
             let items = document.querySelectorAll('.menu-card');
             let matchedSections = new Set();
             
@@ -722,6 +843,15 @@
                     sectionRow.style.display = 'none';
                 }
             });
+
+            const visibleItems = document.querySelectorAll('.menu-card:not([style*="display: none"])');
+            const totalItems = {{ total_items | default(0) }};
+            const loadMoreEl = document.getElementById('load-more');
+            if (visibleItems.length < totalItems && input === '') {
+                loadMoreEl.style.display = 'block';
+            } else {
+                loadMoreEl.style.display = 'none';
+            }
         }
 
         function addToCartFromModal() {