Added basic panel logic.

www/js/channel/channel.js

@@ -30,6 +30,8 @@ class channel{
         this.chatBox = new chatBox(this);
         //Create the User List Object
         this.userList = new userList(this);
+        //Create the Canopy Panel Object
+        this.cPanel = new cPanel(this);
     }
 
     connect(){

www/js/channel/cpanel.js

@@ -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();
+    }
+}