john/dbt
1
Fork 0
Code Activity

Improve demo

Browse Source
This commit is contained in:
John Ahlroos
2018-05-05 09:20:04 +03:00
parent 76512ee32e
commit c2fda1ffaf
6 changed files with 145 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
dbt-demo/src/ratpack/handlebars/index.html.hbs Normal file
View File

@@ -0,0 +1,78 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="http://esironal.github.io/cmtouch/lib/codemirror.css">
<link rel="stylesheet" href="http://esironal.github.io/cmtouch/addon/hint/show-hint.css">
<script src="http://esironal.github.io/cmtouch/lib/codemirror.js"></script>
<script src="http://esironal.github.io/cmtouch/mode/javascript/javascript.js"></script>
<script src="http://esironal.github.io/cmtouch/mode/css/css.js"></script>
<script src="http://esironal.github.io/cmtouch/addon/selection/active-line.js"></script>
<script src="http://esironal.github.io/cmtouch/addon/edit/matchbrackets.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">.CodeMirror { font-size: 10px;width: 100%;height: 100%;}</style>
</head>
<body>
<main style="width:50%;height:100%;float:left">
<h2>Transactions</h2>
<form id="addQueryForm" action='/'>
<input type="hidden" name="transactionId" id="transactionId" />
<input name="query" style="width:300px" placeholder="Add query here..." />
<button type="submit">Submit Query</button>
</form>
<form id="executeTransactionForm" action='/'>
<input type="hidden" name="transactionId" id="transactionId" />
<button id='executeTransactionButton' type="submit">Execute Transaction</button>
</form>
</main>
<aside style="width:50%;height:100%;float:right" >
<h2>Ledger</h2>
<div id="ledger-content"></div>
</aside>
<script type="text/javascript">
var editor = CodeMirror(document.getElementById("ledger-content"), {
mode: "application/json",
lineWrapping: true,
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true
});
function refreshLedger() {
$.get('/ledger', function(data) {
editor.setValue(JSON.stringify(data, null, 2));
});
}
function addQueryToTransaction(event) {
event.preventDefault();
var queryData = $('form#addQueryForm').serialize();
$.post( '/addQueryToTransaction', queryData, function(data) {
$('input#transactionId').val(data.id);
$('button#executeTransactionButton').show();
refreshLedger();
}, 'json');
}
function executeTransaction(event) {
event.preventDefault();
var queryData = $('form#executeTransactionForm').serialize();
$.post( '/executeTransaction', queryData, function(data) {
$('input#transactionId').val(null);
$('button#executeTransactionButton').hide();
refreshLedger();
}, 'json').fail(function(response) {
alert(response.responseText);
});
}
$( "#addQueryForm" ).submit(addQueryToTransaction);
$( "#executeTransactionForm" ).submit(executeTransaction);
$('button#executeTransactionButton').hide();
window.onload = refreshLedger();
</script>
</body>
</html>