update indiancinema info view, id dialog and metadata dialog

This commit is contained in:
rolux 2013-02-28 09:57:03 +00:00
parent d10c7d1acb
commit 71209541ed
3 changed files with 103 additions and 80 deletions

View file

@ -2,7 +2,11 @@
pandora.ui.idDialog = function(data) { pandora.ui.idDialog = function(data) {
var dialogHeight = Math.round((window.innerHeight - 48) * 0.9), data = Ox.clone(data, true);
var originalData = Ox.clone(data, true),
dialogHeight = Math.round((window.innerHeight - 48) * 0.9),
dialogWidth = Math.round(window.innerWidth * 0.9), dialogWidth = Math.round(window.innerWidth * 0.9),
formWidth = getFormWidth(), formWidth = getFormWidth(),
@ -33,13 +37,13 @@ pandora.ui.idDialog = function(data) {
.bindEvent({ .bindEvent({
click: function() { click: function() {
that.close(); that.close();
pandora.$ui.metadataDialog = pandora.ui.metadataDialog(data).open(); pandora.$ui.metadataDialog = pandora.ui.metadataDialog(originalData).open();
} }
}) }),
{}, {},
Ox.Button({ Ox.Button({
id: 'cancel', id: 'cancel',
title: 'Don\'t Update' title: 'Don\'t Update IMDb ID'
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
@ -49,7 +53,7 @@ pandora.ui.idDialog = function(data) {
Ox.Button({ Ox.Button({
disabled: true, disabled: true,
id: 'update', id: 'update',
title: 'Update' title: 'Update IMDb ID'
}) })
.bindEvent({ .bindEvent({
click: updateId click: updateId
@ -79,13 +83,13 @@ pandora.ui.idDialog = function(data) {
var get = {}; var get = {};
['title', 'director', 'year'].forEach(function(key) { ['title', 'director', 'year'].forEach(function(key) {
if (!Ox.isEmpty(data[key])) { if (!Ox.isEmpty(data[key])) {
get[key] = data.key; get[key] = data[key];
} }
}); });
pandora.api.getIds(get, function(result) { pandora.api.getIds(get, function(result) {
var checkboxes, var checkboxes = [],
$content = Ox.Element() $content = Ox.Element()
.css({padding: '12px', overflowY: 'auto'}); .css({padding: '13px', overflowY: 'auto'});
if (result.data.items) { if (result.data.items) {
['title', 'director', 'year'].forEach(function(key) { ['title', 'director', 'year'].forEach(function(key) {
Ox.Input({ Ox.Input({
@ -96,33 +100,50 @@ pandora.ui.idDialog = function(data) {
: data[key], : data[key],
width: formWidth width: formWidth
}) })
.css({display: 'inline-block', margin: '4px'}) .css({display: 'inline-block', margin: '3px'})
.bindEvent({ .bindEvent({
change: function(data) { change: function(data_) {
data[key] = data.value; data[key] = key == 'director'
? data_.value.split(', ')
: data_.value;
that.options({content: $loading});
getIds(); getIds();
} }
}) })
.appendTo($content); .appendTo($content);
}); });
$('<div>')
.css({width: '1px', height: '8px'})
.appendTo($content);
if (!data.imdbId) { if (!data.imdbId) {
checkboxes.push( checkboxes.push(
{id: 'none', title: getTitle(data)} {id: 'none', title: getTitle(data)}
); );
} else if (Ox.getIndexById(result.data.items, data.imdbId) == -1) {
checkboxes.push(
{id: data.imdbId, title: getTitle(data)}
);
} }
checkboxes = checkboxes.concat(result.data.items.map(item) { (
data.imdbId
&& Ox.getIndexById(result.data.items, data.imdbId) == -1
? pandora.api.findId
: Ox.noop
)({id: data.imdbId}, function(result_) {
result_ && Ox.print(result_, '...', result_ && result_.data.items)
if (result_ && result_.data.items) {
checkboxes.push(
{id: data.imdbId, title: getTitle(result_.data.items[0])}
)
}
checkboxes = checkboxes.concat(
result.data.items.map(function(item) {
return {id: item.id, title: getTitle(item)}; return {id: item.id, title: getTitle(item)};
}); })
);
$checkboxGroup = Ox.CheckboxGroup({ $checkboxGroup = Ox.CheckboxGroup({
checkboxes: checkboxes, checkboxes: checkboxes,
type: 'list',
width: formWidth, width: formWidth,
value: !data.imdbId ? 'none' : data.imdbId value: !data.imdbId ? 'none' : data.imdbId
}) })
.css({display: 'inline-block', margin: '4px'}) .css({display: 'inline-block', margin: '3px'})
.bindEvent({ .bindEvent({
change: updateButton change: updateButton
}) })
@ -130,14 +151,14 @@ pandora.ui.idDialog = function(data) {
checkboxes.forEach(function(checkbox, index) { checkboxes.forEach(function(checkbox, index) {
if (checkbox.id != 'none') { if (checkbox.id != 'none') {
Ox.Button({ Ox.Button({
title: 'arrowLeft', title: 'arrowRight',
tooltip: 'View on IMDb', tooltip: 'View on IMDb',
type: 'image' type: 'image'
}) })
.css({ .css({
position: 'absolute', position: 'absolute',
top: 88 + index * 24 + 'px', top: 96 + index * 24 + 'px',
right: '16px' right: 16 + Ox.UI.SCROLLBAR_SIZE + 'px'
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
@ -152,13 +173,14 @@ pandora.ui.idDialog = function(data) {
}) })
that.options({content: $content}); that.options({content: $content});
updateButton(); updateButton();
});
} }
}); });
} }
function getTitle(data) { function getTitle(data) {
return Ox.filter([ return Ox.filter([
data.imdbId, data.imdbId || data.id,
data.title + (data.originalTitle ? ' (' + data.originalTitle + ')' : ''), data.title + (data.originalTitle ? ' (' + data.originalTitle + ')' : ''),
data.director ? data.director.join(', ') : '', data.director ? data.director.join(', ') : '',
data.year data.year
@ -174,14 +196,18 @@ pandora.ui.idDialog = function(data) {
function updateButton() { function updateButton() {
that[ that[
$checkboxGroup.options('value') == data.imdbId $checkboxGroup.options('value') == data.imdbId || (
? 'disableButton' $checkboxGroup.options('value') == 'none' && !data.imdbId
: 'enableButton' ) ? 'disableButton' : 'enableButton'
]('update'); ]('update');
} }
function updateId() { function updateId() {
pandora.api.edit({id: data.id, imdbId: 'foo'}, function(result) { that.options({content: $loading}).disableButtons();
pandora.api.edit({
id: data.id,
imdbId: $checkboxGroup.options('value')
}, function(result) {
that.close(); that.close();
pandora.updateItemContext(); pandora.updateItemContext();
pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.contentPanel.replaceElement(1,

View file

@ -276,8 +276,7 @@ pandora.ui.infoView = function(data) {
items: [ items: [
{ {
id: 'imdb', id: 'imdb',
title: 'Update IMDb ID...', title: 'Update IMDb ID...'
disabled: true
}, },
{ {
id: 'metadata', id: 'metadata',
@ -290,17 +289,17 @@ pandora.ui.infoView = function(data) {
disabled: !canRemove disabled: !canRemove
} }
], ],
title: 'Edit...' title: 'Edit...',
width: 128 width: 128
}) })
.css({marginBottom: '4px'}) .css({marginBottom: '4px'})
.bindEvent({ .bindEvent({
click: function(data) { click: function(data_) {
if (data.id == 'imdb') { if (data_.id == 'imdb') {
pandora.$ui.idDialog = pandora.ui.idDialog(Ox.clone(data, true)).open(); pandora.$ui.idDialog = pandora.ui.idDialog(data).open();
} else if (data.id == 'metadata') { } else if (data_.id == 'metadata') {
pandora.$ui.metadataDialog = pandora.ui.metadataDialog(Ox.clone(data, true)).open(); pandora.$ui.metadataDialog = pandora.ui.metadataDialog(data).open();
} else if (data.id == 'delete') { } else if (data_.id == 'delete') {
pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open(); pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open();
} }
} }
@ -725,7 +724,7 @@ pandora.ui.infoView = function(data) {
[data.runtime ? 'show' : 'hide']() [data.runtime ? 'show' : 'hide']()
.appendTo($element); .appendTo($element);
} else if (key == 'imdbId') { } else if (key == 'imdbId') {
$imdb = $('<span>') $imdb = Ox.Element('<span>')
.appendTo($element); .appendTo($element);
pandora.createLinks($imdb); pandora.createLinks($imdb);
} }

View file

@ -92,7 +92,6 @@ pandora.ui.metadataDialog = function(data) {
return Ox.Dialog({ return Ox.Dialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
distabled: true,
id: 'switch', id: 'switch',
title: 'Update IMDb Id...' title: 'Update IMDb Id...'
}) })
@ -101,11 +100,11 @@ pandora.ui.metadataDialog = function(data) {
that.close(); that.close();
pandora.$ui.idDialog = pandora.ui.idDialog(data).open(); pandora.$ui.idDialog = pandora.ui.idDialog(data).open();
} }
}) }),
{}, {},
Ox.Button({ Ox.Button({
id: 'cancel', id: 'cancel',
title: 'Don\'t Update' title: 'Don\'t Update Metadata'
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
@ -115,7 +114,7 @@ pandora.ui.metadataDialog = function(data) {
Ox.Button({ Ox.Button({
disabled: true, disabled: true,
id: 'update', id: 'update',
title: 'Update...' title: 'Update Metadata...'
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
@ -211,7 +210,7 @@ pandora.ui.metadataDialog = function(data) {
pandora.api.getMetadata({id: data.imdbId, keys: keys.concat(['originalTitle'])}, function(result) { pandora.api.getMetadata({id: data.imdbId, keys: keys.concat(['originalTitle'])}, function(result) {
var $bar = Ox.Bar({size: 24}), var $bar = Ox.Bar({size: 24}),
$data = Ox.Element() $data = Ox.Element()
.css({padding: '12px', overflowY: 'auto'}), .css({padding: '13px', overflowY: 'auto'}),
$content = Ox.SplitPanel({ $content = Ox.SplitPanel({
elements: [ elements: [
{element: $bar, size: 24}, {element: $bar, size: 24},
@ -254,17 +253,14 @@ pandora.ui.metadataDialog = function(data) {
: [true, false]; : [true, false];
if (index > 0) { if (index > 0) {
$('<div>') $('<div>')
.css({ .css({width: '1px', height: '8px'})
height: '8px',
width: formWidth + 'px',
})
.appendTo($data); .appendTo($data);
} }
$label[key] = Ox.Label({ $label[key] = Ox.Label({
title: getTitle(key), title: getTitle(key),
width: formWidth width: formWidth
}) })
.css({display: 'inline-block', margin: '4px'}) .css({display: 'inline-block', margin: '3px 3px 5px 3px'})
.appendTo($data); .appendTo($data);
$input[key] = [data[key], imdb[key]].map(function(v, i) { $input[key] = [data[key], imdb[key]].map(function(v, i) {
return Ox.InputGroup({ return Ox.InputGroup({
@ -280,12 +276,14 @@ pandora.ui.metadataDialog = function(data) {
} }
}), }),
Ox.Input({ Ox.Input({
disabled: true,
value: formatValue(key, v), value: formatValue(key, v),
width: formWidth - 80 width: formWidth - 80
}) })
.bindEvent({ .bindEvent({
submit: function() { change: function() {
// on submit, revert to initial value // on change, revert to initial value
// (if above you remove disabled: true)
$input[key][i].options({value: [ $input[key][i].options({value: [
$input[key][i].options('value')[0], $input[key][i].options('value')[0],
formatValue(key, v) formatValue(key, v)
@ -297,7 +295,7 @@ pandora.ui.metadataDialog = function(data) {
{title: ['Current', 'Update'][i], width: 64} {title: ['Current', 'Update'][i], width: 64}
] ]
}) })
.css({display: 'inline-block', margin: '4px'}) .css({display: 'inline-block', margin: '3px'})
.appendTo($data); .appendTo($data);
}); });
}); });