Create the base of the print page.

src/views/js/index.js

@@ -20,6 +20,7 @@ import ViewBills from "./pages/ViewBills.js";
 import EditBill from "./pages/EditBill.js";
 import ViewAllowances from "./pages/ViewAllowances.js";
 import EditAllowance from "./pages/EditAllowance.js";
+import Printable from "./pages/Printable.js";
 
 const pages = document.querySelector(".page");
 let currentPage;
@@ -48,6 +49,10 @@ window.changePage = (page, data)=>{
         case "editBill": currentPage = new EditBill(data); break;
         case "viewAllowances": currentPage = new ViewAllowances(data); break;
         case "editAllowance": currentPage = new EditAllowance(data); break;
+        case "print": 
+            currentPage = new Printable(data);
+            currentPage.mount();
+            break;
     }
     console.timeEnd("change page");
 }

src/views/js/pages/Printable.js

@@ -0,0 +1,26 @@
+import Page from "./Page.js";
+import Elem from "../Elem.js";
+import Format from "../Format.js";
+
+export default class Printable extends Page{
+    constructor({from, to, transactions}){
+        super("Printable", []);
+
+        this.render(from, to, transactions);
+    }
+
+    mount(){
+        const after = ()=>{
+            window.removeEventListener("afterprint", after);
+            changePage("viewTransactions");
+        }
+        window.addEventListener("afterprint", after, {once: true});
+        window.print();
+    }
+
+    render(from, to, transactions){
+        new Elem("h1")
+            .text(Format.dateFromTransaction(from))
+            .appendTo(this.container);
+    }
+}

src/views/js/pages/ViewTransactions.js

@@ -30,6 +30,20 @@ export default class ViewTransactions extends Page{
             .text(`${user.account.name} transactions`)
             .appendTo(this.container);
 
+        let from = new Date();
+        from.setDate(1);
+        const to = new Date();
+        const printData = {
+            from: from,
+            to: to,
+            transactions: user.account.transactions
+        };
+        new Elem("button")
+            .text("Print")
+            .addClass("button")
+            .onclick(()=>{changePage("print", printData)})
+            .appendTo(this.container);
+
         this.transactions = new Elem("div")
             .addClass("transactions")
             .appendTo(this.container);