MeasurementOrg

Sleeping

App Files Files Community

Marthee commited on May 3, 2025

Commit

8245187

verified ·

1 Parent(s): f765d50

Upload tableDetection.html

Browse files

Files changed (1) hide show

templates/tableDetection.html +1266 -0

templates/tableDetection.html ADDED Viewed

	@@ -0,0 +1,1266 @@

+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <link rel="stylesheet" href="https://use.typekit.net/zos0ars.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="static/style.css">
+    <link rel="stylesheet" href="static/MenuStyle.css">
+    <link rel="stylesheet" href="static/LegendPageStyle.css">
+    <link rel="stylesheet" href="static/popups.css">
+    <link rel="stylesheet" href="static/IMG-Larger.css">
+    <link rel="stylesheet" href="static/searchButton.css">
+    <meta charset="utf-8">
+    <title>ADR Console</title>
+    <link rel = "icon"  type = "image/png"  sizes = "180x154" href = "static/images/TSAlogoCropped180x154.png">
+    <link rel = "icon" type = "image/png" sizes = "32x27" href = "static/images/TSAlogoCropped32x27.png">
+    <link rel = "icon" type = "image/png" sizes = "16x14" href = "static/images/TSAlogoCropped16x14.png">
+    <link rel = "mask-icon" href = "static/images/TSAlogoCropped180x154.png">
+    <link rel = "shortcut icon" href = "static/images/TSAlogoCropped180x154.png">
+    <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
+    <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-sunburst.min.js"></script>
+    <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-data-adapter.min.js"></script>
+  </head>
+  <body >
+    <div id="all">
+      {% include 'loading.html' %}
+    </div>
+    <!--Main tab links-->
+    <div class="tab" >
+      <div class="container"  id="toggle">
+        <div class="bar1"></div>
+        <div class="bar2"></div>
+        <div class="bar3"></div>
+      </div>
+      <button class="tablinks"  id="pagetitle" onclick="openTab(event, 'home')">ADR Console <i class="fa fa-home" > </i></button>
+      <!-- <button class="tablinks" id="LegendHist" onclick="openTab(event, 'legends')">Legends History  <i class="fa fa-caret-down"></i></button> -->
+      <a class="tablinks" id="LegendHist" href="{{ url_for('legendDirectory') }}">Legends History <i class="fa fa-caret-down"></i></a>
+      <button class="dropbtn" onclick="userguideclick()"><img id="infoImg" src="data:image/png;base64,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"></button>
+    </div>
+    <div id="mySidebar"  class="slide-out">
+      <div id="menuOptions">
+        <li><a href="{{ url_for('measurementConsoleFn') }}">Measure Plans </a></li>
+        <li><a href="{{ url_for('searchDocument') }}">Search in Documents</a></li>
+        <li onclick=redirectOmarSearch()>Table Detection</li>
+        </div>
+    </div>
+    <form method="post"  id="myForm" enctype="multipart/form-data">
+        <div id ="">
+            <select name="selectproj" class="selectionsProj" id="selectionsProjid"  required  >     </select>
+        </div>
+        <div id ="projectpart">
+            <select name="selectprojp" class="selectionsProjp" id="selectionsProjpid" required>    </select>
+        </div>
+        <div id ="projectsection">
+            <select name="selectprojs" class="selectionsProjs" onchange=getproj() required>   </select>
+        </div>
+        <div id ="tomeasurediv">
+            <div>
+              <label id="measureLabel">Document To Measure</label>
+                <input type="search" onkeyup=filterFunction(this.id) id="tomeasureSearchInput">
+                <!-- <button id="refreshDropboxButtonID"></button>  -->
+                <i hidden class="fa fa-dropbox fa-lg" id="refreshDropboxButtonID">
+                  <span class="dropboxtip">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.</span> </i>
+            </div>
+            <div id="measureCheckbox">
+              <!-- <select style="margin-left: -1%;" hidden name="measureselectname"  id="measureselectid"  multiple size="5"></select> -->
+              <div id="measureContainer" hidden required></div>
+            </div>
+        </div>
+        <button id="Newtablebutton">Table Detect</button>
+    </form>
+    <!-- <button id="downloadbutton" hidden>Download Tables</button>  -->
+    <input type="button" value="Download Tables" id="downloadbutton" style="display: none;" />
+    <div id="progressBar" hidden>
+        <div id="progress">0%</div>
+    </div>
+    <!-- Modal popup box -->
+    <div id="mpopupBox" class="mpopup" name="tobeclosed">
+        <!-- Modal content -->
+        <div class="modal-content">
+            <div class="modal-header">
+            <button type="button" class="closeModal" data-dismiss="modal">&times;</button>
+                <h2 id="TopTextModal">Error</h2>
+            </div>
+            <div class="modal-body">
+            <p id="modal-bodyText">
+            </p>
+            <br>
+            </div>
+        </div>
+    </div>
+    <!-- Modal popup box -->
+    <div id="mpopupBox" class="mpopup" name="tobeclosed">
+        <!-- Modal content -->
+        <div class="modal-content">
+            <div class="modal-header">
+            <button type="button" class="closeModal" data-dismiss="modal">&times;</button>
+                <h2 id="TopTextModal">Error</h2>
+            </div>
+            <div class="modal-body">
+            <p id="modal-bodyText">
+            </p>
+            <br>
+            </div>
+        </div>
+    </div>
+    <div id="loading"  hidden> </div>
+  </body>
+</html>
+<script>
+    var closeButtons = document.querySelectorAll(".closeModal");
+    var allCloseDivs = document.getElementsByName("tobeclosed");
+    closeButtons.forEach(function(button) {
+        button.addEventListener("click", function() {
+            allCloseDivs.forEach(function(div) {
+                div.style.display = "none";
+            });
+        });
+    });
+   document.getElementById("myForm").addEventListener("submit", function (e) {
+  e.preventDefault(); // Prevent form submission
+    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 (!isChecked){
+            PopupElement.textContent = "Please select at least one project from 'Documents to Measure' before proceeding!";
+            ShowPopUp();
+            return;
+        }
+    // If validation passes, proceed with form submission
+    getData(e.target);
+});
+    function getData(form) {
+    document.getElementById("loading").hidden = false;
+    document.getElementById('Newtablebutton').setAttribute('disabled',true);
+    document.getElementById('Newtablebutton').style.cursor='not-allowed';
+    document.getElementById('Newtablebutton').style.boxShadow = 'none';
+    document.getElementById('Newtablebutton').style.color = 'white';
+    document.getElementById('Newtablebutton').style.backgroundColor="rgb(154,152,152)";
+    var formData = new FormData(form);
+    // clearInterval(interval)
+    val=0;
+    answers=[];
+    tomeasureproj='';
+    pdfpath=[];
+    formvalues=Object.fromEntries(formData);
+    tomeasureproj=formvalues['measureCheckbox']; //proj name
+    answers.push(tomeasureproj);
+    formData.append('answers',JSON.stringify(answers))
+// Place this once in your JS before any $.ajax calls
+$.ajaxTransport("+binary", function(options, originalOptions, jqXHR) {
+  if (window.FormData && (
+        (options.dataType && options.dataType === "binary") ||
+        (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) ||
+                          (window.Blob        && options.data instanceof Blob)))
+      )) {
+    return {
+      send: function(headers, callback) {
+        const xhr = new XMLHttpRequest();
+        xhr.open(options.type, options.url, options.async ?? true,
+                 options.username, options.password);
+        // Apply custom fields like responseType
+        xhr.responseType = options.responseType || "blob";
+        if (options.xhrFields) {
+          for (const field in options.xhrFields) {
+            xhr[field] = options.xhrFields[field];
+          }
+        }
+        xhr.onload = function() {
+          // Package the response as the declared dataType
+          const data = {};
+          data[options.dataType] = xhr.response;
+          callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
+        };
+        xhr.send(options.data || null);
+      },
+      abort: function() {
+        jqXHR.abort();
+      }
+    };
+  }
+});
+    $.ajax({
+            // type: "POST",
+            // url: "/savedetectedtables/",
+            // // 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,
+            // xhr: function() {
+            //     const x = $.ajaxSettings.xhr();
+            //     x.responseType = "blob";   // set blob mode
+            //     return x;
+            // },
+            url: "/savedetectedtables/",
+            method: "POST",
+            data: formData,
+            processData: false,
+            contentType: false,
+            dataType: 'binary',         // match your transport
+            responseType: 'blob',       // tell the transport to use blob
+            success: function(blob) {
+                console.log(blob);
+                // downloadPdf(data,'detected_tables.xlsx')
+                console.log('typeof(blob) = ',typeof(blob))
+                if (!blob || blob.size === 0) {
+                  // empty response → show your “no tables” popup
+                  PopupElement.textContent = "No tables detected in the document.";
+                  ShowPopUp();
+                  return;
+                }
+                else{
+                  console.log("gowa el else")
+                  downloadPdf(blob,'detected_tables.xlsx')
+              }
+            },
+            error: function(err) {
+              var TopTextModal = document.getElementById("TopTextModal");
+              TopTextModal.textContent='Error'
+              PopupElement.textContent='Error occured. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
+              ShowPopUp();
+            }
+          })
+          .done(function(data){
+            console.log(data)
+            document.getElementById("loading").hidden = true;
+            document.getElementById('Newtablebutton').removeAttribute('disabled');
+            document.getElementById('Newtablebutton').style.cursor='pointer';
+            document.getElementById('Newtablebutton').style.color = 'white';
+            document.getElementById('Newtablebutton').style.backgroundColor="#16c72e";
+            document.getElementById('Newtablebutton').style.padding='10px 102px';
+            document.getElementById('Newtablebutton').addEventListener('mouseover',function(){
+              document.getElementById('Newtablebutton').style.color='black';
+              document.getElementById('Newtablebutton').style.boxShadow=' 0 0 8px 2px #16c72e';
+            })
+            document.getElementById('Newtablebutton').addEventListener('mouseout',function(){
+              document.getElementById('Newtablebutton').style.color='white';
+              document.getElementById('Newtablebutton').style.boxShadow='none';
+            });
+            // downloadPdf(data,'detected_tables.xlsx')
+            // downloadPdf(blob,'detected_tables.xlsx')
+            // document.getElementById('downloadbutton').hidden = false;
+            document.getElementById('downloadbutton').style.display = 'inline-block';
+            // document.getElementById('downloadbutton').onclick=downloadPdf(data,'detected_tables.xlsx')
+            const btn = document.getElementById('downloadbutton');
+            btn.addEventListener('click', () => {
+              downloadPdf(data, 'detected_tables.xlsx');
+            });
+          })
+        };
+    document.getElementById('Newtablebutton').onclick= function()
+                  {
+                    if (!measSelect.value) {
+                        measSelect.style.boxShadow = '0 0 8px 2px rgb(255, 0, 0)';
+                        measSelect.setAttribute("required", "")
+                    }
+                   }
+    document.getElementById('Newtablebutton').addEventListener('click',function(){
+  if (!document.getElementsByClassName('selectionsProj')[0].value)
+    document.getElementsByClassName('selectionsProj')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
+  if (!document.getElementsByClassName('selectionsProjp')[0].value)
+    document.getElementsByClassName('selectionsProjp')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
+  if (!document.getElementsByClassName('selectionsProjs')[0].value)
+    document.getElementsByClassName('selectionsProjs')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+if (document.getElementById('imgContainer')) {
+    document.getElementById('imgContainer').innerHTML = '';
+}
+});
+    var mpopup = document.getElementById('mpopupBox');
+// Select close action element
+// var close = document.getElementsByClassName("closeModal")[0];
+function ShowPopUp(){
+// Open modal
+    mpopup.style.display = "block";
+}
+// Close modal once close element is clicked
+//   close.onclick = function() {
+//     mpopup.style.display = "none";
+// };
+// Close modal when user clicks outside of the modal box
+  window.onclick = function(event) {
+    if (event.target == mpopup) {
+        mpopup.style.display = "none";
+    }
+};
+// closeDialog.onclick = function() {
+//     dialog_container.style.display = "none";
+// };
+var dialog_container = document.getElementById('dialog-container');
+// Select close action element
+// var closeDialog = document.getElementsByClassName("closeModal")[0];
+function ShowPopUpWarning(){
+// Open modal
+dialog_container.style.display = "block";
+}
+// Close modal once close element is clicked
+// closeDialog.onclick = function() {
+//     console.log()
+//     dialog_container.style.display = "none";
+// };
+// Close modal when user clicks outside of the modal box
+  window.onclick = function(event) {
+    if (event.target == dialog_container) {
+      dialog_container.style.display = "none";
+    }
+};
+PopupElement=document.getElementById('modal-bodyText');
+var ActiveSections=['1.0','2.1','2.6','2.7','2.8','3.2','3.3']
+var menuItems = document.querySelectorAll("#UserGuidemenuOptions li");
+menuItems.forEach(function (item) {
+    // Extract the section number (first part of the text)
+    var sectionNumber = item.textContent.trim().split(" ")[0];
+    // If the section is not in ActiveSections, disable it
+    if (!ActiveSections.includes(sectionNumber)) {
+        item.id = "disabledSection";  // Assign ID
+        item.style.color = "#bdbcbc"; // Greyed-out text
+        item.style.cursor = "not-allowed"; // Change cursor
+        item.onclick = null; // Disable clicking
+    }
+});
+function updateProgressBar(value) {
+    const progressBar = document.getElementById('progress');
+    progressBar.style.width = value + '%';
+    progressBar.innerText = Math.round(value) + '%';
+}
+    function redirectOmarSearch(){
+        $toggle.classList.toggle("change");
+        var isOpen = $mySidebar.classList.contains('slide-out');
+        $mySidebar.setAttribute('class', isOpen ? 'slide-in' : 'slide-out');
+        w3_close()
+      }
+      sectionSelect=document.getElementById('section-select');
+$(sectionSelect).select2({
+  closeOnSelect: true,
+  width:'20ch'
+  });
+// add project names to first dropdown from google sheet
+firstdropdown=document.getElementsByClassName('selectionsProj')[0];
+seconddropdown=document.getElementsByClassName('selectionsProjp')[0];
+thirddropdown=document.getElementsByClassName('selectionsProjs')[0];
+$(firstdropdown).select2({
+  placeholder:'Projects',
+  closeOnSelect: true,
+  width:'51ch'
+  });
+$(seconddropdown).select2({
+  placeholder:'Project Parts',
+  closeOnSelect: true,
+  width:'51ch'
+  });
+$(thirddropdown).select2({
+  placeholder:'Sections',
+  closeOnSelect: true,
+  width:'51ch'
+  });
+var measSelect = document.getElementById("measureselectid");
+// var relvSelect = document.getElementById("relvselectid");
+document.getElementById("all").style.display = "block";
+PrjNamesArray=[];
+PrjPartsArray=[];
+PrjSectionsArray=[];
+var partsArrwithID=[];
+var firstDpwnValue;
+var prjids=[]
+displayprjnames()
+function displayprjnames(){
+  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]);
+                  }
+                }
+  }
+      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*/
+$(firstdropdown).on("change", function (e) {
+  console.log('clickeds')
+  firstDpwnValue=firstdropdown.value;
+  seconddropdown.innerHTML='';
+  var op0 = document.createElement("OPTION") ;
+  op0.text= 'Project Part'
+  op0.value= "";
+  op0.hidden=true;
+  seconddropdown.add(op0);
+  var ii, L = seconddropdown.options.length - 1;
+  for(ii = L; ii >= 0; ii--) {
+        if (seconddropdown.options[ii].value)
+        seconddropdown.remove(ii);
+      }
+  displayprojparts(prjids[(firstdropdown.selectedIndex)-1]);
+})
+var partsArrIDsonly=[]
+function displayprojparts(val){
+  document.getElementById("all").style.display = "block";
+  console.log(val)
+  $.get('/getprojectparts/'+JSON.stringify(val))
+  .success(function(data){
+    document.getElementById("all").style.display = "none";
+    partsArrwithID= data[0];
+    partsArrIDsonly= data[1];
+    for (let i=0;i<data[0].length;i++)
+    {
+      opt=document.createElement("option");
+      opt.value=data[0][i];
+      opt.text=data[0][i];
+      seconddropdown.append(opt);
+      PrjPartsArray.push(data[0][i]);
+    }
+  })
+  .error(function(jqXHR, textStatus, errorThrown) {
+          PopupElement.textContent='Error occured while retrieving the Project Parts. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
+          ShowPopUp();
+     });
+}
+$(seconddropdown).on("change", function (e) {
+    thirddropdown.innerHTML='';
+    var op0 = document.createElement("OPTION") ;
+    op0.text= 'Section'
+    op0.value= "";
+    op0.hidden=true;
+    thirddropdown.add(op0);
+  displayprojsections(prjids[(firstdropdown.selectedIndex)-1],partsArrIDsonly[(seconddropdown.selectedIndex)-1]);
+})
+function isValueNotInDropdown(dropdown, value) {
+  // const dropdown = document.getElementById(dropdownId);
+  const values = Array.from(dropdown.options).map(option => option.value);
+  return !values.includes(value); // Check if the value is not in dropdown values
+}
+function displayprojsections(projectid,Partid){
+  console.log(seconddropdown.selectedIndex)
+  document.getElementById("all").style.display = "block";
+  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]))
+  .done(function(data) {
+    document.getElementById("all").style.display = "none";
+    for (let i = 0; i < data.length; i++) {
+      let valueDoesNotExist = isValueNotInDropdown(thirddropdown, data[i]);
+      if (valueDoesNotExist) {
+        let opt = document.createElement("option");
+        opt.value = data[i];
+        opt.text = data[i];
+        let isActive = false;
+        for (let d = 0; d < ActiveSections.length; d++) {
+          if (data[i].startsWith(ActiveSections[d])) {
+            isActive = true;
+            break; // Exit loop early if active
+          }
+        }
+        if (!isActive) {
+          opt.style.color = '#bdbcbc';
+          opt.style.cursor = 'not-allowed';
+          opt.setAttribute('disabled', true);
+        }
+        thirddropdown.append(opt);
+        PrjSectionsArray.push(data[i]);
+      }
+    }
+  })
+  .fail(function(jqXHR, textStatus, errorThrown) {
+          PopupElement.textContent='Error occured while retrieving the Project Sections. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
+          ShowPopUp();
+     });
+}
+function filterFunction(id) {
+  var input, filter, ul, li, a, i;
+  input = document.getElementById(id);
+  filter = input.value.toUpperCase();
+  if (id.toString().startsWith('tomeasure'))
+      a = document.querySelectorAll("#measureContainer .measure-item");
+    // a = document.getElementById("measureselectid").children;
+//   else
+//     // 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;
+    if (txtValue.toUpperCase().indexOf(filter) > -1) {
+      a[i].style.display = "";
+    } else {
+      a[i].style.display = "none";
+    }
+  }
+}
+function getproj(){
+    var proj = document.getElementsByClassName("selectionsProj")[0];
+    var projectVal=proj.value.toString() //selected project
+    var inputs = document.getElementsByTagName("select")[1]; //second dropdown(project part)
+    var p=document.getElementById("selectionsProjpid") //project part
+    var sections = document.getElementsByClassName("selectionsProjs")[0];
+    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)
+                //   }
+                //   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 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;
+                });
+                // 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);
+                //       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=selectedValue;
+                  measSelect.style.boxShadow='none';
+                  console.log(projsec.value)
+            //       if (!(projsec.value.startsWith('2.6') || projsec.value.startsWith('2.8'))) {
+            //           document.getElementById("all").style.display = "block";
+            //           pixelArr=[projname.value, projpart.value,projsec.value, pdfname]
+            //           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 {
+            //                   var data = JSON.parse(event.data);  // Assuming the result is a JSON array
+            //                   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('Newtablebutton').onclick= function()
+            //                       {
+            //                         if (!areaRatio.value){
+            //                           if (!(projsec.value.startsWith('3.2')) & !(projsec.value.startsWith('2.8')) & !(projsec.value.startsWith('2.6')) &  !(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.6') || 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') ||  projsec.value.startsWith('2.6')) {
+            //                         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)'
+            //                       }
+            //             };
+            //           }
+            //           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)
+            //                   // }
+            //   }
+            //   else{
+            //     document.getElementById('radiosColors').removeAttribute('hidden')
+            //   }
+            }
+              // Action for when the label is clicked (no checkbox change)
+            //   function handleLabelClick(event) {
+            //           let selectedLabel = event.target.textContent;
+            //           console.log("Label clicked: ", selectedLabel);
+            //         // Reset background only for items whose checkbox is **not** checked
+            //             document.querySelectorAll(".measure-item").forEach(item => {
+            //               const checkbox = item.querySelector('input[type="checkbox"]');
+            //               if (!checkbox.checked) {
+            //                 item.style.backgroundColor = '';
+            //               }
+            //             });
+            //             // Optionally highlight the clicked div (even though its checkbox isn’t selected)
+            //             const clickedDiv = event.target.closest(".measure-item");
+            //             clickedDiv.style.backgroundColor = '#919592';
+            //             // Show loading spinner
+            //             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" }) // ← Replace with real value if dynamic
+            //             })
+            //             .then(response => response.blob())
+            //             .then(blob => {
+            //               document.getElementById("all").style.display = "none";
+            //               const url = URL.createObjectURL(blob);
+            //             //   addIframeTab(selectedLabel, url);
+            //             })
+            //             .catch(function (jqXHR, textStatus, errorThrown) {
+            //               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();
+            //             });
+            //     }
+              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;
+                    // 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 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;
+            //           // 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);
+            //           }
+            //         }
+            //       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('Newtablebutton').onclick= function()
+                  {
+                    if (!measSelect.value) {
+                        measSelect.style.boxShadow = '0 0 8px 2px rgb(255, 0, 0)';
+                        measSelect.setAttribute("required", "")
+                    }
+                    // if (!relvSelect.value) {
+                    //     if (sectionNumber.startsWith('2.8') || sectionNumber.startsWith('2.6')) {
+                    //       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('2.6') || 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')
+                }
+              }
+            //   if (!(thirddropdown.value.startsWith('2.8')||thirddropdown.value.startsWith('2.6')) ) {
+            //     document.getElementById("relvselectid").classList.add("disabled");
+            //     document.getElementById("relvoverlay").style.display = "block";
+            //   } else {
+            //     document.getElementById("relvselectid").classList.remove("disabled");
+            //      document.getElementById("relvoverlay").style.display = "none";
+            //   }
+          };
+          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();
+          };
+}
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+function downloadPdf(blob,downloadPDFName) {
+    // const url = URL.createObjectURL(blob);
+    // var link = document.createElement('a');
+    // link.href = url;
+    // link.download = downloadPDFName;
+    // link.dispatchEvent(new MouseEvent('click'));
+    const url = URL.createObjectURL(blob);
+    const a   = document.createElement('a');
+    a.style.display = 'none';
+    a.href        = url;
+    a.download    = downloadPDFName;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+/*Menu bar icon mySidebar and Toggle*/
+var $mySidebar = document.getElementById('mySidebar');
+    var $toggle = document.getElementById('toggle');
+    $toggle.addEventListener('click', function() {
+      var isOpen = $mySidebar.classList.contains('slide-in');
+        w3_open();
+        $mySidebar.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
+        $toggle.classList.toggle("change");
+      if ($mySidebar.classList.contains('slide-out')){
+        w3_close()
+    }
+    });
+    function w3_open() {
+    document.getElementById("home").style.marginLeft = "25%";
+    document.getElementById("legends").style.marginLeft = "25%";
+    document.getElementById("home").style.transition= '0.8s';
+    document.getElementById("legends").style.transition= '0.8s';
+    document.getElementById("mySidebar").style.width = "25%";
+    document.getElementById("mySidebar").style.display = "block";
+  }
+  function w3_close() {
+    document.getElementById("home").style.marginLeft = "0%";
+    document.getElementById("legends").style.marginLeft = "0%";
+    document.getElementById("home").style.transition= '1.5s'
+    document.getElementById("legends").style.transition= '1.5s'
+    document.getElementById("mySidebar").style.display = "none";
+  }
+  function openTab(evt, tabname) {
+  var i, tabcontent, tablinks;
+  // Hide all tab contents
+  tabcontent = document.getElementsByClassName("tabcontent");
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = "none";
+  }
+  // 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 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.');
+  }
+}
+</script>