diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 431 |
1 files changed, 18 insertions, 413 deletions
@@ -7,300 +7,28 @@ <script>
isNodeJS = typeof require === "function";
</script>
- <style>
- :root {
- --perc-color: black;
- }
- * {
- user-select: none;
- overflow-x: hidden !important;
- }
- body {
- color: white;
- font-family: sans-serif;
- }
- .ln:hover {
- text-decoration: underline;
- }
- .ln:active {
- opacity: .75;
- }
- .transaction {
- transition: background-color 100ms;
- }
- .transaction:hover {
- background-color: rgba(0, 0, 0, .1);
- }
- @keyframes shake {
- 0% {
- transform: scale(1);
- }
- 100% {
- transform: scale(1.5);
- }
- }
- </style>
+ <!-- CSS -->
+ <link rel="stylesheet" href="./assets/global.css">
<link rel="stylesheet" href="./assets/black.css" disabled id="mobile-css">
- <script src="./chart.js"></script>
- <script src="./trendline.js"></script>
+
+ <!-- Libs -->
+ <script src="./assets/chart.js"></script>
+ <script src="./assets/trendline.js"></script>
+
+ <!-- Components -->
+ <script src="./assets/load.js"></script>
+ <script src="./assets/refresh.js"></script>
+ <script src="./assets/create.js"></script>
+ <script src="./assets/misc.js"></script>
+ <script src="./assets/delete.js"></script>
+ <script src="./assets/easteregg.js"></script>
</head>
<body style="position:fixed;inset:0;">
<div id="loader" style="background:#222;transition:opacity 500ms;z-index:9999;position:fixed;inset:0;display:flex;align-items: center;justify-content: center;">
<img alt="" src="assets/logo.svg" style="width:96px;">
- <script>
- window.onload = async () => {
- if (!isNodeJS) {
- document.getElementById("mobile-css").removeAttribute("disabled");
- }
-
- setTimeout(async () => {
- loginStatus = JSON.parse(await (await window.fetch("https://money-v1.equestria.dev/Authentication/Test/")).text()).status;
- if (loginStatus === 1) {
- if (isNodeJS) {
- console.info("Starting authentication procedure (Electron)");
- const { ipcRenderer } = require('electron');
- ipcRenderer.send("login");
- } else {
- console.info("Starting authentication procedure (Mobile)");
- location.href = "https://money-v1.equestria.dev/Authentication/Mobile/"
- }
- } else {
- console.info("Authenticated successfully");
-
- await refresh();
- }
- }, 1000)
- }
-
- async function refresh() {
- document.getElementById("transactions").innerHTML = "";
- document.getElementById("username").innerText = JSON.parse(await (await window.fetch("https://money-v1.equestria.dev/Authentication/Username/")).text()).name;
- document.getElementById("user-profile").src = "https://account.minteck.org/hub/api/rest/avatar/" + JSON.parse(await (await window.fetch("https://money-v1.equestria.dev/Authentication/Username/")).text()).id + "?dpr=2&size=48";
-
- window.transactions = JSON.parse(await (await window.fetch("https://money-v1.equestria.dev/Application/TransactionsList/")).text());
- window.goal = JSON.parse(await (await window.fetch("https://money-v1.equestria.dev/Application/GetGoal/")).text());
-
- for (let transaction of transactions) {
- demo = document.getElementById("demo-transaction");
- demo.id = "";
-
- if (transaction.type === "pay") {
- word = "used";
- color = "#b31500";
- } else {
- word = "added";
- color = "#0065b3";
- }
-
- if (transaction.amount['original'] === "eur") {
- baseCurrency = transaction.amount['eur'].toFixed(2) + "€";
- convertedCurrency = "£" + transaction.amount['gbp'].toFixed(2);
- } else {
- baseCurrency = "£" + transaction.amount['gbp'].toFixed(2);
- convertedCurrency = transaction.amount['eur'].toFixed(2) + "€";
- }
-
- document.getElementById("transactions").innerHTML += demo.outerHTML
- .replace("%user%", transaction.author.name)
- .replace("%picture%", "\" src=\"" + transaction.author.avatar + "\"")
- .replace("%time%", transaction.date.relative)
- .replace("%transactionId%", transaction.date.absolute)
- .replace("%description%", transaction.description.replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">"))
- .replace("%type%", word)
- .replace("%amount_bc%", baseCurrency)
- .replace("%amount_cc%", convertedCurrency)
- .replace("%type%", word)
- .replace("var(--perc-color)", color)
-
- demo.id = "demo-transaction";
- }
-
- try {
- totalPaidEUR = transactions.filter(i => i.type === "pay").map(i => { return i.amount['eur']; }).reduce((a, b) => { return a+b; });
- } catch (e) {
- totalPaidEUR = 0;
- }
-
- try {
- totalPaidGBP = transactions.filter(i => i.type === "pay").map(i => { return i.amount['gbp']; }).reduce((a, b) => { return a+b; });
- } catch (e) {
- totalPaidGBP = 0;
- }
-
- try {
- totalGainedEUR = transactions.filter(i => i.type !== "pay").map(i => { return i.amount['eur']; }).reduce((a, b) => { return a+b; });
- } catch (e) {
- totalGainedEUR = 0;
- }
-
- try {
- totalGainedGBP = transactions.filter(i => i.type !== "pay").map(i => { return i.amount['gbp']; }).reduce((a, b) => { return a+b; });
- } catch (e) {
- totalGainedGBP = 0;
- }
-
- totalEUR = totalGainedEUR - totalPaidEUR;
- totalGBP = totalGainedGBP - totalPaidGBP;
-
- document.getElementById("balance-eur").innerText = totalEUR.toFixed(2);
- document.getElementById("balance-gbp").innerText = totalGBP.toFixed(2);
-
- document.getElementById("goal-name").innerText = goal.name;
- document.getElementById("goal-amount-eur").innerText = goal.amount['eur'].toFixed(2);
- document.getElementById("goal-amount-gbp").innerText = goal.amount['gbp'].toFixed(2);
-
- if (goal.amount['eur'] === 0 || goal.amount['gbp'] === 0) {
- document.getElementById("goal-amount-percentage").innerText = "N/A";
- document.getElementById("goal-bar-fill").style.width = "0%";
- } else {
- percentage = (totalEUR / goal.amount['eur']) * 100;
- document.getElementById("goal-amount-percentage").innerText = percentage.toFixed(2);
- document.getElementById("goal-bar-fill").style.width = percentage.toFixed(5) + "%";
- }
-
- document.getElementById("app").style.display = "";
- document.getElementById("loader").style.opacity = "0";
- document.getElementById("loader").style.pointerEvents = "none";
-
- for (let item of Array.from(document.getElementsByClassName("transaction"))) {
- item.onclick = () => {
- deleteTransaction(item.getAttribute("data-transaction-id"));
- }
- }
-
- graph.data.labels = transactions.map((i) => { return new Date(i.date.absolute).toString().split(":")[0] + ":" + new Date(i.date.absolute).toString().split(":")[1]; }).reverse().filter((_, i) => i > 1);
-
- let last = 0;
- let balances = [];
-
- transactions.map((i) => { if (i.type === "pay") { return -(i.amount.eur); } else { return i.amount.eur; } }).reverse().map((i) => {
- last = last + i;
- balances.push(last);
- });
- graph.data.datasets[0].data = balances.filter((_, i) => i > 1);
-
- trendData = balances.filter((_, i) => i > 1).map((i, _) => { return { x: _, y: i } });
- trend = trendline(trendData, 'x', 'y');
-
- let lastTrend = trend.yStart;
- let balancesTrend = [];
-
- transactions.filter((_, i) => i > 1).map(() => {
- lastTrend = lastTrend + trend.slope;
- balancesTrend.push(lastTrend);
- });
-
- graph.data.datasets[1].data = balancesTrend;
-
- document.getElementById("graph-insights-color").style.backgroundColor = "black";
- document.getElementById("graph-insights-text").style.color = "black";
- document.getElementById("graph-insights-text").innerText = "No insights available. Please try again later.";
-
- document.getElementById("graph-insights-text").style.color = "white";
- document.getElementById("graph-insights-text").innerText = "Slope (negative = losing money; positive = gaining money): " + trend.slope;
-
-/*
-
-TODO: Fix this (it makes the browser process hang)
-
- let avgSlope = Math.round(trend.slope);
- if (avgSlope < -3) {
- document.getElementById("graph-insights-color").style.backgroundColor = "red";
- document.getElementById("graph-insights-text").style.color = "red";
- document.getElementById("graph-insights-text").innerText = "Money is going down faster than it should, you must immediately reduce your expenses.";
- } else if (avgSlope < 0) {
- document.getElementById("graph-insights-color").style.backgroundColor = "orange";
- document.getElementById("graph-insights-text").style.color = "orange";
- document.getElementById("graph-insights-text").innerText = "You are not saving money, consider reducing your expenses.";
- } else if (avgSlope === 0) {
- document.getElementById("graph-insights-color").style.backgroundColor = "green";
- document.getElementById("graph-insights-text").style.color = "green";
- document.getElementById("graph-insights-text").innerText = "Your balance is stable, consider saving more money.";
- } else if (avgSlope > 0) {
- document.getElementById("graph-insights-color").style.backgroundColor = "sky";
- document.getElementById("graph-insights-text").style.color = "sky";
- document.getElementById("graph-insights-text").innerText = "You are effectively saving money.";
- }
-
- if (avgSlope < 0) {
- it = 0; b = totalEUR; while (b > 0) { it++; b = b + trend.slope; }
- let avgDelay = Math.round(averageDelta(transactions.map((i) => { return new Date(i.date.absolute).getTime() }).reverse()));
- let timeUntilEmpty = avgDelay * it;
- let date = new Date(new Date().getTime() + timeUntilEmpty).toString().split(":")[0];
- document.getElementById("graph-insights-text").innerText += " (reaching zero on " + date.substring(0, date.length - 3) + ")";
- } else {
- it = 0; b = totalEUR; while (b < goal.amount.eur) { it++; b = b + trend.slope; }
- let avgDelay = Math.round(averageDelta(transactions.map((i) => { return new Date(i.date.absolute).getTime() }).reverse()));
- let timeUntilGoal = avgDelay * it;
- let date = new Date(new Date().getTime() + timeUntilGoal).toString().split(":")[0];
- document.getElementById("graph-insights-text").innerText += " (reaching goal on " + date.substring(0, date.length - 3) + ")";
- }
-*/
- }
-
- async function createTransaction() {
- document.getElementById('create-action').disabled = true;
- document.getElementById('create-currency').disabled = true;
- document.getElementById('create-description').disabled = true;
- document.getElementById('create-amount').disabled = true;
- document.getElementById('create-button-create').disabled = true;
- document.getElementById('create-button-cancel').disabled = true;
-
- if (isNodeJS) {
- await (await window.fetch("https://money-v1.equestria.dev/Application/AddTransaction/?Currency=" + document.getElementById('create-currency').value + "&Amount=" + document.getElementById('create-amount').value + "&Operation=" + document.getElementById('create-action').value + "&Description=" + Buffer.from(document.getElementById('create-description').value).toString("base64url"))).text();
- } else {
- await (await window.fetch("https://money-v1.equestria.dev/Application/AddTransaction/?Currency=" + document.getElementById('create-currency').value + "&Amount=" + document.getElementById('create-amount').value + "&Operation=" + document.getElementById('create-action').value + "&Description=" + btoa(document.getElementById('create-description').value).replaceAll("+", "-").replaceAll("/", "_"))).text();
- }
-
- await refresh();
-
- document.getElementById('create-action').disabled = false;
- document.getElementById('create-currency').disabled = false;
- document.getElementById('create-description').disabled = false;
- document.getElementById('create-amount').disabled = false;
- document.getElementById('create-button-create').disabled = false;
- document.getElementById('create-button-cancel').disabled = false;
- document.getElementById('create-modal').style.display = 'none';
- document.getElementById('create-action').value = '+';
- document.getElementById('create-currency').value = '£';
- document.getElementById('create-description').value = '';
- document.getElementById('create-amount').value = '';
- }
-
- function showConfirm(text) {
- document.getElementById("confirm-modal").style.display = isNodeJS ? "flex" : "";
- document.getElementById("confirm-text").innerText = text;
- document.getElementById('confirm-button-cancel').disabled = false;
- document.getElementById('confirm-button-ok').disabled = false;
- }
-
- confirmAction = () => {
- console.log("Confirmed!");
- document.getElementById('confirm-modal').style.display = 'none';
- }
-
- async function deleteTransaction(id) {
- let transaction = transactions.filter(i => i.date.absolute === id)[0];
- console.log(transaction);
- showConfirm("This will remove the transaction made by " + transaction.author.name + " " + transaction.date.relative + ".\nIt will be removed from the list and the global balance will be recalculated without this transaction.");
- confirmAction = async () => {
- if (isNodeJS) {
- await (await window.fetch("https://money-v1.equestria.dev/Application/RemoveTransaction/?Transaction=" + Buffer.from(id).toString("base64url"))).text();
- } else {
- await (await window.fetch("https://money-v1.equestria.dev/Application/RemoveTransaction/?Transaction=" + btoa(id).replaceAll("+", "-").replaceAll("/", "_"))).text();
- }
- await refresh();
- document.getElementById('confirm-modal').style.display = 'none';
- }
- }
- </script>
</div>
- <script>
- if (!isNodeJS) {
- document.getElementById("loader").style.backgroundColor = "#000000";
- }
- </script>
+ <script src="./assets/mobile-p1.js"></script>
<div id="app" style="display:none;position:fixed;z-index:3;">
<div id="header" style="z-index:5;background: #111;position: fixed;top: 0;padding: 8px 30px;left: 0;right: 0;height: 32px;">
<img alt="Bits" src="assets/logo.svg" style="width:32px;vertical-align: middle;">
@@ -316,18 +44,7 @@ TODO: Fix this (it makes the browser process hang) </span><span id="username-desktop" style="opacity:.5;"> · <span id="username">%user%</span></span><span id="username-mobile" style="display:none;vertical-align: middle;"><img id="user-profile" alt="" style="border-radius: 999px;width: 32px;height: 32px;vertical-align: middle;position:relative;top:-6px;display:inline-block;margin-left:7px;" src=""></span>
</span>
</div>
- <script>
- if (!isNodeJS) {
- document.getElementById("menu-desktop").style.display = "none";
- document.getElementById("menu-mobile").style.display = "";
- document.getElementById("username-desktop").style.display = "none";
- document.getElementById("username-mobile").style.display = "";
- document.getElementById("header").style.padding = "8px";
- document.getElementById("header").style.backgroundColor = "#000000";
- document.getElementById("balance").style.position = "relative";
- document.getElementById("balance").style.top = "-4px";
- }
- </script>
+ <script src="./assets/mobile-p2.js"></script>
<div id="view" style="z-index:5;color:black;background:rgb(247, 249, 250);position:fixed;top:48px;left:0;right:0;bottom:64px;">
<div id="list" style="position: fixed;top: 48px;left: 0;bottom: 64px;right:0;border-right: 1px solid rgba(0, 0, 0, .25);">
<div id="demo-zone" style="display:none;">
@@ -357,47 +74,7 @@ TODO: Fix this (it makes the browser process hang) ">No insights available. Please try again later.</span>
</p>
<canvas id="graph-display" style="width:100%;height:100%;"></canvas>
- <script>
- const ctx = document.getElementById('graph-display').getContext('2d');
- const graph = new Chart(ctx, {
- type: 'line',
- data: {
- labels: [],
- datasets: [{
- label: 'Balance',
- data: [],
- borderColor: 'rgba(153, 102, 255, 1)',
- fill: false,
- },
- {
- label: 'Trendline',
- data: [],
- borderColor: 'rgba(153, 102, 255, .5)',
- borderDash: [5],
- pointRadius: 0,
- fill: false,
- }]
- },
- options: {
- scales: {
- y: {
- beginAtZero: true
- }
- },
- scaleLabel: "<%=value%>%",
- legend: {
- display: false
- },
- tooltips: {
- callbacks: {
- label: function(tooltipItem, data) {
- return data.labels[tooltipItem.index] + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '€';
- }
- }
- }
- }
- });
- </script>
+ <script src="./assets/graph.js"></script>
</div>
</div>
@@ -550,78 +227,6 @@ width:max-content;"> border-radius: 999px;
"></span></span></div>
</div>
-<script>
- if (!isNodeJS) {
- document.getElementById("create-modal-inner").style.borderRadius = "0";
- document.getElementById("create-modal-inner").style.borderBottomLeftRadius = "5px";
- document.getElementById("create-modal-inner").style.borderBottomRightRadius = "5px";
- document.getElementById("create-modal-inner").style.width = "calc(100% - 30px)";
- document.getElementById("confirm-modal-inner").style.borderRadius = "0";
- document.getElementById("confirm-modal-inner").style.width = "calc(100% - 30px)";
- document.getElementById("confirm-modal-inner").style.borderBottomLeftRadius = "5px";
- document.getElementById("confirm-modal-inner").style.borderBottomRightRadius = "5px";
- }
-
- f13presses = 0;
- document.onkeydown = (event) => {
- if (event.keyCode === 124) {
- if (require('os').platform() === "win32") {
- alert("haha you're using an inferior OS! Doing F13 on here is too easy so you might have expected " +
- "something but you're not going to get it.")
- } else {
- f13presses++;
-
- switch (f13presses) {
- case 1:
- Array.from(document.querySelectorAll("*")).forEach((item) => {
- item.style.fontFamily = "'Noto Sans Symbols', 'Wingdings', 'Webdings', monospace";
- });
- break;
-
- case 2:
- Array.from(document.querySelectorAll("*")).forEach((item) => {
- item.style.background = "red";
- });
- break;
-
- case 3:
- Array.from(document.querySelectorAll("*")).forEach((item) => {
- item.style.color = "blue";
- });
- break;
-
- case 4:
- Array.from(document.querySelectorAll("img")).forEach((item) => {
- item.src = "";
- item.style.color = "yellow";
- });
- break;
-
- case 5:
- Array.from(document.querySelectorAll("*")).forEach((item) => {
- item.style.transition = "transform 200ms";
- item.style.animationName = "shake";
- item.style.animationDuration = "200ms";
- item.style.animationIterationCount = "infinite";
- item.style.animationDirection = "alternate-reverse";
- });
- break;
-
- case 6:
- Array.from(document.querySelectorAll("*")).forEach((item) => {
- item.style.display = "none";
- });
- break;
-
- default:
- Array.from(document.querySelectorAll("*")).forEach((item) => {
- window.close();
- });
- break;
- }
- }
- }
- }
-</script>
+<script src="./assets/mobile-p3.js"></script>
</body>
</html>
|