First Commit

2023-05-25 08:22:31 -05:00 · 2023-05-25 08:22:31 -05:00 · 75feb077fc
commit 75feb077fc
1 changed files with 192 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,192 @@
+ <!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>
+		<p>(Seriously, so cool!)</p>
+
+		<p>Sum of Balances: <span id="sum"></span></p>
+
+		<table class="table-formatting" id="budget-table"></table>
+
+		<br />
+		<br />
+
+		<table class="table-formatting" id="transaction-table"></table>
+
+		<script>
+			main();
+
+			function main() {
+				loadBudgetBalanceCheck();
+				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);
+			}
+
+			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)
+				});
+
+				console.log(formatter.format(num)); /* $2,500.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();
+			}
+
+			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();
+			}
+
+			//document.getElementById("budget-table").innerHTML = value;
+		</script>
+	</body>
+</html>