Added basic panel logic.
This commit is contained in:
parent
4168635c51
commit
3eccc6d24c
20
src/controllers/panel/placeholder.js
Normal file
20
src/controllers/panel/placeholder.js
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
/*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/>.*/
|
||||||
|
|
||||||
|
//root index functions
|
||||||
|
module.exports.get = async function(req, res){
|
||||||
|
res.render('panels/placeholder', {});
|
||||||
|
}
|
||||||
30
src/routers/panelRouter.js
Normal file
30
src/routers/panelRouter.js
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
/*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/>.*/
|
||||||
|
|
||||||
|
//npm imports
|
||||||
|
const { Router } = require('express');
|
||||||
|
|
||||||
|
|
||||||
|
//local imports
|
||||||
|
const placeholderController = require("../controllers/panel/placeholder");
|
||||||
|
|
||||||
|
//globals
|
||||||
|
const router = Router();
|
||||||
|
|
||||||
|
//routing functions
|
||||||
|
router.get('/placeholder', placeholderController.get);
|
||||||
|
|
||||||
|
module.exports = router;
|
||||||
|
|
@ -32,6 +32,7 @@ const profileRouter = require('./routers/profileRouter');
|
||||||
const adminPanelRouter = require('./routers/adminPanelRouter');
|
const adminPanelRouter = require('./routers/adminPanelRouter');
|
||||||
const channelRouter = require('./routers/channelRouter');
|
const channelRouter = require('./routers/channelRouter');
|
||||||
const newChannelRouter = require('./routers/newChannelRouter');
|
const newChannelRouter = require('./routers/newChannelRouter');
|
||||||
|
const panelRouter = require('./routers/panelRouter');
|
||||||
const apiRouter = require('./routers/apiRouter');
|
const apiRouter = require('./routers/apiRouter');
|
||||||
|
|
||||||
//Define Config
|
//Define Config
|
||||||
|
|
@ -88,6 +89,8 @@ app.use('/profile', profileRouter);
|
||||||
app.use('/adminPanel', adminPanelRouter);
|
app.use('/adminPanel', adminPanelRouter);
|
||||||
app.use('/c', channelRouter);
|
app.use('/c', channelRouter);
|
||||||
app.use('/newChannel', newChannelRouter);
|
app.use('/newChannel', newChannelRouter);
|
||||||
|
//Panel
|
||||||
|
app.use('/panel', panelRouter);
|
||||||
//Bot-Ready
|
//Bot-Ready
|
||||||
app.use('/api', apiRouter);
|
app.use('/api', apiRouter);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ GNU Affero General Public License for more details.
|
||||||
|
|
||||||
You should have received a copy of the GNU Affero General Public License
|
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/>.-->
|
along with this program. If not, see <https://www.gnu.org/licenses/>.-->
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
|
@ -66,7 +67,14 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
|
||||||
<i class="chat-panel panel-head-element bi-caret-down-fill" id="chat-panel-users-toggle"></i>
|
<i class="chat-panel panel-head-element bi-caret-down-fill" id="chat-panel-users-toggle"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-panel" id="chat-panel-main-div">
|
<div class="chat-panel" id="chat-panel-main-div">
|
||||||
<div class="chat-panel" id="chat-panel-multipanel-div">
|
<div class="cpanel" id="cpanel-active-div">
|
||||||
|
<div class="cpanel" id="cpanel-active-header-div">
|
||||||
|
<p class="cpanel" id="cpanel-active-title">NULL PANEL</p>
|
||||||
|
<span class="cpanel" id="cpanel-active-title-spacer"></span>
|
||||||
|
<i class="cpanel bi-x" id="cpanel-active-close-icon"></i>
|
||||||
|
</div>
|
||||||
|
<div class="cpanel" id="cpanel-active-doc">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-panel" id="chat-area">
|
<div class="chat-panel" id="chat-area">
|
||||||
<div class="chat-panel" id="chat-panel-buffer-div">
|
<div class="chat-panel" id="chat-panel-buffer-div">
|
||||||
|
|
@ -96,6 +104,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
|
||||||
<script src="/js/channel/chat.js"></script>
|
<script src="/js/channel/chat.js"></script>
|
||||||
<script src="/js/channel/userlist.js"></script>
|
<script src="/js/channel/userlist.js"></script>
|
||||||
<script src="/js/channel/player.js"></script>
|
<script src="/js/channel/player.js"></script>
|
||||||
|
<script src="/js/channel/cpanel.js"></script>
|
||||||
<script src="/js/channel/channel.js"></script>
|
<script src="/js/channel/channel.js"></script>
|
||||||
</footer>
|
</footer>
|
||||||
</html>
|
</html>
|
||||||
16
src/views/panels/placeholder.ejs
Normal file
16
src/views/panels/placeholder.ejs
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!--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/>.-->
|
||||||
|
<h1>This is a test panel!</h1>
|
||||||
|
|
@ -77,6 +77,7 @@ div#chat-panel-div{
|
||||||
|
|
||||||
div#chat-panel-main-div{
|
div#chat-panel-main-div{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: relative;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 1%;
|
height: 1%;
|
||||||
}
|
}
|
||||||
|
|
@ -88,6 +89,7 @@ div#chat-panel-main-div{
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 0.4em;
|
width: 0.4em;
|
||||||
|
z-index: 8;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-panel-multipanel-div{
|
#chat-panel-multipanel-div{
|
||||||
|
|
@ -211,3 +213,36 @@ input#chat-panel-prompt{
|
||||||
#chat-panel-show-video-icon{
|
#chat-panel-show-video-icon{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#cpanel-active-div{
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 3;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cpanel-active-header-div{
|
||||||
|
display: flex;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 96%;
|
||||||
|
height: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cpanel-active-title{
|
||||||
|
margin: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cpanel-active-title-spacer{
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cpanel-active-close-icon{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
@ -243,3 +243,12 @@ select.panel-head-element{
|
||||||
height: 1.2em;
|
height: 1.2em;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#cpanel-active-div{
|
||||||
|
background-color: var(--bg0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#cpanel-active-header-div{
|
||||||
|
border-bottom: solid 1px var(--accent0);
|
||||||
|
}
|
||||||
|
|
@ -30,6 +30,8 @@ class channel{
|
||||||
this.chatBox = new chatBox(this);
|
this.chatBox = new chatBox(this);
|
||||||
//Create the User List Object
|
//Create the User List Object
|
||||||
this.userList = new userList(this);
|
this.userList = new userList(this);
|
||||||
|
//Create the Canopy Panel Object
|
||||||
|
this.cPanel = new cPanel(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
connect(){
|
connect(){
|
||||||
|
|
|
||||||
59
www/js/channel/cpanel.js
Normal file
59
www/js/channel/cpanel.js
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
/*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/>.*/
|
||||||
|
|
||||||
|
class cPanel{
|
||||||
|
constructor(client){
|
||||||
|
//Client Object
|
||||||
|
this.client = client;
|
||||||
|
|
||||||
|
//Element Nodes
|
||||||
|
this.activePanel = document.querySelector("#cpanel-active-div");
|
||||||
|
this.activePanelTitle = document.querySelector("#cpanel-active-title");
|
||||||
|
this.activePanelDoc = document.querySelector("#cpanel-active-doc");
|
||||||
|
this.activePanelCloseIcon = document.querySelector("#cpanel-active-close-icon");
|
||||||
|
|
||||||
|
this.setupInput();
|
||||||
|
}
|
||||||
|
|
||||||
|
setupInput(){
|
||||||
|
this.activePanelCloseIcon.addEventListener("click", this.hidePanel.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
async setPanel(panel){
|
||||||
|
this.activePanel.style.display = "flex";
|
||||||
|
this.activePanelTitle.textContent = panel.name;
|
||||||
|
this.activePanelDoc.innerHTML = await panel.getPage();
|
||||||
|
}
|
||||||
|
|
||||||
|
hidePanel(){
|
||||||
|
this.activePanel.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class panelObj{
|
||||||
|
constructor(name = "Placeholder Panel", pageURL = "/panel/placeholder"){
|
||||||
|
this.name = name;
|
||||||
|
this.pageURL = pageURL;
|
||||||
|
}
|
||||||
|
|
||||||
|
async getPage(){
|
||||||
|
var response = await fetch(this.pageURL,{
|
||||||
|
method: "GET",
|
||||||
|
});
|
||||||
|
|
||||||
|
return await response.text();
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue