Add confirm transaction deletion modal.

src/views/css/transactionDetails.css

@@ -30,3 +30,24 @@
 #TransactionDetails .red{
     color: var(--error);
 }
+
+#TransactionDetails .deleteModal{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    position: absolute;
+    top: calc(50% - 150px);
+    right: calc(50% - 150px);
+    background: var(--surface);
+    box-shadow: 0 0 10px var(--secondary);
+    border: 1px solid var(--secondary);
+    height: 300px;
+    width: 300px;
+    max-width: 500px;
+    padding: 15px;
+}
+
+#TransactionDetails .deleteModal p{
+    font-size: 22px;
+    text-align: center;
+}

src/views/js/data/Transaction.js

@@ -116,6 +116,10 @@ export default class Transaction{
         };
     }
 
+    delete(){
+       console.log("deleting");
+    }
+
     async save(isNew = false){
         const data = await encryptionHandler.encrypt(this.serialize(), this._iv);
 

src/views/js/pages/TransactionDetails.js

@@ -30,6 +30,30 @@ export default class TransactionDetails extends Page{
         }
     }
 
+    closeModal(){
+        const modal = this.container.querySelector(".deleteModal");
+        modal.parentElement.removeChild(modal);
+    }
+
+    confirmDelete(transaction){
+        new Elem("div")
+            .addClass("deleteModal")
+            .append(new Elem("p")
+                .text("Deleting is permanent and cannot be undone, are you sure you want to delete this transaction?")
+            )
+            .append(new Elem("button")
+                .text("Delete")
+                .addClass("button")
+                .onclick(()=>{console.log("deleting")})
+            )
+            .append(new Elem("button")
+                .text("Cancel")
+                .addClass("button")
+                .onclick(this.closeModal.bind(this))
+            )
+            .appendTo(this.container);
+    }
+
     render(transaction){
         new Elem("div")
             .addClass("dataContainer")
@@ -92,6 +116,7 @@ export default class TransactionDetails extends Page{
             .append(new Elem("button")
                 .text("Delete")
                 .addClass("button")
+                .onclick(()=>{this.confirmDelete(transaction)})
             )
             .appendTo(this.container);
     }