MeasurementTesting

Sleeping

File size: 32,434 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>
      
      <button class="tablinks"  id="pagetitle" onclick="openTab(event, 'home')">ADR Console <i class="fa fa-home" > </i></button>
      <!-- <button class="tablinks" id="LegendHist" onclick="openTab(event, 'legends')">Legends History  <i class="fa fa-caret-down"></i></button> -->
      <a class="tablinks" id="LegendHist" href="{{ url_for('legendDirectory') }}">Legends History <i class="fa fa-caret-down"></i></a>
      <button class="dropbtn" onclick="userguideclick()"><img id="infoImg" src="data:image/png;base64,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"></button>
    </div>

  
    <div id="mySidebar"  class="slide-out">
      <div id="menuOptions">
        <li><a href="{{ url_for('measurementConsoleFn') }}">Measure Plans </a></li>
        <li 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> 
          <!-- <input type="search" onkeyup=filterFunction(this.id) id="tomeasureSearchInput"> -->
          <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> 
          <input type="search" onkeyup=filterFunction(this.id) id="relevantSearchInput">
          <br>
            <div id ="relvdiv">
              <select style="margin-left: -1%;" hidden name="relvselectname"  id="relvselectid"  multiple size="5">   </select>
            </div>
      </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;

function displayprjnames(){
$.get('/getprojectnames/')
     .success(function(data) {
      document.getElementById("all").style.display = "none";
      prjids=data[1];
      var op0 = document.createElement("OPTION") ;
        op0.text= 'Projects'
        op0.value= "";
        op0.hidden=true;
        firstdropdown.add(op0);
      for (let i=0;i<data[0].length;i++)
      {
        opt=document.createElement("option");
        opt.textContent=data[0][i];
        opt.text=data[0][i];
        firstdropdown.append(opt);
        PrjNamesArray.push(data[0][i]);
      }
      
      })
     .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();
        
});
}
displayprjnames()
/*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 :document.getElementsByClassName("selectionsProj")[0].value 
      })
  }

  $.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);
}
//___________________________________________________________________________________________________________
//___________________________________________________________________________________________________________
/* 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";
    }
};

function filterFunction(id) {
  var input, filter, ul, li, a, i;
  input = document.getElementById(id);
  filter = input.value.toUpperCase();
  if (id.toString().startsWith('tomeasure'))
    a = document.getElementById("measureselectid").children;
  else
    a = document.getElementById("relvselectid").children;
  // a = div.getElementsByTagName("option");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>