Create page for creating a new bill.

src/views/js/data/Account.js

@@ -50,6 +50,16 @@ export default class Account{
         await this.save();
     }
 
+    async addBill(name, amount){
+        this._bills.push({
+            id: crypto.randomUUID(),
+            name: name,
+            amount: this.toCents(amount)
+        });
+
+        await this.save();
+    }
+
     toCents(num){
         if(typeof num === "string") num = Number(num);
 

src/views/js/index.js

@@ -7,6 +7,7 @@ import Home from "./pages/Home.js";
 import AddMenu from "./pages/AddMenu.js";
 import CreateAccount from "./pages/CreateAccount.js";
 import CreateIncome from "./pages/CreateIncome.js";
+import CreateBill from "./pages/CreateBill.js";
 
 const pages = document.querySelector(".page");
 let currentPage;
@@ -22,6 +23,7 @@ window.changePage = (page, data)=>{
         case "addMenu": currentPage = new AddMenu(); break;
         case "createAccount": currentPage = new CreateAccount(); break;
         case "createIncome": currentPage = new CreateIncome(); break;
+        case "createBill": currentPage = new CreateBill(); break;
     }
     console.timeEnd("change page");
 }

src/views/js/pages/AddMenu.js

@@ -20,5 +20,11 @@ export default class AddMenu extends Page{
             .addClass("button")
             .onclick(()=>{changePage("createIncome")})
             .appendTo(this.container);
+
+        new Elem("button")
+            .text("New Bill")
+            .addClass("button")
+            .onclick(()=>{changePage("createBill")})
+            .appendTo(this.container);
     }
 }

src/views/js/pages/CreateBill.js

@@ -0,0 +1,61 @@
+import Page from "./Page.js";
+import Elem from "../Elem.js";
+
+export default class CreateBill extends Page{
+    constructor(){
+        super("CreateBill");
+
+        this.render();
+    }
+
+    async submit(event){
+        event.preventDefault();
+
+        await user.account.addBill(
+            this.container.querySelector(".name").value,
+            this.container.querySelector(".amount").value
+        );
+
+        changePage("home");
+    }
+
+    render(){
+        new Elem("form")
+            .addClass("standardForm")
+            .onsubmit(this.submit.bind(this))
+            .append(new Elem("h1")
+                .text("Create Bill")
+            )
+            .append(new Elem("label")
+                .text("Name")
+                .append(new Elem("input")
+                    .type("text")
+                    .addClass("name")
+                    .placeholder("Name")
+                    .required()
+                    .focus()
+                )
+            )
+            .append(new Elem("label")
+                .text("Amount")
+                .append(new Elem("input")
+                    .type("number")
+                    .addClass("amount")
+                    .placeholder("Amount")
+                    .min("0")
+                    .step("0.01")
+                    .required()
+                )
+            )
+            .append(new Elem("button")
+                .text("Create")
+            )
+            .append(new Elem("button")
+                .text("Cancel")
+                .addClass("cancel")
+                .type("button")
+                .onclick(()=>{changePage("home")})
+            )
+            .appendTo(this.container);
+    }
+}