diff --git a/source/Ox.UI/js/Form/Ox.Checkbox.js b/source/Ox.UI/js/Form/Ox.Checkbox.js index 380f6c6c..856ca643 100644 --- a/source/Ox.UI/js/Form/Ox.Checkbox.js +++ b/source/Ox.UI/js/Form/Ox.Checkbox.js @@ -39,8 +39,8 @@ Ox.Checkbox = function(options, self) { if (self.options.title) { self.options.width != 'auto' && that.css({ - width: self.options.width + 'px' - }); + width: self.options.width + 'px' + }); self.$title = new Ox.Label({ disabled: self.options.disabled, id: self.options.id + 'Label', @@ -107,6 +107,11 @@ Ox.Checkbox = function(options, self) { return that; } + // fixme: added for forms, duplicated, checked() shouldn't be neccessary + that.value = function() { + return self.options.checked; + } + return that; }; diff --git a/source/Ox.UI/js/Video/Ox.FilesView.js b/source/Ox.UI/js/Video/Ox.FilesView.js index 04100374..0fcc7cab 100644 --- a/source/Ox.UI/js/Video/Ox.FilesView.js +++ b/source/Ox.UI/js/Video/Ox.FilesView.js @@ -18,6 +18,8 @@ Ox.FilesView = function(options, self) { }) .options(options || {}); + self.selected = []; + self.$toolbar = new Ox.Bar({ size: 24 }); @@ -152,32 +154,153 @@ Ox.FilesView = function(options, self) { select: selectFiles }); - self.$instancesList = new Ox.Element() + self.$instancesList = Ox.Element() .html('No files selected'); - that.$element = new Ox.SplitPanel({ + self.$movieLabel = Ox.Label({ + textAlign: 'center', + title: 'Move Selected Files to Another Movie', + width: 240 + }) + .css({margin: '8px'}); + + ['title', 'director', 'year', 'id'].forEach(function(key) { + self['$' + key + 'Input'] = Ox.Input({ + clear: true, + id: key, + label: key == 'id' ? 'ID' : Ox.toTitleCase(key), + labelWidth: 64, + width: 240 + }) + .bindEvent({ + change: function(data) { + var conditions; + if (data.value.length) { + if (key == 'id') { + conditions = [{key: 'id', value: data.value, operator: '='}] + } else { + conditions = Ox.map(['title', 'director', 'year'], function(key) { + var value = self['$' + key + 'Input'].options('value') + return value.length ? {key: key, value: value, operator: '='} : null; + }) + } + pandora.api.find({ + keys: ['title', 'director', 'year', 'id'], + query: { + conditions: conditions, + operator: '&' + }, + range: [0, 2] + }, function(result) { + var length = result.data.items.length; + if (length == 0) { + if (key != 'id') { + self.$idInput.options({value: ''}); + } + } else if (result.data.items.length == 1) { + ['title', 'director', 'year', 'id'].forEach(function(key) { + self['$' + key + 'Input'].options({ + value: key == 'director' + ? result.data.items[0][key].join(', ') + : result.data.items[0][key] + }); + }); + } else { + self.$idInput.options({value: ''}); + } + }) + } + } + }); + }); + + self.$checkbox = Ox.Checkbox({ + checked: false, + id: 'go', + title: 'Go to this movie after moving files', // fixme: wrong, can be 'Go to video' etc + width: 240 + }); + + self.$movieForm = Ox.Form({ + items: [ + self.$titleInput, + self.$directorInput, + self.$yearInput, + self.$idInput, + self.$checkbox + ], + width: 240 + }) + .css({margin: '8px'}); + + self.$clearButton = Ox.Button({ + title: 'Clear', + width: 116 + }) + .css({margin: '0 4px 4px 8px'}) + .bindEvent({ + click: function() { + ['title', 'director', 'year', 'id'].forEach(function(key) { + self['$' + key + 'Input'].options({value: ''}) + }); + } + }); + + self.$moveButton = Ox.Button({ + disabled: true, + title: 'Move', + width: 116 + }) + .css({margin: '0 4px 4px 4px'}); + + self.$moviePanel = Ox.Element() + .append(self.$movieLabel) + .append(self.$movieForm) + .append(self.$clearButton) + .append(self.$moveButton); + + that.$element = Ox.SplitPanel({ elements: [ { - element: self.$toolbar, - size: 24 + element: Ox.SplitPanel({ + elements: [ + { + element: self.$toolbar, + size: 24 + }, + { + element: self.$filesList + }, + { + element: self.$instancesList, + size: 80 + } + ], + orientation: 'vertical' + }) }, { - element: self.$filesList - }, - { - element: self.$instancesList, - size: 80 + collapsible: true, + element: self.$moviePanel, + size: 256 } ], - orientation: 'vertical' + orientation: 'horizontal' }); function openFiles(event, data) { - Ox.print('........', JSON.stringify(self.$filesList.value(data.ids[0], 'instances')) + Ox.print('........', JSON.stringify(self.$filesList.value(data.ids[0], 'instances'))) } - function selectFiles(event, data) { - Ox.print('........', JSON.stringify(self.$filesList.value(data.ids[0], 'instances')) + function selectFiles(data) { + self.selected = data.ids; + updateForm(); + } + + function updateForm() { + self.$moveButton.options({ + disabled: self.selected.length === 0 + }); } return that;