Finished up with emote management pane in adminPanel page.

www/js/adminPanel.js

@@ -519,13 +519,53 @@ class adminTokeCommandList{
 
 class adminEmoteList{
     constructor(){
-        this.linkPrompt = document.querySelector('new-emote-link-input');
-        this.namePrompt = document.querySelector('new-emote-link-input');
+        this.linkPrompt = document.querySelector('#new-emote-link-input');
+        this.namePrompt = document.querySelector('#new-emote-name-input');
+        this.addButton = document.querySelector('#new-emote-button');
         this.emoteList = document.querySelector('#emote-list');
 
+        //Setup input
+        this.setupInput();
+
+        //Pull and render emote list
         this.updateList();
     }
 
+    setupInput(){
+       this.addButton.addEventListener('click', this.addEmote.bind(this));
+    }
+
+    async deleteEmote(event){
+        //Strip name from element id
+        const name = event.target.id.replace('emote-list-delete-','');
+
+        console.log(name);
+
+        //Delete emote and pull list
+        const list = await adminUtil.deleteEmote(name);
+
+        //If we received a list
+        if(list != null){
+            //Pass updated liste to renderEmoteList function instead of pulling it twice
+            this.renderEmoteList(list);
+        }
+    }
+
+    async addEmote(event){
+        //Add emote to list and ingest returned updates list
+        const list = await adminUtil.addEmote(this.namePrompt.value, this.linkPrompt.value);
+
+        //If we received a list
+        if(list != null){
+            //Pass updated liste to renderEmoteList function instead of pulling it twice
+            this.renderEmoteList(list);
+
+            //Clear out the prompts
+            this.namePrompt.value = '';
+            this.linkPrompt.value = '';
+        }
+    }
+
     async updateList(){
         const list = await adminUtil.getEmotes();
         this.renderEmoteList(list);
@@ -537,30 +577,61 @@ class adminEmoteList{
 
         //For each emote in the list
         list.forEach((emote) => {
-            const emoteSpan = document.createElement('span');
-            emoteSpan.classList.add('emote-list-emote');
+            //Create span to hold emote
+            const emoteDiv = document.createElement('div');
+            emoteDiv.classList.add('emote-list-emote');
 
             //If the emote is an image
             if(emote.type == 'image'){
                 //Create image node
                 var emoteMedia = document.createElement('img');
-                //add link as source
-                emoteMedia.src = emote.link;
             //if emote is a video
             }else if(emote.type == 'video'){
                 //create video node
                 var emoteMedia = document.createElement('video');
-                //Add video link
-                emoteMeida.src = emote.link;
                 //Set video properties
                 emoteMedia.autoplay = true;
                 emoteMedia.muted = true;
                 emoteMedia.controls = false;
+                emoteMedia.loop = true;
             }
 
-            emoteSpan.appendChild(emoteMedia);
+            //set media link as source
+            emoteMedia.src = emote.link;
+            //Set media class
+            emoteMedia.classList.add('emote-list-media');
 
-            this.emoteList.appendChild(emoteSpan);
+            //Create title span
+            const titleSpan = document.createElement('span');
+            titleSpan.classList.add('emote-list-title');
+
+            //Create paragraph tag
+            const emoteTitle = document.createElement('p');
+            //Set title class
+            emoteTitle.classList.add('emote-list-title');
+            //Set emote title
+            emoteTitle.innerHTML = `[${emote.name}]`;
+            
+            //Create delete icon
+            const deleteIcon = document.createElement('i');
+            //Set delete icon id and class
+            deleteIcon.classList.add('bi-trash-fill', 'emote-list-delete');
+            deleteIcon.id = `emote-list-delete-${emote.name}`;
+            //Add delete icon event listener
+            deleteIcon.addEventListener('click',this.deleteEmote.bind(this));
+
+
+            //Add the emote media to the emote span
+            emoteDiv.appendChild(emoteMedia);
+            //Add title paragraph node
+            titleSpan.appendChild(emoteTitle);
+            //Add trash icon node
+            titleSpan.appendChild(deleteIcon);
+            //Add title span
+            emoteDiv.appendChild(titleSpan);
+
+            //Append the mote span to the emote list
+            this.emoteList.appendChild(emoteDiv);
         });
     }
 }