Create the page for creating an allowance.

Create saving for allowance creation.

src/views/js/data/Account.js

@@ -60,6 +60,22 @@ export default class Account{
         await this.save();
     }
 
+    async addAllowance(name, amount, isPercent){
+        if(isPercent){
+            amount = Number(amount);
+        }else{
+            amount = this.toCents(amount);
+        }
+
+        this._allowances.push({
+            id: crypto.randomUUID(),
+            name: name,
+            amount: amount
+        });
+
+        await this.save();
+    }
+
     toCents(num){
         if(typeof num === "string") num = Number(num);
 

src/views/js/data/User.js

@@ -52,7 +52,6 @@ export default class User{
 
     async decryptAndAddAccount(account){
         const data = await encryptionHandler.decrypt(account.data, account.iv);
-        console.log(data);
 
         const newAccount = new Account(account.id, account.iv, data);
         this._accounts.push(newAccount);

src/views/js/index.js

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

src/views/js/pages/AddMenu.js

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

src/views/js/pages/CreateAllowance.js

@@ -0,0 +1,70 @@
+import Page from "./Page.js";
+import Elem from "../Elem.js";
+
+export default class CreateAllowance extends Page{
+    constructor(){
+        super("CreateAllowance");
+
+        this.render();
+    }
+
+    async submit(event){
+        event.preventDefault();
+
+        await user.account.addIncome(
+            this.container.querySelector(".name").value,
+            this.container.querySelector(".amount").value,
+            this.container.querySelector(".isPercent").value
+        );
+        changePage("home");
+    }
+
+    render(){
+        new Elem("form")
+            .addClass("standardForm")
+            .onsubmit(this.submit.bind(this))
+            .append(new Elem("h1")
+                .text("Create Income")
+            )
+            .append(new Elem("label")
+                .text("Name")
+                .append(new Elem("input")
+                    .type("text")
+                    .addClass("name")
+                    .placeholder("Name")
+                    .required()
+                    .focus()
+                )
+            )
+            .append(new Elem("label")
+                .text("Percent of Income")
+                .append(new Elem("input")
+                    .type("checkbox")
+                    .addClass("isPercent")
+                    .onchange(()=>{this.updateAmount()})
+                )
+            )
+            .append(new Elem("label")
+                .text("Amount")
+                .addClass("amountLabel")
+                .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);
+    }
+}