| <!DOCTYPE html> |
| <html lang="en-US"> |
| |
| <head> |
| <title>NDN Query and Retrieval Tool</title> |
| |
| <script> |
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
| })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
| |
| ga('create', 'UA-64984905-1', 'auto'); |
| ga('send', 'pageview'); |
| |
| </script> |
| |
| <!-- Styles --> |
| <link rel="stylesheet" href="css/cubeLoader.css"> |
| <link rel="stylesheet" href="css/theme.min.css"> |
| <link rel="stylesheet" href="css/style.css"> |
| |
| <!-- Scripts --> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js"></script> |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> |
| <script src="../ndn-js/build/ndn.min.js"></script> |
| <script src="js/autocomplete.js"></script> |
| <script src="js/treeExplorer.js"></script> |
| <script src="js/catalog.js"></script> |
| |
| </head> |
| |
| <body id="body"> |
| <header> |
| <div class="navbar navbar-inverse navbar-static-top container-fluid"> |
| <div class="navbar-header"> |
| <div class="navbar-brand">NDN Query and Retrieval Tool</div> |
| </div> |
| <ul class="navbar-nav nav"> |
| <li class="active"><a data-toggle="tab" href="#filterSearch">Filter Search</a></li> |
| <li><a data-toggle="tab" href="#pathSearch">Path Search</a></li> |
| <li><a data-toggle="tab" href="#treeSearchPane">Tree Search</a></li> |
| </ul> |
| </div> |
| </header> |
| |
| <div class="container-fluid"> |
| |
| <div class="row"> |
| |
| <div class="col-sm-12 col-md-12"> |
| |
| <div id="alerts"></div> |
| |
| <div class="panel panel-info tab-pane fade in active" id="filterSearch"> |
| <div class="panel-heading">Filter Based Search</div> |
| <div class="panel-body"> |
| <div class="col-sm-3 col-md-2 sidebar"> |
| <div class="panel panel-primary"> |
| <div class="panel-heading"> |
| <span>Filter Categories</span> |
| </div> |
| <div class="panel-body"> |
| <ul id="side-menu" class="nav nav-pills nav-stacked"></ul> |
| </div> |
| </div> |
| </div> |
| <div class="col-sm-9 col-md-10"> |
| <div id="filters"></div> |
| <button id="searchButton" class="btn btn-primary right-fix">Search</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="panel panel-info tab-pane fade" id="pathSearch"> |
| <div class="panel-heading">Path Based Search</div> |
| <div class="panel-body"> |
| <form class="form-inline" id="searchBar"> |
| <div class="form-group"> |
| <div class="input-group"> |
| <input id="search" placeholder="Enter a path (Ex: /CMIP5)" |
| type="text" class="form-control" |
| title="This bar is for doing a tab completion like path completion. Press tab, enter, or click AutoComplete to begin your search."> |
| <div class="input-group-btn"> |
| <button id="autoCompleteSearch" type="submit" class="btn btn-primary">Search</button> |
| </div> |
| </div> |
| </div> |
| </form> |
| </div> |
| </div> |
| |
| <div class="panel panel-info tab-pane fade" id="treeSearchPane"> |
| <div class="panel-heading">Tree Based Search</div> |
| <div class="panel-body" id="treeSearch"> |
| <div></div> |
| </div> |
| </div> |
| |
| <div id="results" class="panel panel-default hidden"> |
| <div class="panel-body"> |
| <nav class="navbar navbar-inverse col-md-12 resultMenu"> |
| <ul class="nav navbar-nav navbar-left"> |
| <li class="previous disabled"> |
| <a href="#">← Previous</a> |
| </li> |
| <li class="dropdown"> |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Results Per Page <span class="caret"></span></a> |
| <ul class="dropdown-menu"> |
| <li class="active"><a href="#" class="resultsPerPageSelector">25</a></li> |
| <li><a href="#" class="resultsPerPageSelector">50</a></li> |
| <li><a href="#" class="resultsPerPageSelector">100</a></li> |
| <li><a href="#" class="resultsPerPageSelector">200</a></li> |
| </ul> |
| </li> |
| <li><a href="#" class="requestSelectedButton">Request Selected</a></li> |
| <li><a href="#" class="clearResults">Clear</a></li> |
| </ul> |
| <div class="navbar-text">(Page <span class="pageNumber">0</span>) <span class="pageLength">0</span>/<span class="totalResults">0</span> Results</div> |
| <ul class="nav navbar-nav navbar-right"> |
| <li class="next disabled"> |
| <a href="#">Next →</a> |
| </li> |
| </ul> |
| </nav> |
| <table id="resultTable" class="table"></table> |
| <div class="sk-cube-grid"> |
| <div class="sk-cube sk-cube1"></div> |
| <div class="sk-cube sk-cube2"></div> |
| <div class="sk-cube sk-cube3"></div> |
| <div class="sk-cube sk-cube4"></div> |
| <div class="sk-cube sk-cube5"></div> |
| <div class="sk-cube sk-cube6"></div> |
| <div class="sk-cube sk-cube7"></div> |
| <div class="sk-cube sk-cube8"></div> |
| <div class="sk-cube sk-cube9"></div> |
| </div> |
| <nav class="navbar navbar-inverse col-md-12 resultMenu"> |
| <ul class="nav navbar-nav navbar-left"> |
| <li class="previous disabled"> |
| <a href="#">← Previous</a> |
| </li> |
| <li class="dropup"> |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Results Per Page <span class="caret"></span></a> |
| <ul class="dropdown-menu"> |
| <li class="active"><a href="#" class="resultsPerPageSelector">25</a></li> |
| <li><a href="#" class="resultsPerPageSelector">50</a></li> |
| <li><a href="#" class="resultsPerPageSelector">100</a></li> |
| <li><a href="#" class="resultsPerPageSelector">200</a></li> |
| </ul> |
| </li> |
| <li><a href="#" class="requestSelectedButton">Request Selected</a></li> |
| <li><a href="#" class="clearResults">Clear</a></li> |
| </ul> |
| <div class="navbar-text">(Page <span class="pageNumber">0</span>) <span class="pageLength">0</span>/<span class="totalResults">0</span> Results</div> |
| <ul class="nav navbar-nav navbar-right"> |
| <li class="next disabled"> |
| <a href="#">Next →</a> |
| </li> |
| </ul> |
| </nav> |
| </div> |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div id="popup"> |
| <div id="request" class="panel panel-primary"> |
| <div class="panel-heading">Confirmation</div> |
| <div class="panel-body"> |
| <form id="requestForm"> |
| <p>Select a destination and press submit if you are sure you want to download the selected data to the selected destination.</p> |
| <div class="dropdown"> |
| <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> |
| <span id="requestDropText">Destination<span> |
| <span class="caret"></span> |
| </button> |
| <ul id="requestDest" class="dropdown-menu"></ul> |
| </div> |
| <!-- Disabled For Demo |
| <div class="form-group"> |
| <label>Authentication Key</label> |
| <input type="file" class="form-control" placeholder="JSON encoded RSA key"> |
| <p class="help-block">It is required that you have authentication to move the files, otherwise this will fail.</p> |
| </div> |
| <div id="requestDrop" class="well">You can also drop your key here instead of using the input above.</div> |
| --> |
| <div class="absBotRight"> |
| <button type="submit" class="btn btn-primary">Submit</button> |
| <button id="requestCancel" type="button" class="btn btn-default">Cancel</button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| |
| </body> |
| |
| </html> |