MeasurementTesting

Sleeping

App Files Files Community

Marthee commited on Nov 27, 2023

Commit

e777287

1 Parent(s): 8b139d2

Upload wordSearch.html

Browse files

Files changed (1) hide show

templates/wordSearch.html +1021 -0

templates/wordSearch.html ADDED Viewed

	@@ -0,0 +1,1021 @@

+<!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="https://www.w3schools.com/w3css/4/w3.css">
+    <link rel="stylesheet" href="static/MenuStyle.css">
+    <link rel="stylesheet" href="static/LegendPageStyle.css">
+    <link rel="stylesheet" href="static/wordSearchCss.css">
+    <link rel="stylesheet" href="static/popups.css">
+    <link rel="stylesheet" href="static/IMG-Larger.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>
+      <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 onclick=redirectAlaaSearch()>Search in Documents</li>
+        <!-- <li><a href="{{ url_for('searchDocument') }}">Search in Documents</a></li> -->
+        </div>
+    </div>
+    <div id="home" class="tabcontent" >
+        <div id="loading"  hidden> </div>
+        <div id="canvaswindow" hidden="until-found">
+          <canvas id="myCanvas"></canvas>
+          <br>
+            <input type="button" value="Draw New Shape" id="NewShapeButtonId" />
+            <input type="button" value="Undo" id="undoButtonId" />
+            <div id="colorpickers">
+              <input type="color" id="color" value="#2FFFFF" >
+            </div>
+            <input type="button" value="Save" id="savecanvas" />
+        </div>
+    <form method="post"  id="myForm" >
+      <div class="w3-container">
+              <div class="w3-row">
+                <a href="javascript:void(0)" id="FileTabID" onclick="openFileFolderTab(event, 'file');">
+                  <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding" style="width: 185px; font-family: 'acumin-pro', sans-serif; font-style: normal; font-size: 17;">File</div>
+                </a>
+                <a href="javascript:void(0)" id="FolderTabID" onclick="openFileFolderTab(event, 'folder');">
+                  <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding" style="width: 185px; font-family: 'acumin-pro', sans-serif; font-style: normal; font-size: 17;">Folder</div>
+                </a>
+              </div>
+              <div id="file" class="w3-container FileFolder" style="display:none">  </div>
+              <div id="folder" class="w3-container FileFolder" style="display:none">   </div>
+        </div>
+      <div id="sunburst"></div>
+      <div id ="">
+          <select name="selectproj" class="selectionsProj" id="selectionsProjid" onchange=getproj() required  >     </select>
+      </div>
+      <div class="KeyWord">
+        <label id="keywordLabelID">Keyword</label>
+        <br>
+        <input type="text" placeholder="keyword" id="keywordinputID" required />
+      </div>
+      <div id ="tomeasurediv" hidden="until-found">
+          <label id="measureLabel">Documents To Search in</label> <br>
+            <div id="measureCheckbox">
+              <select style="margin-left: -1%;" hidden id="measureselectid"  multiple size="5" required>   </select>
+            </div>
+      </div>
+      <div id ="relvDocdiv" hidden="until-found">
+          <label id="relvDocLabel">Other Relevant Documents</label> <br>
+            <div id ="relvdiv">
+              <select style="margin-left: -1%;" hidden name="relvselectname"  id="relvselectid"  multiple size="5">   </select>
+            </div>
+      </div>
+      <button type="button" id="WordSearch" onclick="displayOutput()" >Search</button>
+        <br>
+  <!-- Outputs -->
+      <div id="OutputsId" class="w3-container w3-center w3-animate-opacity" hidden="until-found">
+          <div id="Table_df_ID">  </div>
+          <div class="scroll-container">  </div>
+      </div>
+      <div id="myModal" class="modal">
+        <span class="close">&times;</span>
+        <img class="modal-content" id="img01">
+        <div id="caption"></div>
+      </div>
+    </form>
+    </div>
+    <div id="legends" class="tabcontent">
+      <ul class="graynavbarLegend" >
+        <label class="label1">Project Name / Project Part / NRM Section /</label> <label class="label2">Legend</label>
+            <div class="legendtime">
+              <div style="display: inline-flex;">
+                <label class="CreatedTime"> Created Time </label>
+                <button id="sortBtnCreateDesc" class="sortbutton" onclick="sortlegends(this.id)"><i id="CreatesortDesc" class="fa fa-sort-amount-desc" aria-hidden="true" ></i> </button>
+                <button id="sortBtnCreateAsc" class="sortbutton" onclick="sortlegends(this.id)"><i id="CreatesortAsc" class="fa fa-sort-amount-asc" aria-hidden="true" ></i></button>
+              </div>
+            <div style="display: inline-flex;">
+              <label class="EditTime"> Last Edited Time   </label>
+              <button id="sortBtnEditDesc" class="sortbutton" onclick="sortlegends(this.id)"><i id="EditsortDesc" class="fa fa-sort-amount-desc" aria-hidden="true" ></i></button>
+              <button id="sortBtnEditAsc"class="sortbutton" onclick="sortlegends(this.id)"><i id="EditsortAsc" class="fa fa-sort-amount-asc" aria-hidden="true" ></i> </button>
+            </div>
+        </div>
+      </ul>
+  </div>
+    <div class="dropdown-content">
+            <div id="userguidetext">
+              <div id="textfirstpage">
+                  <label style="font-style: oblique;">  <br> Before using this tool, kindly read the following.   </label>
+                    <br><br>
+                  <label style="font-style: oblique;" >  Note : This algorithm is based on searching in pdfs only. </label>
+                    <br><br>
+                    The tool has two main tabs. File search - Folder Search.
+                    <br><br>
+                  <li id="userguideheadings">  File Search  </li>
+                      <br>The first dropdown available allows you to select the name of the project you wish to search in.
+                      <br >
+                      Write down the word you want to search for in the field labeled 'Keyword'.
+                      You could choose one or more projects to search in from the "Documents to Measure" section. Additionally, you have the ability to view any relevant documents you might need in Dropbox.(optional)
+                    <br> <br>
+                  <li  id="userguideheadings" >  Folder Search </li>
+                    <br>
+                    Allows you to search in all pdfs found in a specific folder.
+                    <br><br>
+                  <label id="underlinedLables"> - Outputs: </label> <br>
+                  Table: Contains a summary of the keyword used to search with, the name(s) of the document(s) search in, the number of occurences.
+                <br>
+                  Image View of the pages in which the keyword was found.
+                  <br> <br> <br>
+              </div>
+            </div>
+    </div>
+<!-- POP-UP code -- to handle errors -->
+<!-- Link to trigger modal -->
+    <!-- Modal popup box -->
+    <div id="mpopupBox" class="mpopup">
+        <!-- Modal content -->
+        <div class="modal-content">
+            <div class="modal-header">
+                <span class="close">×</span>
+                <h2>Error</h2>
+            </div>
+            <div class="modal-body">
+              <p id="modal-bodyText">
+              </p>
+            </div>
+        </div>
+    </div>
+  </body>
+</html>
+<script >
+///////////////////////////////////////////////BEGIN JS CODE//////////////////////////////////////////////////
+fileFolderTabVal=0
+function openFileFolderTab(evt, cityName) {
+  var i, x, tablinks;
+  x = document.getElementsByClassName("FileFolder");
+ fileFolderTabVal=cityName
+ console.log(fileFolderTabVal)
+  for (i = 0; i < x.length; i++) {
+    x[i].style.display = "none";
+  }
+  tablinks = document.getElementsByClassName("tablink");
+  for (i = 0; i < x.length; i++) {
+    tablinks[i].className = tablinks[i].className.replace(" w3-border-blue", "");
+  }
+  document.getElementById(cityName).style.display = "block";
+  evt.currentTarget.firstElementChild.className += " w3-border-blue";
+  fileFolderSearch(fileFolderTabVal);
+}
+PopupElement=document.getElementById('modal-bodyText');
+// add project names to first dropdown from google sheet
+firstdropdown=document.getElementsByClassName('selectionsProj')[0];
+$(firstdropdown).select2({
+  placeholder:'Projects',
+  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;
+$.get('/getprojectnames/')
+     .success(function(data) {
+      document.getElementById("all").style.display = "none";
+      for (let i=0;i<data.length;i++)
+      {
+        var op0 = document.createElement("OPTION") ;
+        op0.text= 'Projects'
+        op0.value= "";
+        op0.hidden=true;
+        firstdropdown.add(op0);
+        opt=document.createElement("option");
+        opt.textContent=data[i];
+        opt.text=data[i];
+        firstdropdown.append(opt);
+        PrjNamesArray.push(data[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();
+});
+/*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()
+}
+});
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+/*Tab View of User Guide*/
+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";
+}
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+/*Red Alert to fill in the first 3 dropdowns: prj name, part, section*/
+document.getElementById('WordSearch').addEventListener('click',function(){
+  if (!document.getElementsByClassName('selectionsProj')[0].value)
+    document.getElementsByClassName('selectionsProj')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
+// //___________________________________________________________________________________________________________
+// //___________________________________________________________________________________________________________
+});
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+/*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
+  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"
+  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");
+ }
+}
+// Start with the first page (Home)
+document.getElementById("pagetitle").click();
+document.getElementById("FileTabID").click();
+function redirectAlaaSearch(){
+  $toggle.classList.toggle("change");
+  var isOpen = $mySidebar.classList.contains('slide-out');
+  $mySidebar.setAttribute('class', isOpen ? 'slide-in' : 'slide-out');
+  w3_close()
+}
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+// _________________________________________________________________________________
+//___________________________________________________________________________________________________________
+/*User Guide button toggle*/
+function userguideclick(){
+  console.log('cghj')
+  var acc = document.getElementsByClassName("dropdown-content")[0];
+  var i;
+  acc.classList.toggle("active");
+  /* Toggle between hiding and showing the active panel */
+  if (acc.style.display === "block") {
+    acc.style.display = "none";
+  } else {
+    acc.style.display = "block";
+    acc.style.backgroundColor=(0, 153, 255);
+  }
+}
+  //to be retrieved from python code
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+/*Populate dropdowns*/
+//get the dropdown value - projname
+var proj = document.getElementsByClassName("selectionsProj")[0];
+var pdfname;
+function fileFolderSearch(fileFolderTabVal){
+  console.log(fileFolderTabVal)
+  if (fileFolderTabVal.startsWith('file'))
+  {
+    document.getElementById('tomeasurediv').removeAttribute('hidden');
+    document.getElementById('relvDocdiv').removeAttribute('hidden');
+    folderSunburst();
+  }
+  if (fileFolderTabVal.startsWith('folder'))
+  {
+    document.getElementById('tomeasurediv').setAttribute('hidden','until-found');
+    document.getElementById('relvDocdiv').setAttribute('hidden','until-found');
+    // folderSunburst();
+  }
+}
+// _________________________________________________________________________________
+//___________________________________________________________________________________________________________
+  //Retrieves list of projects
+function getproj(){
+    document.getElementById("all").style.display = "block";
+    var proj = document.getElementsByClassName("selectionsProj")[0];
+    var projectVal=proj.value.toString() //selected project
+    $.get( '/getmethod/'+JSON.stringify(projectVal))
+    .success (function(data){
+    document.getElementById("all").style.display = "none";
+      var docsToMeasure=data[0]; //
+      var relvDocs=data[1]
+      var projname = document.getElementsByClassName("selectionsProj")[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;
+    // console.log(measSelect)
+    relvSelect.innerHTML='';
+    for (i = 0; i < docsToMeasure.length; i++) {
+        //relevant documents
+      var optn1 = document.createElement("OPTION");
+      if (data=='No projects found'){
+          optn1.style.color='#bdbcbc';
+          optn1.style.cursor='not-allowed';
+          optn1.setAttribute('disabled',true);
+      }
+      else{
+        optn1.text= relvDocs[i][0];
+        optn1.value= relvDocs[i][0]  ;
+        optn1.id=relvDocs[i][1] ;
+        relvSelect.add(optn1);
+      }
+  //to measure documents
+        var optn2 = document.createElement("OPTION");
+        if (data=='No projects found'){
+            optn2.style.color='#bdbcbc';
+            optn2.style.cursor='not-allowed';
+            optn2.setAttribute('disabled',true);
+            }
+        else{
+            optn2.text= docsToMeasure[i][0];
+            optn2.value= docsToMeasure[i][0]  ;
+            optn2.id=docsToMeasure[i][1] ;
+            measSelect.add(optn2);
+            measoptns.push(optn2);
+        }
+      }
+      relvids.push(relvSelect) ;
+      measids.push(measSelect);
+//to open pdf in a new tab (relevant documents)
+        $(measSelect).select2({
+                  placeholder:'Select Projects',
+                  closeOnSelect: true,
+                  width:'51ch'
+                  });
+    relvids.forEach(function(elem){
+      elem.addEventListener("change", function() {
+        document.getElementById("all").style.display = "block";
+      // var pdfpatharr=[]
+      // pdfpatharr.push(projname.value, projpart.value,projsec.value, elem.value)
+      $.get( '/getdropboxurl/'+JSON.stringify(elem.value))
+      .success (function(data){
+        document.getElementById("all").style.display = "none";
+        window.open( data)
+      })
+      .error(function(jqXHR, textStatus, errorThrown) {
+          PopupElement.textContent='Error occured while retrieving the dropbox URL. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
+          ShowPopUp();
+      });
+      });
+    });
+    measids.forEach(function(elem) {
+          elem.addEventListener("change", function() {
+            canvasimg='';
+            ry=[[]];
+            levelcheckbox.checked=false;
+            pdfname=elem.value;
+            measSelect.style.boxShadow='none';
+            document.getElementById("all").style.display = "block";
+            pixelArr=[projname.value, projpart.value,projsec.value, pdfname]
+    });
+    });
+    // document.getElementById('WordSearch').onclick= function()
+    // {
+    //   if (!measSelect.value)
+    //     measSelect.style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
+    // }
+  })
+    .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();
+     });
+}
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+function displayOutput()
+{
+  document.getElementById("loading").hidden = false;
+  document.getElementById('OutputsId').setAttribute('hidden','until-found');
+  document.getElementById('WordSearch').setAttribute('disabled',true);
+  document.getElementById('WordSearch').style.cursor='not-allowed';
+  document.getElementById('WordSearch').style.boxShadow = 'none';
+  document.getElementById('WordSearch').style.color = 'white';
+  document.getElementById('WordSearch').style.backgroundColor="rgb(154,152,152)";
+  if (fileFolderTabVal=='file')
+    ComputeOutput('/searchInDocs');
+  if (fileFolderTabVal=='folder')
+  ComputeOutput('/searchInFolder');
+}
+function ComputeOutput(pathtoFunc){
+  var outputs=document.getElementById('OutputsId');
+  var table=document.getElementById('Table_df_ID');
+  var imgsDiv= document.getElementsByClassName('scroll-container')[0]
+  if (pathtoFunc.startsWith('/searchInDocs'))
+  {
+    data= JSON.stringify({
+        keyword : document.getElementById('keywordinputID').value,
+        listofprojs : $('#measureselectid').val()
+      })
+  }
+ else
+  {
+    data= JSON.stringify({
+        keyword : document.getElementById('keywordinputID').value,
+        ProjectName : projectname
+      })
+  }
+  $.ajax({
+      url: pathtoFunc,
+      type: "POST",
+      contentType: "application/json",
+      data: data,
+      dataType: "json",
+      success: function(data)
+      {
+        document.getElementById("loading").hidden = true;
+        document.getElementById('WordSearch').removeAttribute('disabled');
+        document.getElementById('WordSearch').style.cursor='pointer';
+        document.getElementById('WordSearch').style.color = 'white';
+        document.getElementById('WordSearch').style.backgroundColor="#16c72e";
+        document.getElementById('WordSearch').style.padding='10px 102px';
+        document.getElementById('WordSearch').addEventListener('mouseover',function(){
+          document.getElementById('WordSearch').style.color='black';
+          document.getElementById('WordSearch').style.boxShadow=' 0 0 8px 2px #16c72e';
+        })
+        document.getElementById('WordSearch').addEventListener('mouseout',function(){
+          document.getElementById('WordSearch').style.color='white';
+          document.getElementById('WordSearch').style.boxShadow='none';
+        });
+        table.innerHTML='';
+        imgsDiv.innerHTML='';
+          document.getElementById('OutputsId').removeAttribute('hidden')
+          df=data[0]
+          listofImgs=data[1]
+          table.innerHTML=df
+          for (i=0;i<listofImgs.length;i++)(function(i){
+            console.log('lennn',listofImgs.length)
+            var imgcanvas= document.createElement("img");
+            imgcanvas.src= 'data:image/gif;base64,' +listofImgs[i];
+            //  imgcanvas.width=700;
+            imgcanvas.height=500;
+            imgcanvas.id=listofImgs[i];
+            imgcanvas.alt="Larry";
+            imgcanvas.style.zIndex=999;
+            imgcanvas.onclick = function() {ImgLarger(imgcanvas.id,imgcanvas.src); }
+            imgsDiv.append(imgcanvas)
+        })(i);
+      },
+      error: function(err) {
+              PopupElement.textContent='Error occured. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
+              ShowPopUp();
+            }
+  });
+}
+function ImgLarger(id, src){
+// Get the modal
+    var modal = document.getElementById('myModal');
+    // Get the image and insert it inside the modal - use its "alt" text as a caption
+    var img = document.getElementById(id);
+    var modalImg = document.getElementById('img01');
+    var captionText = document.getElementById("caption");
+        modal.style.display = "block";
+        modalImg.src = src;
+        captionText.innerHTML = 'Preview';
+    // Get the <span> element that closes the modal
+    var span = document.getElementsByClassName("close")[0];
+    // When the user clicks on <span> (x), close the modal
+    span.onclick = function() {
+        modal.style.display = "none";
+    }
+}
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+/////////////////////////////////////*Sunburst*//////////////////////////////////
+/////////////////////////////////////////////////////////////////////////////////////////
+/////////////////////////////////////////////////////////////////////////////////////////
+function folderSunburst(){
+$.get('/getsunburst')
+.success(function(data){
+console.log(data)
+drawSunburst(data)
+})
+.error(function(jqXHR, textStatus, errorThrown) {
+          PopupElement.textContent='Error occured. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
+          ShowPopUp();
+});
+}
+function drawSunburst(old) {
+    // create a data tree from the dataset
+    console.log(old)
+    var data = [{
+  type: "sunburst",
+  labels:  ['parent','child'],
+  parents: ['parent','child'],
+  values:  old,
+  outsidetextfont: {size: 20, color: "#377eb8"},
+  leaf: {opacity: 0.4},
+  marker: {line: {width: 2}},
+}];
+var layout = {
+  margin: {l: 0, r: 0, b: 0, t: 0},
+  width: 500,
+  height: 500
+};
+Plotly.newPlot('sunburst', data, layout);
+}
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+/////////////////////////////////////*LEGEND DIRECTORY*//////////////////////////////////
+/////////////////////////////////////////////////////////////////////////////////////////
+/////////////////////////////////////////////////////////////////////////////////////////
+/*Get tables of Prj Names, parts , sections from API code */
+table1={}
+table2={}
+table3={}
+$.get('/getAPITables/')
+.success(function(data){
+  table1=data[0]; //prj names table
+  table2=data[1]; //prj parts table
+  table3=data[2]; //prj sections table
+})
+.error(function(jqXHR, textStatus, errorThrown) {
+          PopupElement.textContent='Error occured. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
+          ShowPopUp();
+     });
+var pathsarr={};
+var legendscontent= document.getElementById('legends');
+var createdTimeDiv= document.getElementById('createdTimeDiv');
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+/*Create divs for each prj and div for each part*/
+getlegendstoDirectory()
+function getlegendstoDirectory(){
+  $.get( '/getdrivelinks/'+'0').then (function(data){
+      pathsarr=data
+      if (!legendscontent.children[1]){
+        var allprjdiv= document.createElement("div");
+        allprjdiv.id='allprjdiv';
+      }
+      else{
+        legendscontent.children[1].innerHTML='';
+        var allprjdiv=legendscontent.children[1];
+        allprjdiv.id='allprjdiv';
+      }
+      for (let proj=0; proj<PrjNamesArray.length ; proj++)
+      {
+        var labelprojdiv= document.createElement("div");
+          var newlabelproj = document.createElement("label")
+          var i = document.createElement("i");
+          var brk=  document.createElement("br");
+          i.className="fa fa-folder"
+          newlabelproj.textContent=PrjNamesArray[proj];
+          newlabelproj.id='prjname';
+          newlabelproj.className='prjnameclass';
+          labelprojdiv.append(i)
+          labelprojdiv.append(newlabelproj)
+          labelprojdiv.append(brk)
+          allprjdiv.append(labelprojdiv)
+      }
+      legendscontent.append(allprjdiv)
+      legendscontent.querySelectorAll('label').forEach(function(elem){
+        elem.addEventListener('click',function(){
+          if (!elem.parentElement.children[3]){
+            var prjnameId;
+            var prjpartsforLgnd=[];
+            var prjpartId;
+            var prjSectionsforLgnd=[];
+            /*get prj clicked on */
+            for (item in table1.ProjectName)
+            {
+              if (table1.ProjectName[item] == elem.textContent.toString())
+              {
+                prjnameId = table1.ProjectId[item];
+                break;
+              }
+            }
+            /*get prj parts of this prj and its id*/
+            for (item in table2.ProjectId)
+            {
+              if (table2.ProjectId[item] == prjnameId.toString())
+              {
+                prjpartsforLgnd.push(table2.ProjectPart[item]);
+                prjpartId=table2.ProjectPartId[item] ;
+              }
+            }
+          var allpartsdiv= document.createElement("div");
+            for (let prjpart=0;prjpart<prjpartsforLgnd.length;prjpart++)
+            {
+              var labelpartdiv= document.createElement("div");
+              labelpartdiv.style.marginLeft='20px';
+              var newlabelpart = document.createElement("label")
+              var i = document.createElement("i");
+              var brk=  document.createElement("br");
+              i.className="fa fa-folder"
+              newlabelpart.textContent=prjpartsforLgnd[prjpart];
+              newlabelpart.id='prjpart';
+              newlabelpart.className='prjpartclass';
+              labelpartdiv.append(i)
+              labelpartdiv.append(newlabelpart)
+              labelpartdiv.append(brk)
+              allpartsdiv.append(labelpartdiv)
+            }
+            elem.parentElement.append(allpartsdiv)
+            elem.parentElement.querySelector('i').className='fa fa-folder-open';
+        /*Sections divs*/
+          for (let c=0;c<elem.parentElement.children[3].children.length;c++) //Div of Part
+          {
+            elem.parentElement.children[3].children[c].children[1].addEventListener('click',function(){
+            var partlabelText= elem.parentElement.children[3].children[c].children[1].textContent;
+            for (item in table3.ProjectId)
+            {
+              if (table3.ProjectId[item] ==prjnameId && table3.ProjectPartId[item]==prjpartId )
+              {
+                prjSectionsforLgnd.push(table3.ProjectSection[item]);
+              }
+            }
+            if (! elem.parentElement.children[3].children[c].children[3]) {
+                var labelsecdiv= document.createElement("div");
+                labelsecdiv.style.marginLeft='25px';
+                for (let cc=0;cc<prjSectionsforLgnd.length;cc++){
+                  var seperateSecdiv = document.createElement("div")
+                    var newlabelsec = document.createElement("label")
+                    var i = document.createElement("i");
+                    var brk=  document.createElement("br");
+                    i.className="fa fa-folder"
+                    newlabelsec.textContent=prjSectionsforLgnd[cc];
+                    newlabelsec.id='prjsec';
+                    newlabelsec.className='prjsecclass';
+                    if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') || newlabelsec.textContent.startsWith('2.2')  || newlabelsec.textContent.startsWith('2.1')))
+                    {
+                    newlabelsec.style.color='lightgray';
+                    i.style.color='lightgray'
+                    newlabelsec.style.cursor='default';
+                    }
+                    seperateSecdiv.append(i)
+                    seperateSecdiv.append(newlabelsec)
+                    seperateSecdiv.append(brk)
+                    labelsecdiv.append(seperateSecdiv)
+                    elem.parentElement.children[3].children[c].append(labelsecdiv)
+                    // console.log(labelsecdiv)
+                }
+                elem.parentElement.children[3].children[c].children[0].className='fa fa-folder-open';
+            /*Get path to legends - project name , part , section*/
+            for (let k=0;k<elem.parentElement.children[3].children[c].children[3].children.length;k++)
+            {
+                elem.parentElement.children[3].children[c].children[3].children[k].children[1].addEventListener('click',function(){
+                legendpathh='/'+elem.textContent +'/' + partlabelText + '/' + elem.parentElement.children[3].children[c].children[3].children[k].children[1].textContent+'/'
+                if (!elem.parentElement.children[3].children[c].children[3].children[k].children[3])
+                  {
+                    for (let o=0; o<pathsarr.length;o++){
+                      console.log(pathsarr[o])
+                      if (JSON.stringify(pathsarr[o][1]) === JSON.stringify(legendpathh) ){
+                        var legendsdiv= document.createElement("div");
+                        legendsdiv.style.marginLeft='20px';
+                        var seperateSecdiv = document.createElement("div")
+                        var legendlabel = document.createElement("label")
+                        var brk=  document.createElement("br");
+                        legendlabel.textContent=pathsarr[o][0]
+                        legendlabel.id='legend';
+                        legendlabel.className='legendclass';
+                        var legendlabeldiv= document.createElement("div");
+                        legendlabeldiv.id='legendtimediv'
+                        var createdTimelbl = document.createElement("label")
+                        var brk=  document.createElement("br");
+                        createdTimelbl.textContent=new Date(pathsarr[o][2].createdTime ).toUTCString()
+                        createdTimelbl.id='legendtime';
+                        createdTimelbl.className='legendclass';
+                        var modifiedTimelbl = document.createElement("label")
+                        var brk=  document.createElement("br");
+                        modifiedTimelbl.textContent=new Date(pathsarr[o][2].modifiedTime ).toUTCString()
+                        modifiedTimelbl.id='legendmodtime';
+                        modifiedTimelbl.className='legendclass';
+                        console.log(pathsarr[o][2].createdTime,pathsarr[o][2].modifiedTime )
+                        seperateSecdiv.append(legendlabel)
+                        legendlabeldiv.append(createdTimelbl)
+                        legendlabeldiv.append(modifiedTimelbl)
+                        seperateSecdiv.style.display='flex';
+                        seperateSecdiv.id='legendlbldivwhole'
+                        seperateSecdiv.append(legendlabeldiv);
+                        seperateSecdiv.append(brk);
+                        legendsdiv.append(seperateSecdiv);
+                        console.log(legendsdiv);
+                        elem.parentElement.children[3].children[c].children[3].children[k].append(legendsdiv)
+                        /*open legend link*/
+                        seperateSecdiv.addEventListener('click',function(){
+                            window.open('https://docs.google.com/spreadsheets/d/'+pathsarr[o][3])
+                        })
+                        if (elem.parentElement.children[3].children[c].children[3].children[k].children[0].className=='fa fa-folder')
+                        elem.parentElement.children[3].children[c].children[3].children[k].children[0].className='fa fa-folder-open';
+                      }
+                    }
+                  }
+                  else{
+                    for (let y =elem.parentElement.children[3].children[c].children[3].children[k].children.length; y>=0;y--)
+                    {
+                      if (elem.parentElement.children[3].children[c].children[3].children[k].children[y] instanceof HTMLDivElement)
+                        elem.parentElement.children[3].children[c].children[3].children[k].removeChild(elem.parentElement.children[3].children[c].children[3].children[k].children[y]);
+                    }
+                    elem.parentElement.children[3].children[c].children[3].children[k].children[0].className='fa fa-folder';
+                  }
+              })
+            }
+            }
+            else{
+              elem.parentElement.children[3].children[c].removeChild(elem.parentElement.children[3].children[c].children[3]);
+              elem.parentElement.children[3].children[c].children[0].className='fa fa-folder';
+            }
+            })
+          }
+        }
+        /*remove all parts along with sectionns of element (prj name)s*/
+          else{
+            elem.parentElement.removeChild(elem.parentElement.children[3]);
+            elem.parentElement.children[0].className='fa fa-folder';
+          }
+        })
+      })
+})
+}
+function sortlegends(clicked_id){
+  var allarr=[]
+  for ( let u=0 ; u<document.getElementById('allprjdiv').children.length ; u++)
+  {
+ //Project names folder
+  if (document.getElementById('allprjdiv').children[u].children[3])
+  {
+    for (let uu=0 ; uu<document.getElementById('allprjdiv').children[u].children[3].children.length;uu++)
+    {//Project part folder
+      if(document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3])
+      {
+        var arr=[]
+        for (let uuu=0;uuu<document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children.length;uuu++)
+        {//NRM section folder - direct parent
+            for (let h=0;h<document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children.length;h++)
+            {
+              if (document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children[h] instanceof HTMLDivElement)
+              {
+                if (clicked_id == 'sortBtnCreateDesc' || clicked_id == 'sortBtnCreateAsc'  )
+                arr.push([document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children[h], new Date(document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children[h].children[0].children[1].children[0].textContent)])
+                if (clicked_id == 'sortBtnEditDesc' || clicked_id == 'sortBtnEditAsc'  )
+                arr.push([document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children[h], new Date(document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children[h].children[0].children[1].children[1].textContent)])
+                // legends in this parent only
+                if (h==document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children.length-1)
+                {
+                  if (clicked_id == 'sortBtnCreateDesc' || clicked_id == 'sortBtnEditDesc' )
+                    x=arr.sort((a, b) => b[1]- a[1])
+                  if (clicked_id=='sortBtnCreateAsc' || clicked_id == 'sortBtnEditAsc'  )
+                  x=arr.sort((a, b) => a[1]- b[1])
+                  if (document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].children[h] instanceof HTMLDivElement)
+                  {
+                    console.log(document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu] )
+                    for (let k =0; k <x.length; k++)
+                        document.getElementById('allprjdiv').children[u].children[3].children[uu].children[3].children[uuu].appendChild(x[k][0])
+                  }
+                }
+              }
+            }
+        }
+        allarr.push(arr);
+      }
+    }
+  }
+  }
+}
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+/* POP-UP code JS*/
+// Select modal
+var mpopup = document.getElementById('mpopupBox');
+// Select trigger link
+var mpLink = document.getElementById("mpopupLink");
+// Select close action element
+var close = document.getElementsByClassName("close")[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";
+    }
+};
+</script>