Continued work on improved channel guide

www/js/channelGuide.js

@@ -34,7 +34,9 @@ class ChannelGuide{
     }
 
     renderList(schedule, now = new Date()){
-        this.renderIndex(now)
+        this.renderIndex(now);
+        this.renderChannelList(schedule, now);
+        this.renderSchedule(schedule, now);
 
         //if we've got a job to refresh the list
         if(this.refreshTimer != null){
@@ -42,8 +44,8 @@ class ChannelGuide{
             clearTimeout(this.refreshTimer);
         }
 
-        //Set timer to refresh the thing erry minute 
-        setTimeout(this.refreshList.bind(this), 1000 * 60);
+        //Set timer to refresh the thing erry minute on the minute
+        setTimeout(this.refreshList.bind(this), 1000 * (60 - now.getSeconds()));
     }
 
     renderIndex(now = new Date()){
@@ -67,6 +69,64 @@ class ChannelGuide{
             this.scheduleIndex.appendChild(timeslotLabel);
         }
     }
+
+    renderChannelList(schedule, now = new Date()){
+        //Clean out channel list
+        this.channelList.innerHTML = '';
+
+        for(const channel of schedule){
+            //Create entry for channel
+            const entry = document.createElement('div');
+            entry.classList.add('channel-guide-channel-list-entry', 'channel-guide-schedule-row');
+            entry.style.backgroundImage = `Url("${channel.thumbnail}")`;
+
+            //Throw together a channel label
+            const entryLabel = document.createElement('h3');
+            entryLabel.textContent = utils.unescapeEntities(channel.name);
+
+            //Some assembly required
+            entry.appendChild(entryLabel);
+
+            //Add channel entry to the list
+            this.channelList.appendChild(entry);
+        }
+    }
+
+    renderSchedule(schedule, now = new Date()){
+        //Clear out the schedule
+        this.scheduledMediaDiv.innerHTML = '';
+
+        //Iterate through all of the received channels
+        for(const channel of schedule){
+            //Create a div to hold all of the current channels entries
+            const channelTrack = document.createElement('div');
+            channelTrack.classList.add('channel-guide-schedule-track');
+
+            //For every scheduled video 
+            for(const entry of channel.schedule){
+                //Create div for current schedule entry
+                const entryDiv = document.createElement('div');
+                entryDiv.classList.add('channel-guide-schedule-entry', 'channel-guide-schedule-row');
+
+                //Throw down an entry label
+                const entryLabel = document.createElement('h3');
+                entryLabel.textContent = utils.unescapeEntities(entry.title);
+
+                //Assemble the entry
+                entryDiv.appendChild(entryLabel);
+
+                //slot entry into schedule track
+                channelTrack.appendChild(entryDiv);
+            }
+
+            //Inject channel track into schedule div
+            this.scheduledMediaDiv.appendChild(channelTrack);
+        }
+    }
+
+    renderScheduleItem(item){
+    }
+
 }
 
 const channelGuide = new ChannelGuide();