Create edit bill page.

src/views/css/viewCategory.css

@@ -53,6 +53,8 @@
     font-weight: bold;
 }
 
-#ViewIncome .strike{
+#ViewIncome .strike,
+#ViewBills .strike,
+#ViewAllowances .strike{
     text-decoration: line-through;
 }

src/views/js/data/Bill.js

@@ -16,10 +16,19 @@ export default class Bill{
         return this._name;
     }
 
+    set name(v){
+        this._name = v;
+    }
+
     get amount(){
         return Format.centsToDollars(this._amount);
     }
 
+    set amount(v){
+        if(typeof v !== "string") v = Number(v);
+        this._amount = Format.dollarsToCents(v);
+    }
+
     get type(){
         return "Bill";
     }
@@ -28,6 +37,11 @@ export default class Bill{
         return this._active;
     }
 
+    set active(v){
+        if(typeof v !== "boolean") throw new TypeError("'value' requires a boolean");
+        this._active = v;
+    }
+
     static create(name, amount){
         return new Bill(
             crypto.randomUUID(),

src/views/js/index.js

@@ -17,6 +17,7 @@ import EditTransaction from "./pages/EditTransaction.js";
 import ViewIncome from "./pages/ViewIncome.js";
 import EditIncome from "./pages/EditIncome.js";
 import ViewBills from "./pages/ViewBills.js";
+import EditBill from "./pages/EditBill.js";
 
 const pages = document.querySelector(".page");
 let currentPage;
@@ -25,6 +26,7 @@ window.changePage = (page, data)=>{
     console.time("change page");
     currentPage.close();
 
+    console.log(page);
     switch(page){
         case "login": currentPage = new Login(); break;
         case "register": currentPage = new Register(); break;
@@ -42,6 +44,7 @@ window.changePage = (page, data)=>{
         case "viewIncome": currentPage = new ViewIncome(); break;
         case "editIncome": currentPage = new EditIncome(data); break;
         case "viewBills": currentPage = new ViewBills(); break;
+        case "editBill": currentPage = new EditBill(data); break;
     }
     console.timeEnd("change page");
 }

src/views/js/pages/EditBill.js

@@ -0,0 +1,70 @@
+import Page from "./Page.js";
+import Elem from "../Elem.js";
+
+export default class EditBill extends Page{
+    constructor(bill){
+        super("EditBill", ["home", "back-viewBills", "logout"]);
+        console.log("billing");
+
+        this.render(bill);
+    }
+
+    submit(bill){
+        event.preventDefault();
+
+        bill.name = this.container.querySelector(".name").value;
+        bill.amount = this.container.querySelector(".amount").value;
+
+        user.account.save();
+        changePage("viewBills");
+    }
+
+    archive(bill){
+        bill.active = !bill.active;
+        user.account.save();
+        new Elem(this.container.querySelector(".archive"))
+            .text(bill.active ? "Archive" : "Restore");
+        changePage("viewBills");
+    }
+
+    render(bill){
+        new Elem("h1")
+            .text("Edit Bill")
+            .appendTo(this.container);
+
+        new Elem("form")
+            .addClass("standardForm")
+            .onsubmit(()=>{this.submit(bill)})
+            .append(new Elem("label")
+                .text("Name")
+                .append(new Elem("input")
+                    .type("text")
+                    .addClass("name")
+                    .value(bill.name)
+                    .focus()
+                    .required()
+                )
+            )
+            .append(new Elem("label")
+                .text("Amount")
+                .append(new Elem("input")
+                    .type("number")
+                    .addClass("amount")
+                    .value(bill.amount)
+                    .min("0")
+                    .step("0.01")
+                    .required()
+                )
+            )
+            .append(new Elem("button")
+                .text("Update")
+            )
+            .append(new Elem("button")
+                .text(bill.active ? "Archive": "Restore")
+                .type("button")
+                .addClass("archive")
+                .onclick(()=>{this.archive(bill)})
+            )
+            .appendTo(this.container);
+    }
+}