Update style for the transaction details page.

src/views/css/index.css

@@ -2,6 +2,7 @@
 @import "./addMenu.css";
 @import "./createAllowance.css";
 @import "./viewTransactions.css";
+@import "./transactionDetails.css";
 
 :root {
     --primary: #6E4B3A;

src/views/css/transactionDetails.css

@@ -0,0 +1,32 @@
+#TransactionDetails h1{
+    text-align: center;
+}
+
+#TransactionDetails .dataContainer{
+    width: 100%;
+    max-width: 750px;
+}
+
+#TransactionDetails dl{
+    padding: 5px 15px;
+    font-size: 22px;
+    margin: 5px 0;
+    background: var(--surface);
+}
+
+#TransactionDetails dt{
+    font-weight: bold;
+    text-decoration: underline;
+}
+
+#TransactionDetails .button{
+    width: 100%;
+}
+
+#TransactionDetails .green{
+    color: var(--success);
+}
+
+#TransactionDetails .red{
+    color: var(--error);
+}

src/views/js/Format.js

@@ -11,13 +11,14 @@ export default class Format{
         return `${year}-${month}-${day}`;
     }
 
-    static dateFromTransaction(d){
+    static dateFromTransaction(d, dayOfWeek = false){
         const date = new Date(d);
 
         let options = {
             year: "numeric",
             month: "long",
-            day: "numeric"
+            day: "numeric",
+            weekday: dayOfWeek ? "long" : undefined
         };
 
         return date.toLocaleDateString("en-US", options);

src/views/js/data/Allowance.js

@@ -14,6 +14,10 @@ export default class Allowance{
         return this._name;
     }
 
+    get type(){
+        return "Allowance";
+    }
+
     static create(name, amount, isPercent){
         return new Allowance(
             crypto.randomUUID(),

src/views/js/data/Bill.js

@@ -17,6 +17,10 @@ export default class Bill{
         return this._amount;
     }
 
+    get type(){
+        return "Bill";
+    }
+
     static create(name, amount){
         return new Bill(
             crypto.randomUUID(),

src/views/js/data/Income.js

@@ -17,6 +17,10 @@ export default class Income{
         return this._amount;
     }
 
+    get type(){
+        return "Income";
+    }
+
     static create(name, amount){
         return new Income(
             crypto.randomUUID(),

src/views/js/data/Transaction.js

@@ -35,6 +35,14 @@ export default class Transaction{
         return Format.centsToDollars(this._amount);
     }
 
+    get tags(){
+        return this._tags;
+    }
+
+    get note(){
+        return this._note;
+    }
+
     static create(account, date, amount, tags, location, note, category){
         let categoryId = null;
         if(category !== "discretionary"){

src/views/js/index.js

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

src/views/js/pages/TransactionDetails.js

@@ -0,0 +1,98 @@
+import Page from "./Page.js";
+import Elem from "../Elem.js";
+import Format from "../Format.js";
+
+export default class TransactionDetails extends Page{
+    constructor(transaction){
+        super("TransactionDetails", ["home", "back-viewTransactions", "logout"]);
+
+        this.render(transaction);
+    }
+
+    displayCategory(category){
+        if(category.name === "Discretionary") return category.name;
+        return `${category.name} (${category.type})`;
+    }
+
+    transactionColor(transaction){
+        if(transaction.rawCategory === "income"){
+            if(transaction.amount < 0){
+                return "red";
+            }else{
+                return "green";
+            }
+        }else{
+            if(transaction.amount < 0){
+                return "green";
+            }else{
+                return "red";
+            }
+        }
+    }
+
+    render(transaction){
+        new Elem("div")
+            .addClass("dataContainer")
+            .append(new Elem("h1")
+                .text("Transaction")
+            )
+            .append(new Elem("dl")
+                .append(new Elem("dt")
+                    .text("Date")
+                )
+                .append(new Elem("dd")
+                    .text(Format.dateFromTransaction(transaction.date, true))
+                )
+            )
+            .append(new Elem("dl")
+                .append(new Elem("dt")
+                    .text("Amount")
+                )
+                .append(new Elem("dd")
+                    .text(Format.currency(transaction.amount))
+                    .addClass(this.transactionColor(transaction))
+                )
+            )
+            .append(new Elem("dl")
+                .append(new Elem("dt")
+                    .text("Location ")
+                )
+                .append(new Elem("dd")
+                    .text(transaction.location)
+                )
+            )
+            .append(new Elem("dl")
+                .append(new Elem("dt")
+                    .text("Category")
+                )
+                .append(new Elem("dd")
+                    .text(this.displayCategory(transaction.category))
+                )
+            )
+            .append(new Elem("dl")
+                .append(new Elem("dt")
+                    .text("Tags")
+                )
+                .append(new Elem("dd")
+                    .text(transaction.tags.join(", "))
+                )
+            )
+            .append(new Elem("dl")
+                .append(new Elem("dt")
+                    .text("Note")
+                )
+                .append(new Elem("dd")
+                    .text(transaction.note)
+                )
+            )
+            .append(new Elem("button")
+                .text("Edit")
+                .addClass("button")
+            )
+            .append(new Elem("button")
+                .text("Delete")
+                .addClass("button")
+            )
+            .appendTo(this.container);
+    }
+}

src/views/js/pages/ViewTransactions.js

@@ -38,6 +38,7 @@ export default class ViewTransactions extends Page{
         for(let i = 0; i < transactions.length; i++){
             new Elem("div")
                 .addClass("transaction")
+                .onclick(()=>{changePage("transactionDetails", transactions[i])})
                 .append(new Elem("div")
                     .append(new Elem("p")
                         .addClass("date")