3 files changed, 93 insertions, 12 deletions

diff --git a/index.html b/index.html
index 23593dc..a58d8e0 100644
--- a/index.html
+++ b/index.html
@@ -21,11 +21,14 @@
         
         <div class="results-row split-row">
           <table id="result-table" class="table stripe compact order-column" width="100%"></table>
+          <div id="result-error"></div>
         </div>
       </div>
 
       <div class="row footer">
-        some status
+        <div id="execution-status" class="exec-idle">Idle</div>
+        <div id="execution-time"></div>
+        <div id="row-count"></div>
       </div>
     </div>
     <script>
diff --git a/renderer.js b/renderer.js
index 1704f32..4392daa 100644
--- a/renderer.js
+++ b/renderer.js
@@ -25,30 +25,44 @@ const connectionPool = new Pool({
 let dataTable;
 
 function runQuery() {
- var query = editorContext.getValue(); 
+
+  _setExecutionStatusIndicator("RUNNING");
+ 
+  var query = editorContext.getValue(); 
   console.log(query);
 
   connectionPool.query(query, (err, res) => {
     console.log(err, res)
-    displayResults(res);
+    
+    if(err === undefined) {
+      handleResult(res);
+    }
+    else {
+      handleError(err);
+    }
+    
   });
 }
 
-function displayResults(results) {
+function handleError(err) {
+  _destroyDataTable();
+  $("#result-error").text("Error (" + err.code + ") - " + err.message);
+  _setExecutionStatusIndicator("ERROR");
+}
 
-  if(dataTable) {
-    dataTable.destroy();
-    _resultsTable().empty();
-  }
+function handleResult(results) {
+  $("#result-error").empty();
+  _destroyDataTable();
 
-  dataTable = _resultsTable().DataTable({
+  dataTable = _resultTable().DataTable({
     paging: false,
-    destroy: true,
     order: [],
     dom: "tr",
     data: results.rows,
     columns: _mapColumnProperties(results)
   });
+
+  _setExecutionStatusIndicator("OK");
 }
 
 function _mapColumnProperties(results) {
@@ -60,10 +74,32 @@ function _mapColumnProperties(results) {
   });
 }
 
-function _resultsTable() {
+function _resultTable() {
   return $("#result-table");
 }
 
+function _setExecutionStatusIndicator(status) {
+  switch(status) {
+    case "RUNNING":
+      $("#execution-status").removeClass().addClass("exec-running").text("Running");
+      break;
+    case "OK":
+      $("#execution-status").removeClass().addClass("exec-ok").text("Ok");
+      break;
+    case "ERROR":
+      $("#execution-status").removeClass().addClass("exec-error").text("Error");
+      break;        
+  }
+}
+
+function _destroyDataTable() {
+  if (dataTable) {
+    dataTable.destroy();
+    _resultTable().empty();
+    dataTable = undefined;
+  }
+}
+
 function _onKeyUp(event) {
   if (event.ctrlKey && event.keyCode == 13) {
     runQuery();
diff --git a/style.css b/style.css
index 891cb76..2e0ef53 100644
--- a/style.css
+++ b/style.css
@@ -44,9 +44,12 @@ body {
 }
 
 .flex-wrapper .row.footer {
-  flex: 0 1 20px;
+  flex: 0 1 auto;
   background-color: #474A5E;
   color: white;
+  display: flex;
+  flex-direction: row;
+  font-family: monospace;
 }
 
 .flex-wrapper .row .split-row {
@@ -77,4 +80,43 @@ body {
   color: #ffffff;
   background-color: #282a36;
   font-family: monospace;
+}
+
+#result-error {
+  padding: 5px;
+}
+
+#execution-status {
+  padding: 2px;
+  flex-basis: 60px;
+  text-align: center;
+  font-weight: bold;
+}
+
+#execution-time {
+  background-color: green;
+  flex-basis: auto;
+}
+
+#row-count {
+  background-color: blue;
+  flex-basis: auto;
+}
+
+.exec-idle {
+  background-color: gray;
+}
+
+.exec-running {
+  background-color: yellow;
+  color: black;
+}
+
+.exec-ok {
+  background-color: green;
+}
+
+.exec-error {
+  background-color: red;
+  color: black;
 }
\ No newline at end of file