Added option to select default channel list, and added 2 hours of margin on the edges

guide.coffee

@@ -2,12 +2,12 @@
 # Config
 #
 
-FETCH_URL = 'programs.php'
 HOUR_WIDTH = 200
 CHANNEL_LABEL_WIDTH = 180
 STORAGE_CHANNELS = 'tvgids-channels'
 STORAGE_PROGRAMS = 'tvgids-programs'
 DEFAULT_CHANNELS = _.map([1, 2, 3, 4, 31, 46, 92, 36, 37, 34, 29, 18], String)
+HOURS_BEFORE = HOURS_AFTER = 2
 
 #
 # Utils
@@ -81,7 +81,7 @@ ChannelList = Backbone.Collection.extend(
     fetchPrograms: (day) ->
         $('#loading-screen').show()
         $.getJSON(
-            FETCH_URL
+            'programs.php'
             channels: Settings.get('favourite_channels').join(','), day: day
             (channels) ->
                 _.each channels, (programs, id) ->
@@ -144,10 +144,11 @@ ProgramView = Backbone.View.extend(
         @$fav.attr('title', 'Als favoriet instellen')
         @updateFavlink()
 
-        left = time2px(Math.max(0, seconds_today(@model.get('start'))))
+        left = time2px(Math.max(-HOURS_BEFORE * 60 * 60,
+                                seconds_today(@model.get('start'))))
         width = time2px(seconds_today(@model.get('end'))) - left
         @$el.css(
-            left: left + 'px'
+            left: ((HOURS_BEFORE * HOUR_WIDTH) + left) + 'px'
             width: (width - 10) + 'px'
         )
 
@@ -265,7 +266,7 @@ AppView = Backbone.View.extend(
         if Settings.get('day') == 0
             left = time2px(seconds_today(Date.now())) + CHANNEL_LABEL_WIDTH - 1
             @$('.indicator')
-                .css('left', left + 'px')
+                .css(left: ((HOURS_BEFORE * HOUR_WIDTH) + left) + 'px')
                 .height(@$('.channels').height() - 2)
                 .show()
         else

index.php

@@ -20,6 +20,9 @@ function getwday($day) {
             <div class="indicator"></div>
             <div class="timeline-bg"></div>
             <div class="timeline">
+                <div class="hour">22:00</div>
+                <div class="hour">23:00</div>
+
                 <div class="hour">00:00</div>
                 <div class="hour">01:00</div>
                 <div class="hour">02:00</div>
@@ -44,6 +47,9 @@ function getwday($day) {
                 <div class="hour">21:00</div>
                 <div class="hour">22:00</div>
                 <div class="hour">23:00</div>
+
+                <div class="hour">00:00</div>
+                <div class="hour">01:00</div>
             </div>
         </div>
         <div id="channel-labels" class="channel-labels"></div>

settings.coffee

@@ -1,7 +1,8 @@
-STORAGE_NAME = 'tvgids-channels'
+STORAGE_CHANNELS = 'tvgids-channels'
+DEFAULT_CHANNELS = _.map([1, 2, 3, 4, 31, 46, 92, 36, 37, 34, 29, 18], String)
 
-visible = if localStorage.hasOwnProperty(STORAGE_NAME) \
-    then localStorage.getItem(STORAGE_NAME).split(';') \
+visible = if localStorage.hasOwnProperty(STORAGE_CHANNELS) \
+    then localStorage.getItem(STORAGE_CHANNELS).split(';') \
     else _.pluck(CHANNELS, 'id')
 
 _.each CHANNELS, (channel) ->
@@ -20,8 +21,11 @@ _.each CHANNELS, (channel) ->
 $('#select-channels').submit (e) ->
     e.preventDefault()
     selected = ($(i).val() for i in $('input', @) when $(i).is(':checked'))
-    localStorage.setItem(STORAGE_NAME, selected.join(';'))
+    localStorage.setItem(STORAGE_CHANNELS, selected.join(';'))
 
-setall = (c) -> $('#select-channels input').prop('checked', c).change()
+setall = (c) -> $('#select-channels input').prop(checked: c).change()
 $('#select-all').click -> setall(true)
 $('#select-none').click -> setall(false)
+$('#select-default').click ->
+    $('#select-channels input').each ->
+        $(@).prop(checked: _.contains(DEFAULT_CHANNELS, $(@).val())).change()

settings.php

@@ -26,8 +26,10 @@ function getwday($day) {
 
         <form id="select-channels" class="select-channels">
             <div class="options"></div>
-            <button id="select-all">Selecteer alle</button>
-            <button id="select-none">Selecteer geen</button>
+            <span class="select-label">Selecteer:</span>
+            <button id="select-all">Alle</button>
+            <button id="select-none">Geen</button>
+            <button id="select-default">Standaard</button>
         </form>
 
         <script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>

style.sass

@@ -3,6 +3,8 @@ $hour-width: 200px
 $channel-height: 34px
 $header-height: 64px
 $channel-label-width: 180px
+$hours-before: 2
+$hours-after: 2
 
 html, body
     width: 100%
@@ -56,7 +58,7 @@ html, body
     background-color: #fdfdfd
 
 .timeline
-    width: 24 * $hour-width
+    width: ($hours-before + 24 + $hours-after) * $hour-width
     height: 26px
     position: absolute
     top: 38px
@@ -78,7 +80,7 @@ html, body
 
 .channels
     margin: $header-height 0 0 ($channel-label-width - 1px)
-    width: 24 * $hour-width
+    width: ($hours-before + 24 + $hours-after) * $hour-width
     overflow: hidden
 
 .channel
@@ -219,3 +221,7 @@ $details-width: 480px
         strong
             display: inline-block
             width: 70px
+
+.select-label
+    margin-left: 10px
+    font: 13px/17px Arial