From a0e496f6a0301e45f40ba9bd907c61aa0703bcf6 Mon Sep 17 00:00:00 2001
From: Cody Soyland <cody@soyland.org>
Date: Tue, 25 Apr 2017 09:40:17 -0500
Subject: [PATCH] Update JS to hit Pilosa

---
 webui/assets/main.js | 129 +++++++++++++++++++++++++++++++++++++++++++
 webui/index.html     | 110 +-----------------------------------
 2 files changed, 130 insertions(+), 109 deletions(-)
 create mode 100644 webui/assets/main.js

diff --git a/webui/assets/main.js b/webui/assets/main.js
new file mode 100644
index 000000000..b24d3ac51
--- /dev/null
+++ b/webui/assets/main.js
@@ -0,0 +1,129 @@
+class REPL {
+    constructor(input, output, button) {
+        this.input = input
+        this.output = output
+        this.button = button
+        this.history = []
+        this.history_index = 0
+        this.history_buffer = ''
+        this.result_number = 0
+    }
+    bind_events() {
+        const repl = this
+        const keys = {
+          ENTER: 13,
+          UP_ARROW: 38,
+          DOWN_ARROW: 40
+        }
+
+        this.input.addEventListener("keydown", (e) => {
+          if (e.keyCode == keys.UP_ARROW) {
+            e.preventDefault()
+            if (this.input.value.substring(0, this.input.selectionStart).indexOf('\n') == '-1') {
+                if (this.history_index == 0) {
+                    return
+                } else {
+                    if (this.history_index == this.history.length) {
+                        this.history_buffer = this.input.value
+                    }
+                    this.history_index--
+                    this.input.value = this.history[this.history_index]
+                    this.input.setSelectionRange(this.input.value.length, this.input.value.length)
+                }
+            }
+          }
+          if (e.keyCode == keys.DOWN_ARROW) {
+            e.preventDefault()
+            if (this.input.value.substring(this.input.selectionEnd, this.input.length).indexOf('\n') == '-1') {
+                if (this.history_index == this.history.length) {
+                    return
+                } else {
+                    this.history_index++
+                    if (this.history_index == this.history.length) {
+                        this.input.value = this.history_buffer
+                    } else {
+                        this.input.value = this.history[this.history_index]
+                    }
+                    this.input.setSelectionRange(this.input.value.length, this.input.value.length)
+                }
+            }
+          }
+          if (e.keyCode == keys.ENTER && !e.shiftKey) {
+            e.preventDefault()
+            this.submit();
+          }
+        })
+        this.button.onclick = function() {
+            repl.submit();
+        };
+    }
+
+    submit() {
+        this.history_buffer = ''
+        this.history_index = this.history.length
+        this.history[this.history_index] = this.input.value
+        this.history_index++
+        this.process_query(this.input.value)
+        this.input.value = ""
+    }
+
+    process_query(query) {
+        var xhr = new XMLHttpRequest();
+        var dbname = 'foo'; // todo: get db name from dropdown menu
+        xhr.open('POST', '/db/' + dbname + '/query');
+        xhr.setRequestHeader('Content-Type', 'application/text');
+
+        const repl = this
+        xhr.onload = function() {
+            repl.result_number++
+            repl.createSingleOutput({"input": query, "output": xhr.responseText})
+        }
+        xhr.send(query)
+    }
+
+    createSingleOutput(res) {
+      var node = document.createElement("div");
+      node.classList.add('output');
+      var markup =`
+        <div  class="panes">
+          <div class="pane active">
+            <div class="result-io">
+              <div class="result-io-header">
+                <h5>Input</h5>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <em>Source: Index</em>
+              </div>
+              <div class="result-input">
+                ${res.input}
+              </div>
+            </div>
+            <div class="result-io">
+              <div class="result-io-header">
+                <h5>output</h5>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <em>.42 ms</em>
+              </div>
+              <div class="result-ouput">
+                ${res.output}
+              </div>
+            </div>
+          </div>
+          <div class="pane">
+            <div class="raw">
+    
+              <a href="${res.url}">Export raw .csv</a>
+            </div>
+          </div>
+        </div>
+      `
+      node.innerHTML = markup;
+      this.output.insertBefore(node, this.output.firstChild)
+    }
+}
+
+const input = document.getElementById('query')
+const output = document.getElementById('outputs')
+const button = document.getElementById('query-btn')
+
+repl = new REPL(input, output, button)
+repl.bind_events()
diff --git a/webui/index.html b/webui/index.html
index a14d202bf..607c55167 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -59,114 +59,6 @@
 
     </div>
   </div>
-  <script type="text/javascript">
-
-
-  //helpers
-  function prependChild(parent, newFirstChild) {
-      parent.insertBefore(newFirstChild, parent.firstChild)
-  }
-
-  var createSingleOutput = function(res){
-    var node = document.createElement("div");
-    node.classList.add('output');
-    var markup =`
-
-      <div  class="panes">
-        <div class="pane active">
-          <div class="result-io">
-            <div class="result-io-header">
-              <h5>Input</h5>
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-              <em>Source: Index</em>
-            </div>
-            <div class="result-input">
-              ${res.input}
-            </div>
-          </div>
-          <div class="result-io">
-            <div class="result-io-header">
-              <h5>output</h5>
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-              <em>.42 ms</em>
-            </div>
-            <div class="result-ouput">
-              ${res.output}
-            </div>
-          </div>
-        </div>
-        <div class="pane">
-          <div class="raw">
-
-            <a href="${res.url}">Export raw .csv</a>
-          </div>
-        </div>
-      </div>
-
-    `
-    node.innerHTML = markup;
-
-    prependChild(document.getElementById("outputs"),node);
-  }
-
-
-
-
-
-// mock data load
-  var results=[
-    {
-      id:1,
-      input:'Union(Bitmap(id=1, frame=“foo”), Bitmap(id=1), frame=“bar”))',
-      output: '{“results”:[{“attrs”:bits”:[1,2,3,4,5,12,13,14]}]}',
-    },
-    {
-      id:2,
-      input:'SetBitmapAttrs(Bitmap(id=1, frame=“foo”), Bitmap(id=1), frame=“bar”))”))',
-      output: 'null',
-    }
-  ]
-  for (var i = 0; i < results.length; i++){
-    createSingleOutput(results[i]);
-  }
-
-
-
-
-//mock api
-function callAPI(){
-  return {
-    input:document.getElementById("query").value,
-    output: `${queryBox.value} +1`
-
-  }
-}
-
-
-
-  //events
-  var button = document.getElementById('query-btn');
-  var queryBox = document.getElementById("query")
-
-  button.onclick = function(){
-    var res = callAPI()
-    createSingleOutput(res);
-  }
-
-
-queryBox.addEventListener("keyup", function(event) {
-    event.preventDefault();
-    if (event.key == 'Enter') {
-        button.click();
-    }
-});
-
-
-
-
-
-
-
-  </script>
+  <script type="text/javascript" src="/assets/main.js"></script>
 </body>
 </html>