From 75feb077fc5c16f988a9c8107a5b9d335269dc2d Mon Sep 17 00:00:00 2001
From: William Lewis <walewis@protonmail.com>
Date: Thu, 25 May 2023 08:22:31 -0500
Subject: [PATCH] First Commit

---
 index.html | 192 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 192 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0cf8518
--- /dev/null
+++ 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> 
