diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 37 |
1 files changed, 37 insertions, 0 deletions
@@ -55,6 +55,7 @@ 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()); + window.goal = JSON.parse(await (await window.fetch("https://money.equestria.dev/Application/GetGoal")).text()); for (let transaction of transactions) { demo = document.getElementById("demo-transaction"); @@ -122,6 +123,19 @@ 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"; @@ -241,6 +255,29 @@ 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 id="goal" style=" + position: fixed; + background: rgba(0, 0, 0, .75); + bottom: 0; + left: 0; + right: 0; + padding: 10px; + z-index: 9; +"><b id="goal-name">%goal%</b> <span style=" + float: right; +"><span id="goal-amount-eur">%goal_eur%</span>€, £<span id="goal-amount-gbp">%goal_gbp%</span> · <span id="goal-amount-percentage">%goal_percentage%</span>% completed</span><span style=" + display: block; + height: 16px; + margin-top: 10px; + border-radius: 999px; + background: rgba(0, 0, 0, .25); +"><span id="goal-bar-fill" style=" + height: 16px; + background: linear-gradient(90deg, rgba(183,153,201,1) 0%, rgba(87,58,152,1) 25%, rgba(204,129,148,1) 50%, rgba(235,186,115,1) 75%, rgba(169,83,144,1) 100%); + width: 0%; + display: block; + border-radius: 999px; +"></span></span></div> </div> </body> </html>
\ No newline at end of file |