BiryaniHubflaskcustomize

Runtime error

App Files Files Community

geethareddy commited on 25 days ago

Commit

8a3be7c

verified ·

1 Parent(s): e3eb007

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +124 -95

templates/menu.html CHANGED Viewed

@@ -27,6 +27,7 @@
             margin: auto;
             display: flex;
             flex-direction: column;
         }
         .menu-image {
             height: 200px;
@@ -51,27 +52,27 @@
             background-color: #0FAA39;
             border-color: #0FAA39;
         }
-        /* Customize button styling */
         .btn-customize {
             font-size: 13px;
             font-weight: bold;
             border-radius: 5px;
-            background-color: transparent;
-            border: 1px solid #0FAA39;
-            color: #0FAA39;
-            padding: 5px 15px;
             display: inline-flex;
-            align-items: center;
             justify-content: center;
         }
-        .btn-customize:hover {
             background-color: #0FAA39;
-            color: white;
             border-color: #0FAA39;
         }
-        .btn-customize .bi-chevron-right {
-            margin-left: 5px;
-        }
         .view-cart-container {
             position: fixed;
             bottom: 20px;
@@ -99,78 +100,125 @@
 </head>
 <body>
     <div class="container mt-4">
         <h1 class="text-center">Menu</h1>
-        <div class="row">
-            <!-- Sample Item Card -->
-            <div class="col-md-6 mb-4">
-                <div class="card menu-card">
-                    <img src="your-image-path.jpg" class="card-img-top menu-image" alt="Item Image">
-                    <div class="card-body">
-                        <h5 class="card-title">Chicken Sausage</h5>
-                        <p class="card-text">Molten Cheese Indulgence with American classic herbed chicken sausage.</p>
-                        <button class="btn btn-primary">Add</button>
-                        <button class="btn btn-customize" onclick="openCustomizeModal('Chicken Sausage', 288)">
-                            Customize <i class="bi bi-chevron-right"></i>
-                        </button>
                     </div>
-                </div>
-            </div>
-            <!-- Sample Item Card -->
-            <div class="col-md-6 mb-4">
-                <div class="card menu-card">
-                    <img src="your-image-path.jpg" class="card-img-top menu-image" alt="Item Image">
-                    <div class="card-body">
-                        <h5 class="card-title">Prawn Fry</h5>
-                        <p class="card-text">Delicious prawn fry with a spicy twist.</p>
-                        <button class="btn btn-primary">Add</button>
-                        <button class="btn btn-customize" onclick="openCustomizeModal('Prawn Fry', 15)">
-                            Customize <i class="bi bi-chevron-right"></i>
-                        </button>
                     </div>
-                </div>
             </div>
-        </div>
     </div>
     <div class="view-cart-container">
         <a href="/cart" class="view-cart-button">
             View Cart
         </a>
     </div>
-    <!-- Customize Modal -->
-    <div class="modal fade" id="customizeModal" tabindex="-1" aria-labelledby="customizeModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="customizeModalLabel">Customize Your Item</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <h5 id="modal-item-name"></h5>
-                    <p>Price: $<span id="modal-item-price"></span></p>
-                    <div id="addons-list">
-                        <!-- Addon Options will be loaded here -->
-                        <h6>Choose Toppings:</h6>
-                        <div class="form-check">
-                            <input class="form-check-input" type="checkbox" value="Extra Cheese" id="addon1">
-                            <label class="form-check-label" for="addon1">
-                                Extra Cheese ($2)
-                            </label>
-                        </div>
-                        <div class="form-check">
-                            <input class="form-check-input" type="checkbox" value="Olives" id="addon2">
-                            <label class="form-check-label" for="addon2">
-                                Olives ($1)
-                            </label>
-                        </div>
                     </div>
-                    <textarea class="form-control" id="special-request" placeholder="Special Instructions (Optional)"></textarea>
                 </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                     <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
                 </div>
             </div>
@@ -178,42 +226,23 @@
     </div>
     <script>
-        // Open Customize Modal with Item Details
-        function openCustomizeModal(itemName, itemPrice) {
-            document.getElementById('modal-item-name').innerText = itemName;
-            document.getElementById('modal-item-price').innerText = itemPrice;
-            const modal = new bootstrap.Modal(document.getElementById('customizeModal'));
-            modal.show();
         }
-        // Add Custom Item to Cart from Modal
-        function addToCartFromModal() {
-            const itemName = document.getElementById('modal-item-name').innerText;
-            const itemPrice = parseFloat(document.getElementById('modal-item-price').innerText);
-            const specialRequest = document.getElementById('special-request').value;
-            let selectedAddons = [];
-            if (document.getElementById('addon1').checked) {
-                selectedAddons.push('Extra Cheese ($2)');
-            }
-            if (document.getElementById('addon2').checked) {
-                selectedAddons.push('Olives ($1)');
-            }
-            const cartItem = {
-                itemName,
-                itemPrice,
-                addons: selectedAddons,
-                specialRequest
-            };
-            // You can push this cartItem into your cart data (e.g., localStorage, array, etc.)
-            console.log(cartItem);
-            alert('Item added to cart successfully!');
-            // Close the modal
-            const modal = bootstrap.Modal.getInstance(document.getElementById('customizeModal'));
-            modal.hide();
         }
     </script>

             margin: auto;
             display: flex;
             flex-direction: column;
+            position: relative;
         }
         .menu-image {
             height: 200px;
             background-color: #0FAA39;
             border-color: #0FAA39;
         }
         .btn-customize {
             font-size: 13px;
             font-weight: bold;
             border-radius: 5px;
+            background-color: #0FAA39;
+            border-color: #0FAA39;
+            position: absolute;
+            right: 10px;  /* Align the Customize button to the right */
+            bottom: 10px; /* Place it at the bottom right corner of the image */
             display: inline-flex;
             justify-content: center;
+            align-items: center;
+            padding: 5px 15px;
+        }
+        .btn-customize i {
+            margin-left: 5px;
         }
+        .btn-primary:hover, .btn-customize:hover {
             background-color: #0FAA39;
             border-color: #0FAA39;
         }
         .view-cart-container {
             position: fixed;
             bottom: 20px;
 </head>
 <body>
+    <!-- Fixed Top Bar -->
+    <div class="fixed-top-bar">
+        <div class="avatar-dropdown-container">
+            <div class="avatar-icon">
+                <span>{{ first_letter }}</span> <!-- Display the first letter of the customer's name -->
+            </div>
+            <div class="dropdown-menu">
+                <a href="{{ url_for('customer_details') }}" class="dropdown-item">View Profile</a>
+                <a href="{{ url_for('order_history') }}" class="dropdown-item">Order History</a>
+                <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
+            </div>
+        </div>
+        <div class="search-bar-container">
+            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
+            <i class="bi bi-search search-icon"></i>
+        </div>
+    </div>
+    <!-- Category Filter -->
+    <form method="get" action="/menu" class="text-center mb-4">
+        <label class="form-label fw-bold">Select a Category:</label>
+        <div class="form-check form-check-inline">
+            {% for category in categories %}
+                <input type="radio" id="category-{{ category }}" name="category" value="{{ category }}" class="custom-radio"
+                    {% if selected_category == category %}checked{% endif %} onchange="this.form.submit()">
+                <label class="form-check-label" for="category-{{ category }}">{{ category }}</label>
+            {% endfor %}
+        </div>
+        <div class="form-check">
+            <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish" class="custom-radio"
+                {% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
+            <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
+        </div>
+    </form>
+    <!-- Menu Section -->
     <div class="container mt-4">
         <h1 class="text-center">Menu</h1>
+        {% if selected_category == "Customized Dish" %}
+            <div id="custom-dish-form" class="mt-4">
+                <h3>Create Your Custom Dish</h3>
+                <form method="POST" action="/generate_custom_dish">
+                    <div class="mb-3">
+                        <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">
+                        <label for="custom-dish-description" class="form-label">Dish Description</label>
+                        <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
                     </div>
+                    <button type="submit" class="btn btn-primary">Submit</button>
+                </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';">
+                                <div class="card-body">
+                                    <h5 class="card-title">{{ item.Name }}</h5>
+                                    <p class="card-text">${{ item.Price__c }}</p>
+                                    <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>
+                                    <!-- Customize Button -->
+                                    <button class="btn btn-customize" onclick="customizeItem('{{ item.Name }}', '{{ item.Price__c }}')">
+                                        <i class="bi bi-pencil-square"></i> Customize
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+            {% endfor %}
+        {% endif %}
     </div>
+    <!-- View Cart Button -->
     <div class="view-cart-container">
         <a href="/cart" class="view-cart-button">
             View Cart
         </a>
     </div>
+    <!-- Modal for Item Details -->
+    <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <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 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>
     <script>
+        // Customize Item Action
+        function customizeItem(itemName, itemPrice) {
+            alert(`Customizing your ${itemName} for $${itemPrice}`);
         }
+        // Handle Search Filtering (optional)
+        function filterMenu() {
+            let input = document.getElementById('searchBar').value.toLowerCase();
+            let items = document.querySelectorAll('.menu-card');
+            items.forEach(item => {
+                let itemName = item.querySelector('.card-title').innerText.toLowerCase();
+                if (itemName.includes(input)) {
+                    item.style.display = 'block';
+                } else {
+                    item.style.display = 'none';
+                }
+            });
         }
     </script>