scriptoriumadmin/featurebase
1
0
Fork 0
mirror of https://github.com/featurebasedb/featurebase.git synced 2026-09-11 07:11:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update JS to hit Pilosa

Browse source
This commit is contained in:
Cody Soyland 2017-04-25 09:40:17 -05:00
parent 60c8ba238c
commit a0e496f6a0
2 changed files with 130 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
webui/assets/main.js Normal file
View file

@ -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()

110
webui/index.html
View file

@ -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>