Started work on improved channel guide rendering

src/controllers/indexController.js

@@ -25,8 +25,7 @@ const {exceptionHandler, errorHandler} = require('../utils/loggerUtils');
 //root index functions
 module.exports.get = async function(req, res){
     try{
-        const chanGuide = await channelModel.getChannelList();
+        return navRender.render(req, res, 'index', {unescape: validator.unescape})
-        return navRender.render(req, res, 'index', {chanGuide: chanGuide, unescape: validator.unescape})
     }catch(err){
         return exceptionHandler(res, err);
     }

src/views/index.ejs

@@ -18,25 +18,14 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
     <head>
         <%- include('partial/styles', {instance, user}); %>
         <%- include('partial/csrfToken', {csrfToken}); %>
-        <link rel="stylesheet" type="text/css" href="css/index.css">
         <title><%= instance %></title>
     </head>
     <body>
         <%- include('partial/navbar', {user}); %>
-        <h3><a href="/newchannel">Start a new channel...</a></h3>
+        <%- include('partial/channelGuide'); %>
-        <div id="channel-guide-div" class="channel-guide">
-            <% chanGuide.forEach((channel) => { %>
-                <div id="channel-guide-entry-<%= unescape(channel.name) %>" class="channel-guide-entry">
-                    <a href="/c/<%= unescape(channel.name) %>" class="channel-guide-entry channel-guide-entry-item"><img id="channel-guide-entry-img-<%= unescape(channel.name) %>" class="channel-guide-entry channel-guide-entry-item" src="<%= encodeURI(unescape(channel.thumbnail)) %>"></a>
-                    <h3 id="channel-guide-entry-name-<%= unescape(channel.name) %>" class="channel-guide-entry channel-guide-entry-item"><a href="/c/<%= encodeURI(unescape(channel.name)) %>" class="channel-guide-entry channel-guide-entry-item"><%= unescape(channel.name) %></a></h3>
-                    <span id="channel-guide-entry-description-span-<%= unescape(channel.name) %>" class="channel-guide-entry channel-guide-entry-item">
-                        <p id="channel-guide-entry-description-<%= unescape(channel.name) %>" class="channel-guide-entry channel-guide-entry-item"><%= unescape(channel.description) %></h3>
-                    </span>
-                </div>
-            <% }); %>
-        </div>
     </body>
     <footer>
         <%- include('partial/scripts', {user}); %>
+        <script src="/js/channelGuide.js"></script>
     </footer>
 </html>

src/views/partial/channelGuide.ejs

@@ -0,0 +1,29 @@
+<%# Canopy - The next generation of stoner streaming software
+Copyright (C) 2024-2026 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/>. %>
+<link rel="stylesheet" type="text/css" href="css/channelGuide.css">
+<div id="channel-guide-div" class="channel-guide">
+    <div id="channel-guide-channel-list">
+        <div id="channel-guide-new-channel-button" class="positive-button">
+            <h3><a href="/newchannel">Create Channel</a></h3>
+        </div>
+    </div>
+    <div id="channel-guide-schedule-container">
+        <div id="channel-guide-schedule-index">
+        </div>
+        <div id="channel-guide-scheduled-media">
+        </div>
+    </div>
+</div>

www/css/channelGuide.css

@@ -14,53 +14,39 @@ 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/>.*/
 
-@media (orientation: landscape){
 #channel-guide-div{
-        max-width: 100vh;
-    }
-}
-
-@media (orientation: portrait){
-    #channel-guide-div{
-        max-width: 80vw;
-    }
-}
-
-#channel-guide-div{
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
-    margin: 0 auto 0 auto;
-}
-
-div.channel-guide-entry{
-    overflow: hidden;
-    width: 10em;
-    margin: 0.5em;
-}
-
-.channel-guide-entry{
-    margin: 0.5em auto 0.5em auto;
-    padding: 0.2em;
     display: flex;
-    flex-direction: column;
 }
 
-.channel-guide-entry-item{
+#channel-guide-schedule-container {
-    margin: 0.1em auto 0.1em auto;
+  flex: 1;
 }
 
-.channel-guide-entry-item img{
+
-    max-width: 7em;
+#channel-guide-schedule-index {
-    max-height: 7em;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--accent0);
 }
 
-span.channel-guide-entry-item{
+.channel-guide-timeslot-label {
-    overflow-y: scroll;
+  width: 100%;
-    height: 2em;
+  text-align: center;
-    scrollbar-width: none;
+  padding: 0;
+  margin: 0.3em 0;
 }
 
-p.channel-guide-entry{
+/*EWWIE WHY DOES CSS COUNTING START AT ONE?!?!*/
-    font-size: 0.8em;
+.channel-guide-timeslot-label:not(:nth-child(1)){
-    margin-left: 0;
+  border-left: 1px solid var(--accent0);
+}
+
+#channel-guide-new-channel-button h3{
+  padding: 0.3em 0.5em;
+  margin: 0;
+  border-right: 1px solid var(--accent0);
+}
+
+#channel-guide-new-channel-button{
+  border-bottom: 1px solid var(--accent0);
 }

www/js/channelGuide.js

@@ -0,0 +1,56 @@
+/*Canopy - The next generation of stoner streaming software
+Copyright (C) 2024-2026 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 ChannelGuide{
+    constructor(){
+        this.scheduleIndex = document.querySelector('#channel-guide-schedule-index');
+        this.channelList = document.querySelector('#channel-guide-channel-list');
+        this.scheduledMediaDiv = document.querySelector('#channel-guide-scheduled-media');
+
+        //Refresh the schedule
+        this.refreshList();
+    }
+
+    async refreshList(){
+        //Fetch latest channel list and render it to the schedule page
+        this.renderList(await utils.ajax.getChannels());
+    }
+
+    renderList(schedule, now = new Date()){
+        this.renderIndex(now);
+    }
+
+    renderIndex(now = new Date()){
+        //DO EM 3 TEIMS!
+        for(let slot = 0; slot < 3; slot++){
+            //Clone passed date object to prevent over-writing
+            const setDate = new Date(now.getTime());
+
+            //Up timeslot by 30 minutes for each timeslot in the loop
+            setDate.setMinutes(setDate.getMinutes() + (slot * 30));
+
+            //Generate timeslot label
+            const timeslotLabel = document.createElement('h3');
+            timeslotLabel.classList.add('channel-guide-timeslot-label');
+            timeslotLabel.textContent = utils.ux.timeStringFromDate(setDate, false);
+
+            //Append timeslot label to schedule index
+            this.scheduleIndex.appendChild(timeslotLabel);
+        }
+    }
+}
+
+const channelGuide = new ChannelGuide();

www/js/utils.js

@@ -1012,6 +1012,18 @@ class canopyAjaxUtils{
     }
 
     //Channel
+    async getChannels(){
+        var response = await fetch(`/api/channel/list`,{
+            method: "GET"
+        });
+
+        if(response.ok){
+            return await response.json();
+        }else{
+            utils.ux.displayResponseError(await response.json());
+        }
+    }
+
     async newChannel(name, description, thumbnail, verification){
         var response = await fetch(`/api/channel/register`,{
             method: "POST",