Update templates/menu.html

templates/menu.html

@@ -710,115 +710,65 @@ function updateCartDisplay(cart) {
 }
      
 document.addEventListener('DOMContentLoaded', function () {
-    // Get references to the quantity buttons and the input field
     const decreaseBtn = document.getElementById('decreaseQuantity');
     const increaseBtn = document.getElementById('increaseQuantity');
     const quantityInput = document.getElementById('quantityInput');
-
-    // Add event listener to decrease button
+    
+    // Add event listeners for quantity control
     decreaseBtn.addEventListener('click', function () {
         let currentQuantity = parseInt(quantityInput.value);
         if (currentQuantity > 1) {
-            currentQuantity--;
-            quantityInput.value = currentQuantity;
+            quantityInput.value = currentQuantity - 1;
         }
     });
 
-    // Add event listener to increase button
     increaseBtn.addEventListener('click', function () {
         let currentQuantity = parseInt(quantityInput.value);
-        currentQuantity++;
-        quantityInput.value = currentQuantity;
+        quantityInput.value = currentQuantity + 1;
     });
 });
-function renderAddonOptions(addon) {
-    const { name, options, max_selections } = addon;
-
-    let selectionContainer = document.createElement('div');
-    selectionContainer.classList.add('addon-container');
-
-    // Create a label for the addon
-    let addonLabel = document.createElement('label');
-    addonLabel.innerHTML = name;
-    selectionContainer.appendChild(addonLabel);
-
-    // Create the options as checkboxes or radio buttons based on max_selections
-    options.forEach(option => {
-        let optionLabel = document.createElement('label');
-        let inputElement;
-
-        // If max_selections is 1, use radio buttons for single selection
-        if (max_selections === 1) {
-            inputElement = document.createElement('input');
-            inputElement.type = 'radio';
-            inputElement.name = name;
-            inputElement.value = option;
-            inputElement.id = `${name}-${option}`;
-        } else {
-            inputElement = document.createElement('input');
-            inputElement.type = 'checkbox';
-            inputElement.value = option;
-            inputElement.id = `${name}-${option}`;
-        }
-
-        optionLabel.appendChild(inputElement);
-        optionLabel.appendChild(document.createTextNode(option));
-        selectionContainer.appendChild(optionLabel);
-    });
 
-    document.body.appendChild(selectionContainer);
-}
-function handleSelectionChange(event, maxSelections) {
-    const selectedOptions = document.querySelectorAll(`input[name="${event.target.name}"]:checked`);
-    const allOptions = document.querySelectorAll(`input[name="${event.target.name}"]`);
-
-    if (maxSelections === 1 && selectedOptions.length > 1) {
-        // If it's a single selection, uncheck others if any
-        allOptions.forEach(option => {
-            if (option !== event.target) {
-                option.disabled = true;
-            }
-        });
-    } else {
-        // Re-enable all options if the user is allowed to select multiple
-        allOptions.forEach(option => {
-            option.disabled = false;
+// Function to dynamically create addon options and enforce max selection
+function loadAddons(addons) {
+    const addonsContainer = document.getElementById('addons-list');
+    addonsContainer.innerHTML = ""; // Clear previous content
+
+    addons.forEach(addon => {
+        const maxSelections = addon.max_selections || 1; // Default to 1 if not provided
+        const optionsContainer = document.createElement('div');
+        optionsContainer.classList.add('addon-group');
+
+        const title = document.createElement('h6');
+        title.textContent = addon.name;
+        optionsContainer.appendChild(title);
+
+        addon.options.forEach(option => {
+            const label = document.createElement('label');
+            label.classList.add('addon-option');
+
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.value = option;
+            checkbox.name = addon.name; // Group by addon name
+
+            label.appendChild(checkbox);
+            label.appendChild(document.createTextNode(" " + option));
+            optionsContainer.appendChild(label);
+
+            // Enforce max selection rule
+            checkbox.addEventListener('change', function () {
+                if (maxSelections === 1) {
+                    // If max selection is 1, uncheck all other checkboxes in the group
+                    document.querySelectorAll(`input[name="${addon.name}"]`).forEach(cb => {
+                        if (cb !== checkbox) cb.checked = false;
+                    });
+                }
+            });
         });
-    }
-}
 
-// Attach this to the 'change' event listener for the radio/checkbox inputs
-document.querySelectorAll('input').forEach(input => {
-    input.addEventListener('change', (event) => {
-        handleSelectionChange(event, addon.max_selections);
+        addonsContainer.appendChild(optionsContainer);
     });
-});
-
-    // Function to round reward points to a single digit
-function roundRewardPoints() {
-    // Get the reward points element
-    let rewardPointsElement = document.getElementById('reward-points');
-
-    // Check if the element exists in the DOM
-    if (rewardPointsElement) {
-        let rewardPointsText = rewardPointsElement.innerText.trim(); // Get and trim the value to remove any extra spaces
-
-        // Check if the innerText is a valid number
-        let rewardPoints = parseFloat(rewardPointsText);
-
-        // If it's a valid number, round it to 1 decimal place
-        if (!isNaN(rewardPoints)) {
-            rewardPointsElement.innerText = rewardPoints.toFixed(1); // Round to 1 decimal place
-        } else {
-            console.error("Reward points value is not a valid number:", rewardPointsText);
-        }
-    } else {
-        console.error("Reward points element is missing.");
-    }
 }
-        // Run the function when the page loads
-        window.onload = roundRewardPoints;
-        
     </script>
 
     <!-- Bootstrap JS -->