BiryaniHubflaskhema6

Running

App Files Files Community

lokesh341 commited on Apr 6

Commit

13a827e

verified ·

1 Parent(s): d1dea61

Update templates/search.html

Browse files

Files changed (1) hide show

templates/search.html +237 -6

templates/search.html CHANGED Viewed

@@ -7,7 +7,6 @@
     <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>
-        /* Reuse styles from menu.html */
         body {
             font-family: Arial, sans-serif;
             background-color: #fdf4e3;
@@ -93,7 +92,6 @@
             margin-top: 20px;
         }
         .menu-card {
-            /* Copy relevant styles from menu.html */
             max-width: 350px;
             border-radius: 15px;
             overflow: hidden;
@@ -103,7 +101,78 @@
             flex-direction: column;
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
-        /* Add other necessary styles from menu.html */
     </style>
 </head>
 <body>
@@ -151,9 +220,44 @@
         </div>
     </div>
-    <!-- Item Modal (copied from menu.html) -->
     <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
-        <!-- Same modal content as in menu.html -->
     </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
@@ -227,7 +331,134 @@
                 }
             });
-            // Add your showItemDetails function and other necessary JavaScript from menu.html
         });
     </script>
 </body>

     <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>
         body {
             font-family: Arial, sans-serif;
             background-color: #fdf4e3;
             margin-top: 20px;
         }
         .menu-card {
             max-width: 350px;
             border-radius: 15px;
             overflow: hidden;
             flex-direction: column;
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
+        .menu-video {
+            height: 200px;
+            width: 100%;
+            object-fit: cover;
+            border-radius: 15px 15px 0 0;
+        }
+        .card-body .card-title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            margin: 10px 0;
+            color: #333333;
+        }
+        .card-body .card-text.price {
+            font-size: 1rem;
+            font-weight: 500;
+            color: #000000;
+            margin-bottom: 5px;
+        }
+        .btn-primary {
+            font-size: 12px;
+            font-weight: bold;
+            border-radius: 8px;
+            width: 70px;
+            height: 35px;
+            background-color: #0FAA39;
+            border-color: #0FAA39;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+        }
+        /* Full-page modal styling */
+        .modal-fullscreen {
+            width: 100vw;
+            max-width: none;
+            height: 100%;
+            margin: 0;
+        }
+        .modal-fullscreen .modal-content {
+            height: 100%;
+            border: none;
+            border-radius: 0;
+        }
+        .modal-body {
+            max-height: 70vh;
+            overflow-y: auto;
+            padding: 15px;
+            text-align: center;
+        }
+        .modal-footer {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px;
+        }
+        .modal-footer .btn-primary {
+            width: auto;
+            padding: 10px 20px;
+            height: 40px;
+        }
+        .addon-section {
+            background-color: #fff;
+            border: 2px solid #ffa500;
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 10px;
+        }
+        .addon-section h6 {
+            margin-bottom: 10px;
+            font-size: 1.1rem;
+            font-weight: bold;
+        }
     </style>
 </head>
 <body>
         </div>
     </div>
+    <!-- Item Modal (Full-page version from menu.html) -->
     <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-fullscreen">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
+                    <h5 id="modal-name" class="fw-bold text-center"></h5>
+                    <p id="modal-price" class="text-muted text-center"></p>
+                    <p id="modal-description" class="text-secondary"></p>
+                    <div class="nutritional-info">
+                        <strong>Ingredients:</strong> <span id="modal-ingredients"></span><br>
+                        <strong>Nutrition:</strong> <span id="modal-nutrition"></span><br>
+                        <strong>Allergens:</strong> <span id="modal-allergens"></span>
+                    </div>
+                    <div id="modal-addons" class="modal-addons mt-4">
+                        <h6>Customization Options</h6>
+                        <div id="addons-list" class="addons-container">Loading customization options...</div>
+                    </div>
+                    <div class="mt-4">
+                        <h6>Custom Request</h6>
+                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
+                    </div>
+                    <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
+                </div>
+                <div class="modal-footer d-flex align-items-center justify-content-between">
+                    <div class="d-flex align-items-center gap-2">
+                        <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
+                        <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
+                        <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
+                    </div>
+                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
+                </div>
+            </div>
+        </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
                 }
             });
+            // Quantity controls
+            const decreaseBtn = document.getElementById('decreaseQuantity');
+            const increaseBtn = document.getElementById('increaseQuantity');
+            const quantityInput = document.getElementById('quantityInput');
+            decreaseBtn.addEventListener('click', function () {
+                let currentQuantity = parseInt(quantityInput.value);
+                if (currentQuantity > 1) {
+                    currentQuantity--;
+                    quantityInput.value = currentQuantity;
+                }
+            });
+            increaseBtn.addEventListener('click', function () {
+                let currentQuantity = parseInt(quantityInput.value);
+                currentQuantity++;
+                quantityInput.value = currentQuantity;
+            });
+            // Item details and cart functionality
+            window.showItemDetails = function(name, price, image, description, ingredients, nutrition, allergens, section, selectedCategory) {
+                document.getElementById('modal-name').innerText = name;
+                document.getElementById('modal-price').innerText = `$${price}`;
+                const modalImg = document.getElementById('modal-img');
+                modalImg.src = image || '/static/placeholder.jpg';
+                document.getElementById('modal-description').innerText = description || 'No description available.';
+                document.getElementById('modal-ingredients').innerText = ingredients || 'Not specified';
+                document.getElementById('modal-nutrition').innerText = nutrition || 'Not available';
+                document.getElementById('modal-allergens').innerText = allergens || 'None listed';
+                document.getElementById('addons-list').innerHTML = 'Loading customization options...';
+                document.getElementById('modal-instructions').value = '';
+                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 => {
+                        const addonsList = document.getElementById('addons-list');
+                        addonsList.innerHTML = '';
+                        if (!data.success || !data.addons || data.addons.length === 0) {
+                            addonsList.innerHTML = '<p>No customization options available.</p>';
+                            return;
+                        }
+                        data.addons.forEach(addon => {
+                            const sectionDiv = document.createElement('div');
+                            sectionDiv.classList.add('addon-section');
+                            const title = document.createElement('h6');
+                            title.innerText = addon.name;
+                            sectionDiv.appendChild(title);
+                            const optionsContainer = document.createElement('div');
+                            addon.options.forEach((option, index) => {
+                                const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
+                                const listItem = document.createElement('div');
+                                listItem.classList.add('form-check');
+                                listItem.innerHTML = `
+                                    <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
+                                           data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
+                                    <label class="form-check-label" for="${optionId}">
+                                        ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
+                                    </label>
+                                `;
+                                optionsContainer.appendChild(listItem);
+                            });
+                            sectionDiv.appendChild(optionsContainer);
+                            addonsList.appendChild(sectionDiv);
+                        });
+                    })
+                    .catch(err => {
+                        console.error('Error fetching add-ons:', err);
+                        document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
+                    });
+            };
+            window.addToCartFromModal = function() {
+                const itemName = document.getElementById('modal-name').innerText;
+                const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
+                const itemImage = document.getElementById('modal-img').src;
+                const instructions = document.getElementById('modal-instructions').value;
+                const quantity = parseInt(document.getElementById('quantityInput').value);
+                const modalSectionEl = document.getElementById('modal-section');
+                const section = modalSectionEl.getAttribute('data-section');
+                const selectedCategory = modalSectionEl.getAttribute('data-category');
+                const addons = [];
+                document.querySelectorAll('.addon-option:checked').forEach(checkbox => {
+                    addons.push({
+                        name: checkbox.getAttribute('data-name'),
+                        price: parseFloat(checkbox.getAttribute('data-price')) || 0
+                    });
+                });
+                const cartPayload = {
+                    itemName: itemName,
+                    itemPrice: itemPrice,
+                    itemImage: itemImage,
+                    section: section,
+                    category: selectedCategory,
+                    addons: addons,
+                    instructions: instructions,
+                    quantity: quantity
+                };
+                fetch('/cart/add', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(cartPayload)
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        alert('Item added to cart successfully!');
+                        const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
+                        modal.hide();
+                        // Optionally update cart UI here if you add a cart badge
+                    } 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);
+                    alert('Error adding item to cart.');
+                });
+            };
         });
     </script>
 </body>