Update templates/proposed-GUI.html

templates/proposed-GUI.html

@@ -1969,85 +1969,127 @@ var doorSchedulePDF;
               }
 
               for (let i = 0; i < docsToMeasure.length; i++) {
-                let name = docsToMeasure[i][0];
-
-                // Create div for the measure item
-                let div = document.createElement("div");
-                div.className = "measure-item";
-
-                // Create the checkbox
-                let checkbox = document.createElement("input");
-                checkbox.type = "checkbox";
-                checkbox.name = "measureCheckbox";
-                checkbox.value = name;
-                checkbox.onclick = handleCheckboxChange; // Handle checkbox click
-
-                // Create the label
-                let label = document.createElement("label");
-                label.textContent = name;
-                label.onclick = handleLabelClick; // Handle label click
-
-                // Append checkbox and label to the div
-                div.appendChild(checkbox);
-                div.appendChild(label);
-
-                // Append the item to the select container
-                measSelect.appendChild(div);
-                    // Check for duplicates
-                if (nameSet.has(name)) {
-                    label.style.color = "red"; // Highlight duplicate (optional)
-                    
-                    document.getElementById("TopTextModal").textContent='Error: Duplicates Error'
-                    PopupElement.textContent = 'Duplicate project names were detected while retrieving the project PDFs. Please visit Dropbox and rename the relevant files that you will be working on to ensure each project has a unique name. Once the renaming is complete, return to the console and click on the Dropbox icon to retrieve the updated project names.';
-                    ShowPopUp();
-                } else {
-                    nameSet.add(name); // Add unique name to the set
-                }
-              }
-
+                    let name = docsToMeasure[i][0];
+
+                    // Create div for the measure item
+                    let div = document.createElement("div");
+                    div.className = "measure-item";
+
+                    // Create the checkbox
+                    let checkbox = document.createElement("input");
+                    checkbox.type = "checkbox";
+                    checkbox.name = "measureCheckbox";
+                    checkbox.value = name;
+
+                    // Only clicking checkbox checks it and triggers handler
+                    checkbox.onclick = function (e) {
+                      e.stopPropagation(); // prevent bubbling to div
+                      handleCheckboxChange(e);
+                    };
+
+                    // Create the label
+                    let label = document.createElement("label");
+                    label.textContent = name;
+
+                    // Label click does not check the checkbox
+                    label.onclick = function (e) {
+                      e.stopPropagation(); // just to be safe
+                      handleLabelClick(e, name);
+                    };
+
+                    // Div click also doesn't check the checkbox
+                    div.onclick = function (e) {
+                      handleLabelClick(e, name);
+                    };
+
+                    // Assemble
+                    div.appendChild(checkbox);
+                    div.appendChild(label);
+                    measSelect.appendChild(div);
+
+                    // Handle duplicates
+                    if (nameSet.has(name)) {
+                      label.style.color = "red";
+                      document.getElementById("TopTextModal").textContent = 'Error: Duplicates Error';
+                      PopupElement.textContent = 'Duplicate project names were detected while retrieving the project PDFs. Please visit Dropbox and rename the relevant files that you will be working on to ensure each project has a unique name. Once the renaming is complete, return to the console and click on the Dropbox icon to retrieve the updated project names.';
+                      ShowPopUp();
+                    } else {
+                      nameSet.add(name);
+                    }
+                  }
 
 
               for (let i = 0; i < relvDocs.length; i++) {
-                let name = relvDocs[i][0];
-
-                // Create div for the measure item
-                let div = document.createElement("div");
-                div.className = "relv-item";  //relvselectid .relv-item
-                // Create the label
-                let label = document.createElement("label");
-                label.textContent = name;
-                label.onclick= function(event) 
-                  {
-                          // Action when label is clicked (e.g., log the selected project via the label)
-                    let relevantDocumentName = event.target.textContent;
-                    console.log("Label clicked: ", relevantDocumentName);
-                    if (projsec.value.startsWith('2.8') ||projsec.value.startsWith('2.6')){
-                      doorSchedulePDF=relevantDocumentName
-                      console.log(doorSchedulePDF)
-                    }
-                    // Optional: Highlight the selected item
-                    document.querySelectorAll(".relv-item").forEach(item => {
-                      item.style.backgroundColor = ''; // Reset background color for all items
+                      let name = relvDocs[i][0];
 
-                    });
-                    event.target.closest(".relv-item").style.backgroundColor ='#d3f8d3'; // Highlight the selected item
-                    document.getElementById('relvselectid').style.boxShadow='';
-                    relvSelect.value=relevantDocumentName;
+                      // Create div for the measure item
+                      let divRelv = document.createElement("div");
+                      divRelv.className = "relv-item";
 
-                  };
+                      // Create the checkbox
+                      let checkboxRelv = document.createElement("input");
+                      checkboxRelv.type = "checkbox";
+                      checkboxRelv.name = "measureCheckboxRelv";
+                      checkboxRelv.value = name;
 
+                      // Create the label
+                      let label = document.createElement("label");
+                      label.textContent = name;
 
-                div.appendChild(label);
+                      // Shared click handler
+                      function checkboxRelvClick(event) {
+                        event.stopPropagation(); // Prevent event bubbling issues
+
+                        // Get the parent div from the event target
+                        const container = event.currentTarget;
+
+                        // Get the checkbox inside this container
+                        const checkbox = container.querySelector('input[type="checkbox"]');
+
+                        // Uncheck all checkboxes
+                        document.querySelectorAll('input[name="measureCheckboxRelv"]').forEach(cb => cb.checked = false);
+
+                        // Check the clicked one
+                        checkbox.checked = true;
+
+                        const relevantDocumentName = checkbox.value;
+                        console.log("Item clicked: ", relevantDocumentName);
+
+                        if (projsec.value.startsWith('2.8') || projsec.value.startsWith('2.6')) {
+                          doorSchedulePDF = relevantDocumentName;
+                          console.log(doorSchedulePDF);
+                        }
+
+                        // Highlight selection
+                        document.querySelectorAll(".relv-item").forEach(item => {
+                          item.style.backgroundColor = '';
+                        });
+                        container.style.backgroundColor = '#d3f8d3';
+                        document.getElementById('relvselectid').style.boxShadow = '';
+                        relvSelect.value = relevantDocumentName;
+                      }
+
+                      // Assign the click event to the container div
+                      divRelv.onclick = checkboxRelvClick;
+
+                      // Also attach to checkbox specifically to prevent bubbling issue
+                      checkboxRelv.onclick = (e) => {
+                        e.stopPropagation();
+                        divRelv.click(); // Trigger div's click logic
+                      };
+
+                      divRelv.appendChild(checkboxRelv);
+                      divRelv.appendChild(label);
+
+                      relvSelect.appendChild(divRelv);
+
+                      if (nameSetRelv.has(name)) {
+                        label.style.color = "red";
+                      } else {
+                        nameSetRelv.add(name);
+                      }
+                    }
 
-                // Append the item to the select container
-                relvSelect.appendChild(div);
-                // Handle duplicate names
-                if (nameSetRelv.has(name)) {
-                  label.style.color = "red"; // Highlight duplicate (optional)
-                } else {
-                  nameSetRelv.add(name);
-                }
-              }
 
                   relvids.push(relvSelect);
                   measids.push(measSelect);