Commit

8 files changed, 168 insertions, 81 deletions

diff --git a/.DS_Store b/.DS_Store
index a33b7f3..3ed63fb 100644
--- a/.DS_Store
+++ b/.DS_Store
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/assets/logo-alt.svg b/assets/logo-alt.svg
new file mode 100644
index 0000000..3526ee2
--- /dev/null
+++ b/assets/logo-alt.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:url(#SVGID_00000031175026581808782280000003400421176260111747_);}
+	.st2{fill:#9F6823;}
+</style>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="24" y1="46.082" x2="24" y2="1.918" gradientTransform="matrix(1 0 0 -1 0 48)">
+	<stop  offset="0" style="stop-color:#E2E1E1"/>
+	<stop  offset="1" style="stop-color:#ACACAC"/>
+</linearGradient>
+<path class="st0" d="M41.5,46.1h-35c-2.6,0-4.6-2-4.6-4.6v-35c0-2.6,2-4.6,4.6-4.6h35c2.6,0,4.6,2,4.6,4.6v35
+	C46.1,44.1,44.1,46.1,41.5,46.1z"/>
+<g>
+	<g>
+		
+			<linearGradient id="SVGID_00000018931332037715957660000009776104526285144721_" gradientUnits="userSpaceOnUse" x1="293.2569" y1="335.2569" x2="318.7141" y2="360.7141" gradientTransform="matrix(1 0 0 1 -282 -324)">
+			<stop  offset="0" style="stop-color:#F9F196"/>
+			<stop  offset="1" style="stop-color:#EC8E11"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000018931332037715957660000009776104526285144721_);" d="M24,42c-9.9,0-18-8.1-18-18S14.1,6,24,6
+			s18,8.1,18,18S33.9,42,24,42z"/>
+		<path class="st2" d="M24,7.5c9.1,0,16.5,7.4,16.5,16.5S33.1,40.5,24,40.5S7.5,33.1,7.5,24S14.9,7.5,24,7.5 M24,4.4
+			C13.1,4.4,4.4,13.1,4.4,24S13.1,43.6,24,43.6S43.6,34.9,43.6,24S34.9,4.4,24,4.4L24,4.4z"/>
+	</g>
+</g>
+</svg>
diff --git a/assets/logo.icns b/assets/logo.icns
new file mode 100644
index 0000000..1738301
--- /dev/null
+++ b/assets/logo.icns
diff --git a/assets/logo.ico b/assets/logo.ico
new file mode 100644
index 0000000..189621b
--- /dev/null
+++ b/assets/logo.ico
diff --git a/assets/logo.png b/assets/logo.png
new file mode 100644
index 0000000..d39dcd7
--- /dev/null
+++ b/assets/logo.png
diff --git a/build.sh b/build.sh
new file mode 100755
index 0000000..cd8dfd8
--- /dev/null
+++ b/build.sh
@@ -0,0 +1,4 @@
+npx electron-packager . Bits --overwrite --out build --arch arm64 --platform darwin --icon assets/logo.icns
+npx electron-packager . Bits --overwrite --out build --arch x64 --platform darwin --icon assets/logo.icns
+npx electron-packager . Bits --overwrite --out build --arch x64 --platform win32 --icon assets/logo.ico
+npx electron-packager . Bits --overwrite --out build --arch x64 --platform linux --icon assets/logo.png
\ No newline at end of file
diff --git a/index.html b/index.html
index 6dfdd74..ab93a30 100644
--- a/index.html
+++ b/index.html
@@ -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("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;"))
-                                .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("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;"))
+                        .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>&nbsp;
+            <input id="create-amount" type="number" max="99999">&nbsp;
+            <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>&nbsp;<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>