Finishing porting admin panel improvements to channel settings

src/views/partial/channelSettings/banList.ejs

@@ -19,8 +19,9 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
         <input placeholder="Add Username..." id="new-ban-input" class="control-prompt">
         <button id="new-ban-button" class="danger-button">Ban</button>
     </div>
-    <div class="dynamic-container">
+    <div class="dynamic-container resizable table-container">
         <table id="admin-ban-list-table" class="admin-list-table">
+            <thead>
                 <tr class="admin-list-entry-title-row">
                     <td class="admin-list-entry-item admin-list-entry-img-title"><h3>Img</h3></td>
                     <td id="admin-user-list-entry-id-title" class="admin-list-entry-item not-first-col"><h3>ID</h3></td>
@@ -30,6 +31,10 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
                     <td id="channel-user-list-entry-expiration-date-title" class="admin-list-entry-item not-first-col"><h3>Expires</h3></td>
                     <td id="channel-user-list-entry-actions-title" class="admin-list-entry-item not-first-col">&nbsp;</td>
                 </tr>
+            </thead>
+            <tbody>
+
+            </tbody>
             <%# This is getting filled via AJAX since we need to refresh it when new users are added anywho. %>
         </table>
     </div>

src/views/partial/channelSettings/emoteList.ejs

@@ -23,6 +23,6 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
     <div class="control-prompt">
         <input placeholder="Emote Link..." id="new-emote-link-input" class="control-prompt">
     </div>
-    <div class="dynamic-container" id="emote-list">
+    <div class="dynamic-container resizable" id="emote-list">
     </div>
 </div>

src/views/partial/channelSettings/tokeCommandList.ejs

@@ -19,6 +19,6 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
         !<input placeholder="Add Command..." id="new-toke-command-input" class="control-prompt">
         <button id="new-toke-command-button" class="positive-button">Add</button>
     </div>
-    <div class="dynamic-container toke-command-list">
+    <div class="dynamic-container toke-command-list resizable">
     </div>
 </div>

src/views/partial/channelSettings/userList.ejs

@@ -24,14 +24,18 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
             <% }); %>
         </select>
     </div>
-    <div class="dynamic-container">
+    <div class="dynamic-container resizable table-container">
-        <table class="admin-list-table">
+        <table class="admin-list-table" id="admin-rank-list-table">
+            <thead>
                 <tr class="admin-list-entry-title-row">
                     <td class="admin-list-entry-item admin-list-entry-img-title"><h3>Img</h3></td>
                     <td id="admin-user-list-entry-id-title" class="admin-list-entry-item not-first-col"><h3>ID</h3></td>
                     <td class="admin-list-entry-item not-first-col"><h3>Name</h3></td>
                     <td id="channel-user-list-entry-rank-title" class="admin-list-entry-item not-first-col"><h3>Rank</h3></td>
                 </tr>
+            </thead>
+            <tbody>
+            </tbody>
             <%# This is getting filled via AJAX since we need to refresh it when new users are added anywho. %>
         </table>
     </div>

www/js/channelSettings.js

@@ -207,7 +207,7 @@ class chanInfo{
 class rankList{
     constructor(channel){
         this.channel = channel
-        this.table = document.querySelector(".admin-list-table");
+        this.tbody = document.querySelector("#admin-rank-list-table tbody");
         this.userPrompt = document.querySelector("#new-rank-input");
         this.rankSelect = document.querySelector("#new-rank-select");
     
@@ -262,7 +262,7 @@ class rankList{
         const rankEnum = await utils.ajax.getRankEnum();
 
         //clear the table
-        this.clearTable();
+        this.tbody.innerHTML = "";
 
         //For each user in the list
         Object.entries(data).forEach((userAr) => {
@@ -296,7 +296,7 @@ class rankList{
             }
 
             //Generate row and append to table
-            this.table.appendChild(utils.ux.newTableRow([
+            this.tbody.appendChild(utils.ux.newTableRow([
                 imgNode,
                 user.id,
                 user.user,
@@ -304,23 +304,12 @@ class rankList{
             ]));
         });
     }
-
-    clearTable(){
-        //get all non-title table rows
-        const rows = this.table.querySelectorAll("tr.gen-row");
-
-        //for each row
-        rows.forEach((row) => {
-            //The Lord Yeeteth, and The Lord Yoinketh away...
-            row.remove();
-        });
-    }
 }
 
 class banList{
     constructor(channel){
         this.channel = channel;
-        this.table = document.querySelector("#admin-ban-list-table");
+        this.tbody = document.querySelector("#admin-ban-list-table tbody");
         this.banPrompt = document.querySelector("#new-ban-input");
         this.banButton = document.querySelector("#new-ban-button");
 
@@ -337,13 +326,6 @@ class banList{
         this.updateList(data);
     }
 
-    clearList(){
-        const oldRows = this.table.querySelectorAll('tr.gen-row');
-        oldRows.forEach((row) => {
-            row.remove();
-        });
-    }
-
     async ban(event){
         new chanBanUserPopup(this.channel, this.banPrompt.value, this.updateList.bind(this));
     }
@@ -360,7 +342,8 @@ class banList{
 
     updateList(bans){
         //for each ban listed
-        this.clearList();
+        this.tbody.innerHTML = "";
+
         bans.forEach((ban)=>{
             //Create IMG node
             const imgNode = document.createElement('img');
@@ -382,7 +365,7 @@ class banList{
             const expirationString = ban.expirationDays < 0 ? "Never" :  `${new Date(ban.expirationDate).toDateString()}<br>(${ban.daysUntilExpiration} day(s) left)`;
 
             //Generate row and append to table
-            this.table.appendChild(utils.ux.newTableRow([
+            this.tbody.appendChild(utils.ux.newTableRow([
                 imgNode,
                 ban.user.id,
                 ban.user.user,