108 lines
3.8 KiB
HTML
108 lines
3.8 KiB
HTML
<html>
|
|
<header>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">
|
|
<style>
|
|
#transactions > tbody > tr > td:first-child input {
|
|
padding: 1ch;
|
|
display: inline-block;
|
|
}
|
|
#transactions td[key="Amount"]:before {
|
|
content: "$";
|
|
}
|
|
#transactions table tr td:first-child {
|
|
display: none;
|
|
}
|
|
#transactions table tr td:nth-child(2) {
|
|
width: 12ch;
|
|
}
|
|
#transactions table tr td:last-child {
|
|
width: 12ch;
|
|
}
|
|
</style>
|
|
<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 = ""
|
|
|
|
for(var i in transactions) {
|
|
const transaction = transactions[i]
|
|
var one = "<tr>"
|
|
one += "<td style=\"width: 20%;\">"
|
|
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><table>"
|
|
one += " <tr>"
|
|
one += ` <td key="idx" disabled readonly>${i}</td>`
|
|
for(var key of ["Date", "Description"])
|
|
one += ` <td contenteditable key=${JSON.stringify(key)}>${transaction[key]}</td>`
|
|
one += " <td></td>"
|
|
one += " </tr>"
|
|
one += " <tr>"
|
|
one += " <td></td><td></td>"
|
|
for(var key of ["Payee", "Amount"])
|
|
one += ` <td contenteditable key=${JSON.stringify(key)}>${transaction[key]}</td>`
|
|
one += " </tr>"
|
|
one += " <tr>"
|
|
one += " <td></td><td></td>"
|
|
for(var key of ["Payer"])
|
|
one += ` <td contenteditable key=${JSON.stringify(key)}>${transaction[key]}</td>`
|
|
one += " <td></td>"
|
|
one += " </tr>"
|
|
one += "</table></td>"
|
|
|
|
one += "</tr>\n"
|
|
innerHTML = one + innerHTML
|
|
}
|
|
|
|
document.getElementById("transactions").innerHTML = innerHTML
|
|
}
|
|
function saveTransaction(row) {
|
|
const inputs = row.getElementsByTagName("td")
|
|
var kvs = {}
|
|
for (var i = 0; i < inputs.length; i++) {
|
|
const key = inputs[i].getAttribute("key")
|
|
if (!key) {
|
|
continue
|
|
}
|
|
const value = inputs[i].innerHTML
|
|
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>
|