Create the create transaction page.

src/views/css/index.css

@@ -65,9 +65,17 @@ body{
     margin: 5px 0;
 }
 
-.standardForm input{
+.standardForm input,
+.standardForm select{
+    outline: none;
     font-size: 22px;
     padding: 5px 0 5px 10px;
+    border: 3px solid rgba(0, 0, 0, 0);
+}
+
+.standardForm input:focus,
+.standardForm select:focus{
+    border: 3px solid var(--secondary);
 }
 
 .standardForm button,

src/views/js/Elem.js

@@ -27,6 +27,16 @@ export default class Elem {
         return this;
     }
 
+    value(v){
+        this.elem.value = v;
+        return this;
+    }
+
+    label(v){
+        this.elem.label = v;
+        return this;
+    }
+
     placeholder(v){
         this.elem.placeholder = v;
         return this;
@@ -57,16 +67,22 @@ export default class Elem {
         return this;
     }
 
+    valueAsDate(v){
+        this.elem.valueAsDate = v;
+        return this;
+    }
+
+    rows(v){
+        this.elem.rows = v;
+        return this;
+    }
+
     removeChildAt(v){
         this.elem.removeChild(this.elem.children[v]);
         return this;
     }
 
     getChildAt(v){
-        console.log(v);
-        console.log(this.elem);
-        console.log(this.elem.children);
-        console.log(this.elem.children[v]);
         return new Elem(this.elem.children[v]);
     }
 
@@ -81,7 +97,12 @@ export default class Elem {
     }
 
     toVar(v){
-        v(this.elem);
+        v(this);
+        return this;
+    }
+
+    appendMany(v){
+        v(this);
         return this;
     }
 

src/views/js/data/Account.js

@@ -90,6 +90,39 @@ export default class Account{
         await this.save();
     }
 
+    listIncome(){
+        const income = [];
+        for(let i = 0; i < this._income.length; i++){
+            income.push({
+                id: this._income[i].id,
+                name: this._income[i].name
+            });
+        }
+        return income;
+    }
+
+    listBills(){
+        const bills = [];
+        for(let i = 0; i < this._bills.length; i++){
+            bills.push({
+                id: this._bills[i].id,
+                name: this._bills[i].name
+            });
+        }
+        return bills;
+    }
+
+    listAllowances(){
+        const allowances = [];
+        for(let i = 0; i < this._allowances.length; i++){
+            allowances.push({
+                id: this._allowances[i].id,
+                name: this._allowances[i].name
+            });
+        }
+        return allowances;
+    }
+
     toCents(num){
         if(typeof num === "string") num = Number(num);
 

src/views/js/data/Allowance.js

@@ -6,6 +6,14 @@ export default class Allowance{
         this._isPercent = isPercent;
     }
 
+    get id(){
+        return this._id;
+    }
+
+    get name(){
+        return this._name;
+    }
+
     static create(name, amount, isPercent){
         return new Allowance(
             crypto.randomUUID(),

src/views/js/data/Bill.js

@@ -5,6 +5,14 @@ export default class Bill{
         this._amount = amount;
     }
 
+    get id(){
+        return this._id;
+    }
+
+    get name(){
+        return this._name;
+    }
+
     static create(name, amount){
         return new Bill(
             crypto.randomUUID(),

src/views/js/data/Income.js

@@ -5,6 +5,14 @@ export default class Income{
         this._amount = amount;
     }
 
+    get id(){
+        return this._id;
+    }
+
+    get name(){
+        return this._name;
+    }
+
     static create(name, amount){
         return new Income(
             crypto.randomUUID(),

src/views/js/index.js

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

src/views/js/pages/AddMenu.js

@@ -10,9 +10,10 @@ export default class AddMenu extends Page{
 
     render(){
         new Elem("button")
-            .text("New Account")
+            .text("New Transaction")
             .addClass("button")
-            .onclick(()=>{changePage("createAccount")})
+            .onclick(()=>{changePage("createTransaction")})
+            .focus()
             .appendTo(this.container);
 
         new Elem("button")
@@ -32,5 +33,11 @@ export default class AddMenu extends Page{
             .addClass("button")
             .onclick(()=>{changePage("createAllowance")})
             .appendTo(this.container);
+
+        new Elem("button")
+            .text("New Account")
+            .addClass("button")
+            .onclick(()=>{changePage("createAccount")})
+            .appendTo(this.container);
     }
 }

src/views/js/pages/CreateTransaction.js

@@ -0,0 +1,114 @@
+import Page from "./Page.js";
+import Elem from "../Elem.js";
+
+export default class CreateTransaction extends Page{
+    constructor(){
+        super("CreateTransaction");
+
+        this.render(
+            user.account.listIncome(),
+            user.account.listBills(),
+            user.account.listAllowances()
+        );
+    }
+
+    submit(event){
+        event.preventDefault();
+        console.log("submitting");
+    }
+
+    render(income, bills, allowances){
+        let select, incomeOpt, billsOpt, allowancesOpt;
+        new Elem("form")
+            .addClass("standardForm")
+            .onsubmit(this.submit.bind(this))
+            .append(new Elem("h1")
+                .text("Create Transaction")
+            )
+            .append(new Elem("label")
+                .text("Amount")
+                .append(new Elem("input")
+                    .type("number")
+                    .addClass("amount")
+                    .step("0.01")
+                    .placeholder("$0.00")
+                    .required()
+                    .focus()
+                )
+            )
+            .append(new Elem("select")
+                .addClass("type")
+                .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")
+                    .type("text")
+                    .addClass("tags")
+                    .placeholder("tag")
+                )
+            )
+            .append(new Elem("label")
+                .text("Location")
+                .append(new Elem("input")
+                    .type("text")
+                    .addClass("location")
+                    .placeholder("location")
+                )
+            )
+            .append(new Elem("label")
+                .text("Date")
+                .append(new Elem("input")
+                    .type("date")
+                    .addClass("date")
+                    .valueAsDate(new Date())
+                    .required()
+                )
+            )
+            .append(new Elem("label")
+                .text("Notes")
+                .append(new Elem("textarea")
+                    .addClass("notes")
+                    .rows(3)
+                )
+            )
+            .append(new Elem("button")
+                .text("Create")
+            )
+            .append(new Elem("button")
+                .text("Cancel")
+                .type("button")
+                .addClass("cancel")
+                .onclick(()=>{changePage("home")})
+            )
+            .appendTo(this.container);
+
+        for(let i = 0; i < allowances.length; i++){
+            allowancesOpt.append(new Elem("option").text(allowances[i].name).value(allowances[i].id));
+        }
+
+        for(let i = 0; i < bills.length; i++){
+            billsOpt.append(new Elem("option").text(bills[i].name).value(bills[i].id));
+        }
+
+        for(let i = 0; i < income.length; i++){
+            incomeOpt.append(new Elem("option").text(income[i].name).value(income[i].id));
+        }
+    }
+}