diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 210 |
1 files changed, 129 insertions, 81 deletions
@@ -45,88 +45,134 @@ } else { console.info("Authenticated successfully"); - document.getElementById("username").innerText = JSON.parse(await (await window.fetch("https://money.equestria.dev/Authentication/Username")).text()).name; - - window.transactions = JSON.parse(await (await window.fetch("https://money.equestria.dev/Application/TransactionsList")).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("%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("app").style.display = ""; - document.getElementById("loader").style.opacity = "0"; - document.getElementById("loader").style.pointerEvents = "none"; + await refresh(); } }, 1000) } + + async function refresh() { + document.getElementById("transactions").innerHTML = ""; + document.getElementById("username").innerText = JSON.parse(await (await window.fetch("https://money.equestria.dev/Authentication/Username")).text()).name; + + window.transactions = JSON.parse(await (await window.fetch("https://money.equestria.dev/Application/TransactionsList")).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("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")); + } + } + } + + 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; + + await (await window.fetch("https://money.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(); + + 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 = ''; + } + + async function deleteTransaction(id) { + let transaction = transactions.filter(i => i.date.absolute === id)[0]; + console.log(transaction); + if (confirm("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.")) { + await (await window.fetch("https://money.equestria.dev/Application/RemoveTransaction/?Transaction=" + Buffer.from(id).toString("base64url"))).text(); + await refresh(); + } + } </script> </div> <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;"> <span style="vertical-align: middle;"> - <a class="ln" style="cursor:pointer;margin-left:20px;">New transaction</a> + <a class="ln" style="cursor:pointer;margin-left:20px;" onclick="document.getElementById('create-modal').style.display = 'flex';">New transaction</a> <a class="ln" style="cursor:pointer;margin-left:20px;">Members</a> <a class="ln" style="cursor:pointer;margin-left:20px;">About</a> </span> @@ -137,7 +183,7 @@ <div id="view" style="z-index:5;color:black;background:rgb(247, 249, 250);position:fixed;top:48px;left:0;right:0;bottom:0;"> <div id="list" style="position: fixed;top: 48px;left: 0;bottom: 0;right:0;border-right: 1px solid rgba(0, 0, 0, .25);"> <div id="demo-zone" style="display:none;"> - <div class="transaction" id="demo-transaction" style="padding:10px;border-bottom: 1px solid rgba(0, 0, 0, .25);display:grid;grid-template-columns: 48px 1fr;grid-column-gap: 15px;"> + <div class="transaction" data-transaction-id="%transactionId%" id="demo-transaction" style="padding:10px;border-bottom: 1px solid rgba(0, 0, 0, .25);display:grid;grid-template-columns: 48px 1fr;grid-column-gap: 15px;"> <div class="transaction-user" style="display:flex;align-items: center;justify-content: center;"> <img alt="%picture%" style="border-radius: 999px;width: 48px;height: 48px;"> </div> @@ -148,16 +194,16 @@ </div> </div> </div> - <div id="transactions"></div> + <div id="transactions" style="overflow: scroll;height: calc(100vh - 48px);"></div> </div> </div> <div id="create-modal" style=" + display: none; position: fixed; z-index: 999; inset: 0; background: rgba(0, 0, 0, .75); - display: flex; backdrop-filter: blur(10px); align-items: center; justify-content: center; @@ -179,19 +225,21 @@ padding: 10px; background: rgba(0, 0, 0, .1); ">New transaction</h3> - Amount: <select><option>+</option><option>-</option></select> - <input type="number"> - <select><option>£</option><option>€</option></select><br><br>Description: <input type="text" style=" + Amount: <select id="create-action"><option>+</option><option>-</option></select> + <input id="create-amount" type="number" max="99999"> + <select id="create-currency"><option>£</option><option>€</option></select><br><br>Description: <input maxlength="100" id="create-description" type="text" style=" display: block; margin-top: 5px; width: calc(100% - 10px); "> - <button style=" + <div style=" display: block; margin-top: 20px; margin-left: auto; margin-right: auto; -">Create</button> +width:max-content;"> + <button id="create-button-create" onclick="createTransaction();">Create</button> <button id="create-button-cancel" onclick="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='';">Cancel</button> + </div> </div></div> </div> </body> |