Update templates/menu.html

templates/menu.html

@@ -53,14 +53,14 @@
             border-radius: 15px 15px 0 0;
             opacity: 0;
             transition: opacity 0.5s ease-in-out;
-            background-color: #000; /* Fallback color if video fails */
+            background-color: #000;
         }
         .menu-video.loaded {
             opacity: 1;
         }
         .menu-card:hover .menu-video {
             opacity: 1;
-            transform: scale(1.05); /* Slight zoom effect on hover */
+            transform: scale(1.05);
         }
         .menu-card .card-body .card-title {
             font-size: 1.2rem;
@@ -233,29 +233,6 @@
         .mic-icon.active {
             color: #007bff;
         }
-        .autocomplete-suggestions {
-            position: absolute;
-            top: 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;
-        }
         .addon-section {
             background-color: #fff;
             border: 2px solid #ffa500;
@@ -769,7 +746,6 @@
             <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>
     </div>
 
@@ -856,14 +832,13 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <!-- Only show toggle-details if not Soft Drinks -->
                                     {% if item.Section__c != 'Soft Drinks' %}
                                         <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
                                         <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
                                             <h6>Description</h6>
                                             <p>{{ item.Description__c | default('No description available') }}</p>
                                             <h6>Ingredients</h6>
-                                            <p>{{ item.Ingredientsinfo__c | default('Not specified') }}</p>
+                                            <p>{{ item.IngredientsInfo__c | default('Not specified') }}</p>
                                             <h6>Nutritional Info</h6>
                                             <p class="nutritional-info">{{ item.NutritionalInfo__c | default('Not available') }}</p>
                                             <h6>Allergens</h6>
@@ -1149,14 +1124,12 @@
                     if (itemName === selectedItem) {
                         card.classList.add('highlighted');
                         card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                        // Show details if available
                         const toggleLink = card.querySelector('.toggle-details');
                         if (toggleLink) {
                             toggleLink.click();
                         }
                     }
                 });
-                // Clear the selected item after highlighting
                 localStorage.removeItem('selectedItem');
             }
 
@@ -1205,7 +1178,6 @@
                     const detailsDiv = document.getElementById(`details-${itemName}`);
                     const isCurrentlyShown = detailsDiv.classList.contains('show');
 
-                    // Hide all other details sections
                     document.querySelectorAll('.item-details.show').forEach(otherDetails => {
                         if (otherDetails !== detailsDiv) {
                             otherDetails.classList.remove('show');
@@ -1216,7 +1188,6 @@
                         }
                     });
 
-                    // Toggle the current details section
                     if (!isCurrentlyShown) {
                         detailsDiv.classList.add('show');
                         this.innerText = 'Hide Details';
@@ -1234,7 +1205,7 @@
             if (!selectedCategoryInput.value) {
                 selectedCategoryInput.value = "All";
                 document.querySelector('.category-button[data-category="All"]').classList.add('selected');
-            визуальный эффект
+            }
             categoryButtons.forEach(button => {
                 button.addEventListener('click', function () {
                     categoryButtons.forEach(btn => btn.classList.remove('selected'));
@@ -1376,7 +1347,6 @@
                 recognition.lang = 'en-US';
                 recognition.onstart = () => micIcon.classList.add('active');
                 recognition.onresult = (event) => {
-                    // Navigate to search page with the transcribed query
                     const query = event.results[0][0].transcript.trim();
                     localStorage.setItem('searchQuery', query);
                     window.location.href = '/search';
@@ -1483,11 +1453,13 @@
             const selectedAddOns = Array.from(
                 document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
             ).map(addon => ({
-                name: addon.getAttribute('data-name') || 'Default Name',
-                price: parseFloat(addon.getAttribute('data-price') || 0)
+                name: addon.getAttribute('data-name'),
+                price: parseFloat(addon.getAttribute('data-price')) || 0
             }));
-            const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
             const instructions = document.getElementById('modal-instructions').value;
+            const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
+            if (isProcessingRequest) return;
+            isProcessingRequest = true;
             const cartPayload = {
                 itemName: itemName,
                 itemPrice: itemPrice,
@@ -1498,7 +1470,6 @@
                 instructions: instructions,
                 quantity: quantity
             };
-            
             fetch('/cart/add', {
                 method: 'POST',
                 headers: {
@@ -1506,27 +1477,30 @@
                 },
                 body: JSON.stringify(cartPayload)
             })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert('Item added to cart successfully!');
-                    updateCartUI(data.cart);
-                    const modal = document.getElementById('itemModal');
-                    const modalInstance = bootstrap.Modal.getInstance(modal);
-                    modalInstance.hide();
-                } else {
-                    console.error('Failed to add item to cart:', data.error);
-                    alert(data.error || 'Failed to add item to cart.');
-                }
-            })
-            .catch(err => {
-                console.error('Error adding item to cart:', err);
-                const cart = addToCartLocalStorage(cartPayload);
-                updateCartUI(cart);
-                const modal = document.getElementById('itemModal');
-                const modalInstance = bootstrap.Modal.getInstance(modal);
-                modalInstance.hide();
-            });
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        updateCartUI(data.cart);
+                        const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
+                        modal.hide();
+                    } else {
+                        console.error('Failed to add item to cart:', data.error);
+                        const cart = addToCartLocalStorage(cartPayload);
+                        updateCartUI(cart);
+                        const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
+                        modal.hide();
+                    }
+                })
+                .catch(err => {
+                    console.error('Error adding item to cart:', err);
+                    const cart = addToCartLocalStorage(cartPayload);
+                    updateCartUI(cart);
+                    const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
+                    modal.hide();
+                })
+                .finally(() => {
+                    isProcessingRequest = false;
+                });
         }
     </script>
 </body>