More stuff

static/index.html

@@ -4,44 +4,54 @@
     top: 0;
     left: 0;
     right: 0;
-    height: 49px;
+    height: 39px;
     background: #ccc;
     border-bottom: 1px solid #aaa;
   }
 
   #sidebar {
-    width: 299px;
+    width: 249px;
     position: absolute;
     left: 0;
-    top: 50;
+    top: 40;
     bottom: 0;
     background: #fff;
     overflow: scroll;
     border-right: 1px solid #aaa;
+    font-size: 13px;
   }
 
   #body {
     position: absolute;
-    top: 50px;
+    top: 40px;
-    left: 300px;
+    left: 250px;
-    bottom: 250px;
+    bottom: 0px;
     right: 0px;
     overflow: scroll;
   }
 
   #input {
     position: absolute;
-    border-top: 1px solid #aaa;
+    border-bottom: 1px solid #aaa;
-    left: 300px;
+    left: 0px;
     right: 0px;
+    top: 0px;
+    height: 249px;
+  }
+
+  #output {
+    position: absolute;
+    left: 0px;
+    top: 250px;
     bottom: 0px;
-    height: 250px;
+    right: 0px;
+    margin: 0px;
+    padding: 0px;
+    overflow: scroll;
   }
 
   #results {
     font-size: 13px;
-    margin: 0px;
-    padding: 0px;
   }
 
   #results td {
@@ -50,7 +60,11 @@
   }
 
   #custom_query {
-    height: 150px;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
   }
 
   ul {
@@ -75,16 +89,21 @@
 
 <div id="sidebar"><ul id="tables"></ul></div>
 <div id="body">
-  <table id="results" class="table table-striped"></table>
+  <div id="input">
-</div>
+    <textarea id="custom_query"></textarea>
-<div id="input">
-  <textarea class="form-control" id="custom_query"></textarea>
     <input type="button" value="Run" class="btn btn-sm btn-primary" id="run" />
+    <a href="#" class="btn btn-default btn-sm">Query History</a>
+  </div>
+  <div id="output">
+    <table id="results" class="table table-striped"></table>
+  </div>
 </div>
 
 <link rel="stylesheet" href="/app/css/bootstrap.min.css" />
 <script type="text/javascript"></script>
 <script type="text/javascript" src="/app/js/jquery.min.js"></script>
+<script type="text/javascript" src="/app/js/ace.js"></script>
+<script type="text/javascript" src="/app/js/ace-pgsql.js"></script>
 
 <script type="text/javascript">
 function getTables(cb) {
@@ -94,14 +113,34 @@ function getTables(cb) {
 }
 
 function executeQuery(query, cb) {
-  $.getJSON("/query", { format: "json", query: query }, function(resp) {
+  $.ajax({
-    cb(resp);
+    url: "/query",
+    method: "post",
+    cache: false,
+    data: { query: query, format: "json" },
+    success: function(data) {
+      cb(data);
+    },
+    error: function(xhr, status, data) {
+      cb(jQuery.parseJSON(xhr.responseText));
+    }
   });
 }
 
 function buildTable(results) {
   $("#results").text("");
 
+  if (!results.rows) {
+    $("<tr><td>No records found</tr></tr>").appendTo("#results");
+    return;
+  }
+
+  if (results.error) {
+    $("<tr><td>ERROR: " + results.error + "</tr></tr>").appendTo("#results");
+    return;
+  }
+
+
   var cols = "";
   var rows = ""
 
@@ -119,6 +158,13 @@ function buildTable(results) {
 }
 
 $(document).ready(function() {
+  /*
+  var editor = ace.edit("custom_query");
+  editor.getSession().setMode("ace/mode/pgsql");
+  editor.getSession().setTabSize(2);
+  editor.getSession().setUseSoftTabs(true);
+  */
+
   $("#run").on("click", function() {
     var query = $("#custom_query").val();