BiryaniHubflaskhema6

Running

App Files Files Community

lokesh341 commited on Apr 7

Commit

34e95e1

verified ·

1 Parent(s): a1eea31

Update templates/search.html

Browse files

Files changed (1) hide show

templates/search.html +193 -133

templates/search.html CHANGED Viewed

@@ -3,8 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Search Menu</title>
-    <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
     <style>
@@ -12,112 +11,186 @@
             font-family: Arial, sans-serif;
             background-color: #fdf4e3;
             margin: 0;
-            padding: 20px;
-        }
-        .container {
-            max-width: 900px;
-            margin: 0 auto;
         }
-        .search-container {
-            margin-bottom: 20px;
             position: relative;
         }
-        .search-container input {
             width: 100%;
-            padding: 10px 40px 10px 40px;
             font-size: 16px;
             border-radius: 25px;
-            border: 1px solid #ddd;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             outline: none;
-            background-color: #fff;
-        }
-        .search-container input::placeholder {
-            color: #888;
         }
         .search-icon {
             position: absolute;
             left: 15px;
-            top: 50%;
-            transform: translateY(-50%);
             font-size: 18px;
             color: #888;
         }
-        .item-card {
-            display: flex;
-            align-items: center;
             background-color: #fff;
-            border-radius: 10px;
-            padding: 10px;
-            margin-bottom: 15px;
             cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
-        .item-card:hover {
-            background-color: #f8f9fa;
-            transform: scale(1.02);
         }
-        .item-image {
-            width: 80px;
-            height: 80px;
             object-fit: cover;
-            border-radius: 8px;
-            margin-right: 15px;
         }
-        .item-name {
             font-size: 1.2rem;
             font-weight: 600;
-            color: #333;
             margin: 0;
-        }
-        .no-results {
-            text-align: center;
-            color: #666;
-            font-size: 1.1rem;
-            margin-top: 20px;
-        }
-        @media (max-width: 576px) {
-            body {
-                padding: 15px;
-            }
-            .item-card {
-                padding: 8px;
-            }
-            .item-image {
-                width: 60px;
-                height: 60px;
-            }
-            .item-name {
-                font-size: 1rem;
-            }
-            .search-container input {
-                padding: 8px 35px 8px 35px;
-                font-size: 14px;
-            }
-            .search-icon {
-                font-size: 16px;
-                left: 12px;
-            }
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <div class="search-container">
-            <input type="text" id="searchBar" class="form-control" placeholder="Search items..." autocomplete="off">
-            <i class="bi bi-search search-icon"></i>
         </div>
-        <div id="searchResults">
-            <!-- Results will be populated dynamically -->
         </div>
     </div>
     <script>
-        function redirectToMenu(itemName) {
-            const encodedItemName = encodeURIComponent(itemName);
-            window.location.href = `/menu?highlight=${encodedItemName}`;
-        }
         function sanitizeInput(input) {
             const div = document.createElement('div');
@@ -125,75 +198,62 @@
             return div.innerHTML;
         }
-        function debounce(func, wait) {
-            let timeout;
-            return function (...args) {
-                clearTimeout(timeout);
-                timeout = setTimeout(() => func.apply(this, args), wait);
-            };
-        }
         document.addEventListener('DOMContentLoaded', function () {
             const searchBar = document.getElementById('searchBar');
             const searchResults = document.getElementById('searchResults');
-            // Focus the search bar on page load
-            searchBar.focus();
-            // Debounced search function
-            const debouncedSearch = debounce(function (query) {
-                if (!query) {
-                    searchResults.innerHTML = '<p class="no-results">Please type to search for items.</p>';
-                    return;
                 }
-                // Fetch items from the server
-                fetch(`/api/search-items?query=${encodeURIComponent(query)}`)
-                    .then(response => {
-                        if (!response.ok) throw new Error('Network response was not ok');
-                        return response.json();
-                    })
-                    .then(data => {
-                        searchResults.innerHTML = '';
-                        if (data.items && data.items.length > 0) {
-                            data.items.forEach(item => {
-                                const itemCard = document.createElement('div');
-                                itemCard.className = 'item-card';
-                                itemCard.setAttribute('data-item-name', sanitizeInput(item.Name));
-                                itemCard.setAttribute('data-item-section', sanitizeInput(item.Section__c || 'Unknown'));
-                                itemCard.onclick = () => redirectToMenu(item.Name);
-                                const itemImage = document.createElement('img');
-                                itemImage.src = item.Image2__c || '/static/placeholder.jpg';
-                                itemImage.alt = item.Name || 'Unnamed Item';
-                                itemImage.className = 'item-image';
-                                const itemNameDiv = document.createElement('div');
-                                itemNameDiv.className = 'item-name';
-                                itemNameDiv.textContent = item.Name || 'Unnamed Item';
-                                itemCard.appendChild(itemImage);
-                                itemCard.appendChild(itemNameDiv);
-                                searchResults.appendChild(itemCard);
                             });
-                        } else {
-                            searchResults.innerHTML = '<p class="no-results">No items found.</p>';
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Error fetching search results:', error);
-                        searchResults.innerHTML = '<p class="no-results">Error loading items. Please try again.</p>';
-                    });
-            }, 300);
-            // Trigger search on input
-            searchBar.addEventListener('input', function () {
-                const query = this.value.trim();
-                debouncedSearch(query);
             });
-            // Initial state when no items are present
-            searchResults.innerHTML = '<p class="no-results">Please type to search for items.</p>';
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Search - Menu</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
     <style>
             font-family: Arial, sans-serif;
             background-color: #fdf4e3;
             margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            padding-bottom: 70px;
         }
+        .fixed-top-bar {
             position: relative;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 54px;
+            background: linear-gradient(45deg, #FFA07A, #FFB347);
+            color: white;
+            padding: 15px;
+            display: flex;
+            align-items: center;
+            z-index: 1000;
+        }
+        .orange-label {
+            background-color: #FFA500;
+            padding: 5px 10px;
+            border-radius: 5px;
+            display: flex;
+            align-items: center;
+            position: absolute;
+            left: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+        .back-button {
+            background-color: black;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 25px;
+            height: 25px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            cursor: pointer;
+            margin-right: 10px;
+        }
+        .search-bar-container {
+            position: fixed;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            align-items: center;
+            width: 300px;
+            max-width: 90%;
+            z-index: 1000;
         }
+        .search-bar-container input {
             width: 100%;
+            padding: 8px 40px 8px 40px;
             font-size: 16px;
             border-radius: 25px;
+            border: none;
+            background-color: #fff;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             outline: none;
         }
         .search-icon {
             position: absolute;
             left: 15px;
             font-size: 18px;
             color: #888;
         }
+        .mic-icon {
+            position: absolute;
+            right: 15px;
+            font-size: 18px;
+            color: #888;
+            cursor: pointer;
+        }
+        .autocomplete-suggestions {
+            position: absolute;
+            bottom: 100%;
+            left: 0;
+            width: 100%;
+            max-height: 200px;
+            overflow-y: auto;
             background-color: #fff;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            display: none;
+        }
+        .autocomplete-suggestions .suggestion-item {
+            padding: 8px 15px;
+            cursor: pointer;
+            font-size: 14px;
+            color: #333;
+        }
+        .autocomplete-suggestions .suggestion-item:hover {
+            background-color: #f1f1f1;
+        }
+        .container {
+            max-width: 900px;
+            margin-top: 20px;
+            margin-bottom: 70px;
+        }
+        .search-item {
             cursor: pointer;
         }
+        .menu-card {
+            max-width: 350px;
+            border-radius: 15px;
+            overflow: hidden;
+            background-color: #fff;
+            margin: auto;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            transition: transform 0.2s;
+        }
+        .menu-card:hover {
+            transform: scale(1.05);
         }
+        .menu-video {
+            height: 200px;
+            width: 100%;
             object-fit: cover;
+            border-radius: 15px 15px 0 0;
         }
+        .card-body {
+            padding: 10px;
+            text-align: center;
+        }
+        .card-title {
             font-size: 1.2rem;
             font-weight: 600;
             margin: 0;
+            color: #333333;
         }
     </style>
 </head>
 <body>
+    <div class="fixed-top-bar">
+        <div class="orange-label">
+            <button class="back-button" onclick="window.location.href='/menu'"><</button>
+            <span>Search</span>
         </div>
+    </div>
+    <div class="container">
+        <h2>Search Results</h2>
+        <div id="searchResults" class="row">
+            {% for item in all_items %}
+                <div class="col-md-6 mb-4 search-item" data-name="{{ item.Name | lower }}" data-section="{{ item.Section__c | lower }}"
+                     onclick="window.location.href='/menu?highlight={{ item.Name | urlencode }}'">
+                    <div class="card menu-card">
+                        <img src="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}"
+                             class="card-img-top menu-video" alt="{{ item.Name }}" style="height: 200px; object-fit: cover;">
+                        <div class="card-body">
+                            <h5 class="card-title">{{ item.Name }}</h5>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
         </div>
     </div>
+    <div class="search-bar-container">
+        <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
+        <i class="bi bi-search search-icon"></i>
+        <i class="bi bi-mic mic-icon" id="micIcon"></i>
+        <div id="autocompleteSuggestions" class="autocomplete-suggestions"></div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
+        const menuItems = [
+            {% for item in all_items %}
+                "{{ item.Name | e }}",
+            {% endfor %}
+        ];
         function sanitizeInput(input) {
             const div = document.createElement('div');
             return div.innerHTML;
         }
         document.addEventListener('DOMContentLoaded', function () {
             const searchBar = document.getElementById('searchBar');
+            const suggestionsContainer = document.getElementById('autocompleteSuggestions');
             const searchResults = document.getElementById('searchResults');
+            function filterSearch() {
+                const input = sanitizeInput(searchBar.value.trim().toLowerCase());
+                const items = document.querySelectorAll('.search-item');
+                items.forEach(item => {
+                    const itemName = item.getAttribute('data-name');
+                    const itemSection = item.getAttribute('data-section');
+                    if (itemName.includes(input) || itemSection.includes(input)) {
+                        item.style.display = 'block';
+                    } else {
+                        item.style.display = 'none';
+                    }
+                });
+                if (!input) {
+                    items.forEach(item => item.style.display = 'block');
                 }
+            }
+            searchBar.addEventListener('input', function () {
+                const input = sanitizeInput(this.value.trim().toLowerCase());
+                suggestionsContainer.innerHTML = '';
+                suggestionsContainer.style.display = 'none';
+                if (input) {
+                    const filteredItems = menuItems.filter(item =>
+                        item.toLowerCase().includes(input)
+                    );
+                    if (filteredItems.length > 0) {
+                        filteredItems.forEach(item => {
+                            const suggestionDiv = document.createElement('div');
+                            suggestionDiv.classList.add('suggestion-item');
+                            suggestionDiv.innerText = item;
+                            suggestionDiv.addEventListener('click', function () {
+                                searchBar.value = item;
+                                suggestionsContainer.style.display = 'none';
+                                filterSearch();
                             });
+                            suggestionsContainer.appendChild(suggestionDiv);
+                        });
+                        suggestionsContainer.style.display = 'block';
+                    }
+                }
+                filterSearch();
             });
+            document.addEventListener('click', function (event) {
+                if (!searchBar.contains(event.target) && !suggestionsContainer.contains(event.target)) {
+                    suggestionsContainer.style.display = 'none';
+                }
+            });
         });
     </script>
 </body>