Worked ban frontend and api.

www/js/utils.js

@@ -25,13 +25,68 @@ class canopyUXUtils{
     constructor(){
     } 
 
-    async displayResponseError(body){
+    displayResponseError(body){
         const errors = body.errors;
         errors.forEach((err)=>{
             window.alert(`ERROR: ${err.msg} \nTYPE: ${err.type} \nDATE: ${err.date}`);
         });
     }
 
+    static popup = class{
+        constructor(content, ajaxPopup = false, cb){
+            //Define non-popup node values
+            this.content = content;
+            this.ajaxPopup = ajaxPopup;
+            this.cb = cb;
+            //define popup nodes
+            this.createPopup();
+
+            //fill popup nodes
+            this.fillPopupContent();
+        }
+
+        createPopup(){
+            this.popupBacker = document.createElement('div');
+            this.popupBacker.classList.add('popup-backer');
+
+            this.popupDiv = document.createElement('div');
+            this.popupDiv.classList.add('popup-div');
+
+            this.closeIcon = document.createElement('i');
+            this.closeIcon.classList.add('bi-x','popup-close-icon');
+            this.closeIcon.addEventListener("click", this.closePopup.bind(this));
+
+            this.contentDiv = document.createElement('div');
+            this.contentDiv.classList.add('popup-content-div');
+
+            this.popupDiv.appendChild(this.closeIcon);
+            this.popupDiv.appendChild(this.contentDiv);
+        }
+
+        async fillPopupContent(){
+            if(this.ajaxPopup){
+                this.contentDiv.innerHTML = await utils.ajax.getPopup(this.content);
+            }else{
+                this.contentDiv.innerHTML = this.content;
+            }
+
+            //display popup nodes
+            this.displayPopup();
+
+            //Callbacks are kinda out of vogue, but there really isn't a good way to handle asynchronously constructed objects/classes
+            this.cb();
+        }
+
+        displayPopup(){
+            document.body.prepend(this.popupDiv);
+            document.body.prepend(this.popupBacker);
+        }
+
+        closePopup(){
+            this.popupDiv.remove();
+            this.popupBacker.remove();
+        }
+    }
 
     static clickDragger = class{
         constructor(handle, element, leftHandle = true){
@@ -309,6 +364,18 @@ class canopyAjaxUtils{
             utils.ux.displayResponseError(await response.json());
         }
     }
+
+    async getPopup(popup){
+        var response = await fetch(`/popup/${popup}`,{
+            method: "GET"
+        });
+
+        if(response.status == 200){
+            return (await response.text())
+        }else{
+            utils.ux.displayResponseError(await response.json());
+        }
+    }
 }
 
 const utils = new canopyUtils()