First working version

channels.js

+window.CHANNELS=[{"id":"1","name":"Nederland 1","name_short":"Ned 1"},{"id":"2","name":"Nederland 2","name_short":"Ned 2"},{"id":"3","name":"Nederland 3","name_short":"Ned 3"},{"id":"4","name":"RTL 4","name_short":"RTL 4"},{"id":"31","name":"RTL 5","name_short":"RTL 5"},{"id":"46","name":"RTL 7","name_short":"RTL 7"},{"id":"92","name":"RTL 8","name_short":"RTL 8"},{"id":"36","name":"SBS 6","name_short":"SBS 6"},{"id":"37","name":"NET 5","name_short":"NET 5"},{"id":"34","name":"Veronica","name_short":"Veronica"},{"id":"29","name":"Discovery Channel","name_short":"Discovery"},{"id":"18","name":"National Geographic","name_short":"NGC"},{"id":"406","name":"NostalgieNet","name_short":"Nost Net"},{"id":"5","name":"Eén","name_short":"Eén"},{"id":"435","name":"24 Kitchen","name_short":"24kitchen"},{"id":"6","name":"Canvas","name_short":"CANV"},{"id":"25","name":"MTV","name_short":"MTV"},{"id":"438","name":"TLC","name_short":"TLC"},{"id":"91","name":"Comedy Central","name_short":"Com. Centr."},{"id":"49","name":"VTM","name_short":"VTM"},{"id":"59","name":"2BE","name_short":"2BE"},{"id":"89","name":"Nickelodeon","name_short":"Nick"},{"id":"60","name":"VT4","name_short":"VT4"},{"id":"407","name":"OUTTV","name_short":"OUTTV"},{"id":"90","name":"BVN","name_short":"BVN"},{"id":"404","name":"FOXlife","name_short":"FOXlife"},{"id":"7","name":"BBC 1","name_short":"BBC 1"},{"id":"8","name":"BBC 2","name_short":"BBC 2"},{"id":"86","name":"BBC World","name_short":"BBC W"},{"id":"9","name":"ARD","name_short":"ARD"},{"id":"10","name":"ZDF","name_short":"ZDF"},{"id":"13","name":"NDR Fernsehen","name_short":"NDR"},{"id":"12","name":"WDR Fernsehen","name_short":"WDR"},{"id":"50","name":"3Sat","name_short":"3Sat"},{"id":"28","name":"Sat 1","name_short":"Sat 1"},{"id":"11","name":"RTL","name_short":"RTL"},{"id":"58","name":"PRO 7","name_short":"PRO 7"},{"id":"15","name":"RTBF La 1","name_short":"RTBF La1"},{"id":"16","name":"RTBF La 2","name_short":"RTBF La2"},{"id":"32","name":"TRT int.","name_short":"TRT"},{"id":"40","name":"AT 5","name_short":"AT 5"},{"id":"24","name":"Film 1 Premiere","name_short":"Film1 Prem"},{"id":"39","name":"Film1 Comedy & Kids","name_short":"Film1 Com & Kid"},{"id":"107","name":"Film 1 Sundance","name_short":"Film1 Fest."},{"id":"21","name":"Cartoon Network","name_short":"Cart. Net."},{"id":"26","name":"CNN","name_short":"CNN"},{"id":"19","name":"Eurosport","name_short":"Eurosport"},{"id":"99","name":"Sport1 Select","name_short":"Sport1 Select"},{"id":"20","name":"TCM","name_short":"TCM"},{"id":"65","name":"Animal Planet OUD","name_short":"Animal Pl. OUD"},{"id":"38","name":"ARTE","name_short":"ARTE"},{"id":"103","name":"RTV Noord-Holland","name_short":"RTV N-H"},{"id":"100","name":"RTV Utrecht","name_short":"Utrecht"},{"id":"101","name":"RTV West","name_short":"RTV West"},{"id":"102","name":"RTV Rijnmond","name_short":"Rijnmond"},{"id":"104","name":"BBC Entertainment","name_short":"BBC E"},{"id":"105","name":"Private Spice","name_short":"Private Sp."},{"id":"93","name":"13TH STREET","name_short":"13TH ST"},{"id":"94","name":"Syfy","name_short":"Syfy"},{"id":"108","name":"RTV Noord","name_short":"RTV Noord"},{"id":"111","name":"RTV Oost","name_short":"RTV Oost"},{"id":"114","name":"Omroep Brabant","name_short":"Brabant"},{"id":"109","name":"Omrop Fryslân","name_short":"Fryslân"},{"id":"112","name":"Omroep Gelderland","name_short":"Gelderland"},{"id":"115","name":"L1 TV","name_short":"L1 TV"},{"id":"110","name":"RTV Drenthe","name_short":"Drenthe"},{"id":"113","name":"Omroep Flevoland","name_short":"Flevoland"},{"id":"116","name":"Omroep Zeeland","name_short":"Zeeland"},{"id":"311","name":"Disney XD","name_short":"Disney XD"},{"id":"430","name":"Film1 Spotlight","name_short":"Fl1 Spotlight"},{"id":"315","name":"CBS Reality","name_short":"CBS Reality"},{"id":"433","name":"HBO 3","name_short":"HBO 3"},{"id":"400","name":"Hustler TV","name_short":"Hustler"},{"id":"437","name":"Comedy Central Extra","name_short":"Com. Extra"},{"id":"405","name":"TLC oud","name_short":"tlc"},{"id":"410","name":"101 TV","name_short":"101 TV"},{"id":"413","name":"History channel","name_short":"Hist. Chan."},{"id":"17","name":"TV 5","name_short":"TV 5"},{"id":"416","name":"Nat Geo Wild","name_short":"Nat Geo W"},{"id":"81","name":"HollandDoc 24","name_short":"HolDoc24"},{"id":"419","name":"Sport1 golf\t","name_short":"Sp1 Golf"},{"id":"300","name":"BBC 3","name_short":"BBC 3"},{"id":"422","name":"Euronews","name_short":"Euronews"},{"id":"305","name":"Discovery World","name_short":"Disc. World"},{"id":"425","name":"MTV Music 24","name_short":"MTV 24"},{"id":"309","name":"3voor12 On Stage","name_short":""},{"id":"428","name":"Brava NL","name_short":"Brava NL"},{"id":"312","name":"Nick Jr.","name_short":"Nick Jr."},{"id":"431","name":"HBO 1","name_short":"HBO 1"},{"id":"316","name":"Best 24","name_short":"Best24"},{"id":"434","name":"Dusk","name_short":"Dusk"},{"id":"401","name":"Playboy TV","name_short":"Playboy"},{"id":"439","name":"Animal Planet","name_short":"Animal Pl."},{"id":"408","name":"RTL Lounge","name_short":"RTL Lounge"},{"id":"411","name":"Film1 Action","name_short":"Film1 Act."},{"id":"414","name":"Investigiation discovery","name_short":"Inv. Disc."},{"id":"66","name":"HumorTV 24","name_short":"Humor24"},{"id":"417","name":"Extreme Sports Channel","name_short":"Ext Sp Chan"},{"id":"83","name":"3voor12","name_short":""},{"id":"420","name":"Sport1 Tennis","name_short":"Sp1 Tennis"},{"id":"301","name":"BBC 4","name_short":"BBC 4"},{"id":"423","name":"Al Jazeera Engels","name_short":"Al Jaz. EN."},{"id":"306","name":"Discovery Science","name_short":"Disc. Sc."},{"id":"426","name":"VH1 Classic","name_short":"VH1 Clas."},{"id":"310","name":"3voor12 Portal","name_short":""},{"id":"429","name":"Oranje TV","name_short":"Oranje TV"},{"id":"313","name":"Boomerang","name_short":"Boomerang"},{"id":"432","name":"HBO 2","name_short":"HBO 2"},{"id":"317","name":"Comedy Family","name_short":"Com. Fam."},{"id":"436","name":"Eurosport 2","name_short":"Eurosport2"},{"id":"403","name":"Goed TV","name_short":"Goed TV"},{"id":"440","name":"Fox","name_short":"Fox"},{"id":"409","name":"Rtl crime","name_short":"RTL Crim"},{"id":"412","name":"Film1 Premiere +1","name_short":"Film 1 Prem+"},{"id":"415","name":"Travel Channel","name_short":"Trav. Chan"},{"id":"70","name":"Cultura 24","name_short":"Cult24"},{"id":"418","name":"ESPN classic","name_short":"ESPN Clas."},{"id":"148","name":"Fox Sports Eredivisie","name_short":"Fox Sports Eredivisie"},{"id":"421","name":"Sport1 extra","name_short":"Sp1 Xtra"},{"id":"304","name":"MGM","name_short":"MGM"},{"id":"424","name":"Disney Channel","name_short":"Disc. Chan."},{"id":"308","name":"3voor12 Central","name_short":""},{"id":"427","name":"MTV Brand new","name_short":"MTV br nw"}]

channels.php

+<?php
+echo file_get_contents('http://www.tvgids.nl/json/lists/channels.php')
+?>

guide.coffee

@@ -2,38 +2,22 @@
 # Config
 #
 
+#FETCH_URL = 'http://www.tvgids.nl/json/lists/programs.php'
+FETCH_URL = 'programs.php'
 HOUR_WIDTH = 200
 SCROLL_MULTIPLIER = HOUR_WIDTH
 
-CHANNELS =
-    '1':   name: 'Nederland 1'
-    '2':   name: 'Nederland 2'
-    '3':   name: 'Nederland 3'
-    '4':   name: 'RTL 4'
-    '5':   name: 'Eén'
-    '6':   name: 'Canvas'
-    '18':  name: 'NGC'
-    '24':  name: 'Film 1 Premium'
-    '29':  name: 'Discovery'
-    '31':  name: 'RTL 5'
-    '34':  name: 'Veronica'
-    '36':  name: 'SBS6'
-    '37':  name: 'NET 5'
-    '46':  name: 'RTL 7'
-    '91':  name: 'Comedy Central'
-    '92':  name: 'RTL 8'
-    '435': name: '24 Kitchen'
-    '438': name: 'TLC'
-    '440': name: 'FOX'
-
 
 #
 # Utils
 #
 
-tosecs = (date) -> date.getHours() * 60 + date.getSeconds()
-now = -> tosecs(new Date())
+seconds_today = (time) -> (time - (new Date()).setHours(0, 0, 0, 0)) / 1000
 time2px = (seconds) -> HOUR_WIDTH / 3600 * seconds
+zeropad = (digit) -> if digit < 10 then '0' + digit else String(digit)
+format_time = (time) ->
+    date = new Date(time)
+    zeropad(date.getHours()) + ':' + zeropad(date.getMinutes())
 
 #
 # Models & collections
@@ -44,16 +28,18 @@ Channel = Backbone.Model.extend(
         id: null
         name: 'Some channel'
         visible: true
-
-    initialize: (attrs, options) ->
-        @programs = []
+        programs: []
 )
 
-Progam = Backbone.Model.extend(
+Program = Backbone.Model.extend(
     defaults: ->
         title: 'Some program'
-        start: null
-        end: null
+        genre: ''
+        sort: ''
+        start: 0
+        end: 0
+        #article_id: null
+        #article_title: null
 )
 
 ChannelList = Backbone.Collection.extend(
@@ -61,9 +47,15 @@ ChannelList = Backbone.Collection.extend(
     comparator: 'id'
 
     initialize: (models, options) ->
-        _.each(CHANNELS, (props, id) => @add(_.extend({id: id}, props)))
+        #_.each(CHANNELS, (props, id) => @add(_.extend({id: id}, props)))
+
         @fetchVisible()
-        #@loadPrograms(0)
+        #@fetchPrograms(0)
+
+    fetch: ->
+        @reset(CHANNELS.slice(0,3))
+        @reset(CHANNELS)
+        #$.getJSON('channels.php', (data) => @reset(data))
 
     fetchVisible: ->
         visible = if localStorage.hasOwnProperty('channels') \
@@ -83,16 +75,24 @@ ChannelList = Backbone.Collection.extend(
 
         @saveVisible() if save
 
-    loadPrograms: (day, callback) ->
-        $.get(
-            'http://www.tvgids.nl/json/lists/programs.php'
+    fetchPrograms: (day) ->
+        $.getJSON(
+            FETCH_URL
             channels: @pluck('id').join(','), day: day
             (channels) ->
-                _.each channels, (id, programs) ->
+                _.each channels, (programs, id) ->
                     channel = Channels.findWhere(id: id)
-                    channel.programs = (new Program(p) for p in programs)
-                    callback() if callback
-            'json'
+                    channel.set('programs', (
+                        new Program(
+                            title: p.titel
+                            genre: p.genre
+                            sort: p.soort
+                            start: Date.parse(p.datum_start)
+                            end: Date.parse(p.datum_end)
+                            #article_id: p.artikel_id
+                            #article_title: p.artikel_titel
+                        ) for p in programs
+                    ))
         )
 )
 
@@ -106,10 +106,19 @@ ChannelView = Backbone.View.extend(
     #template: _.template($('#channel-template').html())
 
     initialize: ->
-        $el.text(@model.title)
+        @listenTo(@model, 'change:programs', @render)
+        @listenTo(@model, 'change:visible', @toggleVisible)
+        #@$el.text(@model.get('title'))
 
     render: ->
-        $el.toggle(@model.visible)
+        @$el.empty()
+        _.each @model.get('programs'), (program) =>
+            view = new ProgramView(model: program)
+            view.render()
+            @$el.append(view.el)
+
+    toggleVisible: ->
+        @$el.toggle(@model.get('visible'))
 )
 
 ProgramView = Backbone.View.extend(
@@ -117,42 +126,70 @@ ProgramView = Backbone.View.extend(
     className: 'program'
 
     initialize: ->
-        $el.text(@model.title)
+        @$el.text(@model.get('title'))
+        from = format_time(@model.get('start'))
+        to = format_time(@model.get('end'))
+        @$el.attr('title', @model.get('title') + " (#{from} - #{to})")
+
+        left = time2px(Math.max(0, seconds_today(@model.get('start'))))
+        width = time2px(seconds_today(@model.get('end'))) - left
+        @$el.css(
+            left: left + 'px'
+            width: (width - 10) + 'px'
+        )
 
     render: ->
-        # TODO: set highlight to past/present/future
+        if @model.get('start') <= Date.now()
+            if @model.get('end') < Date.now()
+                @$el.removeClass('current').addClass('past')
+            else
+                @$el.addClass('current')
 )
 
 AppView = Backbone.View.extend(
     el: $('#guide')
 
-    initialize: ->
-        @listenTo(Channels, 'add', @addChannel)
-        @listenTo(Channels, 'reset', => Channels.each(@addChannel, @))
-        @listenTo(Channels, 'all', @render)
+    events:
+        'click #yesterday': -> @loadDay(-1)
+        'click #today': -> @loadDay(0)
+        'click #tomorrow': -> @loadDay(1)
 
-        @setDay(0, => @updateIndicator())
+    initialize: ->
+        @updateIndicator()
+        @listenTo(Channels, 'reset', @addChannels)
 
-        #setInterval(=> @updateIndicator(), 3600000 / HOUR_WIDTH)
+        Channels.fetch()
+        @listenTo(Settings, 'change:day', @fetchPrograms)
 
-    setDay: (day, callback) ->
-        Channels.loadPrograms(@day = day, callback)
+        setInterval((=> @updateIndicator()), 3600000 / HOUR_WIDTH)
 
-    addChannel: (channel) ->
+    addChannels: () ->
+        Channels.each((channel) ->
             view = new ChannelView(model: channel)
-        @$('.channels').append(view.render().el)
+            view.render()
+            @$('.channels').append(view.el)
+        , @)
+        @fetchPrograms()
+
+    loadDay: (day) ->
+        Settings.set(day: day)
+        @$('.navbar .active').removeClass('active')
+        $(@$('.navbar .navitem')[day + 1]).addClass('active')
 
     updateIndicator: ->
-        @$('.indicator').css('left', time2px(now()) + 'px')
+        @$('.indicator').css('left', time2px(seconds_today(Date.now())) + 'px')
 
-    render: ->
-        hidden
-        @$('.channel')
+    fetchPrograms: ->
+        Channels.fetchPrograms(Settings.get('day'))
 )
 
 #
 # Main
 #
 
+Settings = new (Backbone.Model.extend(
+    defaults: ->
+        day: 0
+))()
 Channels = new ChannelList()
 App = new AppView()

index.html

@@ -6,34 +6,40 @@
     </head>
     <body>
         <div id="guide" class="guide">
+            <div class="navbar">
+                <a href="javascript:void(0);" id="yesterday" class="navitem">Gisteren</a>
+                <a href="javascript:void(0);" id="today" class="navitem active">Vandaag</a>
+                <a href="javascript:void(0);" id="tomorrow" class="navitem">Morgen</a>
+                <a href="settings.html" class="navitem">Selecteer zenders</a>
+            </div>
             <div class="timeline">
-                <div class="hour"><span class="label">00:00</span></div>
-                <div class="hour"><span class="label">01:00</span></div>
-                <div class="hour"><span class="label">02:00</span></div>
-                <div class="hour"><span class="label">03:00</span></div>
-                <div class="hour"><span class="label">04:00</span></div>
-                <div class="hour"><span class="label">05:00</span></div>
-                <div class="hour"><span class="label">06:00</span></div>
-                <div class="hour"><span class="label">07:00</span></div>
-                <div class="hour"><span class="label">08:00</span></div>
-                <div class="hour"><span class="label">09:00</span></div>
-                <div class="hour"><span class="label">10:00</span></div>
-                <div class="hour"><span class="label">11:00</span></div>
-                <div class="hour"><span class="label">12:00</span></div>
-                <div class="hour"><span class="label">13:00</span></div>
-                <div class="hour"><span class="label">14:00</span></div>
-                <div class="hour"><span class="label">15:00</span></div>
-                <div class="hour"><span class="label">16:00</span></div>
-                <div class="hour"><span class="label">17:00</span></div>
-                <div class="hour"><span class="label">18:00</span></div>
-                <div class="hour"><span class="label">19:00</span></div>
-                <div class="hour"><span class="label">20:00</span></div>
-                <div class="hour"><span class="label">21:00</span></div>
-                <div class="hour"><span class="label">22:00</span></div>
-                <div class="hour"><span class="label">23:00</span></div>
+                <div class="hour">00:00</div>
+                <div class="hour">01:00</div>
+                <div class="hour">02:00</div>
+                <div class="hour">03:00</div>
+                <div class="hour">04:00</div>
+                <div class="hour">05:00</div>
+                <div class="hour">06:00</div>
+                <div class="hour">07:00</div>
+                <div class="hour">08:00</div>
+                <div class="hour">09:00</div>
+                <div class="hour">10:00</div>
+                <div class="hour">11:00</div>
+                <div class="hour">12:00</div>
+                <div class="hour">13:00</div>
+                <div class="hour">14:00</div>
+                <div class="hour">15:00</div>
+                <div class="hour">16:00</div>
+                <div class="hour">17:00</div>
+                <div class="hour">18:00</div>
+                <div class="hour">19:00</div>
+                <div class="hour">20:00</div>
+                <div class="hour">21:00</div>
+                <div class="hour">22:00</div>
+                <div class="hour">23:00</div>
             </div>
-            <div class="indicator"></div>
             <div class="channels"></div>
+            <div class="indicator"></div>
         </div>
 
         <script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>
@@ -48,6 +54,7 @@
             </div>
         </script>
 
+        <script src="channels.js" type="text/javascript"></script>
         <script src="guide.js" type="text/javascript"></script>
     </body>
 </html>

programs.php

+<?php
+echo file_get_contents('http://www.tvgids.nl/json/lists/programs.php?channels='
+                       . $_GET['channels'] . '&day=' . $_GET['day'])
+?>

style.sass

 $indicator-color: red
-$timeline-height: 30px
 $hour-width: 200px
-$channel-height: 40px
+$channel-height: 34px
 
 html, body
     width: 100%
@@ -11,6 +10,24 @@ html, body
     padding: 0
 
 
+.navbar
+    background-color: #232323
+    width: 24 * $hour-width
+
+    .navitem
+        color: #9a9a9a
+        text-decoration: none
+        font: normal 13px/18px Helvetica
+        display: inline-block
+        padding: 10px 20px
+
+        &:hover
+            color: #bcbcbc
+
+        &.active
+            color: #fff
+            background-color: #1a1a1a
+
 .guide
     width: 100%
     overflow-x: scroll
@@ -18,30 +35,52 @@ html, body
     position: relative
 
 .timeline
-    height: $timeline-height
     width: 24 * $hour-width
+    height: 26px
 
     .hour
+        font: normal 13px Helvetica
         float: left
-        width: $hour-width
-        height: $timeline-height
+        width: $hour-width - 7px
+        border-left: 1px solid #444
+        padding: 5px 0 0 6px
+        height: 21px
 
     //.label
     //    width: 50px
     //    margin-left: -25px
     //    text-align: center
 
-.indicator
-    position: absolute
-    width: 1px
-    height: 100%
-    top: 0
-    background-color: $indicator-color
+.channels
+    width: 24 * $hour-width
+    overflow: hidden
 
 .channel
     position: relative
+    height: $channel-height
 
     .program
         position: absolute
-        height: $channel-height - 2px
-        border: 1px solid white
+        white-space: nowrap
+        height: $channel-height - 10px
+        padding: 8px 0 0 8px
+        border-left: 2px solid white
+        background-color: #eee
+        font: normal 13px/15px Helvetica
+        overflow: hidden
+        color: #555
+
+        &.past
+            background-color: #ececec
+            color: #aaa
+
+        &.current
+            background-color: #ddd
+            color: #444
+
+.indicator
+    position: absolute
+    width: 1px
+    height: 100%
+    top: 0
+    background-color: $indicator-color