86 lines
3.0 KiB
HTML
86 lines
3.0 KiB
HTML
<html>
|
|
<header>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">
|
|
<script>
|
|
function init() {
|
|
http("get", "/ledger.json", (body, status) => {
|
|
body = JSON.parse(body)
|
|
loadTransactions(body.Transactions)
|
|
}, null)
|
|
}
|
|
function loadTransactions(transactions) {
|
|
if (transactions.length < 1) {
|
|
return
|
|
}
|
|
var innerHTML = ""
|
|
var keys = []
|
|
for(const key in transactions[0]) {
|
|
keys.push(key)
|
|
}
|
|
|
|
for(var i in transactions) {
|
|
const transaction = transactions[i]
|
|
var one = "<tr>"
|
|
one += "<td>"
|
|
for(var foo of ["saveTransaction", "zachsPayment", "belsPayment", "zachsCharge", "belsCharge"]) {
|
|
one += `<input value="${foo}" type="button" onclick="${foo}(this.parentNode.parentNode)"/><br>`
|
|
}
|
|
one += "</td>"
|
|
one += "<td><textarea key=\"idx\" disabled readonly>" + i + "</textarea></td>"
|
|
for(var key of keys) {
|
|
one += "<td><textarea "
|
|
if (["Amount"].includes(key))
|
|
one += "disabled readonly"
|
|
one += " key=" + JSON.stringify(key) + ">" + transaction[key] + "</textarea></td>"
|
|
}
|
|
one += "</tr>\n"
|
|
innerHTML = one + innerHTML
|
|
}
|
|
|
|
var header = "<tr>"
|
|
header += "<th>" + "update" + "</th>"
|
|
header += "<th>" + "idx" + "</th>"
|
|
for(const key in transactions[0]) {
|
|
header += "\t<th>" + key + "</th>\n"
|
|
}
|
|
header += "</tr>\n"
|
|
innerHTML = header + innerHTML
|
|
|
|
document.getElementById("transactions").innerHTML = innerHTML
|
|
}
|
|
function saveTransaction(row) {
|
|
const inputs = row.getElementsByTagName("textarea")
|
|
var kvs = {}
|
|
for (var i = 0; i < inputs.length; i++) {
|
|
const key = inputs[i].getAttribute("key")
|
|
const value = inputs[i].value
|
|
kvs[key] = value
|
|
if (!isNaN(value))
|
|
kvs[key] = parseFloat(value)
|
|
}
|
|
http("put", "/api/transactions", () => {init()}, JSON.stringify(kvs))
|
|
}
|
|
function http(method, remote, callback, body) {
|
|
var xmlhttp = new XMLHttpRequest();
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
|
|
callback(xmlhttp.responseText, xmlhttp.status)
|
|
}
|
|
};
|
|
xmlhttp.open(method, remote, true);
|
|
if (typeof body == "undefined") {
|
|
body = null
|
|
}
|
|
xmlhttp.send(body);
|
|
}
|
|
</script>
|
|
</header>
|
|
<body onload="init()">
|
|
<h1>Shared Expenses</h1>
|
|
<table id="transactions">
|
|
</table>
|
|
</body>
|
|
<footer>
|
|
</footer>
|
|
</html>
|