BiryaniHubMenu

Sleeping

App Files Files Community

DSatishchandra commited on Mar 20

Commit

04d1e6f

verified ·

1 Parent(s): 94eaf2d

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +169 -25

templates/menu.html CHANGED Viewed

@@ -391,6 +391,65 @@ form-check-input addon-option{
         height: 35px;
     }
 }
 </style>
 </head>
 <body>
@@ -417,24 +476,29 @@ form-check-input addon-option{
 <!-- Category Filter with Custom Radio Buttons -->
 <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">
-        <!-- Default category for Veg with remove radio button -->
-        <input type="radio" id="category-Veg" name="category" value="Veg" class="custom-radio"
-            {% if selected_category == "Veg" %}checked{% endif %} onchange="this.form.submit()">
-        <label class="form-check-label" for="category-Veg">Veg</label>
-        <!-- Remove Selection radio button for Veg category -->
-        <input type="radio" id="category-Remove" name="category" value="Remove" class="custom-radio"
-            {% if selected_category == "Remove" %}checked{% endif %} onchange="this.form.submit()">
-        <label class="form-check-label" for="category-Remove">Remove Selection</label>
     </div>
-    <!-- Toggle switch for Veg/Non-Veg -->
-    <div class="form-check form-check-inline">
-        <input type="checkbox" id="vegToggle" class="form-check-input" onchange="toggleVegCategory()">
-        <label class="form-check-label" for="vegToggle">Toggle Veg/Non-Veg</label>
     </div>
     <!-- Separate Customized Dish radio button in a new div to align it properly -->
     <div class="form-check">
@@ -785,17 +849,97 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
-// Toggle Veg/Non-Veg selection
-function toggleVegCategory() {
-    const toggle = document.getElementById('vegToggle');
-    if (toggle.checked) {
-        // If checked, set category to Veg
-        window.location.href = '/menu?category=Veg'; // Change URL to reflect the new selection
     } else {
-        // If unchecked, set category to Non-Veg or remove the selection
-        window.location.href = '/menu?category=Non-Veg'; // Or another fallback category
     }
-}
     </script>
     <!-- Bootstrap JS -->

         height: 35px;
     }
 }
+     /* Toggle Switch Styles */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.4s;
+    border-radius: 34px;
+}
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    border-radius: 50%;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: 0.4s;
+}
+input:checked + .slider {
+    background-color: #4CAF50;
+}
+input:checked + .slider:before {
+    transform: translateX(26px);
+}
+/* Label for Veg/Non-Veg Toggle */
+.veg-toggle-container {
+    text-align: center;
+    margin-bottom: 20px;
+}
+#vegToggleLabel {
+    margin-left: 10px;
+    font-size: 1.1rem;
+    color: #4CAF50;
+    font-weight: bold;
+}
 </style>
 </head>
 <body>
 <!-- Category Filter with Custom Radio Buttons -->
 <form method="get" action="/menu" class="text-center mb-4">
+    <label class="form-label fw-bold">Select a preference:</label>
+    <!-- Toggle Veg/Non-Veg Button -->
+<div class="veg-toggle-container">
+    <label class="switch">
+        <input type="checkbox" id="vegToggle" onchange="toggleVegItems()">
+        <span class="slider round"></span>
+    </label>
+    <span id="vegToggleLabel">Veg Only</span>
+</div>
+<!-- Menu Section -->
+<div class="container mt-4" id="menuContainer">
+    <h1 class="text-center">Menu</h1>
+    <!-- Veg items will be shown here when toggled -->
+    <div id="vegItemsContainer" class="veg-items">
+        <!-- Veg items will be dynamically populated -->
     </div>
+    <!-- All items will be shown here -->
+    <div id="allItemsContainer" class="all-items">
+        <!-- All items will be dynamically populated -->
     </div>
+</div>
     <!-- Separate Customized Dish radio button in a new div to align it properly -->
     <div class="form-check">
     });
 });
+// Fetch menu items from Salesforce
+function fetchMenuItems() {
+    fetch('/services/apexrest/menuItems/') // Assuming your Salesforce API endpoint
+        .then(response => response.json())
+        .then(data => {
+            const menuItems = data.map(item => ({
+                name: item.Name,
+                category: item.Category__c,
+                price: item.Price__c,
+                image: item.Image__c
+            }));
+            renderAllItems(menuItems);
+            renderVegItems(menuItems);
+        })
+        .catch(err => {
+            console.error('Error fetching menu items:', err);
+        });
+}
+// Function to toggle Veg/Non-Veg items
+function toggleVegItems() {
+    const isVegOnly = document.getElementById('vegToggle').checked;
+    // Get the containers for all items and veg items
+    const allItemsContainer = document.getElementById('allItemsContainer');
+    const vegItemsContainer = document.getElementById('vegItemsContainer');
+    if (isVegOnly) {
+        // Show only Veg items
+        vegItemsContainer.style.display = 'block';
+        allItemsContainer.style.display = 'none';
     } else {
+        // Show all items
+        vegItemsContainer.style.display = 'none';
+        allItemsContainer.style.display = 'block';
     }
+}
+// Function to render Veg items
+function renderVegItems(menuItems) {
+    const vegItemsContainer = document.getElementById('vegItemsContainer');
+    vegItemsContainer.innerHTML = '';  // Clear previous content
+    // Filter and render only Veg items
+    const vegItems = menuItems.filter(item => item.category === 'Veg');
+    vegItems.forEach(item => {
+        const itemDiv = document.createElement('div');
+        itemDiv.classList.add('menu-item');
+        itemDiv.innerHTML = `
+            <div class="card menu-card">
+                <img src="${item.image}" class="card-img-top menu-image" alt="${item.name}">
+                <div class="card-body">
+                    <h5 class="card-title">${item.name}</h5>
+                    <p class="card-text">$${item.price}</p>
+                    <button class="btn btn-primary">Add to Cart</button>
+                </div>
+            </div>
+        `;
+        vegItemsContainer.appendChild(itemDiv);
+    });
+}
+// Function to render all menu items (Veg + Non-Veg)
+function renderAllItems(menuItems) {
+    const allItemsContainer = document.getElementById('allItemsContainer');
+    allItemsContainer.innerHTML = '';  // Clear previous content
+    // Render all menu items
+    menuItems.forEach(item => {
+        const itemDiv = document.createElement('div');
+        itemDiv.classList.add('menu-item');
+        itemDiv.innerHTML = `
+            <div class="card menu-card">
+                <img src="${item.image}" class="card-img-top menu-image" alt="${item.name}">
+                <div class="card-body">
+                    <h5 class="card-title">${item.name}</h5>
+                    <p class="card-text">$${item.price}</p>
+                    <button class="btn btn-primary">Add to Cart</button>
+                </div>
+            </div>
+        `;
+        allItemsContainer.appendChild(itemDiv);
+    });
+}
+// Initialize the page
+document.addEventListener('DOMContentLoaded', function () {
+    fetchMenuItems(); // Fetch and display menu items when the page loads
+    toggleVegItems(); // Display based on initial state
+});
     </script>
     <!-- Bootstrap JS -->