Added details panel

details.php

+<?php
+assert(isset($_GET['id']));
+assert(is_numeric($_GET['id']));
+$url = 'http://www.tvgids.nl/programma/' . $_GET['id'];
+$page = file_get_contents($url);
+
+preg_match('/<div\s+id="prog-content">\s*(.*?)\s*<div\s+class="prog-functionbar">/s', $page, $m1);
+assert($m1);
+$description = trim(strip_tags($m1[1], '<p><strong><em><b><i><font><a><span>'));
+$description = str_replace('showVideoPlaybutton()', '', $description);
+$description = preg_replace('/\s+/', ' ', $description);
+
+preg_match('/<ul\s+id="prog-info-content-colleft">\s*(.*?)\s*<\/ul>/s', $page, $m2);
+assert($m2);
+preg_match_all('/<li><strong>(\w+):<\/strong>(.*?)<\/li>/', $m2[1], $m3);
+assert($m3);
+$props = array();
+foreach ($m3[1] as $i => $name)
+    $props[] = array('name' => $name, 'value' => $m3[2][$i]);
+
+echo json_encode(array(
+    'description' => $description,
+    'properties' => $props
+));
+?>

guide.coffee

@@ -42,6 +42,7 @@ Channel = Backbone.Model.extend(
 
 Program = Backbone.Model.extend(
     defaults:
+        id: null
         title: 'Some program'
         genre: ''
         sort: ''
@@ -82,6 +83,7 @@ ChannelList = Backbone.Collection.extend(
                     channel = Channels.findWhere(id: id)
                     channel.set(programs: (
                         new Program(
+                            id: p.db_id
                             title: p.titel
                             genre: p.genre
                             sort: p.soort
@@ -125,6 +127,7 @@ ProgramView = Backbone.View.extend(
 
     events:
         'click .favlink': 'toggleFavourite'
+        'click': -> Settings.set(selected_program: @model.get('id'))
 
     initialize: ->
         $('<span class="title"/>').text(@model.get('title')).appendTo(@el)
@@ -145,8 +148,9 @@ ProgramView = Backbone.View.extend(
 
         @listenTo(Settings, 'change:favourite_programs', @updateFavlink)
 
-    toggleFavourite: ->
+    toggleFavourite: (e) ->
         Settings.toggleFavouriteProgram(@model.get('title'))
+        e.stopPropagation()
 
     updateFavlink: ->
         isfav = Settings.isFavouriteProgram(@model.get('title'))
@@ -161,7 +165,7 @@ ProgramView = Backbone.View.extend(
 )
 
 ChannelLabelsView = Backbone.View.extend(
-    el: $('.channel-labels')
+    el: $('#guide .channel-labels')
 
     initialize: (options) ->
         @listenTo(Channels, 'reset', @addChannels)
@@ -182,6 +186,34 @@ ChannelLabelsView = Backbone.View.extend(
         @$('#label-' + channel.get('id')).toggle(channel.get('visible'))
 )
 
+ProgramDetailsView = Backbone.View.extend(
+    el: $('#program-details')
+    template: _.template($('#details-template').html())
+
+    events:
+        'click .bg': -> Settings.set(selected_program: null)
+
+    initialize: (options) ->
+        @listenTo(Settings, 'change:selected_program', @toggleDetails)
+
+    toggleDetails: ->
+        id = Settings.get('selected_program')
+
+        if id
+            $('#loading-screen').show()
+            $.getJSON(
+                'details.php'
+                id: id
+                (data) =>
+                    $('#loading-screen').hide()
+                    @$el.show()
+                    @$('.content').html(@template(_.extend(id: id, data)))
+            )
+        else
+            @$el.hide()
+            @$('.content').empty()
+)
+
 AppView = Backbone.View.extend(
     el: $('#guide')
 
@@ -196,6 +228,7 @@ AppView = Backbone.View.extend(
         @listenTo(Settings, 'change:day', @fetchPrograms)
 
         @labelview = new ChannelLabelsView(app: @)
+        @detailsview = new ProgramDetailsView(app: @)
 
         $('#beforeyesterday').click(-> Settings.set(day: -2))
         $('#yesterday').click(-> Settings.set(day: -1))
@@ -254,6 +287,7 @@ Settings = new (Backbone.Model.extend(
         favourite_channels: load_stored_list(STORAGE_CHANNELS,
                                              _.pluck(CHANNELS, 'id'))
         favourite_programs: load_stored_list(STORAGE_PROGRAMS, [])
+        selected_program: null
 
     toggleFavouriteProgram: (title) ->
         list = @get('favourite_programs')

index.php

@@ -64,6 +64,25 @@ function getwday($day) {
             <a href="settings.php" class="navitem">Selecteer zenders</a>
         </div>
 
+        <div id="program-details" class="program-details">
+            <div class="bg"></div>
+            <div class="content"></div>
+        </div>
+
+        <script type="text/template" id="details-template">
+            <ul class="properties">
+                <% _.each(properties, function(p) { %>
+                <li>
+                    <strong><%= p.name %>:</strong>
+                    <%= p.value %>
+                </li>
+                <% }) %>
+            </ul>
+            <div class="description"><%= description %></div>
+            Zie ook de <a href="http://www.tvgids.nl/programma/<%= id %>"
+                target="_blank">details</a> op tvgids.nl.
+        </script>
+
         <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="lib/backbone-min.js" type="text/javascript"></script>

style.sass

@@ -169,7 +169,7 @@ html, body
 
 $loader-size: 66px
 
-.loading-screen
+.loading-screen, .program-details
     display: none
     position: fixed
     width: 100%
@@ -183,11 +183,32 @@ $loader-size: 66px
         background-color: #000
         opacity: 0.8
 
-    .loader
-        position: absolute
-        width: $loader-size
-        height: $loader-size
-        top: 50%
-        left: 50%
-        margin: (-$loader-size / 2) 0 0 (-$loader-size / 2)
-        background: url("loading.gif") no-repeat left top
+.loading-screen .loader
+    position: absolute
+    width: $loader-size
+    height: $loader-size
+    top: 50%
+    left: 50%
+    margin: (-$loader-size / 2) 0 0 (-$loader-size / 2)
+    background: url("loading.gif") no-repeat left top
+
+$details-width: 480px
+
+.program-details .content
+    position: absolute
+    background: white
+    top: 50%
+    left: 50%
+    width: $details-width
+    margin: -150px 0 0 (-$details-width / 2)
+    border-radius: 6px
+    padding: 10px 15px
+    font: 12px/18px Helvetica
+
+    .properties
+        padding-left: 15px
+        margin-top: 1px
+
+        strong
+            display: inline-block
+            width: 70px