Gitiles
Code Review Sign In
gerrit.named-data.net / ndn-atmos / f912dead9f25ef967764f9b1c73a430eee672dbb / . / client / catalog / index.html
blob: 774b28ecf713e0ec6cc6da29f7d911c19f86c374 [file] [log] [blame]
Alison Craigef12da82015-03-06 09:41:43 -0700[diff] [blame]1<!DOCTYPE html>
2<html lang="en-US">
3
4<head>
Tyler Scott087aef72015-07-14 14:11:59 -0600[diff] [blame]5<title>NDN Query and Retrieval Tool</title>
Alison Craigef12da82015-03-06 09:41:43 -0700[diff] [blame]6
Tyler Scotte815d3e2015-07-09 16:56:17 -0600[diff] [blame]7<script>
Tyler Scottf95a97c2016-06-21 12:09:22 -0600[diff] [blame]8(function(i, s, o, g, r, a, m) {
Tyler Scott7ae6be02016-06-22 15:29:26 -0600[diff] [blame]9 i['GoogleAnalyticsObject'] = r;
10 i[r] = i[r] || function() {
11 (i[r].q = i[r].q || []).push(arguments)
12 }
13 ,
14 i[r].l = 1 * new Date();
15 a = s.createElement(o),
16 m = s.getElementsByTagName(o)[0];
17 a.async = 1;
18 a.src = g;
19 m.parentNode.insertBefore(a, m)
Tyler Scottf95a97c2016-06-21 12:09:22 -0600[diff] [blame]20})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
Tyler Scottf95a97c2016-06-21 12:09:22 -0600[diff] [blame]21ga('create', 'UA-64984905-1', 'auto');
22ga('send', 'pageview');
Tyler Scotte815d3e2015-07-09 16:56:17 -0600[diff] [blame]23</script>
24
Tyler Scott3c17d5f2015-06-23 17:49:29 -0600[diff] [blame]25<!-- Styles -->
Tyler Scott48f92cd2015-10-16 18:31:20 -0600[diff] [blame]26<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
Tyler Scott696d38f2015-08-04 22:41:22 -0600[diff] [blame]27<link rel="stylesheet" href="css/theme.min.css">
Tyler Scott696d38f2015-08-04 22:41:22 -0600[diff] [blame]28<link rel="stylesheet" href="css/style.css">
Alison Craigef12da82015-03-06 09:41:43 -0700[diff] [blame]29
Tyler Scottf95a97c2016-06-21 12:09:22 -0600[diff] [blame]30<!-- Scripts -->
Tyler Scottf912dea2016-08-09 21:50:34 +0000[diff] [blame^]31<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
32<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
33<script src="https://cdnjs.cloudflare.com/ajax/libs/async/2.0.1/async.min.js"></script>
34<script src="../ndn-js/build/ndn.min.js"></script>
35<script src="js/autocomplete.js"></script>
36<script src="js/treeExplorer.js"></script>
37<script src="js/loading-overlay.js"></script>
38<script src="js/catalog.js"></script>
Alison Craig1aced7d2015-04-10 12:00:02 -0600[diff] [blame]39
Alison Craigef12da82015-03-06 09:41:43 -0700[diff] [blame]40</head>
41
Tyler Scottf912dea2016-08-09 21:50:34 +0000[diff] [blame^]42<body>
Tyler Scottf355e452015-11-06 21:35:14 -0700[diff] [blame]43
44 <div id="templates">
45 <div class="row" id="timeTemplate">
46 <button class="col-xs-1 close" type="button">&times;</button>
47 <div class="col-xs-4">
48 <input type="text" class="form-control variable" value="time">
49 </div>
50 <div class="col-xs-7 values">
51 <input type="datetime" class="form-control" name="start" placeholder="Start">
52 <input type="datetime" class="form-control" name="end" placeholder="End">
53 </div>
54 </div>
55 <div class="row" id="locationTemplate">
56 <button class="col-xs-1 close" type="button">&times;</button>
57 <div class="col-xs-4">
58 <input type="text" class="form-control variable" value="coord">
59 </div>
60 <div class="col-xs-7 values">
61 <div class="input-group">
62 <input type="number" class="form-control" name="startLat" placeholder="Start Latitude">
63 <span class="input-group-addon">&deg; North</span>
64 </div>
65 <div class="input-group">
66 <input type="number" class="form-control" name="startLong" placeholder="Start Longitude">
67 <span class="input-group-addon">&deg; East</span>
68 </div>
69 <div class="input-group">
70 <input type="number" class="form-control" name="endLat" placeholder="End Latitude">
71 <span class="input-group-addon">&deg; North</span>
72 </div>
73 <div class="input-group values">
74 <input type="number" class="form-control" name="endLong" placeholder="End Longitude">
75 <span class="input-group-addon">&deg; East</span>
76 </div>
77 </div>
78 </div>
79 <div class="row" id="customTemplate">
80 <button class="col-xs-1 close" type="button">&times;</button>
81 <div class="col-xs-4">
82 <input type="text" class="form-control variable" placeholder="Variable Name">
83 </div>
84 <div class="col-xs-7 values">
85 <input type="text" class="form-control" name="value" placeholder="Custom Restriction">
86 </div>
87 </div>
88 </div>
89
Tyler Scott3c17d5f2015-06-23 17:49:29 -0600[diff] [blame]90 <header>
Tyler Scott08263852015-07-31 19:05:52 -0600[diff] [blame]91 <div class="navbar navbar-inverse navbar-static-top container-fluid">
Tyler Scott3c17d5f2015-06-23 17:49:29 -0600[diff] [blame]92 <div class="navbar-header">
Tyler Scottf95a97c2016-06-21 12:09:22 -0600[diff] [blame]93 <a class="navbar-brand" data-toggle="tab" href="#filterSearch" id="brand-title">NDN Query and Retrieval Tool</a>
Tyler Scott3c17d5f2015-06-23 17:49:29 -0600[diff] [blame]94 </div>
Tyler Scotte8dac702015-10-13 14:33:25 -0600[diff] [blame]95 <ul class="navbar-nav nav">
Tyler Scott7ae6be02016-06-22 15:29:26 -0600[diff] [blame]96 <li class="active" id="search-tab"><a data-toggle="tab" href="#filterSearch">Filter Search</a></li>
97 <li id="path-search-tab"><a data-toggle="tab" href="#path-search">Path Search</a></li>
98 <li id="tree-search-tab"><a data-toggle="tab" href="#tree-search">Tree Search</a></li>
Tyler Scotte8dac702015-10-13 14:33:25 -0600[diff] [blame]99 </ul>
Tyler Scott3c17d5f2015-06-23 17:49:29 -0600[diff] [blame]100 </div>
101 </header>
Alison Craigef12da82015-03-06 09:41:43 -0700[diff] [blame]102
Tyler Scott3c17d5f2015-06-23 17:49:29 -0600[diff] [blame]103 <div class="container-fluid">
Alison Craigef12da82015-03-06 09:41:43 -0700[diff] [blame]104
Tyler Scottf65b7102015-06-30 18:40:14 -0600[diff] [blame]105 <div class="row">
Alison Craigef12da82015-03-06 09:41:43 -0700[diff] [blame]106
Tyler Scottf355e452015-11-06 21:35:14 -0700[diff] [blame]107 <div class="col-sm-12 col-md-12">
Alison Craig1aced7d2015-04-10 12:00:02 -0600[diff] [blame]108
Tyler Scott4d951222015-07-31 14:38:27 -0600[diff] [blame]109 <div id="alerts"></div>
110
Tyler Scotte8dac702015-10-13 14:33:25 -0600[diff] [blame]111 <div class="panel panel-info tab-pane fade in active" id="filterSearch">
Tyler Scottf95a97c2016-06-21 12:09:22 -0600[diff] [blame]112 <div class="panel-heading">Filter Search</div>
Tyler Scott3c17d5f2015-06-23 17:49:29 -0600[diff] [blame]113 <div class="panel-body">
Tyler Scottf912dea2016-08-09 21:50:34 +0000[diff] [blame^]114 <div class="well">
Tyler Scottf355e452015-11-06 21:35:14 -0700[diff] [blame]115 <div id="filters"></div>
116 <button id="searchButton" class="btn btn-primary right-fix">Search</button>
117 </div>
118 <div>
Tyler Scotte8dac702015-10-13 14:33:25 -0600[diff] [blame]119 <div class="panel panel-primary">
120 <div class="panel-heading">
121 <span>Filter Categories</span>
122 </div>
123 <div class="panel-body">
124 <ul id="side-menu" class="nav nav-pills nav-stacked"></ul>
125 </div>
126 </div>
127 </div>
Tyler Scott4d951222015-07-31 14:38:27 -0600[diff] [blame]128 </div>
129 </div>
130
Tyler Scott7ae6be02016-06-22 15:29:26 -0600[diff] [blame]131 <div class="tab-pane fade" id="path-search">
Tyler Scottf95a97c2016-06-21 12:09:22 -0600[diff] [blame]132 <div class="panel panel-info" id="pathSearch">
133 <div class="panel-heading">Path Search</div>
134 <div class="panel-body">
135 <form class="form-inline" id="searchBar">
136 <div class="form-group">
137 <div class="input-group">
138 <input id="search" placeholder="Enter a path (Ex: /CMIP5)" type="text" class="form-control">
139 <div class="input-group-btn">
140 <button id="autoCompleteSearch" type="submit" class="btn btn-primary">Search</button>
141 </div>
Tyler Scott7d076e22015-07-06 19:21:50 -0600[diff] [blame]142 </div>
Tyler Scott93cae872015-07-21 14:58:23 -0600[diff] [blame]143 </div>
Tyler Scottf95a97c2016-06-21 12:09:22 -0600[diff] [blame]144 </form>
145 </div>
Tyler Scott3c17d5f2015-06-23 17:49:29 -0600[diff] [blame]146 </div>
Tyler Scott7ae6be02016-06-22 15:29:26 -0600[diff] [blame]147 </div>
148
149 <div class="tab-pane fade" id="tree-search">
150 <div class="panel panel-info" id="treeSearchPane">
Tyler Scottf95a97c2016-06-21 12:09:22 -0600[diff] [blame]151 <div class="panel-heading">Tree Search</div>
152 <div class="panel-body" id="treeSearch">
153 <div></div>
154 </div>
Tyler Scott918210b2015-08-28 13:15:40 -0600[diff] [blame]155 </div>
156 </div>
157
Tyler Scott3fc05272015-08-17 18:02:35 -0600[diff] [blame]158 <div id="results" class="panel panel-default hidden">
Tyler Scott3c17d5f2015-06-23 17:49:29 -0600[diff] [blame]159 <div class="panel-body">
Tyler Scottcdfcde82015-09-14 16:13:29 -0600[diff] [blame]160 <nav class="navbar navbar-inverse col-md-12 resultMenu">
Tyler Scott3fc05272015-08-17 18:02:35 -0600[diff] [blame]161 <ul class="nav navbar-nav navbar-left">
Tyler Scottbb42ed22015-10-21 17:02:56 -0600[diff] [blame]162 <li><a href="#" class="requestSelectedButton">Request Selected</a></li>
163 <li><a href="#" class="clearResults">Clear</a></li>
164 </ul>
165 <ul class="nav navbar-nav navbar-right">
Tyler Scott3fc05272015-08-17 18:02:35 -0600[diff] [blame]166 <li class="dropdown">
167 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Results Per Page <span class="caret"></span></a>
168 <ul class="dropdown-menu">
169 <li class="active"><a href="#" class="resultsPerPageSelector">25</a></li>
170 <li><a href="#" class="resultsPerPageSelector">50</a></li>
171 <li><a href="#" class="resultsPerPageSelector">100</a></li>
172 <li><a href="#" class="resultsPerPageSelector">200</a></li>
173 </ul>
174 </li>
Tyler Scottbb42ed22015-10-21 17:02:56 -0600[diff] [blame]175 <li class="previous disabled">
176 <a href="#">&larr; Previous</a>
177 </li>
Tyler Scott3fc05272015-08-17 18:02:35 -0600[diff] [blame]178 <li class="next disabled">
179 <a href="#">Next &rarr;</a>
180 </li>
Tyler Scottc55879f2015-07-28 14:56:37 -0600[diff] [blame]181 </ul>
Tyler Scottbb42ed22015-10-21 17:02:56 -0600[diff] [blame]182 <div class="navbar-text navbar-right">(Page <span class="pageNumber">0</span>) <span class="pageLength">0</span>/<span class="totalResults">0</span> Results</div>
Tyler Scottbb013562015-07-16 15:52:40 -0600[diff] [blame]183 </nav>
Tyler Scotta1ac69d2015-07-02 17:42:03 -0600[diff] [blame]184 <table id="resultTable" class="table"></table>
Tyler Scottcdfcde82015-09-14 16:13:29 -0600[diff] [blame]185 <nav class="navbar navbar-inverse col-md-12 resultMenu">
Tyler Scott3fc05272015-08-17 18:02:35 -0600[diff] [blame]186 <ul class="nav navbar-nav navbar-left">
Tyler Scottbb42ed22015-10-21 17:02:56 -0600[diff] [blame]187 <li><a href="#" class="requestSelectedButton">Request Selected</a></li>
188 <li><a href="#" class="clearResults">Clear</a></li>
189 </ul>
190 <ul class="nav navbar-nav navbar-right">
191 <li class="dropdown">
Tyler Scott3fc05272015-08-17 18:02:35 -0600[diff] [blame]192 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Results Per Page <span class="caret"></span></a>
193 <ul class="dropdown-menu">
194 <li class="active"><a href="#" class="resultsPerPageSelector">25</a></li>
195 <li><a href="#" class="resultsPerPageSelector">50</a></li>
196 <li><a href="#" class="resultsPerPageSelector">100</a></li>
197 <li><a href="#" class="resultsPerPageSelector">200</a></li>
198 </ul>
199 </li>
Tyler Scottbb42ed22015-10-21 17:02:56 -0600[diff] [blame]200 <li class="previous disabled">
201 <a href="#">&larr; Previous</a>
202 </li>
Tyler Scott3fc05272015-08-17 18:02:35 -0600[diff] [blame]203 <li class="next disabled">
204 <a href="#">Next &rarr;</a>
205 </li>
Tyler Scottc55879f2015-07-28 14:56:37 -0600[diff] [blame]206 </ul>
Tyler Scottbb42ed22015-10-21 17:02:56 -0600[diff] [blame]207 <div class="navbar-text navbar-right">(Page <span class="pageNumber">0</span>) <span class="pageLength">0</span>/<span class="totalResults">0</span> Results</div>
Tyler Scottc55879f2015-07-28 14:56:37 -0600[diff] [blame]208 </nav>
209 </div>
Tyler Scott3c17d5f2015-06-23 17:49:29 -0600[diff] [blame]210 </div>
Alison Craig1aced7d2015-04-10 12:00:02 -0600[diff] [blame]211
Tyler Scott3c17d5f2015-06-23 17:49:29 -0600[diff] [blame]212 </div>
Alison Craig1aced7d2015-04-10 12:00:02 -0600[diff] [blame]213
Alison Craigef12da82015-03-06 09:41:43 -0700[diff] [blame]214 </div>
Alison Craigef12da82015-03-06 09:41:43 -0700[diff] [blame]215
Tyler Scott3c17d5f2015-06-23 17:49:29 -0600[diff] [blame]216 </div>
Alison Craigef12da82015-03-06 09:41:43 -0700[diff] [blame]217
Tyler Scottf912dea2016-08-09 21:50:34 +0000[diff] [blame^]218 <div class="popup">
Tyler Scottcdfcde82015-09-14 16:13:29 -0600[diff] [blame]219 <div id="request" class="panel panel-primary">
220 <div class="panel-heading">Confirmation</div>
221 <div class="panel-body">
222 <form id="requestForm">
223 <p>Select a destination and press submit if you are sure you want to download the selected data to the selected destination.</p>
224 <div class="dropdown">
225 <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Tyler Scottb59e6de2015-09-18 14:46:30 -0600[diff] [blame]226 <span id="requestDropText">Destination<span>
Tyler Scottcdfcde82015-09-14 16:13:29 -0600[diff] [blame]227 <span class="caret"></span>
228 </button>
229 <ul id="requestDest" class="dropdown-menu"></ul>
230 </div>
Tyler Scottf355e452015-11-06 21:35:14 -0700[diff] [blame]231 <div class="panel panel-default" id="subsetting">
232 <div class="panel-heading">
233 <a data-toggle="collapse" href="#subsetMenu">Subsetting</a>
234 </div>
235 <div class="panel-collapse collapse" id="subsetMenu">
236 <div class="panel-body">
237 <div id="subsetVariables" class="well"></div>
238 <button type="button" class="btn btn-default" id="subsetAddVariableBtn">Add Variable</button>
239 <button type="button" class="btn btn-default" id="subsetAddTimeVariable">Add Time Variable</button>
240 <button type="button" class="btn btn-default" id="subsetAddLocVariable">Add Location Variable</button>
241 </div>
242 </div>
243 </div>
Tyler Scottcdfcde82015-09-14 16:13:29 -0600[diff] [blame]244 <!-- Disabled For Demo
245 <div class="form-group">
246 <label>Authentication Key</label>
247 <input type="file" class="form-control" placeholder="JSON encoded RSA key">
248 <p class="help-block">It is required that you have authentication to move the files, otherwise this will fail.</p>
249 </div>
250 <div id="requestDrop" class="well">You can also drop your key here instead of using the input above.</div>
251 -->
Tyler Scottf355e452015-11-06 21:35:14 -0700[diff] [blame]252 <div class="row">
253 <div class="floatRight">
254 <button type="submit" class="btn btn-primary">Submit</button>
255 <button id="requestCancel" type="button" class="btn btn-default">Cancel</button>
256 </div>
Tyler Scottcdfcde82015-09-14 16:13:29 -0600[diff] [blame]257 </div>
258 </form>
Tyler Scott384f37a2016-05-05 16:09:05 -0600[diff] [blame]259 <div>
Tyler Scott7ae6be02016-06-22 15:29:26 -0600[diff] [blame]260 <div class="list-group" id="direct-download-list"></div>
Tyler Scott384f37a2016-05-05 16:09:05 -0600[diff] [blame]261 </div>
Tyler Scottcdfcde82015-09-14 16:13:29 -0600[diff] [blame]262 </div>
263 </div>
264 </div>
265
Tyler Scottf912dea2016-08-09 21:50:34 +0000[diff] [blame^]266 <div class="popup">
267 <div id="loading" class="panel panel-primary loading">
268 <div class="panel-heading">Loading</div>
269 <div class="panel-body">
270 <span id="loading-text">Please wait while we finish loading your request.</span>
271 <span id="cancel-text">Your request has been cancelled.</span>
272 <div class="row">
273 <div class="col-sm-12">
274 <div class="progress">
275 <div class="progress-bar progress-bar-striped active" style="width:100%;">Loading...</div>
276 </div>
277 </div>
278 </div>
279 <div class="row">
280 <div class="col-sm-12">
281 <button id="loading-cancel" class="btn btn-danger pull-right">Cancel</button>
282 </div>
283 </div>
284 </div>
285 </div>
286 </div>
287
Alison Craigef12da82015-03-06 09:41:43 -0700[diff] [blame]288</body>
289
290</html>