Display transactions page.

src/views/js/data/Account.js

@@ -23,10 +23,18 @@ export default class Account{
         return this._id;
     }
 
+    get name(){
+        return this._name;
+    }
+
     get balance(){
         return Format.centsToDollars(this._balance);
     }
 
+    get transactions(){
+        return this._transactions;
+    }
+
     get isPopulated(){
         return this._populated;
     }
@@ -35,6 +43,21 @@ export default class Account{
         if(typeof v === "boolean") this._populated = v;
     }
 
+    getCategory(category, categoryId){
+        if(category === "discretionary") return {name: "Discretionary"};
+
+        let list;
+        switch(category){
+            case "income": list = this._income; break;
+            case "bill": list = this._bills; break;
+            case "allowance": list = this._allowances; break;
+        }
+
+        for(let i = 0; i < list.length; i++){
+            if(list[i].id === categoryId) return list[i];
+        }
+    }
+
     incomeTotal(){
         let income = 0;
         for(let i = 0; i < this._income.length; i++){

src/views/js/data/Transaction.js

@@ -15,6 +15,22 @@ export default class Transaction{
         this._note = data.note;
     }
 
+    get date(){
+        return this._date;
+    }
+
+    get category(){
+        return this._parent.getCategory(this._category, this._categoryId);
+    }
+
+    get location(){
+        return this._location;
+    }
+
+    get amount(){
+        return Format.centsToDollars(this._amount);
+    }
+
     static create(account, date, amount, tags, location, note, category){
         let categoryId = null;
         if(category !== "discretionary"){

src/views/js/index.js

@@ -11,6 +11,7 @@ import CreateBill from "./pages/CreateBill.js";
 import CreateAllowance from "./pages/CreateAllowance.js";
 import CreateTransaction from "./pages/CreateTransaction.js";
 import ViewMenu from "./pages/ViewMenu.js";
+import ViewTransactions from "./pages/ViewTransactions.js";
 
 const pages = document.querySelector(".page");
 let currentPage;
@@ -30,6 +31,7 @@ window.changePage = (page, data)=>{
         case "createAllowance": currentPage = new CreateAllowance(); break;
         case "createTransaction": currentPage = new CreateTransaction(); break;
         case "viewMenu": currentPage = new ViewMenu(); break;
+        case "viewTransactions": currentPage = new ViewTransactions(); break;
     }
     console.timeEnd("change page");
 }

src/views/js/pages/ViewTransactions.js

@@ -0,0 +1,44 @@
+import Page from "./Page.js";
+import Elem from "../Elem.js";
+import Format from "../Format.js";
+
+export default class ViewTransactions extends Page{
+    constructor(){
+        super("ViewTransactions");
+
+        this.render();
+    }
+
+    render(){
+        new Elem("h1")
+            .text(`${user.account.name} transactions`)
+            .appendTo(this.container);
+
+        this.transactions = new Elem("div")
+            .addClass("transactions")
+            .appendTo(this.container);
+
+        const transactions = user.account.transactions;
+        for(let i = 0; i < transactions.length; i++){
+            new Elem("div")
+                .addClass("transaction")
+                .append(new Elem("p")
+                    .addClass("date")
+                    .text(transactions[i].date)
+                )
+                .append(new Elem("p")
+                    .addClass("category")
+                    .text(transactions[i].category.name)
+                )
+                .append(new Elem("p")
+                    .addClass("location")
+                    .text(transactions[i].location)
+                )
+                .append(new Elem("p")
+                    .addClass("amount")
+                    .text(Format.currency(transactions[i].amount))
+                )
+                .appendTo(this.transactions);
+        }
+    }
+}