Instead of an 'expander' column in the EPG grid, pop up a window when user clicks

on a row.
The window contain all details about the program and buttons for recording, etc.

webui/extjs.c

@@ -839,10 +839,18 @@ extjs_epg(http_connection_t *hc, const char *remain, void *opaque)
 
     m = htsmsg_create();
 
-    if(e->e_channel != NULL)
+    if(e->e_channel != NULL) {
       htsmsg_add_str(m, "channel", e->e_channel->ch_name);
-    htsmsg_add_str(m, "title", e->e_title);
-    htsmsg_add_str(m, "description", e->e_desc);
+      if(e->e_channel->ch_icon != NULL)
+	htsmsg_add_str(m, "chicon", e->e_channel->ch_icon);
+    }
+
+    if(e->e_title != NULL)
+      htsmsg_add_str(m, "title", e->e_title);
+
+    if(e->e_desc != NULL)
+      htsmsg_add_str(m, "description", e->e_desc);
+
     htsmsg_add_u32(m, "id", e->e_id);
     htsmsg_add_u32(m, "start", e->e_start);
     htsmsg_add_u32(m, "end", e->e_start + e->e_duration);

webui/static/app/epg.js

@@ -1,3 +1,40 @@
+
+tvheadend.epgDetails = function(event) {
+
+
+    var content = '';
+    
+    console.log(event);
+
+    if(event.chicon != null && event.chicon.length > 0)
+	content += '<img class="x-epg-chicon" src="' + event.chicon + '">';
+
+    content += '<div class="x-epg-title">' + event.title + '</div>';
+    content += '<div class="x-epg-desc">' + event.description + '</div>';
+
+    content += '<div class="x-epg-cgrp">' + event.contentgrp + '</div>';
+
+    var win = new Ext.Window({
+	title: event.title,
+        layout: 'fit',
+        width: 400,
+        height: 300,
+	constrainHeader: true,
+/*
+	buttons: [
+	    new Ext.Button({
+		text: "Record program"
+	    })
+	],
+*/
+	buttonAlign: 'center',
+	html: content,
+    });
+    win.show();
+
+}
+
+
 /**
  *
  */
@@ -10,6 +47,7 @@ tvheadend.epg = function() {
 	{name: 'channel'},
 	{name: 'title'},
 	{name: 'description'},
+	{name: 'chicon'},
         {name: 'start', type: 'date', dateFormat: 'U' /* unix time */},
         {name: 'end', type: 'date', dateFormat: 'U' /* unix time */},
         {name: 'duration'},
@@ -26,10 +64,6 @@ tvheadend.epg = function() {
 	remoteSort: true,
     });
 
-    var expander = new xg.RowExpander({
-        tpl : new Ext.Template('<div>{description}</div>')
-    });
-
     function renderDate(value){
 	var dt = new Date(value);
 	return dt.format('l H:i');
@@ -52,7 +86,6 @@ tvheadend.epg = function() {
     } 
 
     var epgCm = new Ext.grid.ColumnModel([
-	expander,
 	{
 	    width: 250,
 	    id:'title',
@@ -197,7 +230,6 @@ tvheadend.epg = function() {
 	title: 'Electronic Program Guide',
 	store: epgStore,
 	cm: epgCm,
-	plugins:[expander],
         viewConfig: {forceFit:true},
 	tbar: [
 	    epgFilterTitle,
@@ -223,6 +255,14 @@ tvheadend.epg = function() {
         })
 
     });
+    
+    panel.on('rowclick', rowclicked);
+
+
+    function rowclicked(grid, index) {
+	new tvheadend.epgDetails(grid.getStore().getAt(index).data);
+    }
+
 
     return panel;
 }

webui/static/app/ext.css

@@ -98,3 +98,23 @@
 .save {
     background-image:url(../icons/save.gif) !important;
 }
+
+
+.x-epg-title {
+    margin: 5px;
+    font:normal 15px arial, tahoma, helvetica, sans-serif;
+    font-weight:bold;
+}
+
+.x-epg-desc {
+    margin: 5px;
+}
+
+.x-epg-chicon {
+    float: right;
+    margin: 5px;
+}
+
+.x-epg-cgrp {
+    margin: 5px;
+}