ui v0.0.0

master
bel 2021-08-02 21:57:22 -06:00
parent f69a392ed1
commit 591200dcb6
1 changed files with 36 additions and 11 deletions

View File

@ -14,27 +14,52 @@
} }
var innerHTML = "" var innerHTML = ""
var keys = [] var keys = []
innerHTML += "<tr>"
innerHTML += "<th>" + "idx" + "</th>"
for(const key in transactions[0]) { for(const key in transactions[0]) {
innerHTML += "<th>" + key + "</th>"
keys.push(key) keys.push(key)
} }
innerHTML += "</tr>"
for(var i in transactions) { for(var i in transactions) {
const transaction = transactions[i] const transaction = transactions[i]
innerHTML += "<tr>" var one = "<tr>"
innerHTML += "<th>" + i + "</th>" one += "<td>"
for(var key of keys) { for(var foo of ["saveTransaction", "zachsPayment", "belsPayment", "zachsCharge", "belsCharge"]) {
innerHTML += "<td>" + transaction[key] + "</td>" one += `<input value="${foo}" type="button" onclick="${foo}(this.parentNode.parentNode)"/><br>`
} }
innerHTML += "</tr>" 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 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) { function http(method, remote, callback, body) {
var xmlhttp = new XMLHttpRequest(); var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() { xmlhttp.onreadystatechange = function() {
@ -51,7 +76,7 @@
</script> </script>
</header> </header>
<body onload="init()"> <body onload="init()">
<h1>hi</h1> <h1>Shared Expenses</h1>
<table id="transactions"> <table id="transactions">
</table> </table>
</body> </body>