Add sourcemap in development.

src/routes/other.rs

@@ -18,12 +18,6 @@ async fn landing_page() -> impl Responder {
         .body(html.clone())
 }
 
-#[get("/dev")]
-async fn landing_page_dev() -> Result<NamedFile, Error> {
-    let path: PathBuf = PathBuf::from("src/views/build.html");
-    Ok(NamedFile::open(path)?)
-}
-
 #[get("/logo.svg")]
 async fn svg_logo() -> Result<NamedFile, Error> {
     let path: PathBuf = PathBuf::from("src/views/logo.svg");
@@ -35,3 +29,9 @@ async fn png_logo() -> Result<NamedFile, Error> {
     let path: PathBuf = PathBuf::from("src/views/logo.png");
     Ok(NamedFile::open(path)?)
 }
+
+#[get("/dev")]
+async fn landing_page_dev() -> Result<NamedFile, Error> {
+    let path: PathBuf = PathBuf::from("src/views/build.html");
+    Ok(NamedFile::open(path)?)
+}

src/views/createHtml.js

@@ -3,14 +3,15 @@ import htmlMinifier from "html-minifier-terser";
 import fsSync from "fs";
 
 const fs = fsSync.promises;
+const isProduction = process.env.NODE_ENV === "production";
 
 const esbuildProm = esbuild.build({
     entryPoints: [`${import.meta.dirname}/js/index.js`, `${import.meta.dirname}/css/index.css`],
     bundle: true,
     minify: true,
-    sourcemap: process.env.NODE_ENV === "production",
+    sourcemap: isProduction ? false : "inline",
     write: false,
-    outdir: `${import.meta.dirname}/build/`
+    outdir: `${import.meta.dirname}`
 });
 const htmlProm = fs.readFile(`${import.meta.dirname}/index.html`, "utf-8");
 const [build, html] = await Promise.all([esbuildProm, htmlProm]);

src/views/css/index.css

@@ -1,129 +1,2 @@
-@import "./home.css";
-@import "./addMenu.css";
-
-:root {
-    --primary:     #6E4B3A;
-    --secondary:   #3A5A85;
-    --accent:      #D4AF37;
-    --background:  #F9F6F0;
-    --surface:     #DCD6CF;
-    --textMain:   #2A2A2A;
-    --textMuted:  #6D6D6D;
-    --error:       #B7410E;
-    --success:     #708238;
-}
-
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body{
-    height: 100vh;
-    width: 100vw;
-    background: var(--background);
-    color: var(--textMain);
-}
-
-.logo{
-    position: absolute;
-    top: 35px;
-    left: 35px;
-    z-index: 100;
-}
-
-.page{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    padding: 10px;
-}
-
-.standardForm{
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    max-width: 550px;
-    background: var(--surface);
-    padding: 10px;
-}
-
-.standardForm h1{
-    text-align: center;
-}
-
-.standardForm label{
-    display: flex;
-    flex-direction: column;
-    font-size: 22px;
-    margin: 5px 0;
-}
-
-.standardForm input{
-    font-size: 22px;
-    padding: 5px 0 5px 10px;
-}
-
-.standardForm button, .button{
-    font-size: 22px;
-    margin: 10px 0;
-    background: var(--primary);
-    border: none;
-    color: var(--accent);
-    padding: 10px;
-    font-weight: bold;
-    cursor: pointer;
-}
-
-.standardForm button.cancel, .button.cancel{
-    background: var(--error);
-    color: white;
-}
-
-.button.circle{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    height: 50px;
-    width: 50px;
-    font-size: 35px;
-}
-
-.link, .standardForm .link{
-    background: none;
-    border: none;
-    font-size: 18px;
-    color: var(--textMuted);
-    cursor: pointer;
-    text-decoration: underline;
-    margin: 0;
-}
-
-.notifier{
-    position: absolute;
-    bottom: 35px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 100%;
-    max-width: 750px;
-    padding: 15px 35px;
-    font-size: 18px;
-    font-weight: bold;
-    text-align: center;
-    z-index: 100;
-    color: white;
-}
-
-.notifier.error{
-    background: var(--error);
-}
-
-.notifier.success{
-    background: var(--success);
-}
+.buttonBox{position:absolute;top:15px;right:15px}#AddMenu{background:var(--surface);border:5px solid var(--secondary)}#AddMenu .button{width:100%;max-width:750px;padding:15px}:root{--primary: #6E4B3A;--secondary: #3A5A85;--accent: #D4AF37;--background: #F9F6F0;--surface: #DCD6CF;--textMain: #2A2A2A;--textMuted: #6D6D6D;--error: #B7410E;--success: #708238}*{margin:0;padding:0;box-sizing:border-box}body{height:100vh;width:100vw;background:var(--background);color:var(--textMain)}.logo{position:absolute;top:35px;left:35px;z-index:100}.page{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;position:relative;padding:10px}.standardForm{display:flex;flex-direction:column;width:100%;max-width:550px;background:var(--surface);padding:10px}.standardForm h1{text-align:center}.standardForm label{display:flex;flex-direction:column;font-size:22px;margin:5px 0}.standardForm input{font-size:22px;padding:5px 0 5px 10px}.standardForm button,.button{font-size:22px;margin:10px 0;background:var(--primary);border:none;color:var(--accent);padding:10px;font-weight:700;cursor:pointer}.standardForm button.cancel,.button.cancel{background:var(--error);color:#fff}.button.circle{display:flex;justify-content:center;align-items:center;border-radius:50%;height:50px;width:50px;font-size:35px}.link,.standardForm .link{background:none;border:none;font-size:18px;color:var(--textMuted);cursor:pointer;text-decoration:underline;margin:0}.notifier{position:absolute;bottom:35px;left:50%;transform:translate(-50%);width:100%;max-width:750px;padding:15px 35px;font-size:18px;font-weight:700;text-align:center;z-index:100;color:#fff}.notifier.error{background:var(--error)}.notifier.success{background:var(--success)}
+/*# sourceMappingURL=index.css.map */

src/views/js/data/Account.js

@@ -1,8 +1,10 @@
 import EncryptionHandler from "../EncryptionHandler.js";
+import Notifier from "../Notifier.js";
 
 export default class Account{
-    constructor(id, data){
+    constructor(id, iv, data){
         this._id = id;
+        this._iv = iv;
         this._name = data.name;
         this._balance = data.balance;
         this._income = data.income;
@@ -10,4 +12,47 @@ export default class Account{
         this._allowances = data.allowances;
         this._transactions = [];
     }
+
+    async addIncome(name, amount){
+        this._income.push({
+            id: crypto.randomUUID(),
+            name: name,
+            amount: this.toCents(amount)
+        });
+
+        await this.save();
+    }
+
+    toCents(num){
+        if(typeof num === "string") num = Number(num);
+
+        return Math.round(num * 100);
+    }
+
+    async save(){
+        const data = JSON.stringify({
+            name: this._name,
+            balance: this._balance,
+            income: this._income,
+            bills: this._bills,
+            allowances: this._allowances
+        });
+        const encryptedData = await encryptionHandler.encrypt(data, this._iv);
+
+        let response
+        try{
+            response = await fetch("/api/account", {
+                method: "PUT",
+                headers: {"Content-Type": "application/json"},
+                body: JSON.stringify({
+                    id: this._id,
+                    data: encryptedData
+                })
+            });
+        }catch(e){
+            new Notifier("error", "Something went wrong, try refreshing the page");
+        }
+
+        if(response.error) new Notifier("error", response.error.message);
+    }
 }

src/views/js/data/User.js

@@ -10,6 +10,10 @@ export default class User{
         this._currentAccount = 0;
     }
 
+    get account(){
+        return this._accounts[this._currentAccount];
+    }
+
     static async create(name, email, password){
         const passwordSalt = EncryptionHandler.generateSalt();
 
@@ -49,7 +53,7 @@ export default class User{
     async decryptAndAddAccount(account){
         const data = await encryptionHandler.decrypt(account.data, account.iv);
 
-        const newAccount = new Account(account.id, data);
+        const newAccount = new Account(account.id, account.iv, data);
         this._accounts.push(newAccount);
     }
 }

src/views/js/pages/CreateAccount.js

@@ -35,12 +35,13 @@ export default class CreateAccount extends Page{
             .then((response)=>{
                 if(response.error) throw response;
 
-                const account = new Account(response.id, data);
+                const account = new Account(response.id, iv, data);
                 user.addAccount(account);
                 user.changeAccount(account);
                 changePage("home");
             })
             .catch((err)=>{
+                console.log(err);
                 if(err.error){
                     new Notifier("error", err.error.message);
                 }else{

src/views/js/pages/CreateIncome.js

@@ -8,15 +8,20 @@ export default class CreateIncome extends Page{
         this.render();
     }
 
-    submit(event){
+    async submit(event){
         event.preventDefault();
-        console.log("submitting");
+
+        await user.account.addIncome(
+            this.container.querySelector(".name").value,
+            this.container.querySelector(".amount").value
+        );
+        changePage("home");
     }
 
     render(){
         new Elem("form")
             .addClass("standardForm")
-            .onsubmit(this.submit.bind())
+            .onsubmit(this.submit.bind(this))
             .append(new Elem("h1")
                 .text("Create Income")
             )