From 169b8639650a5c7669a1768250df205f2afd72c0 Mon Sep 17 00:00:00 2001
From: rainbow napkin <ourforest@tuta.io>
Date: Sun, 15 Dec 2024 11:05:14 -0500
Subject: [PATCH] Added per-channel toke management pane in channel settings
 page.

---
 src/views/channelSettings.ejs                 |  1 +
 .../channelSettings/tokeCommandList.ejs       | 24 ++++++
 www/js/channelSettings.js                     | 83 +++++++++++++++++++
 3 files changed, 108 insertions(+)
 create mode 100644 src/views/partial/channelSettings/tokeCommandList.ejs

diff --git a/src/views/channelSettings.ejs b/src/views/channelSettings.ejs
index 9e016e4..dced55c 100644
--- a/src/views/channelSettings.ejs
+++ b/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>
diff --git a/src/views/partial/channelSettings/tokeCommandList.ejs b/src/views/partial/channelSettings/tokeCommandList.ejs
new file mode 100644
index 0000000..4b8f553
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/www/js/channelSettings.js b/www/js/channelSettings.js
index ac687fe..eac6115 100644
--- a/www/js/channelSettings.js
+++ b/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;