Gitiles
Code Review Sign In
asterix-gerrit.ics.uci.edu / asterixdb / b71a9d09b8f5117e6aa903a172d365d217b4357b / . / asterix-examples / src / main / resources / tweetbook-demo / tweetbook.tpl
blob: 5e81a825a0faad371a61cdace55666186e08db3c [file] [log] [blame]
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]1<!DOCTYPE html>
Till Westmann0f6ee0a2015-10-02 17:10:19 -0700[diff] [blame]2<!--
3 ! Licensed to the Apache Software Foundation (ASF) under one
4 ! or more contributor license agreements. See the NOTICE file
5 ! distributed with this work for additional information
6 ! regarding copyright ownership. The ASF licenses this file
7 ! to you under the Apache License, Version 2.0 (the
8 ! "License"); you may not use this file except in compliance
9 ! with the License. You may obtain a copy of the License at
10 !
11 ! http://www.apache.org/licenses/LICENSE-2.0
12 !
13 ! Unless required by applicable law or agreed to in writing,
14 ! software distributed under the License is distributed on an
15 ! "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16 ! KIND, either express or implied. See the License for the
17 ! specific language governing permissions and limitations
18 ! under the License.
19 !-->
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]20<html style="width: 100%; height: 100%;">
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]21<head>
22 <title>ASTERIX Demo</title>
23 <meta name="viewport" content="width=device-width, initial-scale=1.0">
genia.likes.science@gmail.com6d6aa8e2013-07-23 01:23:21 -0700[diff] [blame]24
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]25 <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]26
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]27 <!-- Bootstrap & jQuery Styles -->
28 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
29 <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]30
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]31 <!-- Bootstrap Javascript -->
Eugenia Gabrielovaf29a55f2013-10-28 03:18:18 -0700[diff] [blame]32 <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places,drawing,geometry" type="text/javascript"></script>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]33
34 <script src="http://code.jquery.com/jquery.min.js"></script>
35 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
36 <script src="static/js/bootstrap.min.js"></script>
37 <script src="static/js/asterix-sdk-stable.js"></script>
38 <script src="static/js/rainbowvis.js"></script>
zheilbronbebb2202014-03-28 14:36:52 -0700[diff] [blame]39 <script src="static/js/tweetbook.js"></script>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]40
41 <style type="text/css">
42
43 .tab-content {
44 clear: none;
45 }
46
47 #map_canvas img {
48 max-width: none;
49 }
50
51 .panel-primary {
52 border-color: #273f93;
53 }
54
55 .panel-primary .panel-heading {
56 color: white;
57 background-color: #273f93;
58 border-color: #273f93;
59 }
60
61 #start-date, #end-date {
62 position: relative; z-index:100;
63 }
64
65 #keyword-textbox, #location-text-box {
66 width: 100%;
67 }
68 </style>
69</head>
70<body style="width: 100%; height: 100%;">
71
72 <!-- Nav -->
73 <div class="navbar navbar-default navbar-static-top">
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]74 <div class="container">
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]75 <div class="navbar-header">
76 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
77 <span class="icon-bar"></span>
78 <span class="icon-bar"></span>
79 <span class="icon-bar"></span>
80 </button>
81 <a class="navbar-brand" href="#" style="padding: 0.25em;">
82 <img src="static/img/finalasterixlogo.png">
83 </a>
84 </div>
85 <div class="navbar-collapse collapse">
86 <ul class="nav navbar-nav" id="mode-tabs">
87 <li id="about-active"><a data-toggle="tab" id="about-mode" href="#about-tab">About</a></li>
88 <li id="explore-active" class="active"><a data-toggle="tab" id="explore-mode" href="#demo-tab">Explore</a></li>
89 <li id="review-active"><a data-toggle="tab" id="review-mode" href="#demo-tab">Review</a></li>
90 </ul>
91 </div>
92 </div>
93 </div><!-- /Nav -->
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]94
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]95 <div class="tab-content">
96
97 <!-- Begin About Tab -->
98 <div class="tab-pane" id="about-tab">
99 <div class="container">
100 <!-- Welcome Message -->
101 <div class="row">
zheilbronbebb2202014-03-28 14:36:52 -0700[diff] [blame]102 <p>Welcome to the top-level page of the Tweetbook 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>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]103
zheilbronbebb2202014-03-28 14:36:52 -0700[diff] [blame]104 <p>In this demo, which is based on spatial analysis of Tweets, 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). Let's walk through the demo.</p>
Eugenia Gabrielovae11965b2013-10-29 19:07:42 -0700[diff] [blame]105 </div>
106
107 <hr/>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]108
Eugenia Gabrielovae11965b2013-10-29 19:07:42 -0700[diff] [blame]109 <!-- Tutorial Part 1: Overview -->
110 <div style="margin-bottom: 2em; text-align: center;">
111 <img src="static/img/Tutorial1.png" style="max-width:100%;">
112 </div><hr/>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]113
Eugenia Gabrielovae11965b2013-10-29 19:07:42 -0700[diff] [blame]114 <!-- Tutorial Part 2: Location Search -->
115 <div style="margin-bottom: 2em; text-align: center;">
116 <img src="static/img/Tutorial2.png" style="max-width:100%;">
117 </div><hr/>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]118
Eugenia Gabrielovae11965b2013-10-29 19:07:42 -0700[diff] [blame]119 <!-- Tutorial Part 3: Search Results, Drilling Down, Saving Comments -->
120 <div style="margin-bottom: 2em; text-align: center;">
121 <img src="static/img/Tutorial3.png" style="max-width:100%;">
122 </div><hr/>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]123
Eugenia Gabrielovae11965b2013-10-29 19:07:42 -0700[diff] [blame]124 <!-- Tutorial Part 4: Review Mode -->
125 <div style="margin-bottom: 2em; text-align: center;">
126 <img src="static/img/Tutorial4.png" style="max-width:100%;">
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]127 </div>
128 </div>
129 </div><!-- End About Tab -->
130
131 <!-- Begin Main Demo Tab -->
132 <div class="tab-pane active" id="demo-tab">
133 <div class="container">
134 <div class="row">
135 <!-- Left Column -->
136 <div class="col-md-5">
137
138 <!-- Explore Mode: Query Builder Column -->
139 <div class="container well" id="explore-well">
140
141 <!-- Query Builder -->
142 <div class="panel panel-primary">
143 <div class="panel-heading"><h4><b>Query Builder</b></h4></div>
144 <ul class="list-group">
145
146 <!-- Search Keyword -->
147 <li class="list-group-item">
148 <h4 class="list-group-item-heading">Keyword</h4>
149 <input type="text" id="keyword-textbox" placeholder="Enter a keyword, e.g., verizon">
150 </li>
151
152 <!-- Location -->
153 <li class="list-group-item">
154 <h4 class="list-group-item-heading">Location</h4>
155 <input class="textbox" type="text" id="location-text-box">
156 <div class="btn-group" data-toggle="buttons">
Eugenia Gabrielovaea8f9482013-10-28 04:49:18 -0700[diff] [blame]157 <label id="location-label" class="btn btn-default">
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]158 <input type="radio" id="location-button"> Location
159 </label>
Eugenia Gabrielovaea8f9482013-10-28 04:49:18 -0700[diff] [blame]160 <label id="selection-label" class="btn btn-default">
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]161 <input type="radio" id="selection-button"> Selection
162 </label>
163 </div>
164 </li>
165
166 <!-- Date Range -->
167 <li class="list-group-item">
168 <h4 class="list-group-item-heading">Limit Date Range</h4>
169 <input type="text" class="textbox" id="start-date"><span class="badge">Start Date</span><br/>
170 <input type="text" class="textbox" id="end-date"><span class="badge">End Date</span>
171 </li>
172
173 <!-- Results Resolution -->
174 <li class="list-group-item">
175 <h4 class="list-group-item-heading">Result Group Size</h4>
176
177 <div class="grid-slider" id="grid-lat-slider"></div>
178 <div class="control-label">Latitude: <span id="gridlat">3.0</span></div>
179
180 <div class="grid-slider" id="grid-lng-slider"></div>
181 <div class="control-label">Longitude: <span id="gridlng">3.0</span></div>
182 </li>
183
184 <!-- Submission Buttons -->
185 <li class="list-group-item">
186 <button class="btn btn-primary" type="button" id="submit-button">Submit</button>
Eugenia Gabrielovae11965b2013-10-29 19:07:42 -0700[diff] [blame]187 <button class="btn btn-primary" type="button" id="clear-button">Clear</button><br/>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]188 <input type="checkbox" value="Submit Asynchronously" name="async" id="asbox" />
189 Submit asynchronously?
190 </li>
191 </ul>
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]192 </div>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]193 </div><!-- End Query Build Column -->
194
195 <!-- Review Mode: Tweetbooks and Async Query Review Column -->
196 <div class="container well" id="review-well" style="display:none;">
197 <div class="panel panel-default">
198 <div class="panel-heading">
199 <h4 class="panel-title">Tweetbooks</h4>
genia.likes.science@gmail.com1400a752013-10-04 04:59:12 -0700[diff] [blame]200 </div>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]201 <div class="panel-body">
202 <!-- Box to add a new Tweetbook -->
203 <div class="input-group">
204 <input type="text" class="form-control" id="new-tweetbook-entry" placeholder="Name a new tweetbook">
205 <span class="input-group-btn">
206 <button type="button" class="btn" id="new-tweetbook-button">Add</button>
207 </span>
208 </div>
209 <hr/>
210
211 <!-- List to add existing tweetbooks -->
212 <div class="btn-group-vertical" id="review-tweetbook-titles"></div>
213 </div>
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]214 </div>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]215
216 <!-- Background queries -->
217 <div class="panel panel-default">
218 <div class="panel-heading">
219 <h4 class="panel-title">Background Queries</h4>
220 </div>
221 <div class="panel-body">
222 <!-- Add existing background queries to list -->
223 <div class="btn-group-vertical" id="review-tweetbook-titles"></div>
224 <div id="async-handle-controls"></div>
225 </div>
226 </div>
227 </div><!-- end Review Mode Column -->
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]228
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]229 <!-- Container to hold success/error messages -->
230 <div id="report-message"></div>
231 </div><!-- End Left Column -->
232
233 <!-- Right column holds map & legend -->
234 <div class="col-md-7">
Eugenia Gabrielova8b34c652013-10-19 06:53:27 -0700[diff] [blame]235 <!-- Map Container -->
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]236 <div class="container well" id="right-col">
Eugenia Gabrielovad07556a2013-10-11 03:45:06 -0700[diff] [blame]237 <div id="map_canvas" style="max-width: 100%; height: auto;"></div>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]238 </div>
239
Eugenia Gabrielova8b34c652013-10-19 06:53:27 -0700[diff] [blame]240 <!-- Legend Container -->
Eugenia Gabrielovad6e88e02013-10-19 08:26:54 -0700[diff] [blame]241 <div id="rainbow-legend-container" class="container well" style="display:none;">
Eugenia Gabrielovad6e88e02013-10-19 08:26:54 -0700[diff] [blame]242 <div class="row">
Zachary Heilbrona16fb6f2014-03-10 13:53:54 -0700[diff] [blame]243 <div class="col-md-4 col-md-offset-4" style="text-align: center;"># Tweets</div>
Eugenia Gabrielovad6e88e02013-10-19 08:26:54 -0700[diff] [blame]244 </div>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]245
Eugenia Gabrielovad6e88e02013-10-19 08:26:54 -0700[diff] [blame]246 <div class="row">
Zachary Heilbrona16fb6f2014-03-10 13:53:54 -0700[diff] [blame]247 <div id="legend-min" class="col-md-2 col-md-offset-1" style="text-align:right;"></div>
Eugenia Gabrielovad6e88e02013-10-19 08:26:54 -0700[diff] [blame]248 <div id="legend-gradient" class="col-md-5" style="text-align: center;"></div>
249 <div id="legend-max" class="col-md-2"></div>
Eugenia Gabrielova8b34c652013-10-19 06:53:27 -0700[diff] [blame]250 </div>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]251 </div><!-- End Legend Container -->
252 </div><!-- End Right Column -->
253 </div><!-- End Row -->
254
255 <!-- Tweetbook Comment Container -->
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]256 <div class="modal fade" id="drilldown_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]257 <div class="modal-dialog">
258 <div class="modal-content">
259 <div class="modal-body" id="drilldown_modal_body">
genia.likes.science@gmail.com0f67d9e2013-10-04 17:08:50 -0700[diff] [blame]260
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]261 <!-- Tweet -->
262 <div id="modal-body-tweet" class="well well-sm"></div>
263
264 <!-- Existing comments about this tweet -->
265 <!-- Create new comment -->
266 <div class="panel panel-default" id="modal-existing-note">
267 <div class="panel-heading">About this Tweetbook</div>
268 <div class="panel-body" id="modal-body-notes-holder">
269
270 <div class="input-group">
271 <input type="text" class="form-control" id="modal-body-tweet-note">
272 <span class="input-group-btn">
273 <button class="btn btn-default" id="modal-body-trash-icon">
274 <span class="glyphicon glyphicon-trash"></span>
275 </button>
276 </span>
277 <span class="badge" id="modal-current-tweetbook"></span>
genia.likes.science@gmail.com0f67d9e2013-10-04 17:08:50 -0700[diff] [blame]278 </div>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]279
280 </div>
281 </div>
282
283 <!-- Create new comment -->
284 <div class="panel panel-default" id="modal-save-tweet-panel">
285 <div class="panel-heading">Save to tweetbook</div>
286 <div class="panel-body" id="modal-save-body">
287
288 <div class="input-group">
289 <span class="input-group-addon">Note</span>
290 <input type="text" class="form-control" id="modal-body-add-note" placeholder="Add a note about this tweet">
291 </div>
292
293 <div class="input-group">
294 <span class="input-group-addon">Add to</span>
295 <input type="text" class="form-control" id="modal-body-add-to" placeholder="Add it to a Tweetbook">
296 </div><br/>
297
298 <!-- Comment on tweet to save -->
299 <button type="button" class="btn btn-default" id="save-comment-tweetbook-modal">Save</button>
300
301 <div id="modal-body-message-holder"></div>
302
303 </div>
304 </div>
305 </div>
306 <div class="modal-footer">
307 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]308 </div>
309 </div>
genia.likes.science@gmail.com2de4c182013-10-04 11:39:11 -0700[diff] [blame]310 </div>
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]311 </div><!-- Modal -->
312 </div><!-- End Container -->
313 </div><!-- End Main Demo Tab -->
genia.likes.science@gmail.com724476d2013-10-04 03:31:16 -0700[diff] [blame]314
Eugenia Gabrielovaab1ae552013-10-20 01:12:19 -0700[diff] [blame]315 </div><!-- End tab list -->
316</body>
Eugenia Gabrielovaf29a55f2013-10-28 03:18:18 -0700[diff] [blame]317</html>