Update templates/proposed-GUI.html

templates/proposed-GUI.html

@@ -1958,28 +1958,50 @@ var doorSchedulePDF;
 
               // Action for when the checkbox is clicked
               function handleCheckboxChange(event) {
-                // Uncheck all checkboxes before checking the current one
+               const sectionValue = projsec.value;
+                    const isMultiSection = sectionValue.startsWith('2.6') || sectionValue.startsWith('2.8');
+                    const checkboxes = document.querySelectorAll('input[name="measureCheckbox"]');
+                    const items = document.querySelectorAll('.measure-item');
+                
+                    if (isMultiSection) {
+                        // --- MULTI-SELECTION LOGIC FOR 2.6/2.8 ---
+                
+                        // 1. Gather checked checkboxes and their values
+                        const selectedCheckboxes = Array.from(checkboxes).filter(cb => cb.checked);
+                        let selectedValue = selectedCheckboxes.map(cb => cb.value);
+                
+                        // 2. Set field value and pdfname
+                        measSelect.value = selectedValue.join(', ');
+                        pdfname = selectedValue.join(', ');
+                        console.log("selected value:",selectedValue)
+                        console.log("pdfname:",pdfname)
+                        // 3. Highlight checked items in green, others reset
+                        items.forEach(item => {
+                            const checkbox = item.querySelector('input[name="measureCheckbox"]');
+                            item.style.backgroundColor = checkbox.checked ? '#d3f8d3' : '';
+                        });
+                
+                        // 4. Reorder: selected .measure-item to the top (checked order), unselected below
+                        const container = items[0]?.parentNode;
+                        const selectedItems = selectedCheckboxes.map(cb => cb.closest('.measure-item'));
+                        const unselectedItems = Array.from(items).filter(item => !item.querySelector('input[name="measureCheckbox"]').checked);
+                        [...selectedItems, ...unselectedItems].forEach(item => container.appendChild(item));
+                
+                    } else {
+                        // --- SINGLE SELECTION LOGIC (UNCHANGED) ---
+                        checkboxes.forEach(checkbox => { checkbox.checked = false; });
+                        event.target.checked = true;
+                
+                        // Set value and pdfname for single selection
+                        let selectedValue = event.target.value;
+                        measSelect.value = selectedValue;
+                        pdfname = selectedValue;
+                
+                        // Highlight only the selected item in green, others reset
+                        items.forEach(item => { item.style.backgroundColor = ''; });
+                        event.target.closest(".measure-item").style.backgroundColor = '#d3f8d3';
+                    }
                 
-                document.querySelectorAll('input[name="measureCheckbox"]').forEach(checkbox => {
-                  checkbox.checked = false;
-                });
-
-                // Check the current checkbox
-                event.target.checked = true;
-
-                // Action when checkbox is clicked (e.g., log the selected project)
-                let selectedValue = event.target.value;
-                measSelect.value=selectedValue;
-                console.log("Selected project:", selectedValue);
-
-                // Highlight the selected item
-                document.querySelectorAll(".measure-item").forEach(item => {
-                  item.style.backgroundColor = ''; // Reset background color for all items
-                });
-                event.target.closest(".measure-item").style.backgroundColor = '#d3f8d3'; // Highlight the selected item
-
-
-
                   // Show alert immediately to prompt the user
                   if (projsec.value.startsWith('3.2') || projsec.value.startsWith('3.3') || projsec.value.startsWith('2.7')) {
                       // downloadPdf(selectedValue);
@@ -1992,8 +2014,9 @@ var doorSchedulePDF;
                   canvasimg='';
                   ry=[[]];
                   levelcheckbox.checked=false;
-                  pdfname=selectedValue;
+                  //pdfname=selectedValue;
                   measSelect.style.boxShadow='none';
+                  
 
                   console.log(projsec.value)
                   if (!(projsec.value.startsWith('2.6') || projsec.value.startsWith('2.8'))) {
@@ -2654,10 +2677,18 @@ function getData(form) {
   formvalues=Object.fromEntries(formData);
 
  console.log(formData,formvalues)
-// iterate through entries...
-  tomeasureproj=formvalues['measureCheckbox']; //proj name
 
+  // to tomeasureproj is an array of plans in 2.6 and 2.8
+  if (formvalues['selectprojs'].startsWith('2.8') || formvalues['selectprojs'].startsWith('2.6') ){
+      tomeasureproj = formData.getAll('measureCheckbox');
+  }
 
+  else{
+      tomeasureproj=formvalues['measureCheckbox']; //proj name
+
+  }
+
+// iterate through entries...
   if( formvalues['selectprojs'].startsWith('3.2') || formvalues['selectprojs'].startsWith('3.3') || formvalues['selectprojs'].startsWith('2.7') ){
     ratio1=1
     ratio2=prminpixels/(formvalues['prmRatio']/ratioPunit);
@@ -2715,9 +2746,13 @@ function getData(form) {
       formData.append('answers',JSON.stringify(answers)) 
     }
     else if (formvalues['selectprojs'].startsWith('2.8') || formvalues['selectprojs'].startsWith('2.6') )
-    {
+    {      
+      console.log('formvalues:', formvalues)
+      console.log('tomeasureproj:', tomeasureproj)
       answers.push(tomeasureproj, 0,[] , 0,0,pdfpath , doorSchedulePDF,groupedValues);
+      console.log('answers:', answers)
       formData.append('answers',JSON.stringify(answers)) 
+      console.log('formData:', formData)
     }
   }
  
@@ -4482,11 +4517,9 @@ function getpopuptext() {
   else if (projsec.value.startsWith('2.8') || projsec.value.startsWith('2.6'))
     lengthofitems=1
   // Group the values into subarrays of 4, only if any field has value
-  for (let i = 0; i < values.length; i += lengthofitems) {
+  for (let i = 0; i < values.length; i += 3) {
     const group = values.slice(i, i + lengthofitems);
-    if (group.some(val => val !== '')) {
-      groupedValues.push(group);
-    }
+    groupedValues.push(group)
   }
 
   console.log("Grouped input values:", groupedValues);