BiryaniHub2

Sleeping

App Files Files Community

DSatishchandra commited on Jan 24

Commit

f915041

verified ·

1 Parent(s): e896c97

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +126 -14

templates/menu.html CHANGED Viewed

@@ -13,9 +13,11 @@
             margin: 0;
             padding: 0;
         }
         .container {
             max-width: 900px;
         }
         .menu-card {
             max-width: 350px;
             border-radius: 15px;
@@ -23,28 +25,34 @@
             background-color: #fff;
             margin: auto;
         }
         .menu-image {
             height: 200px;
             width: 100%;
             object-fit: cover;
             border-radius: 15px 15px 0 0;
         }
         .card-title {
             font-size: 1.2rem;
             font-weight: bold;
         }
         .card-text {
             font-size: 1rem;
             color: #6c757d;
         }
         .btn-primary {
             font-size: 0.9rem;
             border-radius: 20px;
             width: 100px;
         }
         .filter-container {
             margin-bottom: 15px;
         }
         .addons-container {
             max-height: 150px;
             overflow-y: auto;
@@ -53,22 +61,27 @@
             background-color: #f8f9fa;
             border-radius: 5px;
         }
         .addons-container::-webkit-scrollbar {
             width: 6px;
         }
         .addons-container::-webkit-scrollbar-thumb {
             background-color: #aaa;
             border-radius: 3px;
         }
         .addons-container::-webkit-scrollbar-track {
             background-color: #f1f1f1;
         }
         .view-cart-container {
             position: fixed;
             bottom: 20px;
             right: 20px;
             z-index: 999;
         }
         .view-cart-button {
             background-color: #007bff;
             color: #fff;
@@ -82,10 +95,74 @@
             align-items: center;
             justify-content: center;
         }
         .view-cart-button:hover {
             background-color: #0056b3;
             text-decoration: none;
         }
     </style>
 </head>
 <body>
@@ -155,7 +232,7 @@
                         <h6>Add-ons</h6>
                         <div id="addons-list" class="addons-container">Loading add-ons...</div>
                     </div>
-                </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -166,6 +243,17 @@
     <!-- JavaScript -->
     <script>
         function showItemDetails(name, price, image, description) {
             // Set modal content dynamically
             document.getElementById('modal-name').innerText = name;
@@ -173,16 +261,19 @@
             document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
             document.getElementById('modal-description').innerText = description || 'No description available.';
             document.getElementById('addons-list').innerHTML = 'Loading add-ons...';
             // Fetch add-ons dynamically based on item Name
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}`)
                 .then(response => response.json())
                 .then(data => {
                     const addonsList = document.getElementById('addons-list');
                     addonsList.innerHTML = ''; // Clear previous content
                     if (!data.success || !data.addons || data.addons.length === 0) {
                         addonsList.innerHTML = 'No add-ons available.';
                         return;
                     }
                     // Populate the add-ons list
                     data.addons.forEach(addon => {
                         const listItem = document.createElement('div');
@@ -199,28 +290,27 @@
                 });
         }
         function addToCartFromModal() {
-            const itemName = document.getElementById('modal-name').innerText; // Get item name
-            const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', '')); // Get item price
-            const itemImage = document.getElementById('modal-img').src; // Get item image
             const selectedAddOns = Array.from(
                 document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
-            ).map(addon => addon.value); // Collect selected add-ons
-            // Ensure itemName and itemPrice are present
             if (!itemName || !itemPrice) {
                 alert('Failed to add item to cart. Please try again.');
                 return;
             }
-            // Create the payload to send to the backend
             const cartPayload = {
-                itemName: itemName, // Food item name
                 itemPrice: itemPrice,
-                itemImage: itemImage, // Image URL
                 addons: selectedAddOns
             };
-            // Send the payload to the server
             fetch('/cart/add', {
                 method: 'POST',
                 headers: {
@@ -230,9 +320,10 @@
             })
                 .then(response => response.json())
                 .then(data => {
                     if (data.success) {
-                        alert('Item added to cart successfully!');
-                        window.location.href = '/cart'; // Redirect to the cart page
                     } else {
                         console.error('Error adding item to cart:', data.error);
                         alert(data.error || 'Failed to add item to cart.');
@@ -240,13 +331,34 @@
                 })
                 .catch(err => {
                     console.error('Error adding item to cart:', err);
-                    alert('An error occurred while adding the item to the cart.');
                 });
-        }
     </script>
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>

             margin: 0;
             padding: 0;
         }
         .container {
             max-width: 900px;
         }
         .menu-card {
             max-width: 350px;
             border-radius: 15px;
             background-color: #fff;
             margin: auto;
         }
         .menu-image {
             height: 200px;
             width: 100%;
             object-fit: cover;
             border-radius: 15px 15px 0 0;
         }
         .card-title {
             font-size: 1.2rem;
             font-weight: bold;
         }
         .card-text {
             font-size: 1rem;
             color: #6c757d;
         }
         .btn-primary {
             font-size: 0.9rem;
             border-radius: 20px;
             width: 100px;
         }
         .filter-container {
             margin-bottom: 15px;
         }
         .addons-container {
             max-height: 150px;
             overflow-y: auto;
             background-color: #f8f9fa;
             border-radius: 5px;
         }
         .addons-container::-webkit-scrollbar {
             width: 6px;
         }
         .addons-container::-webkit-scrollbar-thumb {
             background-color: #aaa;
             border-radius: 3px;
         }
         .addons-container::-webkit-scrollbar-track {
             background-color: #f1f1f1;
         }
         .view-cart-container {
             position: fixed;
             bottom: 20px;
             right: 20px;
             z-index: 999;
         }
         .view-cart-button {
             background-color: #007bff;
             color: #fff;
             align-items: center;
             justify-content: center;
         }
         .view-cart-button:hover {
             background-color: #0056b3;
             text-decoration: none;
         }
+       /* Toast container for messages */
+.toast-container {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    z-index: 1055; /* Ensure it appears above other elements */
+    width: auto;
+    max-width: 300px;
+}
+/* Toast box */
+.toast {
+    background-color: #28a745; /* Success green background */
+    color: #fff; /* White text */
+    padding: 10px 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    font-size: 0.9rem;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+/* Toast close button */
+.toast .btn-close {
+    color: #fff;
+    background: transparent;
+    border: none;
+    font-size: 1.2rem;
+    font-weight: bold;
+    cursor: pointer;
+}
+.toast .btn-close:hover {
+    color: #ccc; /* Light gray on hover */
+}
+/* Smooth slide-in and fade-out animations */
+@keyframes slideIn {
+    from {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+.toast {
+    animation: slideIn 0.5s ease-out, fadeOut 3s 2s ease-out forwards;
+}
     </style>
 </head>
 <body>
                         <h6>Add-ons</h6>
                         <div id="addons-list" class="addons-container">Loading add-ons...</div>
                     </div>
+                </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
     <!-- JavaScript -->
     <script>
+            // Attach event listener to close button
+    document.addEventListener('DOMContentLoaded', function () {
+        document.querySelector('.btn-close').addEventListener('click', function () {
+            const triggerButton = document.querySelector('[data-bs-target="#itemModal"]');
+            if (triggerButton) {
+                triggerButton.focus(); // Return focus to the trigger button
+            }
+        });
+    });
         function showItemDetails(name, price, image, description) {
             // Set modal content dynamically
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
             document.getElementById('modal-description').innerText = description || 'No description available.';
             document.getElementById('addons-list').innerHTML = 'Loading add-ons...';
             // Fetch add-ons dynamically based on item Name
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}`)
                 .then(response => response.json())
                 .then(data => {
                     const addonsList = document.getElementById('addons-list');
                     addonsList.innerHTML = ''; // Clear previous content
                     if (!data.success || !data.addons || data.addons.length === 0) {
                         addonsList.innerHTML = 'No add-ons available.';
                         return;
                     }
                     // Populate the add-ons list
                     data.addons.forEach(addon => {
                         const listItem = document.createElement('div');
                 });
         }
         function addToCartFromModal() {
+            const itemName = document.getElementById('modal-name').innerText;
+            const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
+            const itemImage = document.getElementById('modal-img').src;
             const selectedAddOns = Array.from(
                 document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
+            ).map(addon => addon.value);
+            console.log("Add to cart payload:", { itemName, itemPrice, itemImage, selectedAddOns });
             if (!itemName || !itemPrice) {
                 alert('Failed to add item to cart. Please try again.');
                 return;
             }
             const cartPayload = {
+                itemName: itemName,
                 itemPrice: itemPrice,
+                itemImage: itemImage,
                 addons: selectedAddOns
             };
             fetch('/cart/add', {
                 method: 'POST',
                 headers: {
             })
                 .then(response => response.json())
                 .then(data => {
+                    console.log("Server response:", data);
                     if (data.success) {
+                        // Show a toast notification instead of redirecting
+                        showToast('Item added to cart successfully!');
                     } else {
                         console.error('Error adding 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('This item is already there in cart.');
                 });
+        }
+        // Helper function to show toast notification
+        function showToast(message) {
+            const toastEl = document.getElementById('cartToast');
+            const toastBody = document.querySelector('#cartToast .toast-body');
+            toastBody.innerText = message; // Update toast message
+            const toast = new bootstrap.Toast(toastEl);
+            toast.show();
+        }
     </script>
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1055;">
+        <div id="cartToast" class="toast align-items-center text-bg-success" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="d-flex">
+                <div class="toast-body">
+                    Item added to cart successfully!
+                </div>
+                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+        </div>
+    </div>
 </body>
 </html>