MeasurementTesting

Sleeping

File size: 30,064 Bytes

<!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>