Gitiles
Code Review Sign In
asterix-gerrit.ics.uci.edu / asterixdb / 99e82c6c812a58d355b38e6a7a0078faa1c96023 / . / asterix-app / src / main / resources / webui / querytemplate.html
blob: 79130e1a116d7c571714594c9259f250fdf37da7 [file] [log] [blame]
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame^]1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta name="description" content="ASTERIX WEB PAGE" />
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<link href='http://fonts.googleapis.com/css?family=Bitter|PT+Sans+Caption|Open+Sans' rel='stylesheet' type='text/css'>
7<script src="http://code.jquery.com/jquery.min.js"></script>
8<script src="http://www.jacklmoore.com/js/jquery.autosize.js"></script>
9
10<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
11<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
12
13
14<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
15
16<script type="text/javascript">
17$(document).ready(function(){
18 $('textarea').autosize();
19
20 $("form#queryform").submit(function() {
21 $.post("/", $("form#queryform").serialize(), function(data) {
22 $('#output-message').html(data);
23 });
24 return false;
25 });
26});
27</script>
28
29<meta charset=utf-8 />
30<title>ASTERIX Demo</title>
31<style id="jsbin-css">
32body {
33 background: none repeat scroll 0 0 white;
34 color: #222222;
35 font-family: 'Bitter';
36 font-size: 14px;
37 line-height: 17px;
38 width: 100%;
39}
40
41.content {
42 margin-top: 70px;
43}
44
45label.query, label.result {
46 font-size: 24px;
47 padding-bottom: 10px;
48 font-weight: bold;
49}
50
51div.host {
52 float: left;
53 margin: 0 100px 0 10px;
54}
55
56div.port {
57}
58
59div.left {
60 float: left;
61 width: 320px;
62 padding: 0 20px 0 10px;
63}
64
65div.right {
66}
67
68button.btn {
69 clear: both;
70 float: left;
71 margin: 20px 0 0 10px;;
72}
73
74textarea.query {
75 -webkit-box-sizing: border-box;
76 -moz-box-sizing: border-box;
77 -ms-box-sizing: border-box;
78 box-sizing: border-box;
79 font-size: 16px;
80 line-height: 20px;
81 font-family: bitter, helvetica;
82 width: 100%;
83 padding: 10px;
84 color: #999;
85 resize: none;
86 border: 10px solid #eee;
87}
88
89textarea.query:focus {
90 outline: none;
91 color: #333;
92}
93
94label {
95 padding-top: 10px;
96}
97
98input[type=text] {
99 height: 20px;
100}
101
102pre {
103 overflow: auto;
104 white-space: pre;
105}
106
107div.output label.heading {
108 font-size: 24px;
109 margin-top: 2px;
110 padding-bottom: 10px;
111 font-weight: bold;
112}
113
114div.output .message {
115 -webkit-box-sizing: border-box;
116 -moz-box-sizing: border-box;
117 -ms-box-sizing: border-box;
118 box-sizing: border-box;
119 color: #000;
120 resize: none;
121}
122
123div.error label.heading {
124 color: #ff2020;
125 font-size: 24px;
126 margin-top: 2px;
127 padding-bottom: 10px;
128 font-weight: bold;
129}
130
131div.error .message {
132 -webkit-box-sizing: border-box;
133 -moz-box-sizing: border-box;
134 -ms-box-sizing: border-box;
135 box-sizing: border-box;
136 border-color: rgba(82, 168, 236, 0.8);
137 outline: 0;
138 outline: thin dotted 9;
139
140 -webkit-box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.8);
141 -moz-box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 1.0);
142 box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 1.0);
143 color: #000;
144 resize: none;
145 border: 1px solid #eee;
146 margin-top: 7px;
147 padding: 20px 20px 20px 20px;
148}
149
150.footer {
151 margin-top: 40px;
152}
153
154.footer .line {
155 border-top: 1px solid #EEEEEE;
156 bottom: 20px;
157 height: 10px;
158 left: 0;
159 position: fixed;
160 width: 100%;
161}
162
163.footer .content {
164 background: none repeat scroll 0 0 #FFFFFF;
165 bottom: 0;
166 color: #666666;
167 font-size: 12px;
168 height: 25px;
169 left: 0;
170 padding-top: 5px;
171 position: fixed;
172 width: 100%;
173}
174
175.footer .content .left {
176 padding-left: 20px;
177 float: left;
178}
179
180.footer .content .right {
181 padding-right: 20px;
182 float: right;
183}
184</style>
185</head>
186
187<body>
188 <div class="navbar navbar-inverse navbar-fixed-top">
189 <div class="navbar-inner">
190 <div class="container">
191 <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
192 <span class="icon-bar"></span>
193 <span class="icon-bar"></span>
194 <span class="icon-bar"></span>
195 </a>
196 <a class="brand" href="#">ASTERIX</a>
197 <div class="nav-collapse collapse">
198 <ul class="nav">
199 <li><a href="http://code.google.com/p/asterixdb/source/browse/">Open source</a></li>
200 <li><a href="http://code.google.com/p/asterixdb/issues/list">File issues</a></li>
201 <li><a href="https://groups.google.com/forum/?fromgroups#!forum/asterixdb-userst">Contact</a></li>
202 </ul>
203 </div><!--/.nav-collapse -->
204 </div>
205 </div>
206 </div>
207
208 <div class="content">
209 <div class="container">
210 <div class="row-fluid">
211 <div class="span6">
212 <form id="queryform" class="form-horizontal" method="post">
213 <div>
214 <label class="query">Query</label>
215 <textarea rows="20" name="query" class="query" value="%s" placeholder="Type your AQL query ..."></textarea>
216 </div>
217 <div>
218 <div class="left">
219 <label class="checkbox"><input type="checkbox" name="print-expr-tree" value="true" /> Print parsed expressions</label>
220 </div>
221 <div class="right">
222 <label class="checkbox"><input type="checkbox" name="print-rewritten-expr-tree" value="true" /> Print rewritten expressions</label>
223 </div>
224 </div>
225 <div>
226 <div class="left">
227 <label class="checkbox"><input type="checkbox" name="print-logical-plan" value="true" /> Print logical plan</label>
228 </div>
229 <div class="right">
230 <label class="checkbox"><input type="checkbox" name="print-optimized-logical-plan" value="true" /> Print optimized logical plan</label>
231 </div>
232 </div>
233 <div>
234 <div class="left">
235 <label class="checkbox"><input type="checkbox" name="print-job" value="true" /> Print hyracks job</label>
236 </div>
237 </div>
238 <button type="submit" class="btn btn-danger">Execute</button>
239 </form>
240 </div>
241
242 <div class="span6">
243 <div class="output">
244 <label class="heading">Output</label>
245 <div id="output-message" class="message">
246 </div>
247 </div>
248 </div>
249 </div>
250 </div>
251 </div>
252 <div class="footer">
253 <section class="line"><hr></section>
254 <section class="content">
255 <section class="left">
256 Developed by ASTERIX group
257 </section>
258 <section class="right">
259 &copy; Copyright 2013 University of California, Irvine
260 </section>
261 </section>
262 </div>
263</body>
264</html>
265