Added per-channel toke management pane in channel settings page.

src/views/channelSettings.ejs

@@ -29,6 +29,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
             <%- include('partial/channelSettings/banList.ejs'); %>
             <%- include('partial/channelSettings/settings.ejs'); %>
             <%- include('partial/channelSettings/permList.ejs'); %>
+            <%- include('partial/channelSettings/tokeCommandList.ejs'); %>
         </div>
         <button href="javascript:" class="danger-button" id="chan-delete">Delete Channel</button>
         <footer>

src/views/partial/channelSettings/tokeCommandList.ejs

@@ -0,0 +1,24 @@
+<!--Canopy - The next generation of stoner streaming software
+Copyright (C) 2024  Rainbownapkin and the TTN Community
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
+<div id="toke-command-list-div" class="admin-list-div">
+    <h3>Toke Command List:</h3>
+    <div class="control-prompt">
+        <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>
+</div>

www/js/channelSettings.js

@@ -23,6 +23,7 @@ class channelSettingsPage{
         this.banList = new banList(this.channel);
         this.permList = new permList(this.channel);
         this.prefrenceList = new prefrenceList(this.channel);
+        this.tokeCommandList = new tokeCommandList(this.channel);
         this.deleteBtn = new deleteBtn(this.channel);
     }
 }
@@ -330,6 +331,88 @@ class permList{
     }
 }
 
+class tokeCommandList{
+    constructor(channel){
+        this.channel = channel;
+        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 utils.ajax.addChanToke(this.channel, this.newTokeCommandPrompt.value);
+        //clear the prompt
+        this.newTokeCommandPrompt.value = "";
+        //render the returned list
+        this.renderTokeList(tokeList);
+    }
+
+    async getTokeList(){
+        const tokeList = await utils.ajax.getChanTokes(this.channel);
+        this.renderTokeList(tokeList);
+    }
+
+    clearTokeList(){
+        this.tokeCommandList.innerHTML = "";
+    }
+
+    async deleteToke(event){
+        const name = event.target.id.replace("toke-command-delete-","");
+
+        const tokeList = await utils.ajax.deleteChanToke(this.channel, 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
+    }
+}
+
 class deleteBtn{
     constructor(channel){
         this.channel = channel;