Display discretionary on the home page.

src/views/css/home.css

@@ -7,3 +7,22 @@
 #Home .buttonBox > *{
     margin-bottom: 5px;
 }
+
+#Home dl{
+    display: flex;
+    flex-direction: column;
+    background: var(--surface);
+    padding: 5px 15px;
+    width: 100%;
+    max-width: 350px;
+    margin: 5px 0;
+    font-size: 22px;
+}
+
+#Home dt{
+    font-weight: bold
+}
+
+#Home dd{
+    padding-left: 15px;
+}

src/views/js/Elem.js

@@ -137,6 +137,10 @@ export default class Elem {
         return this;
     }
 
+    appendNew(v){
+        return new Elem("span");
+    }
+
     appendTo(v){
         if(v instanceof this.constructor){
             v.elem.appendChild(this.elem);
@@ -146,6 +150,10 @@ export default class Elem {
         return this;
     }
 
+    getParent(){
+        return new Elem(this.elem.parentElement);
+    }
+
     get(){
         return this.elem;
     }

src/views/js/Format.js

@@ -1,7 +1,10 @@
 export default class Format{
     static currency(num){
         num /= 100;
-        return "$" + num.toFixed(2);
+        return "$" + num.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2
+        });
     }
 
     static transactionDate(d){

src/views/js/data/Account.js

@@ -51,11 +51,25 @@ export default class Account{
         return this._populated;
     }
 
+    getDiscretionary(){
+        const income = this.incomeTotal();
+        return income - this.billsTotal() - this.allowancesTotal(income);
+    }
+
     set isPopulated(v){
         if(typeof v === "boolean") this._populated = v;
     }
 
-    getIncomeSum(raw = false){
+    getDiscretionarySpent(){
+        let total = 0;
+        for(let i = 0; i < this._transactions.length; i++){
+            if(this._transactions[i].category.name === "Discretionary") total += this._transactions[i].amount;
+        }
+        console.log(total);
+        return total;
+    }
+
+    getIncomeSum(){
         let total = 0;
         for(let i = 0; i < this._income.length; i++){
             if(this._income[i].active) total += this._income[i].amount;
@@ -106,6 +120,20 @@ export default class Account{
         return bills;
     }
 
+    allowancesTotal(income){
+        let allowances = 0;
+        for(let i = 0; i < this._allowances.length; i++){
+            if(!this._allowances[i].active) continue;
+
+            if(this._allowances[i].isPercent){
+                allowances += (this._allowances[i].amount / 100) * income;
+            }else{
+                allowances += this._allowances[i].amount;
+            }
+        }
+        return allowances;
+    }
+
     static async create(name, balance){
         const data = {
             name: name,

src/views/js/pages/Home.js

@@ -8,6 +8,8 @@ export default class Home extends Page{
     constructor(){
         super("Home", ["addMenu", "viewMenu", "logout"]);
 
+        this.incomeTotal = user.account.incomeTotal();
+
         const date = new Date();
         const month = date.toLocaleString("en-US", {month: "long"});
 
@@ -22,6 +24,7 @@ export default class Home extends Page{
                 .then((transactions)=>{
                     if(transactions.length > 0) user.account.addManyTransactions(transactions);
                     user.account.isPopulated = true;
+                    this.renderData();
                 })
                 .catch((err)=>{
                     new Notifier("error", "Unable to retrieve transactions");
@@ -31,6 +34,26 @@ export default class Home extends Page{
         this.render(month);
     }
 
+    renderData(){
+        for(let i = 0; i < user.account.allowances.length; i++){
+            const a = user.account.allowances[i];
+            const spent = Format.currency(user.account.categorySpent(a));
+            new Elem(this.container.querySelector(`[class="${a.id}"] dd`))
+                .text(`${spent} / ${Format.currency(a.currencyAmount(this.incomeTotal))}`);
+        }
+
+        const discretionary = user.account.getDiscretionary();
+        const remaining = discretionary - user.account.getDiscretionarySpent();
+        new Elem(this.container.querySelector(".discretionary dd"))
+            .text("")
+            .append(new Elem("span")
+                .text(Format.currency(remaining))
+            )
+            .append(new Elem("span")
+                .text(` / ${Format.currency(discretionary)}`)
+            );
+    }
+
     render(month){
         new Elem("h1")
             .text(month)
@@ -50,7 +73,7 @@ export default class Home extends Page{
                 .text("Income: ")
             )
             .append(new Elem("dd")
-                .text(Format.currency(user.account.incomeTotal()))
+                .text(Format.currency(this.incomeTotal))
             )
             .appendTo(this.container);
 
@@ -62,5 +85,36 @@ export default class Home extends Page{
                 .text(Format.currency(user.account.billsTotal()))
             )
             .appendTo(this.container);
+
+        const discretionary = Format.currency(user.account.getDiscretionary());
+        new Elem("dl")
+            .addClass("discretionary")
+            .append(new Elem("dt")
+                .text("Remaining Discretionary:")
+            )
+            .append(new Elem("dd")
+                .text(`${discretionary} / ${discretionary}`)
+            )
+            .appendTo(this.container);
+
+        let allowances;
+        new Elem("h3").text("Allowances:").appendTo(this.container);
+        new Elem("div")
+            .addClass("allowances")
+            .toVar((e)=>{allowances = e})
+            .appendTo(this.container);
+
+        for(let i = 0; i < user.account.allowances.length; i++){
+            const a = user.account.allowances[i];
+            new Elem("dl")
+                .addClass(a.id)
+                .append(new Elem("dt")
+                    .text(`${a.name}: `)
+                )
+                .append(new Elem("dd")
+                    .text(`$0.00 / ${Format.currency(a.currencyAmount(this.incomeTotal))}`)
+                )
+                .appendTo(this.container);
+        }
     }
 }