From 6cd9773f795710236de60135c6fe325d681d6d25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20=C3=96man?= <andreas@lonelycoder.com>
Date: Sun, 14 Sep 2008 21:02:03 +0000
Subject: [PATCH] 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            | 14 ++++++++---
 webui/static/app/epg.js  | 52 +++++++++++++++++++++++++++++++++++-----
 webui/static/app/ext.css | 20 ++++++++++++++++
 3 files changed, 77 insertions(+), 9 deletions(-)

diff --git a/webui/extjs.c b/webui/extjs.c
index 1aca6a4d..695adf21 100644
--- a/webui/extjs.c
+++ b/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);
diff --git a/webui/static/app/epg.js b/webui/static/app/epg.js
index 9c05c30b..1be5bae2 100644
--- a/webui/static/app/epg.js
+++ b/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;
 }
diff --git a/webui/static/app/ext.css b/webui/static/app/ext.css
index 2d6735c5..f58083a1 100644
--- a/webui/static/app/ext.css
+++ b/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;
+}