Gitiles
Code Review Sign In
asterix-gerrit.ics.uci.edu / asterixdb / 0f67d9ea669ba6e81e33fd5f03549acb4219dbec / . / asterix-examples / src / main / resources / black-cherry / cherry.tpl
blob: 80ac5cf8a5bc719172283a0e137af101f18ab3e8 [file] [log] [blame]
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]1<!DOCTYPE html>
2<html style="width: 100%; height: 100%;">
3 <head>
4 <title>ASTERIX Demo</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
genia.likes.science@gmail.comd42b4022013-08-09 05:05:23 -0700[diff] [blame]7 <link rel="shortcut icon" type="image/png" href="static/img/hyrax.png">
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]8
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]9 <!-- Bootstrap & jQuery Styles -->
10 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
11 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]12
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]13 <!-- Bootstrap Javascript -->
14 <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]15
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]16 <script src="http://code.jquery.com/jquery.min.js"></script>
17 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
18 <script src="static/js/bootstrap.min.js"></script>
19 <script src="static/js/geostats.js"></script>
20 <script src="static/js/asterix-sdk-stable.js"></script>
21 <script src="static/js/cherry.js"></script>
22
23 <style type="text/css">
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]24
25 #map_canvas img {
26 max-width: none;
27 }
28
29 #legend-holder {
30 background: white;
31 padding: 10px;
32 margin: 10px;
33 text-align: center;
34 }
35
36 #review-handles-dropdown {
genia.likes.science@gmail.com4259a542013-08-18 20:06:58 -0700[diff] [blame]37 padding: 0.5em;
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]38 }
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]39
40 .panel-primary {
41 border-color: #273f93;
42 }
43
44 .panel-primary .panel-heading {
45 color: white;
46 background-color: #273f93;
47 border-color: #273f93;
48 }
49
50 #start-date, #end-date {
51 position: relative; z-index:100;
52 }
53
54 #keyword-textbox, #location-text-box {
55 width: 100%;
56 }
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]57
58 </style>
59 </head>
60 <body style="width: 100%; height: 100%;">
61
62 <!-- Nav -->
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]63 <div class="navbar navbar-default navbar-static-top">
64 <div class="container">
65 <div class="navbar-header">
66 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
67 <span class="icon-bar"></span>
68 <span class="icon-bar"></span>
69 <span class="icon-bar"></span>
70 </button>
71 <a class="navbar-brand" href="#" style="padding: 0.25em;">
72 <img src="static/img/finalasterixlogo.png">
73 </a>
74 </div>
75 <div class="navbar-collapse collapse">
76 <ul class="nav navbar-nav">
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]77 <li id="about-active"><a id="about-mode" href="#">About</a></li>
78 <li id="explore-active" class="active"><a id="explore-mode" href="#">Explore</a></li>
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]79 <li id="review-active"><a id="review-mode" href="#">Review</a></li>
80 </ul>
81 </div>
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]82 </div>
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]83 </div><!-- /Nav -->
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]84
85 <!-- Search Box -->
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]86 <div class="container">
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]87
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]88 <div class="row" id="r1">
89 <div class="col-md-5">
90 <div class="container well" id="explore-well">
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]91
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]92 <!-- Query Builder -->
93 <div class="panel panel-primary">
94 <div class="panel-heading"><h4><b>Query Builder</b></h4></div>
95
96 <!-- List group -->
97 <ul class="list-group">
98
99 <!-- Search Keyword -->
100 <li class="list-group-item">
101 <h4 class="list-group-item-heading">Keyword</h4>
102 <input type="text" id="keyword-textbox" placeholder="Enter a keyword, e.g., verizon">
103 </li>
104
105 <!-- Location -->
106 <li class="list-group-item">
107 <h4 class="list-group-item-heading">Location</h4>
108 <input class="textbox" type="text" id="location-text-box">
109 <div class="btn-group" data-toggle="buttons">
110 <label class="btn btn-default">
111 <input type="radio" id="location-button"> Location
112 </label>
113 <label class="btn btn-default">
114 <input type="radio" id="selection-button"> Selection
115 </label>
116 </div>
117 </li>
118
119 <!-- Date Range -->
120 <li class="list-group-item">
121 <h4 class="list-group-item-heading">Limit Date Range</h4>
122 <input type="text" class="textbox" id="start-date"><span class="badge">Start Date</span><br/>
123 <input type="text" class="textbox" id="end-date"><span class="badge">End Date</span>
124 </li>
125
126 <!-- Results Resolution -->
127 <li class="list-group-item">
128 <h4 class="list-group-item-heading">Result Group Size</h4>
129 <div class="grid-slider" id="grid-lat-slider"></div>
130 <div class="control-label">Latitude: <span id="gridlat">3.0</span></div>
131
132 <div class="grid-slider" id="grid-lng-slider"></div>
133 <div class="control-label">Longitude: <span id="gridlng">3.0</span></div>
134 </li>
135
136 <!-- Submission Buttons -->
137 <li class="list-group-item">
138 <button id="submit-button">Submit</button>
139 <button id="clear-button">Clear</button>
140 <button id="show-query-button">Show Query</button><br/>
141 <input type="checkbox" value="Submit Asynchronously" name="async" id="asbox" />
142 Submit asynchronously?
143 </li>
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]144 </ul>
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]145 </div>
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]146
147 </div>
148
149 <div class="container well" id="review-well" style="display:none;">
150
151 <!-- Tweetbooks -->
152 <div class="panel panel-default">
153 <div class="panel-heading">
154 <h4 class="panel-title">Tweetbooks</h4>
155 </div>
156 <div class="panel-body">
157 <!-- Box to add a new Tweetbook -->
158 <div class="input-group">
159 <input type="text" class="form-control" id="new-tweetbook-entry" placeholder="Name a new tweetbook">
160 <span class="input-group-btn">
161 <button type="button" class="btn" id="new-tweetbook-button">Add</button>
162 </span>
genia.likes.science@gmail.com1400a752013-10-04 04:59:12 -0700[diff] [blame]163 </div>
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]164 <hr/>
165
166 <!-- List to add existing tweetbooks -->
167 <div class="btn-group-vertical" id="review-tweetbook-titles"></div>
168 </div>
169 </div>
170
171 <!-- Background queries -->
172 <div class="panel panel-default">
173 <div class="panel-heading">
174 <h4 class="panel-title">Background Queries</h4>
175 </div>
176 <div class="panel-body">
177 <!-- Add existing background queries to list -->
178 <div class="btn-group-vertical" id="review-tweetbook-titles"></div>
179 <div id="async-handle-controls"></div>
genia.likes.science@gmail.com1400a752013-10-04 04:59:12 -0700[diff] [blame]180 </div>
181 </div>
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]182 </div>
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]183 </div>
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]184
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]185 <div class="col-md-7">
186 <div class="container well" id="right-col">
187 <div id="map_canvas" style="width: 100%; height: 100%;"></div>
188 <div id="map_canvas_legend" style="display:none;"></div>
189 </div>
190 </div>
191 </div>
192
193 <!-- Modals and Dialogs -->
194 <div class="row">
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]195 <!-- Show Query -> Error TODO Doesn't need to be this complicated... -->
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]196 <div id="dialog"><h4>You must submit a query first.</h4></div>
197
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]198 <!-- On Drilldown, here is a nice modal -->
199 <div class="modal fade" id="drilldown_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
200 <div class="modal-dialog">
201 <div class="modal-content">
202 <div class="modal-header">
203 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
204 <h4 class="modal-title">Explore Tweets</h4>
205 </div>
genia.likes.science@gmail.com0f67d9e2013-10-04 17:08:50 -0700[diff] [blame^]206 <div class="modal-body" id="drilldown_modal_body">
207
208 <!-- Tweet -->
209 <div id="modal-body-tweet" class="well well-sm">TWEET GOES HERE</div>
210
211 <!-- Existing comments about this tweet -->
212 <!-- Create new comment -->
213 <div class="panel panel-default">
214 <div class="panel-heading">In this Tweetbook</div>
215 <div class="panel-body" id="modal-body-notes-holder">
216
217 <div class="input-group" id="modal-existing-note">
218 <input type="text" class="form-control" id="modal-body-tweet-note">
219 <span class="input-group-btn">
220 <button class="btn btn-default" id="modal-body-trash-icon">
221 <span class="glyphicon glyphicon-trash"></span>
222 </button>
223 </span>
224 <span class="badge" id="modal-current-tweetbook"></span>
225 </div>
226
227 </div>
228 </div>
229
230 <!-- Create new comment -->
231 <div class="panel panel-default">
232 <div class="panel-heading">Save to tweetbook</div>
233 <div class="panel-body" id="modal-save-body">
234
235 <div class="input-group">
236 <span class="input-group-addon">Note</span>
237 <input type="text" class="form-control" id="modal-body-add-note" placeholder="Add a note about this tweet">
238 </div>
239
240 <div class="input-group">
241 <span class="input-group-addon">Add to</span>
242 <input type="text" class="form-control" id="modal-body-add-to" placeholder="Add it to a Tweetbook">
243 </div><br/>
244
245 <!-- Comment on tweet to save -->
246 <button type="button" class="btn btn-default" id="save-comment-tweetbook-modal">Save</button>
247 </div>
248 </div>
249 </div>
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]250 <div class="modal-footer">
251 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
252 </div>
253 </div>
254 </div>
255 </div><!-- Modal -->
256
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]257 </div><!-- Row -->
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]258
259 <!-- About Row -->
genia.likes.science@gmail.com0f67d9e2013-10-04 17:08:50 -0700[diff] [blame^]260 <div class="row" id="aboutr" style="display:none;">
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]261 <div class="container">
262 <div id="welcome-message">
263 <p>Welcome to the top-level page of the mysteriously named Black Cherry Demo of AsterixDB. The purpose of this demo is to illustrate how a "cool application" can be built using the JavaScript SDK of AsterixDB and to exercise all of the AsterixDB HTTP APIs. If you are building an app of your own, reading the code for this app is a great way to get acquainted with what you'll need to know.</p>
264
265 <p>In this demo, which is based on spatial analysis of Tweets (it is 2013, afterall), you will see how to formulate aggregate queries and drill-down queries using the query door of the AsterixDB API. You will see how to do this either synchronously or asynchronously (for larger queries whose results may take a while to cook). You will also see how to create and drop datasets (to manage Tweetbooks, notebooks with user commentary on Tweets) and how to perform inserts and deletes (to add/remove Tweetbook entries). Enjoy!</p>
266 </div>
genia.likes.science@gmail.com0f67d9e2013-10-04 17:08:50 -0700[diff] [blame^]267
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]268 </div>
269 </div><!-- /About -->
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]270
271 </div><!-- container -->
272 </body>
273</html>