Finished up with toke command list in admin panel.

www/js/adminPanel.js

@@ -390,7 +390,89 @@ class adminUserBanList{
     }
 }
 
+class adminTokeCommandList{
+    constructor(){
+        this.tokeCommandList = document.querySelector('div.toke-command-list');
+        this.newTokeCommandPrompt = document.querySelector('#new-toke-command-input');
+        this.newTokeCommandButton = document.querySelector('#new-toke-command-button');
+
+        //Setup input
+        this.setupInput();
+
+        //Pull the toke list on load
+        this.getTokeList();
+    }
+
+    setupInput(){
+        this.newTokeCommandButton.addEventListener('click', this.addToke.bind(this));
+    }
+
+    async addToke(event){
+        //Send out the new toke command and get the new list
+        const tokeList = await adminUtil.addTokeCommand(this.newTokeCommandPrompt.value);
+        //clear the prompt
+        this.newTokeCommandPrompt.value = "";
+        //render the returned list
+        this.renderTokeList(tokeList);
+    }
+
+    async getTokeList(){
+        const tokeList = await adminUtil.getTokeCommands();
+        this.renderTokeList(tokeList);
+    }
+
+    clearTokeList(){
+        this.tokeCommandList.innerHTML = "";
+    }
+
+    async deleteToke(event){
+        const name = event.target.id.replace("toke-command-delete-","");
+
+        const tokeList = await adminUtil.deleteTokeCommand(name);
+
+        this.renderTokeList(tokeList);
+    }
+
+    renderTokeList(tokeList){
+        if(tokeList != null){
+            //Clear our the toke list
+            this.clearTokeList();
+
+            //For each toke in the received list
+            tokeList.forEach((toke)=>{
+                //generate a toke command span, and append it to the toke list div
+                this.tokeCommandList.appendChild(this.generateTokeSpan(toke));
+            });
+        }
+    }
+
+    generateTokeSpan(toke){
+        //Create toke command span
+        const tokeSpan = document.createElement('span');
+        tokeSpan.classList.add('toke-command-list');
+
+        //Create toke command label
+        const tokeLabel = document.createElement('p');
+        tokeLabel.innerHTML = `!${toke}`;
+        tokeLabel.classList.add('toke-command-list');
+
+        //Create toke command delete icon
+        const tokeDelete = document.createElement('i');
+        tokeDelete.classList.add('toke-command-list', 'bi-trash-fill', 'toke-command-delete');
+        tokeDelete.id = `toke-command-delete-${toke}`;
+        tokeDelete.addEventListener('click', this.deleteToke.bind(this));
+
+        //append span contents to tokeSpan
+        tokeSpan.appendChild(tokeLabel);
+        tokeSpan.appendChild(tokeDelete);
+
+        //return the toke span
+        return tokeSpan
+    }
+}
+
 const adminUtil = new canopyAdminUtils();
 const userList = new adminUserList();
 const permissionList = new adminPermissionList();
-const userBanList = new adminUserBanList();
+const userBanList = new adminUserBanList();
+const tokeCommandList = new adminTokeCommandList();