DBIS
/
HyriseSQLParser
6
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added frontend to execute queries on hyrise and display result table #2

This commit is contained in:
Pedro 2014-11-05 12:01:01 +01:00
parent a3180bca68
commit 19994085da
3 changed files with 133 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend-hyrise/hyrise-sql-connector.js Normal file
View File

@ -0,0 +1,35 @@
var HyriseSqlConnector = function(host, port) {
this.setConnectionDetails(host, port);
}
HyriseSqlConnector.prototype.setConnectionDetails = function(host, port) {
this._host = host;
this._port = port;
return this;
};
HyriseSqlConnector.prototype.executeQuery = function(query, callback) {
var endpoint = 'http://' + this._host + ':' + this._port + '/query';
var url = encodeURI(endpoint);
jQuery.ajax({
type: "POST",
url: url,
dataType: 'json',
data: {
performance: true,
sql: query
},
success: function(result) {
callback(result);
}
});
return this;
};

78
frontend-hyrise/index.html Normal file
View File

@ -0,0 +1,78 @@
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="hyrise-sql-connector.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="row">
<div class="col-lg-6">
<!-- Config -->
<div class="row">
<div class="form-group col-sm-8">
<input type="text" class="form-control" id="hostInput" placeholder="Hyrise Host" value="localhost">
</div>
<div class="form-group col-sm-4">
<input type="text" class="form-control" id="portInput" placeholder="Hyrise Port" value="5000">
</div>
</div>
<!-- Input -->
<div class="row">
<div class="col-sm-12">
<textarea id="queryInput" class="form-control" style="height: 300px; resize: none;">SELECT * FROM students;</textarea>
</div>
</div>
<!-- Submit -->
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-primary" id="submitBtn">Submit Query</button>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Result -->
<div class="result-view">
<table id="resultTable" class="table table-bordered table-striped table-hover"></table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#submitBtn').click(function() {
var host = $('#hostInput').val();
var port = $('#portInput').val();
var query = $('#queryInput').val();
var hyrise = new HyriseSqlConnector(host, port);
hyrise.executeQuery(query, function(result) {
console.log("Query result: ", result);
// Present result json in result-view
var table = $('#resultTable');
table.html('');
var th = $('<tr>');
$.each(result.header, function(i, val) {
th.append($('<th>' + val + '</th>'));
});
table.append(th);
$.each(result.rows, function(i, row) {
var tr = $('<tr>');
$.each(row, function(j, val) {
tr.append($('<td>' + val + '</td>'));
});
table.append(tr);
});
});
})
});
</script>
</body>
</html>

20
frontend-hyrise/style.css Normal file
View File

@ -0,0 +1,20 @@
body {
text-align: center;
}
div {
margin: auto;
}
.content {
width: 90%;
margin: auto;
margin-top: 10px;
}
/*
#resultTable td {
border: 1px solid #333;
padding: 10px;
}*/