MeasurementTesting

Sleeping

App Files Files Community

Marthee commited on Dec 17, 2024

Commit

c074444

verified ·

1 Parent(s): 1f5bfdb

Update templates/legendDirectory.html

Browse files

Files changed (1) hide show

templates/legendDirectory.html +579 -77

templates/legendDirectory.html CHANGED Viewed

@@ -1,97 +1,599 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
   <head>
     <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">
     <meta charset="utf-8">
-    <title>ADR Console - V2</title>
   </head>
-  <body>
-    <div class="tab-nav-container">
-      <label class="tab active pagetitle">ADR Console</label> <i class="fa fa-home" style="filter: invert();"></i>
-  <div class="tab legends">
-    <label> Legends' History </label>
-        <i class="fa fa-caret-down"></i>
-        <div class="dropbtnLinks-content">
-          <p> hii </p>
         </div>
-      </button>
-  </div>
-  <div class="tab userguide">
-      <button class="dropbtn"> <i class="fa fa-info" aria-hidden="true"></i> <!--User Guide-->
-        <i class="fa fa-caret-down"></i>
-      </button>
-      <div class="dropdown-content">
-        <div id="userguidetext">
-          <div id="textfirstpage">
-          <label style="font-style: oblique;"> <br>
-            Please read the following before you use this tool.  </label>
-          <br><br>
-          <label style="font-style: oblique;" >Note : The algorithm is based on detecting shapes and colors from the plan. Some shapes such as tables and textboxes containing information about the plan may be seen as shapes as well, therefore inserted into the algorithm as well.
-          To avoid this, please clean up the plan before you choose to measure it
-          by erasing them or by drawing a white rectangle above them using any external tool.  </label>
-          <br>
-          <br>
-          The tool is divided into two main parts:
-          <br>
-          <li id="userguideheadings">   First Part  </li>
-          <br>  You will find three dropdowns. Choose the name of the project you want to measure, along with the project part, and the project section.
-          <br > <br>
-          <label style="font-style: italic;"> Please double check the project section chosen as this chooses the code that will be applied to the plan. </label>
-          <br>
-          <br>
-          Mark the project you wish to meaure from the section labeled 'To measure'. You could also choose any relevant documents you wish to see (optional).
-          <br> <label style="font-style: italic;">Pixel to Metric conversion important notes : </label>When you choose to measure a specific plan, you will be provided with a pdf that has
-          a white rectangle drawn in it. Please open this pdf in Bluebeam and measure its area and perimeter and insert them in the textboxes that will be shown below.
-          When measuring this rectangle, you could consider it as the scale check done on Bluebeam.
-          <br> <br> <label  style="font-style: italic;">Notes when measuring secion 1.0: </label>
-          <label id=info >Choose whether this project contains levels or not. If you wish to measure all of the plan, let the number of plans equal to one. If you wish to measure certain regions of the plan or have the plan divided into levels,
-          please type in a number greater than 1 (number of levels). </label>
-          <br>  If you choose Measure specific regions, please draw shapes around the desired regions on Bluebeam or any external tool before choosing to measure this plan.
-          <br> You should also insert the colors of the levels in rgb format (Red-Green-Blue).
-          <br>
-          <i id="secondpage" class="fa fa-arrow-right" aria-hidden="true"></i>
-          <br>
-          </div>
-          <div id="textsecondpage" hidden=until-found>
-            <br>
-            <li  id="userguideheadings" >  Second part </li>
-          <br>
-          First, please open the google sheets link labeled 'Legend' and fill in the names of each shape.
-          <br>Ex. The first row shows the measurement of GB-1 , in the first column type in GB-1.
-          <br> After you are done with filling in the legend, go back to the ADR Console.
-          You will find three dropdowns and three textboxes.
-          <li style="list-style-type:square;"> The first dropdown will allow you to choose whether the shape is a ground beam or a pile cap.  </li>
-          <li style="list-style-type:square;">  The second dropdown is the choice of (Area-perimeter-Length-Count).</li>
-          <li style="list-style-type:square;"> The third dropdown gives you the first part of the MC-T Name.</li>
-          <br> Then fill in the rows below the dropdowns with the corresponding detail and depth.
-          The plus button allows you to add more rows within this block.
-          <br>
-          There is another button above the dropdowns (to the right) that allows you to add another block and repeat the process for another item (Ground Beam or Pile Cap) or (Area-perimeter-Length-Count).
-          <br><br>
-          <i id="firstpage" class="fa fa-arrow-left" aria-hidden="true"></i>
           <br>
         </div>
-          </div>
-      </div>
   </div>
-</div>
   </body>
-</html>

 <!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">
+    <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>
+        <!-- Home (ADR Console) button comes first -->
+        <a class="tablinks" id="pagetitle" href="{{ url_for('measurementConsoleFn') }}">
+          ADR Console <i class="fa fa-home"></i>
+        </a>
+        <!-- Legends History button comes second -->
+        <button class="tablinks" id="LegendHist" onclick="openTab(event, 'legends')">
+          Legends History <i class="fa fa-caret-down"></i>
+        </button>
+        <!-- Info button (as before) -->
+          <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 onclick="openTab(event, 'home')" >Measure Plans </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>
+    </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//////////////////////////////////////////////////
+PrjNamesArray=[];
+PrjPartsArray=[];
+PrjSectionsArray=[];
+var partsArrwithID=[];
+var firstDpwnValue;
+var prjids=[]
+displayprjnames()
+function displayprjnames(){
+$.get('/getprojectnames/')
+     .success(function(data) {
+      document.getElementById("all").style.display = "none";
+      for (let i=0;i<data[0].length;i++)
+      {
+        PrjNamesArray.push(data[0][i]);
+      }
+      })
+     .error(function(jqXHR, textStatus, errorThrown) {
+          PopupElement.textContent='Error occured while retrieving the Project Names. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
+          ShowPopUp();
+});
+}
+/*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";
+}
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+/*Toggle Tab View of Home and Legend along with the Menu bar icon*/
+function openTab(evt, tabname) {
+    console.log(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("LegendHist").click();
+// document.getElementById("FileTabID").click();
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+// _________________________________________________________________________________
+//___________________________________________________________________________________________________________
+/*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
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+//___________________________________________________________________________________________________________
+/////////////////////////////////////*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(){
+    console.log('here')
+  $.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
+          {prjSectionsforLgnd=[]
+           elem.parentElement.children[3].children[0].children.innerHTML=''
+            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]) {
+                console.log(elem.parentElement.children[3].children[c])
+                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"
+                    console.log('addingsection')
+                    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);
+      }
+    }
+  }
+  }
+}
+</script>