forked from 0x2620/pandora
first version of new upload interface
This commit is contained in:
parent
8feed54bf9
commit
6c013ebc92
20 changed files with 966 additions and 102 deletions
|
|
@ -1,10 +1,15 @@
|
|||
'use strict';
|
||||
|
||||
pandora.ui.tasksDialog = function() {
|
||||
pandora.ui.tasksDialog = function(options) {
|
||||
options = Ox.extend({
|
||||
tasks: 'all'
|
||||
}, options || {});
|
||||
|
||||
var canceling = [],
|
||||
|
||||
timeout,
|
||||
clientItems = [], serverItems = [], listItems = [],
|
||||
|
||||
clientTimeout, serverTimeout,
|
||||
|
||||
$list = Ox.TableList({
|
||||
columns: [
|
||||
|
|
@ -13,6 +18,16 @@ pandora.ui.tasksDialog = function() {
|
|||
title: Ox._('ID'),
|
||||
visible: false
|
||||
},
|
||||
{
|
||||
format: function(value) {
|
||||
return Ox.encodeHTMLEntities(value);
|
||||
},
|
||||
id: 'user',
|
||||
operator: '+',
|
||||
title: Ox._('User'),
|
||||
visible: false,
|
||||
width: 144
|
||||
},
|
||||
{
|
||||
format: function(value) {
|
||||
return Ox.encodeHTMLEntities(value);
|
||||
|
|
@ -21,7 +36,7 @@ pandora.ui.tasksDialog = function() {
|
|||
operator: '+',
|
||||
title: Ox._('Title'),
|
||||
visible: true,
|
||||
width: 256
|
||||
width: 288
|
||||
},
|
||||
{
|
||||
format: function(value) {
|
||||
|
|
@ -49,62 +64,129 @@ pandora.ui.tasksDialog = function() {
|
|||
width: 144
|
||||
},
|
||||
{
|
||||
format: function(value) {
|
||||
return Ox.toTitleCase(value);
|
||||
format: function(value, data) {
|
||||
return {
|
||||
'pending': 'Uploading (Queued)',
|
||||
'uploading': 'Uploading' + (
|
||||
data.progress === void 0 ? '' : ' (' + (
|
||||
data.progress === 0 ? 'Queued'
|
||||
: data.progress + '%'
|
||||
) + ')'
|
||||
),
|
||||
'queued': $tasksSelect.value() == 'all'
|
||||
? 'Processing (Queued)'
|
||||
: 'Finished',
|
||||
'processing': 'Processing',
|
||||
'canceled': 'Canceled',
|
||||
'failed': 'Failed',
|
||||
'finished': 'Finished'
|
||||
}[value] || value;
|
||||
},
|
||||
id: 'status',
|
||||
operator: '+',
|
||||
sort: function(value) {
|
||||
return [
|
||||
'queued', 'uploading', 'importing', 'processing',
|
||||
'pending', 'uploading', 'queued', 'processing',
|
||||
'canceled', 'failed', 'finished'
|
||||
].indexOf(value);
|
||||
},
|
||||
title: Ox._('Status'),
|
||||
visible: true,
|
||||
width: 96
|
||||
width: 176
|
||||
},
|
||||
{
|
||||
id: 'progress',
|
||||
title: Ox._('Progress'),
|
||||
visible: false
|
||||
}
|
||||
|
||||
],
|
||||
columnsVisible: true,
|
||||
items: [],
|
||||
items: listItems,
|
||||
sort: [{key: 'ended', operator: '-'}],
|
||||
unique: 'id'
|
||||
}).bindEvent({
|
||||
select: updateButton
|
||||
select: updateButton,
|
||||
open: function(data) {
|
||||
var item;
|
||||
if (data.ids.length == 1) {
|
||||
item = listItems.filter(function(item) {
|
||||
return item.id == data.ids[0];
|
||||
})[0];
|
||||
if (item && item.item) {
|
||||
that.close();
|
||||
pandora.UI.set({
|
||||
item: item.item,
|
||||
itemView: 'info'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}),
|
||||
|
||||
$sidebar = Ox.Element().css({
|
||||
margin: '4px'
|
||||
}),
|
||||
|
||||
$checkbox = Ox.Checkbox({
|
||||
title: Ox._('Show All Tasks')
|
||||
$tasksSelect = Ox.Select({
|
||||
items: [
|
||||
{id: 'uploads', title: Ox._('Show Uploads')},
|
||||
{id: 'all', title: Ox._('Show All Tasks')}
|
||||
],
|
||||
value: options.tasks,
|
||||
width: 128
|
||||
}).css({
|
||||
display: true || pandora.site.capabilities.canSeeAllTasks[
|
||||
pandora.user.level
|
||||
] ? 'block' : 'none',
|
||||
margin: '4px'
|
||||
}).bindEvent({
|
||||
change: getItems
|
||||
change: updateList
|
||||
})
|
||||
.appendTo($sidebar),
|
||||
|
||||
$usersSelect = Ox.Select({
|
||||
items: [
|
||||
{id: 'my', title: Ox._('Show My Tasks')},
|
||||
{id: 'all', title: Ox._('Show All Users')}
|
||||
],
|
||||
width: 128
|
||||
}).css({
|
||||
display: pandora.site.capabilities.canSeeAllTasks[
|
||||
pandora.user.level
|
||||
] ? 'block' : 'none',
|
||||
margin: '8px 4px 4px 4px'
|
||||
}).bindEvent({
|
||||
change: function(data) {
|
||||
$list[data.value == 'all' ? 'addColumn' : 'removeColumn']('user');
|
||||
$list.resizeColumn('title', data.value == 'all' ? 144 : 288);
|
||||
setTimeout(updateList);
|
||||
}
|
||||
})
|
||||
.appendTo($sidebar),
|
||||
|
||||
$button = Ox.Button({
|
||||
disabled: true,
|
||||
title: Ox._('Cancel Task'),
|
||||
width: 112
|
||||
width: 128
|
||||
}).css({
|
||||
margin: '4px',
|
||||
}).bindEvent({
|
||||
click: function() {
|
||||
$button.options({disabled: true});
|
||||
var ids = $list.options('selected').filter(canBeCanceled);
|
||||
canceling.push(ids);
|
||||
$button.options({disabled: true});
|
||||
ids.forEach(function(id) {
|
||||
if (Ox.contains(
|
||||
['pending', 'uploading'], $list.value(id, 'status')
|
||||
)) {
|
||||
pandora.uploadQueue.remove(id);
|
||||
}
|
||||
})
|
||||
pandora.api.cancelTask({
|
||||
id: ids
|
||||
}, function() {
|
||||
canceling = [];
|
||||
getItems();
|
||||
canceling = canceling.filter(function(id) {
|
||||
return !Ox.contains(ids, id);
|
||||
});
|
||||
getServerItems();
|
||||
});
|
||||
}
|
||||
}).appendTo($sidebar),
|
||||
|
|
@ -113,7 +195,7 @@ pandora.ui.tasksDialog = function() {
|
|||
elements: [
|
||||
{
|
||||
element: $list,
|
||||
size: 640
|
||||
size: 752
|
||||
},
|
||||
{
|
||||
element: $sidebar,
|
||||
|
|
@ -137,13 +219,16 @@ pandora.ui.tasksDialog = function() {
|
|||
content: $panel,
|
||||
height: 384,
|
||||
title: Ox._('Tasks'),
|
||||
width: 768
|
||||
width: 896
|
||||
})
|
||||
.bindEvent({
|
||||
close: function() {
|
||||
clearTimeout(timeout);
|
||||
clientTimeout && clearTimeout(clientTimeout);
|
||||
},
|
||||
open: getItems
|
||||
open: function() {
|
||||
getClientItems();
|
||||
getServerItems();
|
||||
}
|
||||
});
|
||||
|
||||
function canBeCanceled(id) {
|
||||
|
|
@ -153,15 +238,77 @@ pandora.ui.tasksDialog = function() {
|
|||
) && !Ox.contains(canceling, id);
|
||||
}
|
||||
|
||||
function getItems() {
|
||||
clearTimeout(timeout);
|
||||
pandora.api.getTasks($checkbox.value() ? {} : {
|
||||
function getClientItems(callback) {
|
||||
clearTimeout(clientTimeout);
|
||||
var uploads = pandora.uploadQueue.get();
|
||||
var uploadsById = {};
|
||||
uploads.forEach(function(upload) {
|
||||
uploadsById[upload.item.id] = (
|
||||
uploadsById[upload.item.id] || []
|
||||
).concat(upload);
|
||||
});
|
||||
clientItems = []
|
||||
Ox.forEach(uploadsById, function(uploads, id) {
|
||||
// FIXME: include upload.file.size
|
||||
var progress = Math.round(Ox.sum(uploads.map(function(upload) {
|
||||
return upload.data.progress / uploads.length;
|
||||
})) * 100);
|
||||
var status = uploads.map(function(upload) {
|
||||
return upload.data.status;
|
||||
});
|
||||
clientItems.push({
|
||||
ended: uploads.every(function(upload) {
|
||||
return upload.data.ended;
|
||||
}) ? Ox.max(uploads.map(function(upload) {
|
||||
return upload.data.ended;
|
||||
})) : '',
|
||||
id: id,
|
||||
progress: progress,
|
||||
started: Ox.min(uploads.map(function(upload) {
|
||||
return upload.data.started;
|
||||
})),
|
||||
status: Ox.contains(status, 'uploading') ? 'uploading'
|
||||
: Ox.contains(status, 'pending') ? 'pending'
|
||||
: Ox.contains(status, 'canceled') ? 'canceled'
|
||||
: 'queued',
|
||||
title: uploads[0].item.title,
|
||||
user: pandora.user.username
|
||||
});
|
||||
});
|
||||
clientTimeout = setTimeout(getClientItems, 1000);
|
||||
updateValues();
|
||||
callback && callback();
|
||||
}
|
||||
|
||||
function getListItems() {
|
||||
var allTasks = $tasksSelect.value() == 'all',
|
||||
uploading = allTasks
|
||||
? ['pending', 'uploading']
|
||||
: ['pending', 'uploading', 'queued'],
|
||||
items = clientItems.filter(function(item) {
|
||||
return Ox.contains(uploading, item.status);
|
||||
}),
|
||||
items = serverItems.filter(function(item) {
|
||||
return allTasks ? (
|
||||
Ox.getIndex(items, 'id', item.item) == -1
|
||||
|| item.user != pandora.user.username
|
||||
) : (
|
||||
Ox.getIndex(items, 'id', item.item) == -1
|
||||
&& Ox.getIndex(clientItems, 'id', item.item) > -1
|
||||
);
|
||||
}).concat(items);
|
||||
return items;
|
||||
}
|
||||
|
||||
function getServerItems(callback) {
|
||||
clearTimeout(serverTimeout);
|
||||
pandora.api.getTasks($usersSelect.value() == 'all' ? {} : {
|
||||
user: pandora.user.username
|
||||
}, function(result) {
|
||||
$list.options({items: result.data.items})
|
||||
updateButton()
|
||||
serverItems = result.data.items;
|
||||
serverTimeout = setTimeout(getServerItems, 10000);
|
||||
getClientItems(callback);
|
||||
});
|
||||
timeout = setTimeout(getItems, 15000);
|
||||
}
|
||||
|
||||
function updateButton() {
|
||||
|
|
@ -172,6 +319,31 @@ pandora.ui.tasksDialog = function() {
|
|||
});
|
||||
}
|
||||
|
||||
function updateList() {
|
||||
getServerItems(function() {
|
||||
listItems= getListItems();
|
||||
$list.options({items: listItems});
|
||||
updateButton();
|
||||
});
|
||||
}
|
||||
|
||||
function updateValues() {
|
||||
var currentListItems = getListItems(),
|
||||
hasNewItems = currentListItems.length != listItems.length;
|
||||
!hasNewItems && currentListItems.forEach(function(item) {
|
||||
if (Ox.getIndexById(listItems, item.id) == -1) {
|
||||
hasNewItems = true;
|
||||
} else if (!hasNewItems) {
|
||||
$list.value(item.id, 'progress', item.progress);
|
||||
$list.value(item.id, 'status', item.status);
|
||||
if (item.ended) {
|
||||
$list.value(item.id, 'ended', item.ended);
|
||||
}
|
||||
}
|
||||
});
|
||||
hasNewItems && updateList();
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue