Update templates/proposed-GUI.html

templates/proposed-GUI.html

@@ -33,7 +33,7 @@
       {% include 'loading.html' %}
     </div>
     <!--Main tab links-->
-    <div class="tab">
+    <div class="tab" >
       <div class="container"  id="toggle">
         <div class="bar1"></div>
         <div class="bar2"></div>
@@ -45,11 +45,16 @@
       <a class="tablinks" id="LegendHist" href="{{ url_for('legendDirectory') }}">
         Legends History <i class="fa fa-caret-down"></i>
         </a>
-    
+          <!-- Container for dynamic tabs -->
+ 
+          <div id="dynamicTabs" class="dynamicdropdownclass">
+            <!-- This will be the dropdown content (FramestabsDropdown) -->
+            <!-- <div id="FramestabsDropdown"></div> -->
+          </div> 
       <button class="dropbtn" onclick="userguideclick()"><img id="infoImg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAHz0lEQVR4nNVbW0xVVxC9SAEfNPGRCJICGoWKRkUUNfEVFUnsn0ZjfARfAWmq8UNLfSUmxkLxCzDS6kcrDx8/xkeiaFujJia1ifFDRPyw0Fi0xjeliKi4mnU49+bcfeZwufeefaErmYQczt2zZ/bsPbNn5ng8mgFgAoDNAA4B+BnAnwBaYUer+b/L5rv8TYbn/wYA0QCWAKgG8DfCx2NzLI4Z7emvAJAEoNScsC5w7O8AjPL0FwBIAfA9gLeIHDoAHAaQ3JeCxwLYDaA90GyfPn2KM2fOoKSkBOvXr0dOTg6mT5+OjIwMg/g3n23YsMF45+zZs3j27FlvFPEvgG8AxERa+GwAjT3NrL6+HkVFRZg8eTKioqLAnwVD/M2UKVOwc+dO3L17N5AiGgBkRUr4AgCd0izev3+P6upqZGVlBS1wIJo2bRpqamoMHg7gFtwGIEqX4HEATkmcP378iGPHjmHMmDGuC67S2LFjDUWQpwOOc3u6LfynAH6RuN25cwezZ8/WLrhK8+bN62lrMN6Id1P43yUuR44cQVxcXMSF9xJ5l5WVOSnht7CVgG6z/1Ud+c2bN1i+fHmfCa7SypUrjTkJuBzydgAQJe35V69eYc6cOdqEiY2NRXx8fNC/mzVrFp4/fy4poTZUBWxTR3r58qXhmnSZc0VFBdrb231ny9SpU4MaIzMz01ggAV+F4uc7VbOfO3eutpU/dcruYJqbm4M+Y2gJXiUqLjIrmAivUR1B557nSjshWCvwngkOwVLgiBHd4a0faJq6hCcVFDC2ksEAKJQxKysrpeGKAgmfqsb23Iu6Xd2WLVtE4Z88eYKYmJiQxhw4cKAUJ/Du8FlPCvjB+jajrfnz52sVnsQLkRTirl27NqxxeWYJEWNFT/f5t9Y3Gd7qFt5LvAm2tbUZfOnOeGt0Y9za2lpVAQwYEiUFlFrf+vDhA8aNGxcxBZBo7qNHjw7Z7J3uDoJ1lajCf6Kmr6qqqiIqvE46fpz3Iz888kuvAfhCfUPHldaJoqOjkZycjKSkpJByB4GICRcBuVYF1Fj/w9MzEoJPmjTJsDRr9NbY2Ijx48e7zkvwCD9ZY34/82cmR6fgEydOxIULFxzv9Eyfuc1z925bePPIq4AM9T9cGR2C07x37dqFzk4xoeTDtWvXXOfNLS3gcyqg0PqELmjAgAGuT2DQoEHGyvYG5eXlrvOnTEKitcBjVmF8YEbWbeaDBw/GlStX/DjT/Lu6ukQFrFixQosFnj9/XmVV5jGTBj4UFxe7ynTIkCG4evWq35X64MGDxon/+vVrm/D02cOGDdOigNJSv1CHqKMCmq1P1q1b56rZX79+3Rj33r17KCwsNBTiDX8l3LhxQ4vwpI0bN6rs/qACuuNPE4sWLXKNIX37yZMnkZuba/PvO3bsEBWwd+9ebQpg8UVBKxXg54uys7O1TcBKXstQwaBFF8+ZM2eq7LqoAD/QNHULzz0u3f5YQtPhgbw0YQIr9f7w9IUCVq1aJa4+Cx46+TopoCvSW+DEiROiAtasWaOVr9MWaNN1CDpdfKT0NWOCkSNHauXtdAg2W5+4lYjoKUsj4datW9otb9OmTaIbvGx9wvq8zkkcOHBAVACf61YAAzApEDqkOxS20s2bN0UF6Kw5BAqFN0fiMkQaOnSokWpT0dra6moaLIjLUL54HWZXh45JLF26VFz906dPa1991hcEpHlzAsyR+cC2FB2TOHyYfU12sDCiWwF79uxR2bZYU2Lsw/OhoaFByyTu378vKiA1NVW7AphqU/CjVQFsQnSlJOVEw4cPF1NgTU1N2oVncCcgR+3ufKwzLF2yxKZjA0xZ61YAb6Sq+du6TtHdgekDT+u0tDTXJrFv3z5RAVu3brW9m5CQgP379yMvLy9svizuCJ7nW6kyNMrswPSBLW9uKeDixYuiAhYvXux7h+nwo0ePoqOjw8gWuREbCKvP0liCU32w0vom9+yCBQtcUcCDBw9EBfCsWbZsGerq6nw5wpaWFldcMTvJhHOnTBSeYO+tWUL2gQUFlprDmQizQVxVCepzeqCUlJSwheecmYZT8A+LwJ6egO7eWz/Qf4czmREjRqA3YJbIrYQoW/gEbO9ReEuLDNtJ/MC2k1AnwzD33bt3joLTTFkLcCscXr16tcSmvtdN1QCy1F4BNklxT4U6KV6yJDx8+BALFy50RXASGzqE7cYHmb0S3gsAtr4VFjHZihbKxBITE42Dji6J+cDbt28jPz/f1fYbzk2qNQD40hMK0N14bFNCOJbAWkG4h6rTyjsIXxWS8JbzgI3HULdDOGeC28Q97+BlLoX9MQWAeLPx2K7aqiqj7tdXgtOStDZLK0rwS51Z44RIdJKpxABN8PPWlXdHeGU72M4ErxtjN1YkmqrS09Ol8NbPMLV+QwQgz4ynbeAJz9udjvLWjBkzjHqClFKzfjKjTXAhTrAFS1bQPNmWwl7fUHKM/A27OpjJEZIZUpATnJ8PFwBiAHyt3h0kMNF67tw5oz7PEjVvgExSeD+b4+ryGfP2fIfZ2xcvXqAXYGy/PeKfzVnB3lsztS5uC00gr/KAF5tIAkAi6ypqgtVlMJNT7Hif7w9Ad3otl3145oTDxV9MYDJ30q8/nvY4gK1o5seWjFjon5sASDEruyX5vzrz3XwA6bon+B8RXxEBPsptqAAAAABJRU5ErkJggg=="></button>
-    </div>
 
-  
+</div>
+<div id="FramestabsDropdown"> </div>
     <div id="mySidebar"  class="slide-out">
         <div id="menuOptions">
           <li onclick="openTab(event, 'home')" >Measure Plans </li>
@@ -58,6 +63,7 @@
     </div>
 
     <div id="home" class="tabcontent" >
+
         <div id="loading"  hidden> </div>
 
         <div id="canvaswindow" hidden="until-found">
@@ -70,8 +76,9 @@
             </div>
             <input type="button" value="Save" id="savecanvas" />
         </div>
-        
+
     <div id="rightside" hidden="until-found"> 
+      
         <div id="backgroundimg" > 
            <div id="imgs">
                 <!-- image here -->
@@ -123,7 +130,8 @@
   
           </div>
           <div id="measureCheckbox">
-            <select style="margin-left: -1%;" hidden name="measureselectname"  id="measureselectid"  multiple size="5"></select>
+            <!-- <select style="margin-left: -1%;" hidden name="measureselectname"  id="measureselectid"  multiple size="5"></select> -->
+            <div id="measureContainer" hidden required></div>
             <div id="dxfdiv" hidden="until-found">
                 <input type="button" id="pdftodxfFileButton" onclick="document.getElementById('pdftodxfFile').click();" value="Upload DXF File" >
                 <input type="file" id="pdftodxfFile" name="pdftodxfFilename" > 
@@ -144,7 +152,8 @@
         <input type="search" onkeyup=filterFunction(this.id) id="relevantSearchInput"> 
         <br>
         <div id ="relvdiv">
-          <select style="margin-left: -1%;" hidden name="relvselectname"  id="relvselectid"  multiple size="5">   </select>
+          <div id="relvselectid" hidden></div>
+          <!-- <select style="margin-left: -1%;" hidden name="relvselectname"  id="relvselectid"  multiple size="5">   </select> -->
           <iframe id="pdfFrame" hidden></iframe>
         </div>
       </div>
@@ -184,6 +193,9 @@
       </div>
       <audio id="myAudio" autoplay></audio>
     </form>  
+    <div id="progressBar" hidden>
+      <div id="progress">0%</div>
+  </div>
 
     <div id ="duplicater" class="duplicaterclass" hidden="until-found">
       <label id="labelArrayId" hidden="until-found"> </label>
@@ -268,7 +280,7 @@
         </ul>
         
     </div>
-    
+    <div id="consoleContent"></div>
     <div class="dropdown-content">
             <div id="userguidetext">
               <div id="textfirstpage">
@@ -544,7 +556,7 @@
                   <input type="number" id="textextra" name="text0name" placeholder="Eg: 1" >
                   <input type="text" id="text0extra" name="text1name" placeholder="Eg: Wall Type" > 
                   <input type="text" id="text1extra" name="text2name"  placeholder="Eg:NBS K10/" >
-                  <input type="number" id="text2extra" name="text3name" placeholder="Eg: 3" >
+                  <input type="number" id="text2extra" name="text3name" placeholder="Eg: 3" min="0">
                   
                   <script src="https://cdn.lordicon.com/bhenfmcm.js" ></script>
                   <lord-icon
@@ -601,6 +613,15 @@
 <script > 
 
 ///////////////////////////////////////////////BEGIN JS CODE//////////////////////////////////////////////////
+
+
+function updateProgressBar(value) {
+    const progressBar = document.getElementById('progress');
+    progressBar.style.width = value + '%';
+    progressBar.innerText = Math.round(value) + '%';
+}
+
+
 // Function to send the Dropbox link and keyword to the server
 function getURLParams() {
     const urlParams = new URLSearchParams(window.location.search);
@@ -686,32 +707,57 @@ var prjids=[]
 
 displayprjnames()
 function displayprjnames(){
-$.get('/getprojectnames/')
-     .success(function(data) {
-    
-     
-      document.getElementById("all").style.display = "none";
-      prjids=data[1];
-      var op0 = document.createElement("OPTION") ;
-        op0.text= 'Projects'
-        op0.value= "";
-        op0.hidden=true;
-        firstdropdown.add(op0);
-      for (let i=0;i<data[0].length;i++)
-      {
-        opt=document.createElement("option");
-        opt.textContent=data[0][i];
-        opt.text=data[0][i];
-        firstdropdown.append(opt);
-        PrjNamesArray.push(data[0][i]);
-      }
+
+  var eventSource = new EventSource('/getprojectnames/');
+    document.getElementById('progressBar').removeAttribute('hidden')
+    document.getElementById('progressBar').style.display='block';
+    eventSource.onmessage = function (event) {
+              var progress = parseInt(event.data);  // Progress value from Flask
+              if (progress <= 100) {
+                  console.log(progress);  // Log progress for debugging
+                  document.getElementById('progress').style.width = progress + '%';
+                  document.getElementById('progress').textContent = progress + '%';
+              } else {
+                  // Final data handling when progress reaches 100%
+                  console.log('Process completed!');
+                  
+                  // Parse and handle the final response data (documentsToMeasure, RelevantDocuments, extracted_path)
+                  var data = JSON.parse(event.data);  // Assuming the result is a JSON array
+                  console.log('Final result:', data);
+                  // You can use this data to update your page or handle it accordingly
+
+                  eventSource.close();  // Close the connection when finished
+                  document.getElementById('progressBar').setAttribute('hidden',true)
+                  document.getElementById('progressBar').style.display='none';
+                  document.getElementById('progress').style.width = '0%'; // Reset progress for the next process
+                  document.getElementById('progress').textContent = '0%';
+
+                  document.getElementById("all").style.display = "none";
+                  prjids=data[1];
+                  var op0 = document.createElement("OPTION") ;
+                    op0.text= 'Projects'
+                    op0.value= "";
+                    op0.hidden=true;
+                    firstdropdown.add(op0);
+                  for (let i=0;i<data[0].length;i++)
+                  {
+                    opt=document.createElement("option");
+                    opt.textContent=data[0][i];
+                    opt.text=data[0][i];
+                    firstdropdown.append(opt);
+                    PrjNamesArray.push(data[0][i]);
+                  }
       
-      })
-     .error(function(jqXHR, textStatus, errorThrown) { 
-          PopupElement.textContent='Error occured while retrieving the Project Names. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
-          ShowPopUp();
-        
-});
+                }
+  }
+
+
+      eventSource.onerror = function (error) {
+        console.error('Error occurred:', error);
+        eventSource.close();  // Close on error
+        PopupElement.textContent='Error occured while retrieving the Project Names. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
+        ShowPopUp();
+      };
 }
 /*Get chosen value and send to flask to  get project parts*/
 
@@ -775,8 +821,17 @@ function isValueNotInDropdown(dropdown, value) {
 function displayprojsections(projectid,Partid){
   console.log(seconddropdown.selectedIndex)
   document.getElementById("all").style.display = "block";
-  measSelect.innerHTML='';
-  relvSelect.innerHTML='';
+  if (measSelect && measSelect.hasChildNodes()) { 
+    while (measSelect.firstChild) {
+        measSelect.removeChild(measSelect.firstChild);
+    }
+}
+
+    if (relvSelect && relvSelect.hasChildNodes()) { 
+          while (relvSelect.firstChild) {
+            relvSelect.removeChild(relvSelect.firstChild);
+          }
+      }
   $.get('/getprojectsections/'+JSON.stringify([projectid,Partid]))
   .success(function(data){
     document.getElementById("all").style.display = "none";
@@ -1043,52 +1098,131 @@ if (document.getElementById('imgContainer')) {
 //___________________________________________________________________________________________________________
 /*Toggle Tab View of Home and Legend along with the Menu bar icon*/
 function openTab(evt, tabname) {
-  // Declare all variables
   var i, tabcontent, tablinks;
 
-  // Get all elements with class="tabcontent" and hide them
+ 
+
+  // Hide all tab contents
   tabcontent = document.getElementsByClassName("tabcontent");
   for (i = 0; i < tabcontent.length; i++) {
     tabcontent[i].style.display = "none";
   }
 
-  // Get all elements with class="tablinks" and remove the class "active"
+  // Remove "active" class from all tab buttons
   tablinks = document.getElementsByClassName("tablinks");
   for (i = 0; i < tablinks.length; i++) {
     tablinks[i].className = tablinks[i].className.replace(" active", "");
   }
 
-  // Show the current tab, and add an "active" class to the button that opened the tab
-  document.getElementById(tabname).style.display = "block";
-  evt.currentTarget.className += " active";
-  var isOpen = $mySidebar.classList.contains('slide-in');
-  if ($mySidebar.classList.contains('slide-in'))
-  {$mySidebar.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
-  document.getElementById("pagetitle").style.backgroundColor='rgb(0, 60, 255)';
-
-  $toggle.classList.toggle("change"); 
- }
+  // Show selected tab content and mark button as active
+  var tab = document.getElementById(tabname);
+  if (tab) {
+    tab.style.display = "block";
+    tab.className += " active";
+    // evt.currentTarget.className += " active";
+  } else {
+    console.error('Tab content with ID ' + tabname + ' not found.');
+  }
 }
-// Start with the first page (Home)
+
+// Start with the first tab open
 document.getElementById("pagetitle").click();
 
+// Function to add a new tab dynamically
+function addIframeTab(title, url) {
+  var tabId = "tab_" + Date.now(); // Unique ID for each tab
+
+  // Create a new button in the ribbon
+  var newTab = document.createElement("button");
+  newTab.className = "tablinks";
+  newTab.innerHTML = title + ' <i class="fa fa-times" onclick="removeTab(event, \'' + tabId + '\')"></i>';
+  newTab.onclick = function (event) {
+    // Delay opening the tab to ensure it has been added to the DOM
+    setTimeout(function() {
+      openTab(event, tabId);
+    }, 10); // 10ms delay to allow DOM rendering
+  };
 
-/// download file (made for 3.2 only)
-// function downloadpdf(filename, pdfdata) {
-//   console.log('hereeee')
-//     var element = document.createElement('a');
-//     element.setAttribute('href', 'data:application/pdf;base64,[base64_encoded_pdf_data],' + encodeURIComponent(pdfdata));
-//     element.setAttribute('download', filename);
+// Dynamically create tab labels and append them to FramestabsDropdown
+var tabnameDrpdwn = document.createElement("label");
+  tabnameDrpdwn.className = "tabslabel";
+  tabnameDrpdwn.innerHTML = title 
+  // Append new tab button to the dynamicTabs container
+  document.getElementById("dynamicTabs").appendChild(newTab);
+  document.getElementById("FramestabsDropdown").appendChild(tabnameDrpdwn);
+  tabnameDrpdwn.addEventListener('click',function(){
+    openTab('click',tabId)
+  })  
+
+// Event listener for mouseover on dynamicTabs
+document.getElementById("dynamicTabs").addEventListener('mouseover', function() {
+  // Check and log all the labels inside FramestabsDropdown
+  const labels = document.getElementById("FramestabsDropdown").children;
+  if (labels.length > 0) {
+    document.getElementById("FramestabsDropdown").style.display = 'block';
+  }
+});
 
-//     element.style.display = 'none';
-//     document.body.appendChild(element);
+document.getElementById("FramestabsDropdown").addEventListener('mouseover', function() {
+  // Stay visible when hovering over the dropdown
+  document.getElementById("FramestabsDropdown").style.display = 'block';
+});
 
-//     element.click();
+document.addEventListener('click', function(event) {
+  const dropdown = document.getElementById("FramestabsDropdown");
 
-//     document.body.removeChild(element);
-// }
+  if (!dropdown.contains(event.target)) {
+    dropdown.style.display = 'none';
+  }
+});
 
-function downloadPdf(pdfname) {
+// Handle clicks inside iframes
+document.querySelectorAll("iframe").forEach((iframe) => {
+  iframe.contentWindow?.addEventListener("mousedown", function () {
+    document.getElementById("FramestabsDropdown").style.display = "none";
+  });
+});
+
+
+
+//FramestabsDropdown
+  // Create a corresponding iframe container in the console
+  var iframeContainer = document.createElement("div");
+  iframeContainer.id = tabId;
+  iframeContainer.className = "tabcontent";
+  iframeContainer.style.display = "none"; // Initially hidden
+
+  // Create the iframe and set its source
+  var iframe = document.createElement("iframe");
+  iframe.src = url;
+  iframe.style.width = "100%";
+  iframe.style.height = "100vh";
+
+  iframeContainer.appendChild(iframe);
+
+  // Append the iframe container to the consoleContent area
+  document.getElementById("consoleContent").appendChild(iframeContainer);
+
+  // Open the new tab after the content is added
+  setTimeout(function() {
+    newTab.click();
+  }, 10); // Short delay before clicking the new tab
+}
+
+// Function to remove a tab
+function removeTab(event, tabId) {
+  event.stopPropagation(); // Prevent tab click event
+
+  var tabButton = event.target.parentElement;
+  var tabContent = document.getElementById(tabId);
+
+  if (tabButton) tabButton.remove();
+  if (tabContent) tabContent.remove();
+
+  // Switch to the home tab if the removed tab was active
+  document.getElementById("pagetitle").click();
+}
+function downloadPdf(pdfname,downloadPDFName) {
   console.log('pdfname===',pdfname)
     fetch('/get-pdf/'+JSON.stringify(pdfname))
         .then(response => response.blob())
@@ -1096,7 +1230,7 @@ function downloadPdf(pdfname) {
             const url = URL.createObjectURL(blob);
             var link = document.createElement('a');
             link.href = url;
-            link.download = 'file.pdf';
+            link.download = downloadPDFName;
             link.dispatchEvent(new MouseEvent('click'));
                     })
         .catch(error => console.error('Error fetching PDF:', error));
@@ -1352,7 +1486,7 @@ function getSelectValues(select) {
 //___________________________________________________________________________________________________________
 
   //Retrieves list of projects  
-
+var doorSchedulePDF;
   function getproj(){
     getALLMCTNAMES();
     
@@ -1364,301 +1498,465 @@ function getSelectValues(select) {
     
     var sections = document.getElementsByClassName("selectionsProjs")[0];
     chooseFirstdrpdwn();
-     
-    $.get( '/getmethod/'+JSON.stringify(projectVal))
-    .success (function(data){
-      document.getElementById('refreshDropboxButtonID').style.display = "block";
-    document.getElementById("all").style.display = "none";
-    if (sections.value.startsWith('3.2') || sections.value.startsWith('3.3') || sections.value.startsWith('2.7') ){
-      document.getElementById('dxfdiv').removeAttribute('hidden'); 
-      document.getElementById('pdftodxfFile').setAttribute('required',true)
-    }
-    else{
-      document.getElementById('dxfdiv').setAttribute('hidden',true)
-    }
-    extracted_path=data[2]
-      var docsToMeasure=data[0]; //
-      var relvDocs=data[1]
-      var projname = document.getElementsByClassName("selectionsProj")[0];
-      var projpart = document.getElementsByClassName("selectionsProjp")[0];
-      var projsec = document.getElementsByClassName("selectionsProjs")[0];
-
-      var meas = document.getElementById("measureCheckbox") ;
-      var relv = document.getElementById("relvdiv") ;
-      const measids=[];
-      const relvids=[];
-      const measoptns=[];
-
-      var measSelect = document.getElementById("measureselectid");
-      var relvSelect = document.getElementById("relvselectid");
-      var levelcheckbox=  document.getElementById("levelcheckbox");
-    
-      
-      measSelect.removeAttribute("hidden");
-      relvSelect.removeAttribute("hidden");
-      measSelect.innerHTML='';
-      
-      var optn2 = document.createElement("OPTION");
-      optn2.text= 'Select project to measure';
-      optn2.value=''
-      optn2.hidden=true;
-      optn2.id='hidden';
-    
-      measSelect.add(optn2);
-      document.getElementById("hidden").required = true;
-   
-    relvSelect.innerHTML='';
-    for (i = 0; i < relvDocs.length; i++) {
-        //relevant documents
-        var optn1 = document.createElement("OPTION");
-        optn1.text= relvDocs[i][0];
-        optn1.value= relvDocs[i][0]  ;
-        optn1.id=relvDocs[i][1] ;
-        relvSelect.add(optn1);
-        if (data=='No projects found'){
-          optn1.style.color='#bdbcbc';
-          optn1.style.cursor='not-allowed';
-          optn1.setAttribute('disabled',true);
-      }
-    }
-    const nameSet = new Set(); // To track unique names
-
-    for (i = 0; i < docsToMeasure.length; i++) {
-  //to measure documents
-        var optn2 = document.createElement("OPTION");
-        let name = docsToMeasure[i][0]; // Extract name
-        optn2.text= docsToMeasure[i][0];
-        optn2.value= docsToMeasure[i][0]  ;
-        optn2.id=docsToMeasure[i][1] ;
-        measSelect.add(optn2);
-        measoptns.push(optn2);
-
-            // Check for duplicates
-      if (nameSet.has(name)) {
-          optn2.style.color = "red"; // Highlight duplicate (optional)
-          PopupElement.textContent = 'Duplicate project names were detected while retrieving the project PDFs. Please visit Dropbox and rename the files 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
-      }
+    var eventSource = new EventSource('/getmethod/' + JSON.stringify(projectVal));
+    document.getElementById('progressBar').removeAttribute('hidden')
+    document.getElementById('progressBar').style.display='block';
+    eventSource.onmessage = function (event) {
+              var progress = parseInt(event.data);  // Progress value from Flask
+              if (progress <= 100) {
+                  console.log(progress);  // Log progress for debugging
+                  document.getElementById('progress').style.width = progress + '%';
+                  document.getElementById('progress').textContent = progress + '%';
+              } else {
+                  // Final data handling when progress reaches 100%
+                  console.log('Process completed!');
+                  
+                  // Parse and handle the final response data (documentsToMeasure, RelevantDocuments, extracted_path)
+                  var data = JSON.parse(event.data);  // Assuming the result is a JSON array
+                  console.log('Final result:', data);
+                  // You can use this data to update your page or handle it accordingly
+
+                  eventSource.close();  // Close the connection when finished
+                  document.getElementById('progressBar').setAttribute('hidden',true)
+                  document.getElementById('progressBar').style.display='none';
+                  document.getElementById('progress').style.width = '0%'; // Reset progress for the next process
+                  document.getElementById('progress').textContent = '0%';
+
+
+                  document.getElementById('refreshDropboxButtonID').style.display = "block";
+                  document.getElementById("all").style.display = "none";
+                  if (sections.value.startsWith('3.2') || sections.value.startsWith('3.3') || sections.value.startsWith('2.7') ){
+                    document.getElementById('dxfdiv').removeAttribute('hidden'); 
+                    document.getElementById('pdftodxfFile').setAttribute('required',true)
+                  }
 
-        if (data=='No projects found'){
-          optn2.style.color='#bdbcbc';
-          optn2.style.cursor='not-allowed';
-          optn2.setAttribute('disabled',true);
-      }
-      }
-    console.log(nameSet)
-    relvids.push(relvSelect) ;
-    measids.push(measSelect);
-//to open pdf in a new tab (relevant documents)
+                  else{
+                    document.getElementById('dxfdiv').setAttribute('hidden',true)
+                  }
 
+                    extracted_path=data[2]
+                    var docsToMeasure=data[0]; //
+                    var relvDocs=data[1]
+                    var projname = document.getElementsByClassName("selectionsProj")[0];
+                    var projpart = document.getElementsByClassName("selectionsProjp")[0];
+                    var projsec = document.getElementsByClassName("selectionsProjs")[0];
 
-relvids.forEach(function(elem) {
-  elem.addEventListener("change", function() {
-    // Show loading indicator
-    document.getElementById("all").style.display = "block";
-    fetch('/getdropboxurl/'+ JSON.stringify(elem.value), {
+                    var meas = document.getElementById("measureCheckbox") ;
+                    var relv = document.getElementById("relvdiv") ; 
+                    const measids=[];
+                    const relvids=[];
+                    const measoptns=[];
 
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ filename: "your_pdf_filename_here.pdf" })
-        })
-        .then(response => response.blob())
-        .then(blob => {
-          document.getElementById("all").style.display = "none";
-          const url = URL.createObjectURL(blob);
-              // Set the URL to the iframe's src to load the content inside the page
-          const iframe = document.getElementById("pdfFrame");
-          iframe.src = url;
-          iframe.style.display = "block"; // Show the iframe
-        })
-        .catch(function(jqXHR, textStatus, errorThrown) {
-              // Handle error
-              PopupElement.textContent = 'Error occurred while retrieving the dropbox URL. Refresh and try again. If the error continues, please contact the ADR team to fix it.';
-              ShowPopUp();
-            });
-    });
-    });
+                    // var measSelect = document.getElementById("measureselectid");
+                    var measSelect = document.getElementById("measureContainer");
+
+                    var relvSelect = document.getElementById("relvselectid");
+                    var levelcheckbox=  document.getElementById("levelcheckbox");
+                  
+                    
+                    measSelect.removeAttribute("hidden");
+                    relvSelect.removeAttribute("hidden");
+                    if (measSelect && measSelect.hasChildNodes()) { 
+                        while (measSelect.firstChild) {
+                            measSelect.removeChild(measSelect.firstChild);
+                        }
+                    }
+
+                    var optn2 = document.createElement("div"); // Use a <div> instead of <option>
+                    optn2.textContent = 'Select project to measure'; // Set text content
+                    optn2.hidden = true; // Keep it hidden
+                    optn2.id = 'hidden';
+
+                    measSelect.appendChild(optn2); // Append to div instead of .add()
+                    document.getElementById("hidden").required = true;
+                
+                    
+                  if (relvSelect && relvSelect.hasChildNodes()) { 
+                        while (relvSelect.firstChild) {
+                          relvSelect.removeChild(relvSelect.firstChild);
+                        }
+                    }
+                  const nameSet = new Set(); // To track unique names
+                  const nameSetRelv = new Set(); // To track unique names
+
+                // Action foconst nameSet = new Set(); // To track unique names
+
+              // Action for when the checkbox is clicked
+              function handleCheckboxChange(event) {
+                // Uncheck all checkboxes before checking the current one
+                document.querySelectorAll('input[name="measureCheckbox"]').forEach(checkbox => {
+                  checkbox.checked = false;
+                });
 
-    measids.forEach(function(elem) {
+                // Check the current checkbox
+                event.target.checked = true;
 
-            elem.addEventListener("change", function() {
-              // if (!(projsec.value.startsWith('2.8')))
-                  // {
-                          // Show alert immediately to prompt the user
+                // Action when checkbox is clicked (e.g., log the selected project)
+                let selectedValue = event.target.value;
+                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(elem.value);
-                      window.alert("Measure the purple shape drawn on the PDF using Foxit Reader, Bluebeam, or any other external tool, then enter its area and perimeter in your desired scale.");
-                  }
-                  else{
-                    window.alert("Measure the purple shape drawn on the PDF using Foxit Reader, Bluebeam, or any other external tool, then enter its area and perimeter in your desired scale.");
+                      // downloadPdf(selectedValue);
+                      downloadPdf(selectedValue,'DXF_File_:'+selectedValue)
+                      // window.alert("Measure the purple shape drawn on the PDF using Foxit Reader, Bluebeam, or any other external tool, then enter its area and perimeter in your desired scale.");
                   }
+                  // else{
+                  //   window.alert("Measure the purple shape drawn on the PDF using Foxit Reader, Bluebeam, or any other external tool, then enter its area and perimeter in your desired scale.");
+                  // }
                   canvasimg='';
                   ry=[[]];
                   levelcheckbox.checked=false;
-                  pdfname=elem.value;
+                  pdfname=selectedValue;
                   measSelect.style.boxShadow='none';
 
                   
                   document.getElementById("all").style.display = "block";
 
                   pixelArr=[projname.value, projpart.value,projsec.value, pdfname]
-        // Open popup immediately before initiating the PDF download
-         
-
+                // Open popup immediately before initiating the PDF download
+                var eventSource = new EventSource('/pixelimg/' + JSON.stringify(pixelArr));
+                document.getElementById('progressBar').removeAttribute('hidden')
+                document.getElementById('progressBar').style.display='block';
+                eventSource.onmessage = function (event) {
+                          var progress = parseInt(event.data);  // Progress value from Flask
+                          if (progress <= 100) {
+                              console.log(progress);  // Log progress for debugging
+                              document.getElementById('progress').style.width = progress + '%';
+                              document.getElementById('progress').textContent = progress + '%';
+                          } else {
+                              // Final data handling when progress reaches 100%
+                              console.log('Process completed!');
+                              
+                              // Parse and handle the final response data (documentsToMeasure, RelevantDocuments, extracted_path)
+                              var data = JSON.parse(event.data);  // Assuming the result is a JSON array
+                              console.log('Final result:', data);
+                              // You can use this data to update your page or handle it accordingly
+
+                              eventSource.close();  // Close the connection when finished
+
+                          document.getElementById('progressBar').setAttribute('hidden',true)
+                          document.getElementById('progressBar').style.display='none';
+                          document.getElementById('progress').style.width = '0%'; // Reset progress for the next process
+                          document.getElementById('progress').textContent = '0%';
+                          document.getElementById("all").style.display = "none";
+                              // Display link or any additional data if needed
+                              window.open(data[2]);
+                              downloadPdf(pdfname,'Pixel_Conversion_File_:'+pdfname)
+                                  document.getElementById("all").style.display = "none";
+                                
+                                  document.getElementById('measureADRbutton').onclick= function()
+                                  {
+                                    if (!areaRatio.value){
+                                      if (!(projsec.value.startsWith('3.2')) & !(projsec.value.startsWith('2.8')) & !(projsec.value.startsWith('3.3')) & !(projsec.value.startsWith('2.7')) )
+                                          areaRatio.style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
+                                    }
+                                    if (!prmRatio.value)
+                                    {
+                                      if (!(projsec.value.startsWith('2.8')))
+                                            prmRatio.style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
+                                    }
+
+                                  }
+                                  document.getElementById('radiosColors').removeAttribute('hidden');
+                                  var scalelbl= document.createElement("label");
+                                  scalelbl.innerText='Scale Document';
+                                  scalelbl.id='measureLabel';
+                                  var br1=  document.createElement("br");
+                                  var areadiv=document.createElement("div");
+                                  areadiv.id='areadiv'
+                                  var areaRatiolbl= document.createElement("label");
+                                  areaRatiolbl.innerText='Area:'
+                                  areaRatiolbl.id='radiolbl';
+                    
+                                  var areaRatio= document.createElement("input");
+                                  areaRatio.type='number';
+                                  areaRatio.id='arealvlinput';
+                                  areaRatio.className='lvlinput';
+                                  areaRatio.name='areaRatio';
+                                  areaRatio.style.marginLeft='78px';
+                                  areaRatio.style.textAlign='right';
+                                  areaRatio.step=".0000001";
+                                  areaRatio.min = "0"; // Allow only positive numbers (>= 0)
+                                  if( projsec.value.startsWith('3.2') || projsec.value.startsWith('3.3') || projsec.value.startsWith('2.1') || projsec.value.startsWith('2.7')){ 
+                                    areaRatio.setAttribute('disabled',true)
+                                    areaRatio.style.cursor='not-allowed';
+                                    areaRatio.style.backgroundColor='rgba(101, 101, 101, 0.27)'
+                                    document.getElementById('selectunitA').setAttribute('disabled',true)
+                                    document.getElementById('selectunitA').style.cursor='not-allowed';
+                                    document.getElementById('selectunitA').style.backgroundColor='rgba(101, 101, 101, 0.27)'
+                                  }
+
+                                  else{ // section 1.0
+                                    areaRatio.removeAttribute('disabled')
+                                    areaRatio.style.cursor='pointer';
+                                    document.getElementById('selectunitA').removeAttribute('disabled')
+                                    document.getElementById('selectunitA').style.cursor='pointer';
+                                  }
+                                  areaRatio.addEventListener('change',function(){
+                                    areaRatio.value=(Number(areaRatio.value)).toFixed(7)
+                                    areaRatio.style.boxShadow='none';
+                                  })
+                                  areaRatio.required=true;
+                                  selectunitA=document.getElementById('selectunitA')
+                                  selectunitA.removeAttribute('hidden')
+                                  
+                                  areadiv.append(areaRatiolbl,areaRatio,selectunitA)
+                                  var br2=  document.createElement("br");
+                                  var br3=  document.createElement("br");
+                                  var prmdiv=document.createElement("div");
+                                  prmdiv.id='prmdiv'
+                                  var prmRatiolbl= document.createElement("label");
+                                  prmRatiolbl.innerText='Perimeter:'
+                                  prmRatiolbl.id='radiolbl';
+
+                                  var prmRatio= document.createElement("input");
+                                  prmRatio.type='number';
+                                  prmRatio.id='perimlvlinput';
+                                  prmRatio.className='lvlinput';
+                                  prmRatio.name='prmRatio';
+                                  prmRatio.style.textAlign='right';
+                                  prmRatio.style.marginLeft='49px';
+                                  prmRatio.step=".0000001";
+                                  prmRatio.min = "0"; // Allow only positive numbers (>= 0)
+                                  prmRatio.addEventListener('change',function(){
+                                    prmRatio.value=(Number(prmRatio.value)).toFixed(7)
+                                    prmRatio.style.boxShadow='none';
+                                  })
+                                  prmRatio.required=true;
+                                  selectunitP=document.getElementById('selectunitP')
+                                  selectunitP.removeAttribute('hidden')
+
+                                  prmdiv.append(prmRatiolbl, prmRatio,selectunitP)
+                                  var ratiosdiv= document.getElementById("ratios");
+                                  ratiosdiv.innerHTML='';
+                                  ratiosdiv.append(scalelbl);
+                                  ratiosdiv.append(br1);
+                                  ratiosdiv.append(areadiv)
+                                  ratiosdiv.append(prmdiv)
+                                  areainpixels=data[0];
+                                  prminpixels=data[1];   
+
+
+                                  if( projsec.value.startsWith('2.8')) {
+                                    areaRatio.setAttribute('disabled',true)
+                                    areaRatio.style.cursor='not-allowed';
+                                    areaRatio.style.backgroundColor='rgba(101, 101, 101, 0.27)'
+                                    document.getElementById('selectunitA').setAttribute('disabled',true)
+                                    document.getElementById('selectunitA').style.cursor='not-allowed';
+                                    document.getElementById('selectunitA').style.backgroundColor='rgba(101, 101, 101, 0.27)'
+
+                                    prmRatio.setAttribute('disabled',true)
+                                    prmRatio.style.cursor='not-allowed';
+                                    prmRatio.style.backgroundColor='rgba(101, 101, 101, 0.27)'
+                                    document.getElementById('selectunitP').setAttribute('disabled',true)
+                                    document.getElementById('selectunitP').style.cursor='not-allowed';
+                                    document.getElementById('selectunitP').style.backgroundColor='rgba(101, 101, 101, 0.27)'
+                                  }
+                        };
+                      }
 
 
-       $.get('/pixelimg/' + JSON.stringify(pixelArr))
-            .success(function(data) {
-                document.getElementById("all").style.display = "none";
-                // Display link or any additional data if needed
-                window.open(data[2]);
-                    document.getElementById("all").style.display = "none";
-                  
-                    document.getElementById('measureADRbutton').onclick= function()
-                    {
-                      if (!areaRatio.value){
-                        if (!(projsec.value.startsWith('3.2')) & !(projsec.value.startsWith('2.8')) & !(projsec.value.startsWith('3.3')) & !(projsec.value.startsWith('2.7')) )
-                            areaRatio.style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
-                      }
-                      if (!prmRatio.value)
-                      prmRatio.style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
+                      eventSource.onerror = function (error) {
+                        console.error('Error occurred:', error);
+                        eventSource.close();  // Close on error
+                        PopupElement.textContent='Error occured while uploading the pdf to the Dropbox. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
+                        ShowPopUp();
+                      };
+
+                                selectunitA.addEventListener('change',function(){
+                                  value=document.getElementById('selectunitA').value
+                                  if (value=='mm2')
+                                    ratioAunit=1000000;
+                                  else
+                                    ratioAunit=1;
+                                })
+                                selectunitP.addEventListener('change',function(){
+                                  value=document.getElementById('selectunitP').value
+                                  if (value=='mm'){
+                                    ratioPunit=1000;
+                                  }
+                                  else
+                                    ratioPunit=1;
+
+                                })     
+                              // }
+                              // for 2.8 multiple pdfs
+                              // else{
+                              //   pdfnames=getSelectValues(elem)
+                              // }
+              } 
+
+              // Action for when the label is clicked (no checkbox change)
+              function handleLabelClick(event) {
+                // Action when label is clicked (e.g., log the selected project via the label)
+                let selectedLabel = event.target.textContent;
+                console.log("Label clicked: ", selectedLabel);
+                // Optional: 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 = '#919592'; // Highlight the selected item
+                    // Show loading indicator
+                  document.getElementById("all").style.display = "block";
+                  fetch('/getdropboxurl/'+ JSON.stringify(selectedLabel), {
+
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ filename: "your_pdf_filename_here.pdf" })
+                      })
+                      .then(response => response.blob())
+                      .then(blob => {
+                        document.getElementById("all").style.display = "none";
+                        const url = URL.createObjectURL(blob);
+                            // Set the URL to the iframe's src to load the content inside the page
+                            addIframeTab(selectedLabel,url);
+                            // addIframeTab("Google", "https://www.google.com");
+                      })
+                      .catch(function(jqXHR, textStatus, errorThrown) {
+                            // Handle error
+                            PopupElement.textContent = 'Error occurred while retrieving the dropbox URL. Refresh and try again. If the error continues, please contact the ADR team to fix it.';
+                            ShowPopUp();
+                          });
+              }
 
-                    }
-                    document.getElementById('radiosColors').removeAttribute('hidden');
-                    var scalelbl= document.createElement("label");
-                    scalelbl.innerText='Scale Document';
-                    scalelbl.id='measureLabel';
-                    var br1=  document.createElement("br");
-                    var areadiv=document.createElement("div");
-                    areadiv.id='areadiv'
-                    var areaRatiolbl= document.createElement("label");
-                    areaRatiolbl.innerText='Area:'
-                    areaRatiolbl.id='radiolbl';
-      
-                    var areaRatio= document.createElement("input");
-                    areaRatio.type='number';
-                    areaRatio.id='arealvlinput';
-                    areaRatio.className='lvlinput';
-                    areaRatio.name='areaRatio';
-                    areaRatio.style.marginLeft='78px';
-                    areaRatio.style.textAlign='right';
-                    areaRatio.step=".0000001";
+              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)
                     
-                    if( projsec.value.startsWith('3.2') || projsec.value.startsWith('2.8') || projsec.value.startsWith('3.3') || projsec.value.startsWith('2.1') || projsec.value.startsWith('2.7')){ 
-                      areaRatio.setAttribute('disabled',true)
-                      document.getElementById('selectunitA').setAttribute('disabled',true)
-                    }
-                    else{ // section 1.0
-                      areaRatio.removeAttribute('disabled')
-                      document.getElementById('selectunitA').removeAttribute('disabled')
+                    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
+                }
+              }
+
+
+
+              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')){
+                      doorSchedulePDF=relevantDocumentName
+                      console.log(doorSchedulePDF)
                     }
-                    areaRatio.addEventListener('change',function(){
-                      areaRatio.value=(Number(areaRatio.value)).toFixed(7)
-                      areaRatio.style.boxShadow='none';
-                    })
-                    areaRatio.required=true;
-                    selectunitA=document.getElementById('selectunitA')
-                    selectunitA.removeAttribute('hidden')
-                    
-                    areadiv.append(areaRatiolbl,areaRatio,selectunitA)
-                    var br2=  document.createElement("br");
-                    var br3=  document.createElement("br");
-                    var prmdiv=document.createElement("div");
-                    prmdiv.id='prmdiv'
-                    var prmRatiolbl= document.createElement("label");
-                    prmRatiolbl.innerText='Perimeter:'
-                    prmRatiolbl.id='radiolbl';
-
-                    var prmRatio= document.createElement("input");
-                    prmRatio.type='number';
-                    prmRatio.id='perimlvlinput';
-                    prmRatio.className='lvlinput';
-                    prmRatio.name='prmRatio';
-                    prmRatio.style.textAlign='right';
-                    // prmRatio.onchange=setNumberDecimal();
-                    prmRatio.style.marginLeft='49px';
-                    prmRatio.step=".0000001";
-                    prmRatio.addEventListener('change',function(){
-                      prmRatio.value=(Number(prmRatio.value)).toFixed(7)
-                      prmRatio.style.boxShadow='none';
-                    })
-                    prmRatio.required=true;
-                    selectunitP=document.getElementById('selectunitP')
-                    selectunitP.removeAttribute('hidden')
-
-                    prmdiv.append(prmRatiolbl, prmRatio,selectunitP)
-                    var ratiosdiv= document.getElementById("ratios");
-                    ratiosdiv.innerHTML='';
-                    ratiosdiv.append(scalelbl);
-                    ratiosdiv.append(br1);
-                    ratiosdiv.append(areadiv)
-                    ratiosdiv.append(prmdiv)
-                    areainpixels=data[0];
-                    prminpixels=data[1];    
-
-
-                  })
-                  .error(function(jqXHR, textStatus, errorThrown) { 
-                      PopupElement.textContent='Error occured while uploading the pdf to the Dropbox. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
-                      ShowPopUp();
+                    // Optional: Highlight the selected item
+                    document.querySelectorAll(".relv-item").forEach(item => {
+                      item.style.backgroundColor = ''; // Reset background color for all items
+
                     });
-                  selectunitA.addEventListener('change',function(){
-                    value=document.getElementById('selectunitA').value
-                    if (value=='mm2')
-                      ratioAunit=1000000;
-                    else
-                      ratioAunit=1;
-                  })
-                  selectunitP.addEventListener('change',function(){
-                    value=document.getElementById('selectunitP').value
-                    if (value=='mm'){
-                      ratioPunit=1000;
-                      // if (projsec.value.startsWith('3.2'))
-                      //   ratioPunit=100;
+                    event.target.closest(".relv-item").style.backgroundColor ='#d3f8d3'; // Highlight the selected item
+                    document.getElementById('relvselectid').style.boxShadow='';
+                  };
+
+
+                div.appendChild(label);
+
+                // 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);
+
+              document.addEventListener("click", function(event) {
+                const iframe = document.getElementById("pdfFrame");
+                if (!iframe.contains(event.target)) {
+                  const iframe = document.getElementById("pdfFrame");
+                  iframe.style.display = "none";
+                }
+              });
+                  document.getElementById('measureADRbutton').onclick= function()
+                  {
+                    if (!measSelect.value) {
+                        measSelect.style.boxShadow = '0 0 8px 2px rgb(255, 0, 0)';
+                        measSelect.setAttribute("required", "")
                     }
-                    else
-                      ratioPunit=1;
-
-                  })     
-                // }
-                // for 2.8 multiple pdfs
-                // else{
-                //   pdfnames=getSelectValues(elem)
-                // }
-    });
-          
-    });
-    
-document.addEventListener("click", function(event) {
-  const iframe = document.getElementById("pdfFrame");
-  if (!iframe.contains(event.target)) {
-    const iframe = document.getElementById("pdfFrame");
-    iframe.style.display = "none";
-  }
-});
-    document.getElementById('measureADRbutton').onclick= function()
-    {
-      if (!measSelect.value)
-        measSelect.style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
 
-    }
-  })
-    .error(function(jqXHR, textStatus, errorThrown) { 
+                    if (!relvSelect.value) {
+                        if (sectionNumber.startsWith('2.8')) {
+                          relvSelect.style.boxShadow = '0 0 8px 2px rgb(255, 0, 0)';
+                            relvSelect.setAttribute("required", "")
+                        }
+                    }
+
+
+                  }
+
+              }
+
+
+              if (document.getElementById('arealvlinput')){
+                if( projsec.value.startsWith('3.2') || projsec.value.startsWith('2.8') || projsec.value.startsWith('3.3')  || projsec.value.startsWith('2.1')  || projsec.value.startsWith('2.7')){
+                    document.getElementById('arealvlinput').setAttribute('disabled',true)
+                    document.getElementById('selectunitA').setAttribute('disabled',true)
+                  }
+                else{ // section 1.0
+                  document.getElementById('arealvlinput').removeAttribute('disabled')
+                  document.getElementById('selectunitA').removeAttribute('disabled')
+                }
+              }
+
+          };
+
+          eventSource.onerror = function (error) {
+          console.error('Error occurred:', error);
+          eventSource.close();  // Close on error
           PopupElement.textContent='Error occured while retrieving the Project Names. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
           ShowPopUp();
-     });
-     if (document.getElementById('arealvlinput')){
-        if( projsec.value.startsWith('3.2') || projsec.value.startsWith('2.8') || projsec.value.startsWith('3.3')  || projsec.value.startsWith('2.1')  || projsec.value.startsWith('2.7')){
-            document.getElementById('arealvlinput').setAttribute('disabled',true)
-            document.getElementById('selectunitA').setAttribute('disabled',true)
-          }
-          else{ // section 1.0
-            document.getElementById('arealvlinput').removeAttribute('disabled')
-            document.getElementById('selectunitA').removeAttribute('disabled')
-          }
-      }
+          };
+
 }  
 //___________________________________________________________________________________________________________
 //___________________________________________________________________________________________________________
@@ -1740,9 +2038,16 @@ function ImgSide(imgdata, spreadsheetLink, pdfLink) {
         legendbutton.style.boxShadow = 'none';
     });
 
-    legendbutton.addEventListener('click', function () {
+
+    if (sectionNumber.startsWith('2.8')){
+      legendbutton.setAttribute('disabled',true);
+      legendbutton.style.cursor='not-allowed';
+    }
+    else{
+      legendbutton.addEventListener('click', function () {
         window.open(spreadsheetLink);
     });
+    }
 //////////////////////////////////////////////////////////////
     var imgbutton = document.createElement("button");
     imgbutton.className = 'measureADRbutton2';
@@ -1882,8 +2187,7 @@ function getData(form) {
 
  console.log(formData,formvalues)
 // iterate through entries...
-
-  tomeasureproj=formvalues['measureselectname']; //proj name
+  tomeasureproj=formvalues['measureCheckbox']; //proj name
 
 
   if( formvalues['selectprojs'].startsWith('3.2') || formvalues['selectprojs'].startsWith('3.3') || formvalues['selectprojs'].startsWith('2.7') ){
@@ -1937,12 +2241,16 @@ function getData(form) {
         answers.push(tomeasureproj, 0,[] , ratio1, ratio2 ,pdfpath);
         formData.append('answers',JSON.stringify(answers)) 
        } 
-    else if (formvalues['selectprojs'].startsWith('2.8') || formvalues['selectprojs'].startsWith('2.1'))
+    else if (formvalues['selectprojs'].startsWith('2.1'))
     {
       answers.push(tomeasureproj, 0,[] , ratio1, ratio2 ,pdfpath);
       formData.append('answers',JSON.stringify(answers)) 
     }
-
+    else if (formvalues['selectprojs'].startsWith('2.8') )
+    {
+      answers.push(tomeasureproj, 0,[] , 0,0,pdfpath , doorSchedulePDF);
+      formData.append('answers',JSON.stringify(answers)) 
+    }
   }
  
   if  (formvalues['selectprojs'].startsWith('1.0') || formvalues['selectprojs'].startsWith('3.2') || formvalues['selectprojs'].startsWith('2.8') || formvalues['selectprojs'].startsWith('3.3') || formvalues['selectprojs'].startsWith('2.7') ) //formvalues['selectprojs'].startsWith('2.1') 
@@ -1950,26 +2258,17 @@ function getData(form) {
     // console.log(formData)
     $.ajax({
             type: "POST",
-            
             url: "/savebase64Img/",
-
-            // set content type header to use Flask response.get_json()
-            contentType: "application/json",
-
-            // convert data/object to JSON to send
-            data: formData,
+            contentType: "application/json",  // set content type header to use Flask response.get_json()
+            data: formData,// convert data/object to JSON to send
             processData: false, // Prevent jQuery from automatically processing the data
             contentType: false,
-            // files:formvalues['pdftodxfFilename'],
-
-            // expect JSON data in return (e.g. Flask jsonify)
-            // dataType: "json",
-
-            // handle response
             success: function(response) {
                 console.log(response);
             },
             error: function(err) {
+              var TopTextModal = document.getElementById("TopTextModalWarning");
+              TopTextModal.textContent='Error'
               PopupElement.textContent='Error occured. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
               ShowPopUp();
  
@@ -1979,8 +2278,8 @@ function getData(form) {
         // var mp3_url = 'https://media.geeksforgeeks.org/wp-content/uploads/20190531135120/beep.mp3';
         // (new Audio(mp3_url)).play()
         // retrieveLinks()
-           
-        startDropdownUpdates(); // Start the dropdown updates
+           if (!(formvalues['selectprojs'].startsWith('2.8')) )
+              startDropdownUpdates(); // Start the dropdown updates
 
 
             document.getElementById("loading").hidden = true;
@@ -2034,16 +2333,14 @@ function getData(form) {
                 
             }
             if (formvalues['selectprojs'].startsWith('2.8'))
-            { //
-            // /* data[0]--> img , data[1]-->dataframe (goes to legend lsa ) , data [2] -->pdf dropbox shareable link ,data[3]-> spreadsheetId, data[4],spreadsheeturl */   
+            { //base64.b64encode(buffer).decode('utf-8') ,pdflink,list1.to_dict(),  repeated_labels , not_found]
+             // /* data[0]--> img , data[1]-->dataframe (goes to legend lsa ) , data [2] -->pdf dropbox shareable link ,data[3]-> spreadsheetId, data[4],spreadsheeturl */   
                 // SimilarAreaDictionary=data[1];
                 // listofimages=data[0];
                 dropboxLink=data[1];
-                spreadsheetURL=data[2];
-                list1= data[3] // list of pdf markups 
-                SimilarAreaDictionary=data[4];
-
-                
+                list1= data[2] // list of pdf markups 
+                Repeated_Labels2_8=data[3]
+                Not_Found2_8=data[4]      
             }
             if (formvalues['selectprojs'].startsWith('2.2'))
               {
@@ -2080,6 +2377,26 @@ function getData(form) {
             // if (!(formvalues['selectprojs'].startsWith('2.8')))
             // {
               ImgSide(data[0],spreadsheetURL,dropboxLink)
+              if (formvalues['selectprojs'].startsWith('2.8')) {
+                let messages = [];
+
+                if (Repeated_Labels2_8.length > 0) {
+                    messages.push('The following label(s) are represented on multiple doors: ' + Repeated_Labels2_8);
+                }
+
+                if (Not_Found2_8.length > 0) {
+                    messages.push('The following label(s) not found on the plan: ' + Not_Found2_8);
+                }
+
+                if (messages.length > 0) {
+                    var TopTextModal = document.getElementById("TopTextModalWarning");
+                    TopTextModal.textContent = 'Warning';
+
+                    PopupElement.textContent = messages.join('\n'); // Show both messages if both conditions are met
+                    ShowPopUp();
+                }
+            }
+
             // }
               
             // else{
@@ -2118,7 +2435,7 @@ if (formvalues['selectprojs'].startsWith('1.0') || formvalues['selectprojs'].sta
             dict1: JSON.stringify(list1),
             spreadsheetId: spreadsheetId,
             pdfpathpath: JSON.stringify(pdfpath),
-            path: Object.fromEntries(formData)['measureselectname']
+            path: Object.fromEntries(formData)['measureCheckbox']
         }),
         dataType: "json",
         success: function (data1) {
@@ -2127,6 +2444,8 @@ if (formvalues['selectprojs'].startsWith('1.0') || formvalues['selectprojs'].sta
         },
         error: function (err) {
             console.error('Error occurred during first AJAX call:', err);
+            var TopTextModal = document.getElementById("TopTextModalWarning");
+            TopTextModal.textContent='Error'
             PopupElement.textContent = 'Error occurred. Refresh and try again. If the error continues, please contact the ADR team to fix it.';
             ShowPopUp();
         }
@@ -2146,7 +2465,7 @@ if (formvalues['selectprojs'].startsWith('1.0') || formvalues['selectprojs'].sta
                     dict1: JSON.stringify(list1),
                     spreadsheetId: spreadsheetId,
                     pdfpathpath: JSON.stringify(pdfpath),
-                    path: Object.fromEntries(formData)['measureselectname']
+                    path: Object.fromEntries(formData)['measureCheckbox']
                 }),
                 dataType: "json"
             });
@@ -2165,7 +2484,7 @@ if (formvalues['selectprojs'].startsWith('1.0') || formvalues['selectprojs'].sta
                     document.getElementById("loading").style.marginTop = '20%';
                     document.getElementById("loading").style.marginLeft = '65%';
 
-                    updatepreview([pdfpath, Object.fromEntries(formData)['measureselectname']]);
+                    updatepreview([pdfpath, Object.fromEntries(formData)['measureCheckbox']]);
 
                     await $.ajax({
                         type: "POST",
@@ -2174,7 +2493,7 @@ if (formvalues['selectprojs'].startsWith('1.0') || formvalues['selectprojs'].sta
                         data: JSON.stringify({
                             dict: JSON.stringify(SimilarAreaDictionary),
                             deletedrows: delrows2,
-                            path: Object.fromEntries(formData)['measureselectname'],
+                            path: Object.fromEntries(formData)['measureCheckbox'],
                             spreadsheetId: spreadsheetId,
                             areaPermArr: JSON.stringify(data[7]),
                             section: Object.fromEntries(formData)['selectprojs'],
@@ -2188,6 +2507,8 @@ if (formvalues['selectprojs'].startsWith('1.0') || formvalues['selectprojs'].sta
             }
 
         } catch (err) {
+            var TopTextModal = document.getElementById("TopTextModalWarning");
+            TopTextModal.textContent='Error'
             console.error('Error occurred during fetchAndCompareData:', err);
             PopupElement.textContent = 'Error occurred. Refresh and try again. If the error continues, please contact the ADR team to fix it.';
             ShowPopUp();
@@ -2213,80 +2534,55 @@ if (formvalues['selectprojs'].startsWith('1.0') || formvalues['selectprojs'].sta
             /////////////////////////
   });
 }
-// trial for 2.1 - tameem's code--- delete and deploy in the above if statement
-//   else{
-//   $.ajax({
-//             type: "POST",
-//             url: "/2.1Trial/",
-
-//             // set content type header to use Flask response.get_json()
-//             contentType: "application/json",
-
-//             // convert data/object to JSON to send
-//             data: JSON.stringify({allvalues:answers}),
-
-//             // expect JSON data in return (e.g. Flask jsonify)
-//             dataType: "json",
-
-//             // handle response
-//             success: function(response) {
-//                 console.log(response);
-//             },
-//             error: function(err) {
-//               PopupElement.textContent='Error occured. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
-//               ShowPopUp();
-//             }
-//           }).done(function(data){
-//             spreadsheetURL=data[0];
-//             var backimg=document.getElementById('backgroundimg');
-//             var rightside=document.getElementById('rightside');
-//             document.getElementById("loading").hidden = true;
-//             document.getElementById('duplicater').removeAttribute('hidden');
-//             document.getElementById('doneebackground').removeAttribute('hidden');
-//             document.getElementById('summarytoXML').removeAttribute('hidden');
-//             document.getElementById('measureADRbutton').removeAttribute('disabled');
-//             document.getElementById('measureADRbutton').style.cursor='pointer';
-//             document.getElementById('measureADRbutton').style.color = 'white';
-//             document.getElementById('measureADRbutton').style.backgroundColor="#16c72e";
-
-//             document.getElementById('measureADRbutton').addEventListener('mouseover',function(){
-//               document.getElementById('measureADRbutton').style.color='black';
-//               document.getElementById('measureADRbutton').style.boxShadow=' 0 0 8px 2px #16c72e';
-//             })
-
-//             document.getElementById('measureADRbutton').addEventListener('mouseout',function(){
-//               document.getElementById('measureADRbutton').style.color='white';
-//               document.getElementById('measureADRbutton').style.boxShadow='none';
-//             });
-
-//             var legendbutton= document.createElement("button");
-//             legendbutton.className='measureADRbutton2';
-//             legendbutton.innerText='Legend and Data created';
-//             legendbutton.style.backgroundColor='rgb(5, 43, 235)';
-//             legendbutton.addEventListener('mouseover',function(){
-//               legendbutton.style.boxShadow='0 0 8px 2px rgb(5, 43, 235)';
-//             })
-//             legendbutton.addEventListener('mouseout',function(){
-//               legendbutton.style.boxShadow='none';
-//             })
-
-//             legendbutton.addEventListener('click',function(){
-//               window.open( spreadsheetURL);
-          
-//             })
-//             underimg.append(legendbutton);
-
-//           })
-
-// }
 
 }
 //___________________________________________________________________________________________________________
 //___________________________________________________________________________________________________________
 document.getElementById("myForm").addEventListener("submit", function (e) {
-  e.preventDefault();
-  getData(e.target);
+    let isChecked = document.querySelector('input[name="measureCheckbox"]:checked') !== null;
+    let sectionNumber = projsec.value; // Ensure projsec is defined
+    let isRelvClicked = document.querySelector(".relv-item[style*='background-color']") !== null;
+    
+    let TopTextModal = document.getElementById("TopTextModal");
+    TopTextModal.textContent = "Warning: Missing Inputs";
+    if (sectionNumber.startsWith('2.8')) {
+
+        // If section starts with '2.8', both measureCheckbox and relv-item must be selected
+        if (!isChecked & !isRelvClicked) {
+            document.getElementById('relvselectid').style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
+            e.preventDefault(); // Prevent form submission
+            PopupElement.textContent = "Please select at least one project from 'Documents to Measure' and one relevant item rom 'Other Relevant Documents' before proceeding!";
+            ShowPopUp();
+            return;
+        }
+        else if (!isChecked){
+          
+            e.preventDefault(); // Prevent form submission
+            PopupElement.textContent = "Please select at least one project from 'Documents to Measure' before proceeding!";
+            ShowPopUp();
+            return;
+        }
+        else if (!isRelvClicked){
+            document.getElementById('relvselectid').style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
+            e.preventDefault(); // Prevent form submission
+            PopupElement.textContent = "Please select at least one relevant item from 'Other Relevant Documents' before proceeding!";
+            ShowPopUp();
+            return;
+        }
+    } else {
+        // If section is not '2.8', only measureCheckbox is required
+        if (!isChecked) {
+            e.preventDefault(); // Prevent form submission
+            PopupElement.textContent = "Please select at least one project before proceeding from 'Documents to Measure' section!";
+            ShowPopUp();
+            return;
+        }
+    }
+
+    // If validation passes, proceed with form submission
+    getData(e.target);
 });
+
 ////////////////////////////////////////////
 var measitemVal='';
 
@@ -2930,7 +3226,7 @@ console.log()
 if (sectionNumber.startsWith('2.7'))
 {
     textextra= cloneExtra.children[0]
-    textextra.style.backgroundColor = "#7c7c7c;";
+    textextra.style.backgroundColor = "rgba(101, 101, 101, 0.27)";
     textextra.style.cursor='not-allowed';
     textextra.disabled="disabled";
 
@@ -2938,7 +3234,7 @@ if (sectionNumber.startsWith('2.7'))
 if (sectionNumber.startsWith('2.8'))
 {
   text2extra= cloneExtra.children[3]
-  text2extra.style.backgroundColor = "#7c7c7c;";
+  text2extra.style.backgroundColor ="rgba(101, 101, 101, 0.27)";
   text2extra.style.cursor='not-allowed';
   text2extra.disabled="disabled";
 }
@@ -3375,9 +3671,12 @@ function filterFunction(id) {
   input = document.getElementById(id);
   filter = input.value.toUpperCase();
   if (id.toString().startsWith('tomeasure'))
-    a = document.getElementById("measureselectid").children;
+      a = document.querySelectorAll("#measureContainer .measure-item");
+
+    // a = document.getElementById("measureselectid").children;
   else
-    a = document.getElementById("relvselectid").children;
+    // a = document.getElementById("relvselectid").children;
+    a = document.querySelectorAll("#relvselectid .relv-item");
   // a = div.getElementsByTagName("option");
   for (i = 0; i < a.length; i++) {
     txtValue = a[i].textContent || a[i].innerText;
@@ -3401,7 +3700,7 @@ document.getElementById("refreshDropboxButtonID").disabled=false;
 
   document.getElementById("refreshDropboxButtonID").onclick = function()
   {
-    TopTextModal.textContent='Warning!';
+    TopTextModal.textContent='Warning: Dropbox Refresh';
     if (document.getElementById("refreshDropboxButtonID").disabled==false)
     overlayme.style.display = "block";
     overlaymeText.textContent='The console updates projects retrieved from Dropbox automatically at 9:00 am and 9:00 p.m. If you need to access any projects in between, just click on this button. Please note that it will refresh the files related to the project you chose only.'; 
@@ -3415,7 +3714,7 @@ var TopTextModal = document.getElementById("TopTextModalWarning");
 document.getElementById("refreshAPIbutton").disabled=false;
 document.getElementById("refreshAPIbutton").onclick = function()
   {
-    TopTextModal.textContent='Warning!';
+    TopTextModal.textContent='Warning: MC Refresh';
     if (document.getElementById("refreshAPIbutton").disabled==false)
     {
       console.log(overlaymeText.textContent)
@@ -3432,7 +3731,8 @@ document.getElementById("popupforextratext").onclick = function(){
 if (sectionNumber.startsWith('2.7'))
 {
     textextra= document.getElementById("textextra")
-    textextra.style.backgroundColor = "#7c7c7c;";
+    textextra.style.backgroundColor = "rgba(101, 101, 101, 0.27)";
+    // textextra.style.border='2px solid #2f83c6'
     textextra.style.cursor='not-allowed';
     textextra.disabled="disabled";
 
@@ -3440,7 +3740,7 @@ if (sectionNumber.startsWith('2.7'))
 if (sectionNumber.startsWith('2.8'))
 {
   text2extra= document.getElementById("text2extra")
-  text2extra.style.backgroundColor = "#7c7c7c;";
+  text2extra.style.backgroundColor = "rgba(101, 101, 101, 0.27)";
   text2extra.style.cursor='not-allowed';
   text2extra.disabled="disabled";
 }
@@ -3460,7 +3760,7 @@ function confirmDialogR() {
  /* code executed if confirm is clicked */ 
     overlayme.style.display = "none";
    console.log(document.getElementById("confirm").parentElement.parentElement.children[0].textContent)
-    if (document.getElementById("confirm").parentElement.parentElement.children[0].textContent.startsWith('Are'))
+    if (document.getElementById("confirm").parentElement.parentElement.children[0].textContent.startsWith('The'))
     {
       console.log('hereeeeeeeee')
       callrefreshDropbox();