Update templates/menu.html

templates/menu.html

@@ -731,6 +731,68 @@ document.addEventListener('DOMContentLoaded', function () {
         quantityInput.value = currentQuantity;
     });
 });
+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;
+        });
+    }
+}
+
+// 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);
+    });
+});
 
     // Function to round reward points to a single digit
 function roundRewardPoints() {