79 lines
3.5 KiB
Handlebars
79 lines
3.5 KiB
Handlebars
|
<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>
|
||
|
|
|