Working on updating the amount display when changing between percent and fixed amount.

src/views/css/editAllowance.css

@@ -0,0 +1,3 @@
+#EditAllowance h2{
+    text-align: center;
+}

src/views/css/index.css

@@ -4,6 +4,7 @@
 @import "./viewTransactions.css";
 @import "./transactionDetails.css";
 @import "./viewCategory.css";
+@import "./editAllowance.css";
 
 :root {
     --primary: #6E4B3A;

src/views/js/Elem.js

@@ -72,6 +72,13 @@ export default class Elem {
         return this;
     }
 
+    clear(){
+        while(this.elem.children.length > 0){
+            this.elem.removeChild(this.elem.lastChild);
+        }
+        return this;
+    }
+
     min(v){
         this.elem.min = v;
         return this;

src/views/js/data/Account.js

@@ -92,7 +92,7 @@ export default class Account{
     incomeTotal(){
         let income = 0;
         for(let i = 0; i < this._income.length; i++){
-            income += this._income[i].amount;
+            if(this._income.active) income += this._income[i].amountRaw;
         }
         return Format.centsToDollars(income);
     }

src/views/js/data/Allowance.js

@@ -17,6 +17,15 @@ export default class Allowance{
         return this._name;
     }
 
+    get isPercent(){
+        return this._isPercent;
+    }
+
+    set isPercent(v){
+        if(typeof v !== "boolean") throw new TypeError("'isPercent' must be of type boolean");
+        this._isPercent = v;
+    }
+
     get type(){
         return "Allowance";
     }
@@ -35,6 +44,15 @@ export default class Allowance{
         return Format.centsToDollars(this._amount);
     }
 
+    displayAmount(income){
+        console.log(this._isPercent);
+        console.log(this._amount);
+        console.log(this._amount / 100);
+        console.log(income * (this._amount / 100));
+        if(this._isPercent) return this._amount;
+        return Format.centsToDollars(income * (this._amount / 100));
+    }
+
     static create(name, amount, isPercent){
         return new Allowance(
             crypto.randomUUID(),

src/views/js/index.js

@@ -19,6 +19,7 @@ import EditIncome from "./pages/EditIncome.js";
 import ViewBills from "./pages/ViewBills.js";
 import EditBill from "./pages/EditBill.js";
 import ViewAllowances from "./pages/ViewAllowances.js";
+import EditAllowance from "./pages/EditAllowance.js";
 
 const pages = document.querySelector(".page");
 let currentPage;
@@ -46,6 +47,7 @@ window.changePage = (page, data)=>{
         case "viewBills": currentPage = new ViewBills(); break;
         case "editBill": currentPage = new EditBill(data); break;
         case "viewAllowances": currentPage = new ViewAllowances(data); break;
+        case "editAllowance": currentPage = new EditAllowance(data); break;
     }
     console.timeEnd("change page");
 }

src/views/js/pages/CreateAllowance.js

@@ -23,8 +23,8 @@ export default class CreateAllowance extends Page{
         let text, titleText, step;
         if(event.target.checked){
             text = "Amount (%)";
-            titleText = "(Percent of Income)"
-            step = "1"
+            titleText = "(Percent of Income)";
+            step = "1";
         }else{
             text = "Amount ($)";
             titleText = "(Fixed Amount)";

src/views/js/pages/EditAllowance.js

@@ -0,0 +1,108 @@
+import Page from "./Page.js";
+import Elem from "../Elem.js";
+
+export default class EditAllowance extends Page{
+    constructor(allowance){
+        super("EditAllowance", ["home", "back-viewAllowances", "logout"]);
+        this.incomeTotal = user.account.incomeTotal();
+
+        this.render(allowance);
+    }
+
+    submit(allowance){
+        event.preventDefault();
+        console.log("submitting");
+    }
+
+    updateAmount(allowance){
+        let text, titleText, step;
+        if(event.target.checked){
+            text = "Amount (%)";
+            titleText = "(Percent of Income)";
+            step = "1";
+        }else{
+            text = "Amount ($)";
+            titleText = "(Fixed Amount)";
+            step = "0.01";
+        }
+
+        new Elem(this.container.querySelector("h2"))
+            .text(titleText);
+
+        new Elem(this.container.querySelector(".amountLabel"))
+            .clear()
+            .append(new Elem("p")
+                .text(text)
+            )
+            .append(new Elem("input")
+                .type("number")
+                .addClass("amount")
+                .value(allowance.displayAmount(this.incomeTotal))
+                .min("0")
+                .step(step)
+                .required()
+            );
+    }
+
+    archive(allowance){
+        console.log("archiving");
+    }
+
+    render(allowance){
+        new Elem("form")
+            .addClass("standardForm")
+            .onsubmit(()=>{this.submit(allowance)})
+            .append(new Elem("h1")
+                .text("Edit Allowance")
+            )
+            .append(new Elem("h2")
+                .text(allowance.isPercent ? "(Percent of Income)" : "(Fixed Amount)")
+            )
+            .append(new Elem("label")
+                .append(new Elem("p")
+                    .text("Name")
+                )
+                .append(new Elem("input")
+                    .type("text")
+                    .addClass("name")
+                    .value(allowance.name)
+                    .required()
+                )
+            )
+            .append(new Elem("label")
+                .addClass("switch")
+                .append(new Elem("input")
+                    .type("checkbox")
+                    .addClass("isPercent")
+                    .checked(allowance.isPercent)
+                    .onchange(()=>{this.updateAmount(allowance)})
+                )
+                .append(new Elem("span")
+                    .addClass("slider")
+                )
+            )
+            .append(new Elem("label")
+                .addClass("amountLabel")
+                .append(new Elem("p")
+                    .text(allowance.isPercent ? "Amount (%)" : "Amount ($)")
+                )
+                .append(new Elem("input")
+                    .type("number")
+                    .addClass("amount")
+                    .value(allowance.displayAmount(this.incomeTotal))
+                    .min("0")
+                    .step(allowance.isPercent ? "1" : "0.01")
+                    .required()
+                )
+            )
+            .append(new Elem("button")
+                .text("Update")
+            )
+            .append(new Elem("button")
+                .text(allowance.active ? "Archive" : "Restore")
+                .type("button")
+                .onclick(()=>{this.archive(allowance)})
+            )
+            .appendTo(this.container);
+    }
+}

src/views/js/pages/ViewAllowances.js

@@ -48,7 +48,7 @@ export default class ViewAllowances extends Page{
 
             new Elem("button")
                 .addClass("viewCategoryItem")
-                .onclick(()=>{changePage("editAllowance")})
+                .onclick(()=>{changePage("editAllowance", allowances[i])})
                 .append(new Elem("p")
                     .text(allowances[i].name)
                     .addClass(allowances[i].active ? "none" : "strike")