ana-ledger/cmd/http/public/transactions.html

152 lines
5.8 KiB
HTML

<html>
<header>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">
<script>
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);
}
function callback(responseBody, responseStatus) {
}
var f = String(window.location).split("/transactions.html")[1]
if (!f) {
f = "/moolah.dat"
}
f = "." + f
function init() {
const zeroPad = (num, places) => String(num).padStart(places, '0')
var d = new Date()
d.setMonth(d.getMonth()-6)
const replacement = `${d.getFullYear()}-${zeroPad(d.getMonth(), 2)}`
var iframe = document.getElementsByTagName("iframe")[0]
iframe.src = iframe.src.replace("YYYY-MM", replacement)
load(f)
}
function load(f) {
http("GET", "/api/transactions?f="+f, (body, status) => {
var d = JSON.parse(body)
loadBalances(d.balances)
loadDeltas(d.deltas)
loadLastNLines(d.lastNLines)
})
}
function loadBalances(balances) {
var result = `<table>`
for (var k in balances) {
result += `<tr style="display: flex; flex-direction: row; width: 100%; justify-content: space-between;"><td>${k}</td><td>${Math.floor(balances[k]["$"])}</td></tr>`
}
result += `</table>`
document.getElementById("bal").innerHTML = result
}
function loadDeltas(deltas) {
console.log(deltas[0])
for (var i = 0; i < deltas.length/2; i++) {
tmp = deltas[i]
deltas[i] = deltas[deltas.length-1-i]
deltas[deltas.length-1-i] = tmp
}
console.log(deltas[0])
var result = `<table>`
for (var k of deltas) {
result += `<tr>`
result += ` <td>${k.Date}</td>`
result += ` <td>${k.Description}</td>`
result += ` <td>${k.Name}</td>`
result += ` <td style="text-align: right">${k.Currency}</td>`
result += ` <td style="text-align: right">${k.Value}</td>`
result += `</tr>`
}
result += `</table>`
document.getElementById("reg").innerHTML = result
}
function setLastNLines(form) {
http("PUT", "/api/lastnlines?f="+f, (body, status) => {
if (status == 205) {
init()
}
document.getElementById("lastNLinesStatus").innerHTML = `(${status}) ${body}`
}, JSON.stringify(form.elements["lastNLines"].value.split("\n")))
}
function loadLastNLines(lastNLines) {
var result = `<form onsubmit="setLastNLines(this); return false;" action="#">`
result += ` <div>${f}</div>`
result += ` <textarea id="lastNLinesTextarea" name="lastNLines" style="height: 30em;">`
for (var k in lastNLines) {
result += lastNLines[k] + "\n"
}
result += ` </textarea>`
result += ` <input type="submit">`
result += `</form>`
document.getElementById("lastNLines").innerHTML = result
}
function stage(who, contributesToHouse) {
var d = new Date()
const zeroPad = (num, places) => String(num).padStart(places, '0')
const today = `${d.getFullYear()}-${zeroPad(1+d.getMonth(), 2)}-${zeroPad(d.getDate(), 2)}`
var who_currency = who.split(":").at(-1).toUpperCase()
var benefactor = who
var benefactor_value = `-0.00 ${who_currency}`
var beneficiary = "AssetAccount:Chase:5876"
var beneficiary_value = `$0.00`
if (!contributesToHouse) {
beneficiary_value = `$-0.00`
benefactor_value = `0.00 ${who_currency}`
}
console.log(`@${today} ${benefactor} gave to ${beneficiary}`)
document.getElementById("lastNLinesTextarea").value += `\n${today} TODO moolah2`
document.getElementById("lastNLinesTextarea").value += `\n ${beneficiary} ${beneficiary_value}`
document.getElementById("lastNLinesTextarea").value += `\n ${benefactor} ${benefactor_value}`
}
</script>
</header>
<body onload="init();" style="min-width: 1024px;">
<h2>Moolah2</h2>
<details open>
<summary>Balance</summary>
<div id="bal">
</div>
<details>
<summary><i>Look at this graph</i></summary>
<iframe style="background: white; width: 100%;" src="/api/reg?x=y&mode=reg&likeName=Withdrawal:[0123]&chart=stack&predictionMonths=6&prediction=autoContributions=&bpi=true&zoomStart=YYYY-MM"></iframe>
</details>
</details>
<details open>
<summary>Edit</summary>
<div style="display:flex; flex-direction:row; width:100%; justify-content:space-between;">
<div>
<input type="button" onclick="stage('AssetAccount:Zach', true)" value="Stage Zach's Payment"/>
<input type="button" onclick="stage('AssetAccount:Zach', false)" value="Stage Zach's Charge"/>
</div>
<div>
<input type="button" onclick="stage('AssetAccount:Bel', true)" value="Stage Bel's Payment"/>
<input type="button" onclick="stage('AssetAccount:Bel', false)" value="Stage Bel's Charge"/>
</div>
</div>
<div id="lastNLinesStatus">
</div>
<div id="lastNLines">
</div>
</details>
<details>
<summary>Register</summary>
<div id="reg">
</div>
</details>
</body>
<footer>
</footer>
</html>