| <!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> |
| <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.2.3/jquery.min.js"> |
| </script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"> |
| </script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"> |
| </script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/async/1.5.2/async.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"> |
| |
| <div id="templates"> |
| <div class="row" id="timeTemplate"> |
| <button class="col-xs-1 close" type="button">×</button> |
| <div class="col-xs-4"> |
| <input type="text" class="form-control variable" value="time"> |
| </div> |
| <div class="col-xs-7 values"> |
| <input type="datetime" class="form-control" name="start" placeholder="Start"> |
| <input type="datetime" class="form-control" name="end" placeholder="End"> |
| </div> |
| </div> |
| <div class="row" id="locationTemplate"> |
| <button class="col-xs-1 close" type="button">×</button> |
| <div class="col-xs-4"> |
| <input type="text" class="form-control variable" value="coord"> |
| </div> |
| <div class="col-xs-7 values"> |
| <div class="input-group"> |
| <input type="number" class="form-control" name="startLat" placeholder="Start Latitude"> |
| <span class="input-group-addon">° North</span> |
| </div> |
| <div class="input-group"> |
| <input type="number" class="form-control" name="startLong" placeholder="Start Longitude"> |
| <span class="input-group-addon">° East</span> |
| </div> |
| <div class="input-group"> |
| <input type="number" class="form-control" name="endLat" placeholder="End Latitude"> |
| <span class="input-group-addon">° North</span> |
| </div> |
| <div class="input-group values"> |
| <input type="number" class="form-control" name="endLong" placeholder="End Longitude"> |
| <span class="input-group-addon">° East</span> |
| </div> |
| </div> |
| </div> |
| <div class="row" id="customTemplate"> |
| <button class="col-xs-1 close" type="button">×</button> |
| <div class="col-xs-4"> |
| <input type="text" class="form-control variable" placeholder="Variable Name"> |
| </div> |
| <div class="col-xs-7 values"> |
| <input type="text" class="form-control" name="value" placeholder="Custom Restriction"> |
| </div> |
| </div> |
| </div> |
| |
| <header> |
| <div class="navbar navbar-inverse navbar-static-top container-fluid"> |
| <div class="navbar-header"> |
| <a class="navbar-brand" data-toggle="tab" href="#filterSearch" id="brand-title">NDN Query and Retrieval Tool</a> |
| </div> |
| <ul class="navbar-nav nav"> |
| <li class="active" id="search-tab"><a data-toggle="tab" href="#filterSearch">Filter Search</a></li> |
| <li id="path-search-tab"><a data-toggle="tab" href="#path-search">Path Search</a></li> |
| <li id="tree-search-tab"><a data-toggle="tab" href="#tree-search">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 Search</div> |
| <div class="panel-body"> |
| <div> |
| <div id="filters"></div> |
| <button id="searchButton" class="btn btn-primary right-fix">Search</button> |
| </div> |
| <div> |
| <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> |
| </div> |
| |
| <div class="tab-pane fade" id="path-search"> |
| <div class="panel panel-info" id="pathSearch"> |
| <div class="panel-heading">Path 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"> |
| <div class="input-group-btn"> |
| <button id="autoCompleteSearch" type="submit" class="btn btn-primary">Search</button> |
| </div> |
| </div> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| |
| <div class="tab-pane fade" id="tree-search"> |
| <div class="panel panel-info" id="treeSearchPane"> |
| <div class="panel-heading">Tree Search</div> |
| <div class="panel-body" id="treeSearch"> |
| <div></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><a href="#" class="requestSelectedButton">Request Selected</a></li> |
| <li><a href="#" class="clearResults">Clear</a></li> |
| </ul> |
| <ul class="nav navbar-nav navbar-right"> |
| <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 class="previous disabled"> |
| <a href="#">← Previous</a> |
| </li> |
| <li class="next disabled"> |
| <a href="#">Next →</a> |
| </li> |
| </ul> |
| <div class="navbar-text navbar-right">(Page <span class="pageNumber">0</span>) <span class="pageLength">0</span>/<span class="totalResults">0</span> Results</div> |
| </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><a href="#" class="requestSelectedButton">Request Selected</a></li> |
| <li><a href="#" class="clearResults">Clear</a></li> |
| </ul> |
| <ul class="nav navbar-nav navbar-right"> |
| <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 class="previous disabled"> |
| <a href="#">← Previous</a> |
| </li> |
| <li class="next disabled"> |
| <a href="#">Next →</a> |
| </li> |
| </ul> |
| <div class="navbar-text navbar-right">(Page <span class="pageNumber">0</span>) <span class="pageLength">0</span>/<span class="totalResults">0</span> Results</div> |
| </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> |
| <div class="panel panel-default" id="subsetting"> |
| <div class="panel-heading"> |
| <a data-toggle="collapse" href="#subsetMenu">Subsetting</a> |
| </div> |
| <div class="panel-collapse collapse" id="subsetMenu"> |
| <div class="panel-body"> |
| <div id="subsetVariables" class="well"></div> |
| <button type="button" class="btn btn-default" id="subsetAddVariableBtn">Add Variable</button> |
| <button type="button" class="btn btn-default" id="subsetAddTimeVariable">Add Time Variable</button> |
| <button type="button" class="btn btn-default" id="subsetAddLocVariable">Add Location Variable</button> |
| </div> |
| </div> |
| </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="row"> |
| <div class="floatRight"> |
| <button type="submit" class="btn btn-primary">Submit</button> |
| <button id="requestCancel" type="button" class="btn btn-default">Cancel</button> |
| </div> |
| </div> |
| </form> |
| <div> |
| <div class="list-group" id="direct-download-list"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| </body> |
| |
| </html> |