openmedialibrary/static/js/peersPanel.js

626 lines
21 KiB
JavaScript
Raw Normal View History

2014-05-04 17:26:43 +00:00
'use strict';
oml.ui.peersPanel = function() {
2014-05-04 17:26:43 +00:00
var ui = oml.user.ui,
2014-05-04 17:26:43 +00:00
preferences = oml.user.preferences,
2014-05-04 17:26:43 +00:00
buttons = [
{id: 'send', title: Ox._('Send')},
{id: 'cancel', title: Ox._('Cancel')},
{id: 'accept', title: Ox._('Accept')},
{id: 'reject', title: Ox._('Reject')},
{id: 'remove', title: Ox._('Remove...')}
],
folders = [
{
id: 'peers',
title: Ox._('Your Peers'),
itemTitle: Ox._('No peers'),
text: Ox._('You don\'t have any peers yet.')
},
{
id: 'received',
title: Ox._('Received Requests'),
itemTitle: Ox._('No pending requests'),
2016-01-14 10:08:30 +00:00
text: Ox._('You haven\'t received any peering requests.')
2014-05-04 17:26:43 +00:00
},
{
id: 'sent',
title: Ox._('Sent Requests'),
itemTitle: Ox._('No pending requests'),
2016-01-14 10:08:30 +00:00
text: Ox._('You haven\'t sent any peering requests.')
2014-05-04 17:26:43 +00:00
},
{
id: 'others',
title: Ox._('Other Users'),
itemTitle: Ox._('No other users'),
text: Ox._('There are no other users in your extended network.')
}
],
peerIds = [],
users,
2016-01-17 10:43:36 +00:00
// FIXME: UGLY
$users = Ox.Element().css({
2016-01-17 10:43:36 +00:00
background: {
oxlight: 'rgb(240, 240, 240)',
oxmedium: 'rgb(144, 144, 145)',
oxdark: 'rgb(16, 16, 16)'
}[Ox.Theme()],
overflowX: 'hidden'
}),
2014-05-04 17:26:43 +00:00
2016-01-13 07:44:01 +00:00
$lists = [
renderSectionList({id: 'invitations'}).appendTo($users)
],
2014-05-04 17:26:43 +00:00
$folders = folders.map(function(folder) {
return Ox.CollapsePanel({
collapsed: false,
title: folder.title
})
.css({width: '256px'})
.appendTo($users);
}),
$user = Ox.Element(),
that = Ox.SplitPanel({
elements: [
{element: $users, size: 256},
{element: $user}
],
orientation: 'horizontal'
})
.bindEvent({
oml_page: function(data) {
if (data.value == 'peers') {
oml.bindEvent({peering: peering});
} else if (data.previousValue == 'peers') {
oml.unbindEvent({peering: peering});
}
}
2014-05-04 17:26:43 +00:00
});
2016-01-13 09:51:59 +00:00
2014-05-18 23:24:04 +00:00
var peering = Ox.throttle(function() {
updateUsers();
}, 1000);
if (oml.user.ui.page == 'peers') {
2016-01-13 09:51:59 +00:00
oml.bindEvent({peering: peering});
}
2014-05-18 23:24:04 +00:00
2014-05-04 17:26:43 +00:00
function renderSectionList(folder) {
var $list = Ox.TableList({
columns: [
{
format: function() {
return $('<img>')
.attr({
src: Ox.UI.getImageURL('symbolUser')
})
.css({
width: '10px',
height: '10px',
margin: '2px -2px 2px 0',
opacity: folder.id == 'invitations' ? 1 : 0.5
})
},
id: 'id',
visible: true,
width: 16
},
{
format: function(value) {
return folder.id == 'invitations'
? value
: '<span class="OxLight">' + value + '</span>'
},
id: 'title',
2015-06-06 11:05:28 +00:00
visible: true,
width: 240 - Ox.SCROLLBAR_SIZE
2014-05-04 17:26:43 +00:00
}
],
items: [
{
id: folder.id,
title: folder.id == 'invitations' ? Ox._('Invitations')
: Ox.getObjectById(folders, folder.id).itemTitle
},
],
sort: [{key: 'id', operator: '+'}],
unique: 'id'
})
.css({height: '16px'})
.bindEvent({
select: function(data) {
Ox.print('SELECT:', data)
2014-05-04 17:26:43 +00:00
if (data.ids.length) {
selectItem($list);
renderUser({section: data.ids[0]});
} else {
renderUser();
}
}
});
$list.$body.css({height: '16px'}); // FIXME!
return $list;
}
function renderUser(user) {
var $user = Ox.Element(),
$form = Ox.Element()
.addClass('OxSelectable OxTextPage')
.css({margin: '16px'})
.appendTo($user),
$warning = Ox.Element()
.css({margin: '32px 16px'}) // FIXME: WTF!
.appendTo($user),
$id, $buttons = [], $message, $nickname,
2014-05-04 17:26:43 +00:00
folder;
if (user && user.section) {
folder = Ox.getObjectById(folders, user.section);
}
if (folder) {
$('<div>')
.html(folder.text)
.appendTo($form);
} else if (user) {
if (user.section == 'invitations') {
$('<div>')
.html(
'To invite someone, just send her your public key – that\'s all she\'ll need to add you as a peer. '
+ 'Along with that, you may want to send a download link for Open Media Library, in case she doesn\'t have it yet.'
)
.appendTo($form);
Ox.Input({
readonly: true,
2014-05-04 17:26:43 +00:00
label: Ox._('Your Public Key'),
labelWidth: 128,
2016-01-13 08:20:03 +00:00
style: 'squared',
2014-05-04 17:26:43 +00:00
value: oml.user.id,
width: 480
})
.css({
marginTop: '8px'
})
.appendTo($form);
Ox.Input({
readonly: true,
2014-05-04 17:26:43 +00:00
label: Ox._('Download Link'),
labelWidth: 128,
2016-01-13 08:20:03 +00:00
style: 'squared',
2016-01-13 07:44:01 +00:00
value: 'https://openmedialibrary.com/#download',
2014-05-04 17:26:43 +00:00
width: 480
})
.css({
marginTop: '8px'
})
.appendTo($form);
$('<div>')
.html(
'If someone invites you, or if you know another user\'s public key, you can add her here.'
)
.css({
margin: '32px 0 8px 0'
})
.appendTo($form);
}
$nickname = Ox.Input({
2014-05-04 17:26:43 +00:00
label: Ox._('Nickname'),
labelWidth: 128,
2016-01-13 08:20:03 +00:00
style: 'squared',
2014-05-25 12:16:04 +00:00
value: user.nickname,
2014-05-04 17:26:43 +00:00
width: 480
})
.bindEvent({
2014-05-16 08:06:11 +00:00
change: function(data) {
if (user.section != 'invitations') {
oml.api.editUser({
id: user.id,
nickname: data.value
}, function(result) {
oml.renameUser(result.data)
// FIXME: ugly
Ox.forEach($lists, function($list) {
var selected = $list.options('selected');
if (selected.length) {
$list.value(user.id, 'name', result.data.name);
return false;
}
});
2014-05-25 12:44:07 +00:00
});
}
2014-05-04 17:26:43 +00:00
}
})
.appendTo($form);
if (user.section == 'invitations') {
$id = Ox.Input({
label: Ox._('Public Key'),
labelWidth: 128,
2016-01-13 08:20:03 +00:00
style: 'squared',
2014-05-04 17:26:43 +00:00
width: 480
})
.bindEvent({
change: function(data) {
var isOwn = data.value == oml.user.id,
isPeer = Ox.contains(peerIds, data.value),
isValid = oml.validatePublicKey(data.value),
2014-05-16 23:50:20 +00:00
peer = Ox.getObjectById(users, data.value),
readonly = isOwn || isPeer || !isValid;
2014-05-16 23:50:20 +00:00
$buttons[0].options({
readonly: readonly
2014-05-04 17:26:43 +00:00
});
if (data.value && readonly) {
2014-05-04 17:26:43 +00:00
$warning.html(
isOwn ? 'That\'s your own public key.'
: isPeer ? 'That\'s '
+ Ox.encodeHTMLEntities(peer.nickname || peer.username)
+ ' - you\'re already peered.'
: 'That\'s not a valid key.'
)
} else {
$warning.empty();
if (data.value) {
user.id = data.value;
}
}
}
})
.css({
marginTop: '8px'
})
.appendTo($form);
} else {
Ox.Input({
readonly: true,
2014-05-04 17:26:43 +00:00
label: Ox._('Username'),
labelWidth: 128,
2016-01-13 08:20:03 +00:00
style: 'squared',
2014-05-25 12:16:04 +00:00
value: user.username,
2014-05-04 17:26:43 +00:00
width: 480
})
.css({
marginTop: '8px'
})
.appendTo($form);
Ox.Input({
readonly: true,
label: Ox._('Public Key'),
labelWidth: 128,
2016-01-13 08:20:03 +00:00
style: 'squared',
value: user.id,
width: 480
})
.css({
marginTop: '8px'
})
.appendTo($form);
2014-05-04 17:26:43 +00:00
Ox.Input({
readonly: true,
2014-05-04 17:26:43 +00:00
label: Ox._('Contact'),
labelWidth: 128,
2016-01-13 08:20:03 +00:00
style: 'squared',
2014-05-04 17:26:43 +00:00
value: user.contact || '',
width: 480
})
.css({
marginTop: '8px'
})
.appendTo($form);
if (user.pending) {
Ox.Input({
readonly: true,
label: Ox._('Message'),
labelWidth: 128,
style: 'squared',
value: user.message || '',
width: 480
})
.css({
marginTop: '8px'
})
.appendTo($form);
}
2014-05-04 17:26:43 +00:00
}
Ox.Label({
textAlign: 'center',
2016-01-13 08:20:03 +00:00
style: 'squared',
2014-05-04 17:26:43 +00:00
title: user.peered ? Ox._('Remove Peer')
2016-01-13 08:20:03 +00:00
: user.pending == 'received' ? Ox._('Accept Peering Request')
: user.pending == 'sent' ? Ox._('Cancel Peering Request')
2014-05-04 17:26:43 +00:00
: Ox._('Send Peering Request'),
width: 480
})
.css({
marginTop: '32px'
})
.appendTo($form);
$message = Ox.Input({
label: Ox._('Message'),
labelWidth: 128,
placeholder: Ox._('none'),
2016-01-13 08:20:03 +00:00
style: 'squared',
2014-05-04 17:26:43 +00:00
width: 480
})
.css({
margin: '8px 0'
})
.appendTo($form);
$buttons = (
user.peered ? ['remove']
: user.pending == 'received' ? ['accept', 'reject']
: user.pending == 'sent' ? ['cancel']
: ['send']
).map(function(id, index) {
return Ox.Button({
2016-01-13 08:20:03 +00:00
style: 'squared',
2014-05-04 17:26:43 +00:00
title: Ox.getObjectById(buttons, id).title
})
.css({
float: 'right',
marginRight: index ? '8px' : 0
})
.bindEvent({
click: function() {
var data = {
id: user.id,
message: $message.value()
};
if (id == 'send') {
data.nickname = $nickname.value();
2014-05-04 17:26:43 +00:00
oml.api.requestPeering(data, function(result) {
2014-05-16 23:50:20 +00:00
Ox.Request.clearCache();
updateUsers(function() {
selectUser(user.id);
});
2014-05-04 17:26:43 +00:00
});
} else if (id == 'cancel') {
oml.api.cancelPeering(data, function(result) {
2014-05-16 23:50:20 +00:00
Ox.Request.clearCache();
updateUsers(function() {
selectUser(user.id);
});
2014-05-04 17:26:43 +00:00
});
} else if (id == 'accept') {
oml.api.acceptPeering(data, function(result) {
2014-05-16 23:50:20 +00:00
Ox.Request.clearCache();
updateUsers(function() {
selectUser(user.id);
});
2014-05-04 17:26:43 +00:00
});
} else if (id == 'reject') {
oml.api.rejectPeering(data, function(result) {
2014-05-16 23:50:20 +00:00
Ox.Request.clearCache();
updateUsers(function() {
selectUser(user.id);
});
2014-05-04 17:26:43 +00:00
});
} else if (id == 'remove') {
oml.ui.confirmDialog({
buttons: [
Ox.Button({
title: Ox._('No, Keep Peer')
}),
Ox.Button({
title: Ox._('Yes, Remove Peer')
})
],
title: Ox._('Remove Peering'),
content: Ox._('Are you sure you want to remove this peer?')
}, function() {
oml.api.removePeering(data, function(result) {
2014-05-16 23:50:20 +00:00
Ox.Request.clearCache();
updateUsers(function() {
selectUser(user.id);
});
2014-05-04 17:26:43 +00:00
});
});
}
}
})
.appendTo($form);
});
}
that.replaceElement(1, $user);
2014-05-04 17:26:43 +00:00
}
function renderUserList(folder) {
var $list = Ox.TableList({
columns: [
{
format: function(value, data) {
2014-05-18 23:24:04 +00:00
return oml.ui.statusIcon(data)
2014-05-04 17:26:43 +00:00
.css({
margin: '2px 3px 3px 0'
});
},
id: 'online',
visible: true,
width: 16
},
{
format: function(value) {
2014-05-25 12:16:04 +00:00
return Ox.encodeHTMLEntities(value);
2014-05-04 17:26:43 +00:00
},
2014-05-25 12:16:04 +00:00
id: 'name',
2014-05-04 17:26:43 +00:00
visible: true,
width: 240
}
],
items: folder.items,
max: 1,
sort: [{key: 'index', operator: '+'}],
sortable: folder.id == 'peers',
unique: 'id'
})
.css({
height: folder.items.length * 16 + 'px'
})
.bindEvent({
2014-05-25 12:44:07 +00:00
move: function(data) {
oml.api.sortUsers({
ids: data.ids
}, function(result) {
2014-05-25 18:06:12 +00:00
oml.$ui.folders.updateElement();
2014-05-25 12:44:07 +00:00
});
},
2014-05-04 17:26:43 +00:00
select: function(data) {
2014-05-12 12:57:47 +00:00
if (data.ids.length) {
selectItem($list);
renderUser(Ox.getObjectById(users, data.ids[0]));
} else {
renderUser();
}
2014-05-04 17:26:43 +00:00
}
});
return $list;
}
2014-05-16 23:50:20 +00:00
function selectUser(id) {
$lists.forEach(function($list) {
var item = $list.options('items').filter(function(item) {
return item.id == id;
})[0];
if (item) {
selectItem($list, id);
}
});
}
2014-05-04 17:26:43 +00:00
function selectItem($list, id) {
$lists.forEach(function($element) {
if ($element == $list) {
$element.gainFocus();
} else {
$element.options({selected: []});
}
});
if (id) {
$list.options({selected: [id]});
renderUser(Ox.getObjectById(users, id));
}
}
2014-05-16 23:50:20 +00:00
function updateUsers(callback) {
2014-05-25 12:16:04 +00:00
2014-05-17 11:45:57 +00:00
Ox.Request.clearCache('getUsers');
2014-05-25 12:16:04 +00:00
2014-05-04 17:26:43 +00:00
oml.api.getUsers(function(result) {
users = result.data.users;
2014-05-16 23:50:20 +00:00
peerIds = users.filter(function(user) {
return user.peered;
}).map(function(user) {
2014-05-25 12:16:04 +00:00
return user.id;
2014-05-16 23:50:20 +00:00
});
2014-05-04 17:26:43 +00:00
folders.forEach(function(folder) {
folder.items = [];
});
users.forEach(function(user, index) {
var id = user.peered ? 'peers' : (user.pending || 'others');
Ox.getObjectById(folders, id).items.push(
Ox.extend({
index: index,
nickname: '',
username: ''
}, user)
);
});
2014-05-16 23:50:20 +00:00
$lists.splice(1).forEach(function(folder) {
folder.remove();
});
2014-05-04 17:26:43 +00:00
folders.forEach(function(folder, index) {
$lists.push(
(
folder.items.length
? renderUserList(folder)
: renderSectionList(folder)
2014-05-25 12:44:07 +00:00
)
.appendTo($folders[index].$content)
2014-05-04 17:26:43 +00:00
);
});
$lists.forEach(function($list, index) {
$list.bindEvent({
selectnext: function() {
var $list;
if (index < $lists.length - 1) {
$list = $lists[index + 1];
selectItem($list, $list.options('items')[0].id);
}
},
selectprevious: function() {
var $list;
if (index) {
$list = $lists[index - 1];
selectItem($list, Ox.last($list.options('items')).id)
}
}
})
});
2014-05-16 23:50:20 +00:00
callback && callback();
2014-05-04 17:26:43 +00:00
});
2014-05-17 08:17:34 +00:00
2014-05-16 23:50:20 +00:00
}
2014-05-25 12:16:04 +00:00
that.updateElement = function() {
updateUsers(function() {
selectItem($lists[0], 'invitations');
renderUser({section: 'invitations'});
});
2014-05-04 17:26:43 +00:00
return that;
};
2014-05-17 11:45:57 +00:00
return that.updateElement();
2014-05-04 17:26:43 +00:00
2014-05-16 23:50:20 +00:00
};