Update templates/menu.html

templates/menu.html

@@ -1097,7 +1097,7 @@
             justify-content: center;
             font-size: 12px;
             margin-left: 8px;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 1px 3風險
         }
         /* Mobile-Specific Styles */
         @media (max-width: 576px) {
@@ -1438,8 +1438,8 @@
         <label class="form-label fw-bold">Filters:</label>
         <div class="toggle-container">
             <!-- Veg Only Toggle -->
-            <input type="checkbox" id="veg-toggle" name="veg" value="Veg"
-                   {% if selected_category == "Veg" %}checked{% endif %}
+            <input type="checkbox" id="veg-toggle" name="veg"
+                   {% if veg == "Veg" %}checked{% endif %}
                    class="custom-toggle" onchange="handleToggle('veg')"
                    aria-label="Toggle Vegetarian filter">
             <label for="veg-toggle">Veg</label>
@@ -1463,10 +1463,9 @@
                         <label for="custom-dish-name" class="form-label">Dish Name</label>
                         <input type="text" class="form-control" id="custom-dish-name" name="name" required>
                     </div>
-                    <div class="mb-3 position-relative">
+                    <div class="mb-3">
                         <label for="custom-dish-description" class="form-label">Dish Description</label>
                         <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
-                        <div id="descriptionSuggestions" class="autocomplete-suggestions"></div>
                     </div>
                     <button type="submit" class="btn btn-primary">Submit Custom Dish</button>
                 </form>
@@ -1672,38 +1671,6 @@
                 {% endfor %}
             {% endfor %}
         ];
-        const ingredientsList = [
-            "Basmati Rice", "Bell Pepper", "Biryani Masala", "Butter", "Capsicum", "Cauliflower",
-            "Chickpea Flour (Besan)", "Chickpea Flour (for batter)", "Chickpeas (Channa)", "Chili Powder",
-            "Chili Sauce", "Coconut Milk", "Coriander Powder", "Cornflour", "Cream", "Cumin Powder",
-            "Cumin Seeds", "Curd (Yogurt)", "Curry Leaves", "Fish (e.g., King Fish or Salmon)",
-            "Fresh Coriander Leaves", "Garam Masala", "Garlic", "Ghee (Clarified Butter)", "Ginger",
-            "Ginger-Garlic Paste", "Goat Meat (Mutton)", "Green Chilies", "Honey",
-            "Kasuri Methi (dried fenugreek leaves)", "Lemon Juice", "Mango Puree", "Mint Leaves",
-            "Mixed Vegetables (Carrot, Peas, Potato, Cauliflower)", "Mixed Vegetables (Carrot, Peas, Potato)",
-            "Mustard Seeds", "Mutton (Goat Meat)", "Oil", "Oil (for frying)", "Onion",
-            "Paneer (Indian Cottage Cheese)", "Peas", "Potatoes", "Prawns", "Red Chili Powder",
-            "Rice Flour", "Saffron", "Salt", "Soy Sauce", "Spring Onion", "Tamarind (for sourness)",
-            "Tomato Ketchup", "Tomatoes", "Turmeric Powder", "Vinegar", "Water", "Wheat Flour (for dough)",
-            "Whole Wheat Flour", "Yogurt (Curd)"
-        ];
-        const fallbackAddons = [
-            {
-                section: "Extras",
-                items: [
-                    { name: "Extra Cheese", price: 1.50 },
-                    { name: "Extra Sauce", price: 0.75 },
-                    { name: "Spicy Seasoning", price: 0.50 }
-                ]
-            },
-            {
-                section: "Sides",
-                items: [
-                    { name: "Naan Bread", price: 2.00 },
-                    { name: "Raita", price: 1.00 }
-                ]
-            }
-        ];
         function addToCartLocalStorage(payload) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const existingItem = cart.find(item => 
@@ -1846,120 +1813,78 @@
         console.log("Most common add-ons: ", window.most_common_addons);
         function showItemDetails(name, price, image, description, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
-                      baseItemPrice = parseFloat(price) || 0;
+            baseItemPrice = parseFloat(price) || 0;
             document.getElementById('modal-price').innerText = `$${baseItemPrice.toFixed(2)}`;
-            document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
-            document.getElementById('modal-description').innerText = description || 'No description available';
-            document.getElementById('quantityInput').value = '1';
+            const modalImg = document.getElementById('modal-img');
+            modalImg.src = image || '/static/placeholder.jpg';
+            document.getElementById('modal-description').innerText = description || 'No description available.';
+            document.getElementById('addons-list').innerHTML = '';
+            document.getElementById('addons-list').classList.add('addon-loading');
             document.getElementById('modal-instructions').value = '';
-            document.getElementById('modal-section').setAttribute('data-section', section);
-            document.getElementById('modal-section').setAttribute('data-category', selectedCategory);
-            const addonsList = document.getElementById('addons-list');
-            addonsList.innerHTML = '';
-            addonsList.classList.add('addon-loading');
+            const modalSectionEl = document.getElementById('modal-section');
+            modalSectionEl.setAttribute('data-section', section);
+            modalSectionEl.setAttribute('data-category', selectedCategory);
+            document.getElementById('quantityInput').value = 1;
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
-                    console.log('Addons API response:', data);
+                    const addonsList = document.getElementById('addons-list');
                     addonsList.classList.remove('addon-loading');
-                    let addons = [];
-                    if (data.success && Array.isArray(data.addons) && data.addons.length > 0) {
-                        addons = data.addons;
-                    } else if (window.most_common_addons && Array.isArray(window.most_common_addons) && window.most_common_addons.length > 0) {
-                        console.log('Using most_common_addons as fallback');
-                        addons = window.most_common_addons;
+                    addonsList.innerHTML = '';
+                    if (!data.success || !data.addons || data.addons.length === 0) {
+                        const noAddonsMessage = document.createElement('p');
+                        noAddonsMessage.textContent = 'No add-ons available for this item.';
+                        noAddonsMessage.className = 'text-muted';
+                        addonsList.appendChild(noAddonsMessage);
                     } else {
-                        console.log('Using static fallback addons');
-                        addons = fallbackAddons;
-                    }
-                    if (addons.length === 0) {
-                        addonsList.innerHTML = '<p class="text-muted">No customization options available.</p>';
-                        return;
-                    }
-                    addons.forEach(addon => {
-                        const addonSection = document.createElement('div');
-                        addonSection.className = 'addon-section';
-                        const addonHeader = document.createElement('h6');
-                        addonHeader.textContent = addon.section;
-                        addonHeader.setAttribute('data-bs-toggle', 'collapse');
-                        addonHeader.setAttribute('data-bs-target', `#collapse-${addon.section.replace(/\s+/g, '-')}`);
-                        addonSection.appendChild(addonHeader);
-                        const addonCollapse = document.createElement('div');
-                        addonCollapse.id = `collapse-${addon.section.replace(/\s+/g, '-')}`;
-                        addonCollapse.className = 'addon-options';
-                        addon.items.forEach(item => {
-                            const addonItem = document.createElement('div');
-                            addonItem.className = 'form-check';
-                            const input = document.createElement('input');
-                            input.type = 'checkbox';
-                            input.className = 'form-check-input';
-                            input.id = `addon-${item.name.replace(/\s+/g, '-')}`;
-                            input.setAttribute('data-price', item.price || 0);
-                            input.setAttribute('data-name', item.name);
-                            input.setAttribute('data-section', addon.section);
-                            input.addEventListener('change', updateModalPrice);
-                            const label = document.createElement('label');
-                            label.className = 'form-check-label';
-                            label.htmlFor = `addon-${item.name.replace(/\s+/g, '-')}`;
-                            label.textContent = item.name;
-                            if (item.price > 0) {
-                                const priceSpan = document.createElement('span');
-                                priceSpan.className = 'extra-charge';
-                                priceSpan.textContent = `+$${parseFloat(item.price).toFixed(2)}`;
-                                label.appendChild(priceSpan);
-                            }
-                            addonItem.appendChild(label);
-                            addonItem.appendChild(input);
-                            addonCollapse.appendChild(addonItem);
+                        data.addons.forEach(addon => {
+                            const addonSection = document.createElement('div');
+                            addonSection.className = 'addon-section';
+                            const addonHeader = document.createElement('h6');
+                            addonHeader.textContent = addon.section;
+                            addonHeader.setAttribute('data-bs-toggle', 'collapse');
+                            addonHeader.setAttribute('data-bs-target', `#addon-collapse-${addon.section.replace(/\s+/g, '-')}`);
+                            addonHeader.setAttribute('aria-expanded', 'true');
+                            addonHeader.setAttribute('aria-controls', `addon-collapse-${addon.section.replace(/\s+/g, '-')}`);
+                            addonSection.appendChild(addonHeader);
+                            const addonCollapse = document.createElement('div');
+                            addonCollapse.id = `addon-collapse-${addon.section.replace(/\s+/g, '-')}`;
+                                                        addonCollapse.className = 'addon-options collapse show';
+                            addon.items.forEach(item => {
+                                const addonItem = document.createElement('div');
+                                addonItem.className = 'form-check';
+                                const input = document.createElement('input');
+                                input.type = 'checkbox';
+                                input.className = 'form-check-input';
+                                input.id = `addon-${item.name.replace(/\s+/g, '-')}`;
+                                input.setAttribute('data-price', item.price || 0);
+                                input.setAttribute('data-name', item.name);
+                                input.setAttribute('data-section', addon.section);
+                                input.addEventListener('change', updateModalPrice);
+                                const label = document.createElement('label');
+                                label.className = 'form-check-label';
+                                label.htmlFor = `addon-${item.name.replace(/\s+/g, '-')}`;
+                                label.textContent = item.name;
+                                if (item.price > 0) {
+                                    const priceSpan = document.createElement('span');
+                                    priceSpan.className = 'extra-charge';
+                                    priceSpan.textContent = `+$${parseFloat(item.price).toFixed(2)}`;
+                                    label.appendChild(priceSpan);
+                                }
+                                addonItem.appendChild(label);
+                                addonItem.appendChild(input);
+                                addonCollapse.appendChild(addonItem);
+                            });
+                            addonSection.appendChild(addonCollapse);
+                            addonsList.appendChild(addonSection);
                         });
-                        addonSection.appendChild(addonCollapse);
-                        addonsList.appendChild(addonSection);
-                    });
+                    }
                 })
                 .catch(err => {
                     console.error('Error fetching addons:', err);
+                    const addonsList = document.getElementById('addons-list');
                     addonsList.classList.remove('addon-loading');
-                    console.log('Using static fallback addons due to error');
-                    addonsList.innerHTML = '';
-                    fallbackAddons.forEach(addon => {
-                        const addonSection = document.createElement('div');
-                        addonSection.className = 'addon-section';
-                        const addonHeader = document.createElement('h6');
-                        addonHeader.textContent = addon.section;
-                        addonHeader.setAttribute('data-bs-toggle', 'collapse');
-                        addonHeader.setAttribute('data-bs-target', `#collapse-${addon.section.replace(/\s+/g, '-')}`);
-                        addonSection.appendChild(addonHeader);
-                        const addonCollapse = document.createElement('div');
-                        addonCollapse.id = `collapse-${addon.section.replace(/\s+/g, '-')}`;
-                        addonCollapse.className = 'addon-options';
-                        addon.items.forEach(item => {
-                            const addonItem = document.createElement('div');
-                            addonItem.className = 'form-check';
-                            const input = document.createElement('input');
-                            input.type = 'checkbox';
-                            input.className = 'form-check-input';
-                            input.id = `addon-${item.name.replace(/\s+/g, '-')}`;
-                            input.setAttribute('data-price', item.price || 0);
-                            input.setAttribute('data-name', item.name);
-                            input.setAttribute('data-section', addon.section);
-                            input.addEventListener('change', updateModalPrice);
-                            const label = document.createElement('label');
-                            label.className = 'form-check-label';
-                            label.htmlFor = `addon-${item.name.replace(/\s+/g, '-')}`;
-                            label.textContent = item.name;
-                            if (item.price > 0) {
-                                const priceSpan = document.createElement('span');
-                                priceSpan.className = 'extra-charge';
-                                priceSpan.textContent = `+$${parseFloat(item.price).toFixed(2)}`;
-                                label.appendChild(priceSpan);
-                            }
-                            addonItem.appendChild(label);
-                            addonItem.appendChild(input);
-                            addonCollapse.appendChild(addonItem);
-                        });
-                        addonSection.appendChild(addonCollapse);
-                        addonsList.appendChild(addonSection);
-                    });
+                    addonsList.innerHTML = '<p class="text-muted">Failed to load add-ons.</p>';
                 });
         }
         function addToCartFromModal() {
@@ -2046,25 +1971,17 @@
         function handleToggle(toggleType) {
             const vegToggle = document.getElementById('veg-toggle');
             const customToggle = document.getElementById('category-CustomizedDish');
-            const form = document.getElementById('filter-form');
-            if (toggleType === 'veg') {
-                if (vegToggle.checked) {
-                    customToggle.checked = false;
-                    vegToggle.value = 'Veg';
-                } else {
-                    vegToggle.value = '';
-                }
-            } else if (toggleType === 'custom') {
-                if (customToggle.checked) {
-                    vegToggle.checked = false;
-                    vegToggle.value = '';
-                }
-            }
-            console.log('Filter state:', {
-                veg: vegToggle.checked ? 'Veg' : '',
-                category: customToggle.checked ? 'Customized Dish' : ''
-            });
-            form.submit();
+            let url = '/menu?';
+            const params = [];
+            if (toggleType === 'veg' && vegToggle.checked) {
+                params.push('veg=Veg');
+                customToggle.checked = false;
+            } else if (toggleType === 'custom' && customToggle.checked) {
+                params.push('category=Customized+Dish');
+                vegToggle.checked = false;
+            }
+            url += params.join('&');
+            window.location.href = url;
         }
         document.addEventListener('DOMContentLoaded', function () {
             const avatarIcon = document.querySelector('.avatar-icon');
@@ -2325,59 +2242,7 @@
             } else {
                 document.getElementById('micIcon').style.display = 'none';
             }
-            const descriptionInput = document.getElementById('custom-dish-description');
-            const suggestionsContainer = document.getElementById('descriptionSuggestions');
-            if (descriptionInput && suggestionsContainer) {
-                descriptionInput.addEventListener('input', debounce(() => {
-                    const query = descriptionInput.value.toLowerCase();
-                    suggestionsContainer.innerHTML = '';
-                    if (query.length < 2) {
-                        suggestionsContainer.style.display = 'none';
-                        return;
-                    }
-                    const filteredIngredients = ingredientsList.filter(ingredient =>
-                        ingredient.toLowerCase().includes(query)
-                    );
-                    if (filteredIngredients.length === 0) {
-                        suggestionsContainer.style.display = 'none';
-                        return;
-                    }
-                    filteredIngredients.forEach(ingredient => {
-                        const suggestionItem = document.createElement('div');
-                        suggestionItem.classList.add('autocomplete-suggestion');
-                        suggestionItem.textContent = ingredient;
-                        suggestionItem.addEventListener('click', () => {
-                            const currentValue = descriptionInput.value;
-                            const words = currentValue.split(' ');
-                            words[words.length - 1] = ingredient;
-                            descriptionInput.value = words.join(' ') + ' ';
-                            suggestionsContainer.innerHTML = '';
-                            suggestionsContainer.style.display = 'none';
-                            descriptionInput.focus();
-                        });
-                        suggestionsContainer.appendChild(suggestionItem);
-                    });
-                    suggestionsContainer.style.display = 'block';
-                }, 300));
-                document.addEventListener('click', (event) => {
-                    if (!descriptionInput.contains(event.target) && !suggestionsContainer.contains(event.target)) {
-                        suggestionsContainer.style.display = 'none';
-                    }
-                });
-            }
         });
     </script>
 </body>
-</html>
-
-
-
-
-
-
-
-
-
-
-
-
+</html>