Move category to top for creating a transaction.

When category is set to bill or income, autofill the amount.

src/views/js/Elem.js

@@ -47,6 +47,10 @@ export default class Elem {
         return this;
     }
 
+    getValue(){
+        return this.elem.value;
+    }
+
     label(v){
         this.elem.label = v;
         return this;
@@ -89,7 +93,15 @@ export default class Elem {
     }
 
     onchange(v){
-        this.elem.onchange = v;
+        if(this.change) this.elem.removeEventListener("change", this.change);
+        this.change = v;
+        this.elem.addEventListener("change", v);
+        return this;
+    }
+
+    removeOnchange(){
+        if(this.change) this.elem.removeEventListener("change", this.change);
+        this.change = undefined;
         return this;
     }
 

src/views/js/pages/CreateTransaction.js

@@ -28,7 +28,20 @@ export default class CreateTransaction extends Page{
         await transaction.save(true);
         user.account.addTransaction(transaction);
         changePage("home");
-   }
+    }
+
+    fillAmount(select){
+        const catValues = select.getValue().split(":");
+
+        let newValue = 0;
+        if(catValues[0] === "bill" || catValues[0] === "income"){
+            const category = user.account.getCategory(catValues[0], catValues[1]);
+            newValue = category.amount / 100;
+        }
+
+        new Elem(this.container.querySelector(".amount"))
+            .value(newValue);
+    }
 
     render(income, bills, allowances){
         let select, incomeOpt, billsOpt, allowancesOpt;
@@ -38,6 +51,30 @@ export default class CreateTransaction extends Page{
             .append(new Elem("h1")
                 .text("Create Transaction")
             )
+            .append(new Elem("label")
+                .text("Category")
+                .append(new Elem("select")
+                    .addClass("category")
+                    .toVar((a)=>{select = a})
+                    .append(new Elem("option")
+                        .value("discretionary")
+                        .text("Discretionary")
+                    )
+                    .append(new Elem("optgroup")
+                        .label("Allowances")
+                        .toVar((e)=>{allowancesOpt = e})
+                    )
+                    .append(new Elem("optgroup")
+                        .label("Bills")
+                        .toVar((e)=>{billsOpt = e})
+                    )
+                    .append(new Elem("optgroup")
+                        .label("Income")
+                        .toVar((e)=>{incomeOpt = e})
+                    )
+                    .onchange(()=>{this.fillAmount(select)})
+                )
+            )
             .append(new Elem("label")
                 .text("Amount")
                 .append(new Elem("input")
@@ -49,26 +86,6 @@ export default class CreateTransaction extends Page{
                     .focus()
                 )
             )
-            .append(new Elem("select")
-                .addClass("category")
-                .toVar((a)=>{select = a})
-                .append(new Elem("option")
-                    .value("discretionary")
-                    .text("Discretionary")
-                )
-                .append(new Elem("optgroup")
-                    .label("Allowances")
-                    .toVar((e)=>{allowancesOpt = e})
-                )
-                .append(new Elem("optgroup")
-                    .label("Bills")
-                    .toVar((e)=>{billsOpt = e})
-                )
-                .append(new Elem("optgroup")
-                    .label("Income")
-                    .toVar((e)=>{incomeOpt = e})
-                )
-            )
             .append(new Elem("label")
                 .text("Tags")
                 .append(new Elem("input")

src/views/js/pages/Home.js

@@ -35,7 +35,6 @@ export default class Home extends Page{
     }
 
     submitOnEnter(event){
-        console.log(event);
         if(event.key === "Enter"){
             user.account.balance = Format.dollarsToCents(this.container.querySelector(".balance input").value);
             user.account.save();