rainbownapkin/canopy
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Started work on porting improvements from admin panel to channel settings

Browse source
This commit is contained in:
rainbow napkin 2026-10-28 22:26:58 -04:00
parent 07018196bb
commit b83ad40490
12 changed files with 104 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/views/channelSettings.ejs
View file

@ -24,17 +24,23 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. %>
</head>
<body>
<%- include('partial/navbar', {user}); %>
<h1 class="panel-title"><%= unescape(channel.name) %> - Channel Settings</h1>
<div class="admin-panel-container-div">
<%- include('partial/channelSettings/info.ejs', {unescape, channel}); %>
<%- include('partial/channelSettings/userList.ejs'); %>
<%- include('partial/channelSettings/banList.ejs'); %>
<%- include('partial/channelSettings/settings.ejs', {unescape, channel}); %>
<%- include('partial/channelSettings/permList.ejs', {channel}); %>
<%- include('partial/channelSettings/tokeCommandList.ejs'); %>
<%- include('partial/channelSettings/emoteList.ejs'); %>
<div id="admin-panel-list-container">
<div id="admin-nav-list">
</div>
<div class="admin-panel-container-div">
<h1 class="panel-title"><%= unescape(channel.name) %> - Channel Settings</h1>
<div class="admin-panel-container-div">
<%- include('partial/channelSettings/info.ejs', {unescape, channel}); %>
<%- include('partial/channelSettings/userList.ejs'); %>
<%- include('partial/channelSettings/banList.ejs'); %>
<%- include('partial/channelSettings/settings.ejs', {unescape, channel}); %>
<%- include('partial/channelSettings/permList.ejs', {channel}); %>
<%- include('partial/channelSettings/tokeCommandList.ejs'); %>
<%- include('partial/channelSettings/emoteList.ejs'); %>
</div>
</div>
</div>
<button href="javascript:" class="danger-button" id="chan-delete">Delete Channel</button>
<footer>
<%- include('partial/scripts', {user}); %>
<script src="/js/popup/banPopup.js"></script>

2
src/views/partial/channelSettings/banList.ejs
View file

@ -13,7 +13,7 @@ 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 class="admin-list-div">
<div class="admin-list-div" id="chan-ban-list">
<h3 id="channel-ban-title">Channel Bans:</h3>
<div class="control-prompt">
<input placeholder="Add Username..." id="new-ban-input" class="control-prompt">

2
src/views/partial/channelSettings/emoteList.ejs
View file

@ -13,7 +13,7 @@ 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="emote-list-div" class="admin-list-div">
<div id="chan-emote-list" class="admin-list-div">
<h3>Emote List:</h3>
<div class="control-prompt">
<%# Probably not the cleanest way to do this but fuggit %>

2
src/views/partial/channelSettings/info.ejs
View file

@ -13,7 +13,7 @@ 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 class="admin-list-div">
<div class="admin-list-div" id="chan-info-list">
<h3 id="channel-info-title">Channel Info:</h3>
<div class="dynamic-container" id="channel-info-div">
<span class="channel-info-span" id="channel-info-thumbnail-span">

2
src/views/partial/channelSettings/permList.ejs
View file

@ -13,7 +13,7 @@ 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 class="admin-list-div">
<div class="admin-list-div" id="chan-perm-list">
<h3> Permissions:</h3>
<div class="dynamic-container">
<form action="javascript:" class="admin-list-field">

2
src/views/partial/channelSettings/settings.ejs
View file

@ -13,7 +13,7 @@ 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 class="admin-list-div">
<div class="admin-list-div" id="chan-settings-list">
<h3>Channel Preferences:</h3>
<div class="dynamic-container">
<form action="javascript:" class="admin-list-field">

2
src/views/partial/channelSettings/tokeCommandList.ejs
View file

@ -13,7 +13,7 @@ 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">
<div id="chan-toke-list" 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">

2
src/views/partial/channelSettings/userList.ejs
View file

@ -13,7 +13,7 @@ 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 class="admin-list-div">
<div class="admin-list-div" id="chan-user-list">
<h3 id="channel-rank-title">Channel Ranks:</h3>
<sup id="channel-rank-sup">Users set to default channel rank 'user' will NOT be listed below.</sup>
<div class="control-prompt">

2
www/css/theme/movie-night.css
View file

@ -284,7 +284,7 @@ a.admin-list-entry-item{
border-bottom: 1px var(--accent1) solid;
}
#admin-nav-list button:not(.positive-button, :hover){
#admin-nav-list button:not(.positive-button, :hover, .danger-button){
background-color: var(--bg1);
color: var(--accent1);
}

2
www/css/theme/the-network-classic.css
View file

@ -304,7 +304,7 @@ a.admin-list-entry-item{
border-bottom: 1px var(--accent1) solid;
}
#admin-nav-list button:not(.positive-button, :hover){
#admin-nav-list button:not(.positive-button, :hover, .danger-button){
background-image: var(--bg1-gradient);
}

94
www/js/channelSettings.js
View file

@ -27,7 +27,83 @@ class channelSettingsPage{
this.livestreamPreferences = new livestreamPreferences(this.channel);
this.tokeCommandList = new tokeCommandList(this.channel);
this.emoteList = new emoteList(this.channel);
this.deleteBtn = new deleteBtn(this.channel);
//Setup nav buttons
this.navButtons = new chanAdminNavButtons(this.channel);
}
}
class chanAdminNavButtons{
constructor(channel){
//Take down channel
this.channel = channel;
//Grab nav list
this.navList = document.querySelector("#admin-nav-list");
//Create empty map to do a holdem buttons
this.buttons = new Map();
//Build out options map
this.options = new Map([
["Channel Info", document.querySelector("#chan-info-list")],
["Ranked Users", document.querySelector("#chan-user-list")],
["Bans", document.querySelector("#chan-ban-list")],
["Preferences", document.querySelector("#chan-settings-list")],
["Permissions", document.querySelector("#chan-perm-list")],
["Toke Commands", document.querySelector("#chan-toke-list")],
["Emotes", document.querySelector("#chan-emote-list")],
["Delete Channel", null]
]);
//Render out buttons
this.renderButtons();
//Select the first option in the options map
this.displayOption(Array.from(this.options.keys())[0]);
}
renderButtons(){
//For erry list in the admin panel
for(const option of this.options.keys()){
//Create a button for it
const button = document.createElement('button');
button.innerText = option;
//If this aint the Delete Channel button
if(option != "Delete Channel"){
//Attatch an event listener to handle users clickin' der button
button.addEventListener('click',()=>{this.displayOption(option)});
}else{
//Attatch an event listener to blaire the fuckin' defcon five nukem alarm
button.addEventListener('click', () => {new deleteChannelPopup(this.channel)});
button.classList.add('danger-button');
}
//Drop button in the buttons map
this.buttons.set(option, button);
//Add that shit
this.navList.appendChild(button);
}
}
displayOption(selectedOption){
//For every option
for(const option of this.options.keys()){
//If this is the Delete Channel button
if(option == "Delete Channel"){
//ignorem
break;
}
//If we're on the selected option
if(option == selectedOption){
this.options.get(option).style.display = 'flex';
this.buttons.get(option).classList.add('positive-button');
}else{
this.options.get(option).style.display = 'none';
this.buttons.get(option).classList.remove('positive-button');
}
}
}
}
@ -659,21 +735,7 @@ class emoteList{
}
}
class deleteBtn{
constructor(channel){
this.channel = channel;
this.delete = document.querySelector("#chan-delete");
this.setupInput();
}
setupInput(){
this.delete.addEventListener('click', () => {new deleteAccountPopup(this.channel)});
}
}
class deleteAccountPopup{
class deleteChannelPopup{
constructor(channel){
this.channel = channel;
this.popup = new canopyUXUtils.popup("nukeChannel", true, this.asyncConstructor.bind(this));

2
www/popup/nukeChannel.html
View file

@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. -->
<link rel="stylesheet" type="text/css" href="/css/popup/delete.css">
<h3 id="delete-channel-popup-title" class="popup-title">Delete Channel</h3>
<div>
<p id="delete-channel-popup-content">WARNING: You are about to nuke channel '[CHANNEL]' off of the face of the fucking planet.<br>
<p id="delete-channel-popup-content">WARNING: You are about to nuke the channel '[CHANNEL]' off of the face of the fucking planet.<br>
Enter '[CHANNEL]' below to confirm:</p>
<span id="delete-channel-popup-prompt-span">
<input type="text" id="delete-channel-popup-prompt">