Add the HTML template file.
git-svn-id: https://asterixdb.googlecode.com/svn/branches/asterix_stabilization_api_cleanup@1438 eaa15691-b419-025a-1212-ee371bd00084
diff --git a/asterix-app/src/main/resources/webui/querytemplate.html b/asterix-app/src/main/resources/webui/querytemplate.html
new file mode 100644
index 0000000..79130e1
--- /dev/null
+++ b/asterix-app/src/main/resources/webui/querytemplate.html
@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta name="description" content="ASTERIX WEB PAGE" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href='http://fonts.googleapis.com/css?family=Bitter|PT+Sans+Caption|Open+Sans' rel='stylesheet' type='text/css'>
+<script src="http://code.jquery.com/jquery.min.js"></script>
+<script src="http://www.jacklmoore.com/js/jquery.autosize.js"></script>
+
+<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
+<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
+
+
+<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
+
+<script type="text/javascript">
+$(document).ready(function(){
+ $('textarea').autosize();
+
+ $("form#queryform").submit(function() {
+ $.post("/", $("form#queryform").serialize(), function(data) {
+ $('#output-message').html(data);
+ });
+ return false;
+ });
+});
+</script>
+
+<meta charset=utf-8 />
+<title>ASTERIX Demo</title>
+<style id="jsbin-css">
+body {
+ background: none repeat scroll 0 0 white;
+ color: #222222;
+ font-family: 'Bitter';
+ font-size: 14px;
+ line-height: 17px;
+ width: 100%;
+}
+
+.content {
+ margin-top: 70px;
+}
+
+label.query, label.result {
+ font-size: 24px;
+ padding-bottom: 10px;
+ font-weight: bold;
+}
+
+div.host {
+ float: left;
+ margin: 0 100px 0 10px;
+}
+
+div.port {
+}
+
+div.left {
+ float: left;
+ width: 320px;
+ padding: 0 20px 0 10px;
+}
+
+div.right {
+}
+
+button.btn {
+ clear: both;
+ float: left;
+ margin: 20px 0 0 10px;;
+}
+
+textarea.query {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
+ font-size: 16px;
+ line-height: 20px;
+ font-family: bitter, helvetica;
+ width: 100%;
+ padding: 10px;
+ color: #999;
+ resize: none;
+ border: 10px solid #eee;
+}
+
+textarea.query:focus {
+ outline: none;
+ color: #333;
+}
+
+label {
+ padding-top: 10px;
+}
+
+input[type=text] {
+ height: 20px;
+}
+
+pre {
+ overflow: auto;
+ white-space: pre;
+}
+
+div.output label.heading {
+ font-size: 24px;
+ margin-top: 2px;
+ padding-bottom: 10px;
+ font-weight: bold;
+}
+
+div.output .message {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
+ color: #000;
+ resize: none;
+}
+
+div.error label.heading {
+ color: #ff2020;
+ font-size: 24px;
+ margin-top: 2px;
+ padding-bottom: 10px;
+ font-weight: bold;
+}
+
+div.error .message {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
+ border-color: rgba(82, 168, 236, 0.8);
+ outline: 0;
+ outline: thin dotted 9;
+
+ -webkit-box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.8);
+ -moz-box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 1.0);
+ box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 1.0);
+ color: #000;
+ resize: none;
+ border: 1px solid #eee;
+ margin-top: 7px;
+ padding: 20px 20px 20px 20px;
+}
+
+.footer {
+ margin-top: 40px;
+}
+
+.footer .line {
+ border-top: 1px solid #EEEEEE;
+ bottom: 20px;
+ height: 10px;
+ left: 0;
+ position: fixed;
+ width: 100%;
+}
+
+.footer .content {
+ background: none repeat scroll 0 0 #FFFFFF;
+ bottom: 0;
+ color: #666666;
+ font-size: 12px;
+ height: 25px;
+ left: 0;
+ padding-top: 5px;
+ position: fixed;
+ width: 100%;
+}
+
+.footer .content .left {
+ padding-left: 20px;
+ float: left;
+}
+
+.footer .content .right {
+ padding-right: 20px;
+ float: right;
+}
+</style>
+</head>
+
+<body>
+ <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </a>
+ <a class="brand" href="#">ASTERIX</a>
+ <div class="nav-collapse collapse">
+ <ul class="nav">
+ <li><a href="http://code.google.com/p/asterixdb/source/browse/">Open source</a></li>
+ <li><a href="http://code.google.com/p/asterixdb/issues/list">File issues</a></li>
+ <li><a href="https://groups.google.com/forum/?fromgroups#!forum/asterixdb-userst">Contact</a></li>
+ </ul>
+ </div><!--/.nav-collapse -->
+ </div>
+ </div>
+ </div>
+
+ <div class="content">
+ <div class="container">
+ <div class="row-fluid">
+ <div class="span6">
+ <form id="queryform" class="form-horizontal" method="post">
+ <div>
+ <label class="query">Query</label>
+ <textarea rows="20" name="query" class="query" value="%s" placeholder="Type your AQL query ..."></textarea>
+ </div>
+ <div>
+ <div class="left">
+ <label class="checkbox"><input type="checkbox" name="print-expr-tree" value="true" /> Print parsed expressions</label>
+ </div>
+ <div class="right">
+ <label class="checkbox"><input type="checkbox" name="print-rewritten-expr-tree" value="true" /> Print rewritten expressions</label>
+ </div>
+ </div>
+ <div>
+ <div class="left">
+ <label class="checkbox"><input type="checkbox" name="print-logical-plan" value="true" /> Print logical plan</label>
+ </div>
+ <div class="right">
+ <label class="checkbox"><input type="checkbox" name="print-optimized-logical-plan" value="true" /> Print optimized logical plan</label>
+ </div>
+ </div>
+ <div>
+ <div class="left">
+ <label class="checkbox"><input type="checkbox" name="print-job" value="true" /> Print hyracks job</label>
+ </div>
+ </div>
+ <button type="submit" class="btn btn-danger">Execute</button>
+ </form>
+ </div>
+
+ <div class="span6">
+ <div class="output">
+ <label class="heading">Output</label>
+ <div id="output-message" class="message">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="footer">
+ <section class="line"><hr></section>
+ <section class="content">
+ <section class="left">
+ Developed by ASTERIX group
+ </section>
+ <section class="right">
+ © Copyright 2013 University of California, Irvine
+ </section>
+ </section>
+ </div>
+</body>
+</html>
+