Added settings panel with selectable favorite channels

Makefile

-ALL := style.css guide.js
+ALL := style.css guide.js settings.js
 
 .PHONY: all clean
 

guide.coffee

@@ -2,10 +2,10 @@
 # Config
 #
 
-#FETCH_URL = 'http://www.tvgids.nl/json/lists/programs.php'
 FETCH_URL = 'programs.php'
 HOUR_WIDTH = 200
 CHANNEL_LABEL_WIDTH = 180
+STORAGE_NAME = 'tvgids-channels'
 #SCROLL_MULTIPLIER = HOUR_WIDTH
 
 #
@@ -38,8 +38,8 @@ Program = Backbone.Model.extend(
         sort: ''
         start: 0
         end: 0
-        #article_id: null
-        #article_title: null
+        article_id: null
+        article_title: null
 )
 
 ChannelList = Backbone.Collection.extend(
@@ -47,30 +47,25 @@ ChannelList = Backbone.Collection.extend(
     comparator: (a, b) -> parseInt(a.get('id')) - parseInt(b.get('id'))
 
     initialize: (models, options) ->
-        @fetchVisible()
+        @visible = if localStorage.hasOwnProperty(STORAGE_NAME) \
+            then localStorage.getItem(STORAGE_NAME).split(',') else @pluck('id')
 
     fetch: ->
         @reset(CHANNELS)
         #@reset(CHANNELS.slice(0,3))
         #$.getJSON('channels.php', (data) => @reset(data))
+        @propagateVisible()
 
-    fetchVisible: ->
-        visible = if localStorage.hasOwnProperty('channels') \
-            then localStorage.getItem('channels').split(',') else @pluck('id')
-        @setVisible(visible)
+    propagateVisible: ->
+        for id in @visible
+            if @length and not @findWhere(id: id)
+                console.log 'not found:', id, typeof id, typeof @at(0).get('id')
+            @findWhere(id: id)?.set(visible: true)
 
-    saveVisible: ->
-        selected = (c.id for c in @channels if c.visible)
-        localStorage.setItem('channels', selected.join(','))
-
-    setVisible: (visible, save=false) ->
-        for id in visible
-            @findWhere(id: id).set(visible: true)
-
-        for id in _.difference(@pluck('id'), visible)
-            @findWhere(id: id).set(visible: false)
-
-        @saveVisible() if save
+        for id in _.difference(@pluck('id'), @visible)
+            if not @findWhere(id: id)
+                console.log 'not found:', id
+            @findWhere(id: id)?.set(visible: false)
 
     fetchPrograms: (day) ->
         $.getJSON(
@@ -86,8 +81,8 @@ ChannelList = Backbone.Collection.extend(
                             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
+                            article_id: p.artikel_id
+                            article_title: p.artikel_titel
                         ) for p in programs
                     ))
         )
@@ -100,7 +95,6 @@ ChannelList = Backbone.Collection.extend(
 ChannelView = Backbone.View.extend(
     tagName: 'div'
     className: 'channel'
-    #template: _.template($('#channel-template').html())
 
     initialize: ->
         @listenTo(@model, 'change:programs', @render)
@@ -153,11 +147,16 @@ ChannelLabelView = Backbone.View.extend(
     addChannels: ->
         @$el.empty()
         Channels.each((channel) ->
-            @$el.append('<div class="label">' + channel.get('name') + '</div>')
+            elem = $('<div id="label-' + channel.get('id') + '" class="label"/>')
+            elem.html(channel.get('name')).toggle(channel.get('visible')).appendTo(@el)
+            @listenTo(channel, 'change:visible', -> @toggleVisible(channel))
         , @)
 
     moveTop: (delta) ->
         @$el.css('top', (@$el.position().top - delta) + 'px')
+
+    toggleVisible: (channel) ->
+        @$('#label-' + channel.get('id')).toggle(channel.get('visible'))
 )
 
 AppView = Backbone.View.extend(

settings.coffee

+STORAGE_NAME = 'tvgids-channels'
+
+visible = if localStorage.hasOwnProperty(STORAGE_NAME) \
+    then localStorage.getItem(STORAGE_NAME).split(',') \
+    else _.pluck(CHANNELS, 'id')
+
+_.each CHANNELS, (channel) ->
+    is_visible = _.contains(visible, channel.id)
+
+    input = $('<input type="checkbox" name="channels[]" value="' + channel.id + '">')
+    input.attr('checked', is_visible)
+    input.change(-> $(@).parent().toggleClass('disabled', not $(@).is(':checked')))
+    input.change(-> $('#select-channels').submit())
+
+    elem = $('<label/>').html(channel.name)
+    elem.prepend(input)
+    elem.toggleClass('disabled', not is_visible)
+    elem.appendTo('#select-channels .options')
+
+$('#select-channels').submit (e) ->
+    e.preventDefault()
+    selected = ($(i).val() for i in $('input', @) when $(i).is(':checked'))
+    localStorage.setItem(STORAGE_NAME, selected.join(','))
+
+setall = (c) -> $('#select-channels input').prop('checked', c).change()
+$('#select-all').click -> setall(true)
+$('#select-none').click -> setall(false)

settings.html

+<!doctype html>
+<html>
+    <head>
+        <title>TV gids - Selecteer zenders</title>
+        <link href="style.css" type="text/css" rel="stylesheet">
+    </head>
+    <body>
+        <div class="navbar">
+            <a href="javascript:void(0);" id="yesterday" class="navitem disabled">Gisteren</a>
+            <a href="index.html" id="today" class="navitem">Vandaag</a>
+            <a href="javascript:void(0);" id="tomorrow" class="navitem disabled">Morgen</a>
+            <a href="settings.html" class="navitem active">Selecteer zenders</a>
+        </div>
+
+        <form id="select-channels" class="select-channels">
+            <div class="options"></div>
+            <button id="select-all">Selecteer alle</button>
+            <button id="select-none">Deselecteer alle</button>
+        </form>
+
+        <script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>
+        <script src="lib/underscore-min.js" type="text/javascript"></script>
+        <script src="channels.js" type="text/javascript"></script>
+        <script src="settings.js" type="text/javascript"></script>
+    </body>
+</html>

settings.js

+// Generated by CoffeeScript 1.3.3
+(function() {
+  var STORAGE_NAME, setall, visible;
+
+  STORAGE_NAME = 'tvgids-channels';
+
+  visible = localStorage.hasOwnProperty(STORAGE_NAME) ? localStorage.getItem(STORAGE_NAME).split(',') : _.pluck(CHANNELS, 'id');
+
+  _.each(CHANNELS, function(channel) {
+    var elem, input, is_visible;
+    is_visible = _.contains(visible, channel.id);
+    input = $('<input type="checkbox" name="channels[]" value="' + channel.id + '">');
+    input.attr('checked', is_visible);
+    input.change(function() {
+      return $(this).parent().toggleClass('disabled', !$(this).is(':checked'));
+    });
+    input.change(function() {
+      return $('#select-channels').submit();
+    });
+    elem = $('<label/>').html(channel.name);
+    elem.prepend(input);
+    elem.toggleClass('disabled', !is_visible);
+    return elem.appendTo('#select-channels .options');
+  });
+
+  $('#select-channels').submit(function(e) {
+    var i, selected;
+    e.preventDefault();
+    selected = (function() {
+      var _i, _len, _ref, _results;
+      _ref = $('input', this);
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        i = _ref[_i];
+        if ($(i).is(':checked')) {
+          _results.push($(i).val());
+        }
+      }
+      return _results;
+    }).call(this);
+    return localStorage.setItem(STORAGE_NAME, selected.join(','));
+  });
+
+  setall = function(c) {
+    return $('#select-channels input').prop('checked', c).change();
+  };
+
+  $('#select-all').click(function() {
+    return setall(true);
+  });
+
+  $('#select-none').click(function() {
+    return setall(false);
+  });
+
+}).call(this);

style.sass

@@ -31,6 +31,10 @@ html, body
             color: #fff
             background-color: #1a1a1a
 
+        &.disabled
+            color: #676767
+            cursor: default
+
 .guide
     width: 100%
     height: 100%
@@ -119,3 +123,18 @@ html, body
         height: $channel-height - 10px
         margin-bottom: 2px
         border-right: 1px solid #bbb
+
+.select-channels
+    margin-top: 38px
+
+    label
+        padding: 5px
+        margin: 4px 4px 0 0
+        display: inline-block
+        background-color: #f1f1f1
+
+        &.disabled
+            opacity: 0.5
+
+    button
+        margin: 6px 0 6px 6px