2023-05-25 08:22:31 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Budget Checker Site</title>
|
|
|
|
|
<style>
|
|
|
|
|
.table-formatting {
|
|
|
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table-formatting td, .table-formatting th {
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table-formatting tr:nth-child(even){background-color: #f2f2f2;}
|
|
|
|
|
|
|
|
|
|
.table-formatting tr:hover {background-color: #ddd;}
|
|
|
|
|
|
|
|
|
|
.table-formatting th {
|
|
|
|
|
padding-top: 12px;
|
|
|
|
|
padding-bottom: 12px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
background-color: #04AA6D;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.negative {
|
|
|
|
|
color: #871b0a;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.positive {
|
|
|
|
|
color: #15870a;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.budget-name {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<h1>Look at the sweet budget babe...</h1>
|
2023-05-25 08:34:14 -05:00
|
|
|
<p>(Seriously, much cool!)</p>
|
2023-05-25 08:22:31 -05:00
|
|
|
|
|
|
|
|
<p>Sum of Balances: <span id="sum"></span></p>
|
|
|
|
|
|
|
|
|
|
<table class="table-formatting" id="budget-table"></table>
|
|
|
|
|
|
|
|
|
|
<br />
|
2023-06-09 06:59:54 -05:00
|
|
|
|
|
|
|
|
<table class="table-formatting" id="crypto-table"></table>
|
|
|
|
|
|
2023-05-25 08:22:31 -05:00
|
|
|
<br />
|
|
|
|
|
|
|
|
|
|
<table class="table-formatting" id="transaction-table"></table>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
main();
|
|
|
|
|
|
|
|
|
|
function main() {
|
|
|
|
|
loadBudgetBalanceCheck();
|
2023-06-09 06:59:54 -05:00
|
|
|
loadRecentCryptoCheck();
|
2023-05-25 08:22:31 -05:00
|
|
|
loadRecentTransactionsCheck();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function addToBalanceTable(jsonData) {
|
|
|
|
|
let summation = 0;
|
|
|
|
|
|
|
|
|
|
let header = "<tr>"
|
|
|
|
|
+ "<th>Budget Name</th>"
|
|
|
|
|
+ "<th>Balance</th>"
|
|
|
|
|
+ "<th>Notes</th>"
|
|
|
|
|
+ "</tr>"
|
|
|
|
|
|
|
|
|
|
document.getElementById("budget-table").innerHTML = header;
|
|
|
|
|
|
|
|
|
|
for (const item of jsonData.body) {
|
|
|
|
|
summation += Number(item.balance);
|
|
|
|
|
|
|
|
|
|
let row = "<tr>"
|
|
|
|
|
+ "<td class=\"budget-name\">" + item.name + "</td>"
|
|
|
|
|
+ "<td>" + formatBalance(item.balance) + "</td>"
|
|
|
|
|
+ "<td>" + item.notes + "</td>"
|
|
|
|
|
+ "</tr>";
|
|
|
|
|
|
|
|
|
|
document.getElementById("budget-table").innerHTML += row;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
summation = Math.round(summation * 100) / 100;
|
|
|
|
|
document.getElementById("sum").innerHTML = formatBalance(summation);
|
|
|
|
|
}
|
2023-06-09 06:59:54 -05:00
|
|
|
|
|
|
|
|
function addToCryptoTable(jsonData) {
|
|
|
|
|
let header = "<tr>"
|
|
|
|
|
+ "<th>Coin Name</th>"
|
|
|
|
|
+ "<th>Coin Symbol</th>"
|
|
|
|
|
+ "<th>Account Coin Balance</th>"
|
|
|
|
|
+ "<th>Coin Current Price</th>"
|
|
|
|
|
+ "<th>Account Value</th>"
|
|
|
|
|
+ "<th>Number of Transactions</th>"
|
|
|
|
|
+ "</tr>"
|
|
|
|
|
|
|
|
|
|
document.getElementById("crypto-table").innerHTML = header;
|
|
|
|
|
|
|
|
|
|
for (const item of jsonData.body) {
|
|
|
|
|
|
|
|
|
|
let row = "<tr>";
|
|
|
|
|
row += "<td class=\"budget-name\">" + item.name + "</td>";
|
|
|
|
|
row += "<td class=\"budget-name\">" + item.symbol + "</td>";
|
|
|
|
|
row += "<td>" + item.balance + "</td>";
|
|
|
|
|
row += "<td>" + formatBalance(item.price_in_usd) + "</td>";
|
|
|
|
|
row += "<td>" + formatBalance(item.balance_in_usd) + "</td>";
|
|
|
|
|
row += "<td>" + item.number_of_transactions + "</td>";
|
|
|
|
|
row += "</tr>";
|
|
|
|
|
|
|
|
|
|
document.getElementById("crypto-table").innerHTML += row;
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-05-25 08:22:31 -05:00
|
|
|
|
|
|
|
|
function addToTransactionTable(jsonData) {
|
|
|
|
|
let header = "<tr>"
|
|
|
|
|
+ "<th>ID</th>"
|
|
|
|
|
+ "<th>Amount</th>"
|
|
|
|
|
+ "<th>Date</th>"
|
|
|
|
|
+ "<th>Category</th>"
|
|
|
|
|
+ "<th>Accounts</th>"
|
|
|
|
|
+ "<th>Description</th>"
|
|
|
|
|
+ "</tr>"
|
|
|
|
|
|
|
|
|
|
document.getElementById("transaction-table").innerHTML = header;
|
|
|
|
|
|
|
|
|
|
for (const item of jsonData.data) {
|
|
|
|
|
|
|
|
|
|
let row = "<tr>"
|
|
|
|
|
+ "<td class=\"budget-name\">" + item.id + "</td>";
|
|
|
|
|
|
|
|
|
|
let amount = "";
|
|
|
|
|
let date = "";
|
|
|
|
|
let category = "";
|
|
|
|
|
let accounts = "";
|
|
|
|
|
let description = "";
|
|
|
|
|
|
|
|
|
|
for (const subTran of item.attributes.transactions) {
|
|
|
|
|
let prefix = "<br />";
|
|
|
|
|
if (amount == "") {
|
|
|
|
|
prefix = "";
|
|
|
|
|
}
|
|
|
|
|
let tempCategory = subTran.category_name == null ? "" : subTran.category_name;
|
|
|
|
|
|
|
|
|
|
amount += prefix + formatBalance(subTran.amount);
|
|
|
|
|
date += prefix + subTran.date.split('T')[0];
|
|
|
|
|
category += prefix + tempCategory;
|
|
|
|
|
accounts += prefix + subTran.source_name + " => " + subTran.destination_name;
|
|
|
|
|
description += prefix + subTran.description;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
row += "<td>" + amount + "</td>";
|
|
|
|
|
row += "<td>" + date + "</td>";
|
|
|
|
|
row += "<td>" + category + "</td>";
|
|
|
|
|
row += "<td>" + accounts + "</td>";
|
|
|
|
|
row += "<td>" + description + "</td>";
|
|
|
|
|
|
|
|
|
|
row += "</tr>";
|
|
|
|
|
|
|
|
|
|
document.getElementById("transaction-table").innerHTML += row;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function formatBalance(balance) {
|
|
|
|
|
let num = Number(balance);
|
|
|
|
|
let classStr = "positive";
|
|
|
|
|
let prefix = "";
|
|
|
|
|
|
|
|
|
|
if (num < 0) {
|
|
|
|
|
classStr = "negative";
|
|
|
|
|
prefix = "-";
|
|
|
|
|
num = num * -1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const formatter = new Intl.NumberFormat('en-US', {
|
|
|
|
|
style: 'currency',
|
|
|
|
|
currency: 'USD',
|
|
|
|
|
|
|
|
|
|
// These options are needed to round to whole numbers if that's what you want.
|
|
|
|
|
//minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
|
|
|
|
|
//maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501)
|
|
|
|
|
});
|
|
|
|
|
|
2023-06-09 06:59:54 -05:00
|
|
|
//console.log(formatter.format(num)); /* $2,500.00 */
|
2023-05-25 08:22:31 -05:00
|
|
|
|
|
|
|
|
let string = "<span class=\"" + classStr + "\">" + prefix + formatter.format(num) + "</span>"
|
|
|
|
|
|
|
|
|
|
return string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function loadBudgetBalanceCheck() {
|
|
|
|
|
let value = null;
|
|
|
|
|
const xhttp = new XMLHttpRequest();
|
|
|
|
|
xhttp.onload = function() {
|
|
|
|
|
addToBalanceTable(JSON.parse(this.responseText))
|
|
|
|
|
};
|
|
|
|
|
xhttp.open("GET", "https://n8n.veritablevalor.com/webhook/budget-balance-check", true);
|
|
|
|
|
/*xhttp.setRequestHeader("access-control-allow-origin", "https://n8n.veritablevalor.com");*/
|
|
|
|
|
xhttp.send();
|
|
|
|
|
}
|
|
|
|
|
|
2023-06-09 06:59:54 -05:00
|
|
|
function loadRecentCryptoCheck() {
|
|
|
|
|
let value = null;
|
|
|
|
|
const xhttp = new XMLHttpRequest();
|
|
|
|
|
xhttp.onload = function() {
|
|
|
|
|
addToCryptoTable(JSON.parse(this.responseText))
|
|
|
|
|
};
|
|
|
|
|
xhttp.open("GET", "https://n8n.veritablevalor.com/webhook/btc-check", true);
|
|
|
|
|
/*xhttp.setRequestHeader("access-control-allow-origin", "https://n8n.veritablevalor.com");*/
|
|
|
|
|
xhttp.send();
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-25 08:22:31 -05:00
|
|
|
function loadRecentTransactionsCheck() {
|
|
|
|
|
let value = null;
|
|
|
|
|
const xhttp = new XMLHttpRequest();
|
|
|
|
|
xhttp.onload = function() {
|
|
|
|
|
addToTransactionTable(JSON.parse(this.responseText))
|
|
|
|
|
};
|
|
|
|
|
xhttp.open("GET", "https://n8n.veritablevalor.com/webhook/recent-transactions-check", true);
|
|
|
|
|
/*xhttp.setRequestHeader("access-control-allow-origin", "https://n8n.veritablevalor.com");*/
|
|
|
|
|
xhttp.send();
|
|
|
|
|
}
|
2023-06-09 06:59:54 -05:00
|
|
|
//https://n8n.veritablevalor.com/webhook-test/btc-check
|
2023-05-25 08:22:31 -05:00
|
|
|
|
|
|
|
|
//document.getElementById("budget-table").innerHTML = value;
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
