Started work on improved channel guide rendering

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{
-    margin: 0.1em auto 0.1em auto;
+#channel-guide-schedule-container {
+  flex: 1;
 }
 
-.channel-guide-entry-item img{
-    max-width: 7em;
-    max-height: 7em;
+
+#channel-guide-schedule-index {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--accent0);
 }
 
-span.channel-guide-entry-item{
-    overflow-y: scroll;
-    height: 2em;
-    scrollbar-width: none;
+.channel-guide-timeslot-label {
+  width: 100%;
+  text-align: center;
+  padding: 0;
+  margin: 0.3em 0;
 }
 
-p.channel-guide-entry{
-    font-size: 0.8em;
-    margin-left: 0;
+/*EWWIE WHY DOES CSS COUNTING START AT ONE?!?!*/
+.channel-guide-timeslot-label:not(:nth-child(1)){
+  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",