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.
This commit is contained in:
parent
0dd2efe9f8
commit
6cd9773f79
3 changed files with 77 additions and 9 deletions
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue