add some more ui for user management
This commit is contained in:
rolux
parent
d3588a5075
commit
0cd3218069
3 changed files with 363 additions and 147 deletions
|
|
@ -31,7 +31,6 @@ pandora.ui.folderBrowserBar = function(id) {
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
change: function(data) {
|
change: function(data) {
|
||||||
Ox.print('ID::', id)
|
|
||||||
var key = pandora.$ui.findListSelect[id].value() == 'user' ? 'user' : 'name',
|
var key = pandora.$ui.findListSelect[id].value() == 'user' ? 'user' : 'name',
|
||||||
value = data.value;
|
value = data.value;
|
||||||
updateItems(key, value);
|
updateItems(key, value);
|
||||||
|
|
@ -51,10 +50,10 @@ pandora.ui.folderBrowserBar = function(id) {
|
||||||
var query = id == 'favorite' ? {conditions: [
|
var query = id == 'favorite' ? {conditions: [
|
||||||
{key: 'status', value: 'public', operator: '='},
|
{key: 'status', value: 'public', operator: '='},
|
||||||
{key: 'user', value: pandora.user.username, operator: '!=='},
|
{key: 'user', value: pandora.user.username, operator: '!=='},
|
||||||
{key: key, value: value, operator: ''}
|
{key: key, value: value, operator: '='}
|
||||||
], operator: '&'} : {conditions: [
|
], operator: '&'} : {conditions: [
|
||||||
{key: 'status', value: 'private', operator: '!='},
|
{key: 'status', value: 'private', operator: '!='},
|
||||||
{key: key, value: value, operator: ''}
|
{key: key, value: value, operator: '='}
|
||||||
], operator: '&'};
|
], operator: '&'};
|
||||||
return pandora.api.findLists(Ox.extend(data, {
|
return pandora.api.findLists(Ox.extend(data, {
|
||||||
query: query
|
query: query
|
||||||
|
|
|
||||||
|
|
@ -19,8 +19,8 @@ pandora.ui.folderBrowserList = function(id) {
|
||||||
id: 'id',
|
id: 'id',
|
||||||
operator: '+',
|
operator: '+',
|
||||||
title: $('<img>').attr({
|
title: $('<img>').attr({
|
||||||
src: Ox.UI.getImageURL('symbolIcon')
|
src: Ox.UI.getImageURL('symbolIcon')
|
||||||
}),
|
}),
|
||||||
unique: true,
|
unique: true,
|
||||||
visible: true,
|
visible: true,
|
||||||
width: 16
|
width: 16
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,306 @@
|
||||||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||||
pandora.ui.usersDialog = function() {
|
pandora.ui.usersDialog = function() {
|
||||||
|
|
||||||
var height = Math.round((window.innerHeight - 48) * 0.9),
|
var height = Math.round((window.innerHeight - 48) * 0.9),
|
||||||
width = Math.round(window.innerWidth * 0.9),
|
width = Math.round(window.innerWidth * 0.9),
|
||||||
|
levelColors = {
|
||||||
|
'member': [128, 128, 0],
|
||||||
|
'friend': [0, 128, 0],
|
||||||
|
'staff': [0, 128, 128],
|
||||||
|
'admin': [0, 0, 128]
|
||||||
|
},
|
||||||
|
numberOfUsers = 0,
|
||||||
|
userLevels = ['member', 'friend', 'staff', 'admin'],
|
||||||
|
|
||||||
|
$status = Ox.Label({
|
||||||
|
title: 'Loading...'
|
||||||
|
})
|
||||||
|
.css({float: 'left', margin: '4px'}),
|
||||||
|
|
||||||
|
$exportButton = Ox.Button({
|
||||||
|
title: 'Export E-Mail Addresses'
|
||||||
|
})
|
||||||
|
.css({margin: '4px 4px 4px 0'})
|
||||||
|
.bindEvent({
|
||||||
|
click: function() {
|
||||||
|
pandora.api.findUsers({
|
||||||
|
query: {conditions: [], operator: '&'},
|
||||||
|
keys: ['mail', 'username'],
|
||||||
|
range: [0, numberOfUsers],
|
||||||
|
sort: [{key: 'username', operator: '+'}]
|
||||||
|
}, function(result) {
|
||||||
|
var $dialog = Ox.Dialog({
|
||||||
|
buttons: [
|
||||||
|
Ox.Button({
|
||||||
|
title: 'Close'
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
click: function() {
|
||||||
|
$dialog.close();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
],
|
||||||
|
content: Ox.Element()
|
||||||
|
.addClass('OxSelectable')
|
||||||
|
.css({margin: '16px'})
|
||||||
|
.html(
|
||||||
|
result.data.items.map(function(item) {
|
||||||
|
return item.username + ' <' + 'mail@example.com' + '>'
|
||||||
|
}).join(', ')
|
||||||
|
),
|
||||||
|
title: 'E-Mail Addresses'
|
||||||
|
})
|
||||||
|
.open()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
$findSelect = Ox.Select({
|
||||||
|
items: [
|
||||||
|
{id: 'all', title: 'Find: All', checked: true},
|
||||||
|
{id: 'username', title: 'Find: Username'},
|
||||||
|
{id: 'email', title: 'Find: E-Mail-Address'}
|
||||||
|
],
|
||||||
|
overlap: 'right',
|
||||||
|
type: 'image'
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
change: function(data) {
|
||||||
|
var key = data.selected[0].id,
|
||||||
|
value = $findInput.value();
|
||||||
|
value && updateItems(key, value);
|
||||||
|
$findInput.options({
|
||||||
|
placeholder: data.selected[0].title
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
$findInput = Ox.Input({
|
||||||
|
changeOnKeypress: true,
|
||||||
|
clear: true,
|
||||||
|
placeholder: 'Find: All',
|
||||||
|
width: 192
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
change: function(data) {
|
||||||
|
var key = $findSelect.value(),
|
||||||
|
value = data.value;
|
||||||
|
updateItems(key, value);
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
$findElement = Ox.FormElementGroup({
|
||||||
|
elements: [
|
||||||
|
$findSelect,
|
||||||
|
$findInput
|
||||||
|
]
|
||||||
|
})
|
||||||
|
.css({float: 'right', margin: '4px'}),
|
||||||
|
|
||||||
|
$list = Ox.TextList({
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
clickable: true,
|
||||||
|
format: function(value) {
|
||||||
|
return $('<img>')
|
||||||
|
.attr({
|
||||||
|
src: Ox.UI.getImageURL('symbolCheck')
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
padding: '3px',
|
||||||
|
opacity: value ? 0.25 : 1
|
||||||
|
});
|
||||||
|
},
|
||||||
|
id: 'disabled',
|
||||||
|
operator: '-',
|
||||||
|
title: $('<img>').attr({
|
||||||
|
src: Ox.UI.getImageURL('symbolCheck')
|
||||||
|
}),
|
||||||
|
tooltip: function(data) {
|
||||||
|
return data.disabled ? 'Enable User' : 'Disable User';
|
||||||
|
},
|
||||||
|
visible: true,
|
||||||
|
width: 16
|
||||||
|
},
|
||||||
|
{
|
||||||
|
format: function(value, data) {
|
||||||
|
return '<span style="opacity: ' + (
|
||||||
|
data.disabled ? 0.25 : 1
|
||||||
|
) + '">' + value + '</span>';
|
||||||
|
},
|
||||||
|
id: 'username',
|
||||||
|
operator: '+',
|
||||||
|
removable: false,
|
||||||
|
title: 'Username',
|
||||||
|
visible: true,
|
||||||
|
unique: true,
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
format: function(value, data) {
|
||||||
|
return '<span style="opacity: ' + (
|
||||||
|
data.disabled ? 0.25 : 1
|
||||||
|
) + '">' + value + '</span>';
|
||||||
|
},
|
||||||
|
id: 'email',
|
||||||
|
operator: '+',
|
||||||
|
title: 'E-Mail Address',
|
||||||
|
visible: true,
|
||||||
|
width: 180
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'center',
|
||||||
|
format: function(value) {
|
||||||
|
return $('<div>')
|
||||||
|
.css({
|
||||||
|
borderRadius: '4px',
|
||||||
|
padding: '0 3px 1px 3px',
|
||||||
|
background: 'rgb(' + levelColors[value].map(function(color) {
|
||||||
|
return color.toString()
|
||||||
|
}).join(', ') + ')',
|
||||||
|
textAlign: 'center',
|
||||||
|
color: 'rgb(' + levelColors[value].map(function(color) {
|
||||||
|
return (color + 128).toString()
|
||||||
|
}).join(', ') + ')'
|
||||||
|
})
|
||||||
|
.html(Ox.toTitleCase(value))
|
||||||
|
},
|
||||||
|
id: 'level',
|
||||||
|
operator: '+',
|
||||||
|
title: 'Level',
|
||||||
|
visible: true,
|
||||||
|
width: 60
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'numberoflists',
|
||||||
|
align: 'right',
|
||||||
|
operator: '-',
|
||||||
|
title: 'Lists',
|
||||||
|
visible: true,
|
||||||
|
width: 60
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'right',
|
||||||
|
id: 'timesseen',
|
||||||
|
operator: '-',
|
||||||
|
title: 'Times Seen',
|
||||||
|
visible: true,
|
||||||
|
width: 90
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'right',
|
||||||
|
id: 'firstseen',
|
||||||
|
operator: '-',
|
||||||
|
title: 'First Seen',
|
||||||
|
visible: true,
|
||||||
|
width: 150
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'right',
|
||||||
|
id: 'lastseen',
|
||||||
|
operator: '-',
|
||||||
|
title: 'Last Seen',
|
||||||
|
visible: true,
|
||||||
|
width: 150
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'right',
|
||||||
|
id: 'ip',
|
||||||
|
operator: '-',
|
||||||
|
title: 'IP Address',
|
||||||
|
visible: true,
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'screensize',
|
||||||
|
align: 'right',
|
||||||
|
operator: '-',
|
||||||
|
title: 'Screen Size',
|
||||||
|
visible: true,
|
||||||
|
width: 90
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'right',
|
||||||
|
id: 'windowsize',
|
||||||
|
operator: '-',
|
||||||
|
title: 'Window Size',
|
||||||
|
visible: true,
|
||||||
|
width: 90
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'useragent',
|
||||||
|
operator: '-',
|
||||||
|
title: 'User Agent',
|
||||||
|
visible: true,
|
||||||
|
width: 720
|
||||||
|
}
|
||||||
|
],
|
||||||
|
columnsRemovable: true,
|
||||||
|
columnsVisible: true,
|
||||||
|
items: function(data, callback) {
|
||||||
|
// pandora.api.findUsers(data, callback);
|
||||||
|
pandora.api.findUsers(data, function(result) {
|
||||||
|
if (Ox.isArray(result.data.items)) {
|
||||||
|
result.data.items = result.data.items.map(function(item) {
|
||||||
|
return Ox.extend({
|
||||||
|
disabled: false,
|
||||||
|
email: 'mail@example.com',
|
||||||
|
firstseen: '2011-10-01 15:05:25',
|
||||||
|
lastseen: '2011-10-03 05:53:06',
|
||||||
|
ip: '91.22.155.104',
|
||||||
|
screensize: '1280 x 800',
|
||||||
|
windowsize: '1024 x 720',
|
||||||
|
useragent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.186 Safari/535.1'
|
||||||
|
}, item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
callback(result);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
keys: [],
|
||||||
|
max: 1,
|
||||||
|
scrollbarVisible: true,
|
||||||
|
sort: [
|
||||||
|
{key: 'username', operator: '+'}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
click: function(data) {
|
||||||
|
// ...
|
||||||
|
},
|
||||||
|
init: function(data) {
|
||||||
|
numberOfUsers = data.items;
|
||||||
|
$status.options({
|
||||||
|
title: Ox.formatNumber(numberOfUsers)
|
||||||
|
+ ' user' + (numberOfUsers == 1 ? '' : 's')
|
||||||
|
});
|
||||||
|
},
|
||||||
|
select: function(data) {
|
||||||
|
var values;
|
||||||
|
$user.empty();
|
||||||
|
if (data.ids.length) {
|
||||||
|
values = $list.value(data.ids[0]);
|
||||||
|
$userLabel.options({
|
||||||
|
title: values.username + ' <' + values.email + '>'
|
||||||
|
});
|
||||||
|
$user.append(renderUserForm(values));
|
||||||
|
} else {
|
||||||
|
$userLabel.options({title: 'No user selected'});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
$userLabel = Ox.Label({
|
||||||
|
textAlign: 'center',
|
||||||
|
title: 'No user selected',
|
||||||
|
width: 248
|
||||||
|
})
|
||||||
|
.css({margin: '4px'}),
|
||||||
|
|
||||||
|
$user = Ox.Element({}),
|
||||||
|
|
||||||
that = Ox.Dialog({
|
that = Ox.Dialog({
|
||||||
buttons: [
|
buttons: [
|
||||||
Ox.Button({
|
Ox.Button({
|
||||||
|
|
@ -21,144 +320,15 @@ pandora.ui.usersDialog = function() {
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
element: Ox.Bar({size: 24})
|
element: Ox.Bar({size: 24})
|
||||||
|
.append($status)
|
||||||
|
.append($exportButton)
|
||||||
.append(
|
.append(
|
||||||
Ox.Button({
|
$findElement
|
||||||
title: 'Export E-Mail Addresses'
|
|
||||||
})
|
|
||||||
.css({margin: '4px'})
|
|
||||||
)
|
|
||||||
.append(
|
|
||||||
Ox.Input({
|
|
||||||
clear: true,
|
|
||||||
placeholder: 'Find',
|
|
||||||
width: 192
|
|
||||||
})
|
|
||||||
.css({float: 'right', margin: '4px'})
|
|
||||||
.bindEvent({
|
|
||||||
submit: function(data) {
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
),
|
),
|
||||||
size: 24
|
size: 24
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
element: Ox.TextList({
|
element: $list
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
id: 'username',
|
|
||||||
title: 'Username',
|
|
||||||
operator: '+',
|
|
||||||
visible: true,
|
|
||||||
unique: true,
|
|
||||||
width: 120
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'email',
|
|
||||||
title: 'E-Mail Address',
|
|
||||||
operator: '+',
|
|
||||||
visible: true,
|
|
||||||
width: 180
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'level',
|
|
||||||
title: 'Level',
|
|
||||||
format: function(value) {
|
|
||||||
return Ox.toTitleCase(value);
|
|
||||||
},
|
|
||||||
operator: '+',
|
|
||||||
visible: true,
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'numberoflists',
|
|
||||||
title: 'Lists',
|
|
||||||
align: 'right',
|
|
||||||
operator: '-',
|
|
||||||
visible: true,
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'timesseen',
|
|
||||||
title: 'Times Seen',
|
|
||||||
align: 'right',
|
|
||||||
operator: '-',
|
|
||||||
visible: true,
|
|
||||||
width: 90
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'firstseen',
|
|
||||||
title: 'First Seen',
|
|
||||||
align: 'right',
|
|
||||||
operator: '-',
|
|
||||||
visible: true,
|
|
||||||
width: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'lastseen',
|
|
||||||
title: 'Last Seen',
|
|
||||||
align: 'right',
|
|
||||||
operator: '-',
|
|
||||||
visible: true,
|
|
||||||
width: 150
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'ip',
|
|
||||||
title: 'IP Address',
|
|
||||||
align: 'right',
|
|
||||||
operator: '-',
|
|
||||||
visible: true,
|
|
||||||
width: 120
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'screensize',
|
|
||||||
title: 'Screen Size',
|
|
||||||
align: 'right',
|
|
||||||
operator: '-',
|
|
||||||
visible: true,
|
|
||||||
width: 90
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'windowsize',
|
|
||||||
title: 'Window Size',
|
|
||||||
align: 'right',
|
|
||||||
operator: '-',
|
|
||||||
visible: true,
|
|
||||||
width: 90
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'useragent',
|
|
||||||
title: 'User Agent',
|
|
||||||
operator: '-',
|
|
||||||
visible: true,
|
|
||||||
width: 720
|
|
||||||
}
|
|
||||||
],
|
|
||||||
columnsVisible: true,
|
|
||||||
items: function(data, callback) {
|
|
||||||
// pandora.api.findUsers(data, callback);
|
|
||||||
pandora.api.findUsers(data, function(result) {
|
|
||||||
if (Ox.isArray(result.data.items)) {
|
|
||||||
result.data.items = result.data.items.map(function(item) {
|
|
||||||
return Ox.extend({
|
|
||||||
firstseen: '2011-10-01 15:05:25',
|
|
||||||
lastseen: '2011-10-03 05:53:06',
|
|
||||||
ip: '91.22.155.104',
|
|
||||||
screensize: '1280 x 800',
|
|
||||||
windowsize: '1024 x 720',
|
|
||||||
useragent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.186 Safari/535.1'
|
|
||||||
}, item);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
callback(result);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
keys: [],
|
|
||||||
scrollbarVisible: true,
|
|
||||||
sort: [
|
|
||||||
{key: 'username', operator: '+'}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
orientation: 'vertical'
|
orientation: 'vertical'
|
||||||
|
|
@ -169,18 +339,11 @@ pandora.ui.usersDialog = function() {
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
element: Ox.Bar({size: 24})
|
element: Ox.Bar({size: 24})
|
||||||
.append(
|
.append($userLabel),
|
||||||
Ox.Label({
|
|
||||||
textAlign: 'center',
|
|
||||||
title: 'No user selected',
|
|
||||||
width: 248
|
|
||||||
})
|
|
||||||
.css({margin: '4px'})
|
|
||||||
),
|
|
||||||
size: 24
|
size: 24
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
element: Ox.Element()
|
element: $user
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
orientation: 'vertical'
|
orientation: 'vertical'
|
||||||
|
|
@ -198,6 +361,60 @@ pandora.ui.usersDialog = function() {
|
||||||
title: 'Manage Users',
|
title: 'Manage Users',
|
||||||
width: width
|
width: width
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function renderUserForm(data) {
|
||||||
|
return Ox.Form({
|
||||||
|
items: [
|
||||||
|
Ox.Select({
|
||||||
|
items: userLevels.map(function(level) {
|
||||||
|
return {
|
||||||
|
checked: level == data.level,
|
||||||
|
id: level,
|
||||||
|
title: Ox.toTitleCase(level)
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
label: 'Level',
|
||||||
|
labelWidth: 64,
|
||||||
|
width: 240
|
||||||
|
}),
|
||||||
|
/*
|
||||||
|
Ox.Label({
|
||||||
|
title: 'Notes'
|
||||||
|
}),
|
||||||
|
*/
|
||||||
|
Ox.Input({
|
||||||
|
height: 240,
|
||||||
|
placeholder: 'Notes',
|
||||||
|
type: 'textarea',
|
||||||
|
width: 240
|
||||||
|
})
|
||||||
|
.css({height: '240px'})
|
||||||
|
],
|
||||||
|
width: 240
|
||||||
|
})
|
||||||
|
.css({margin: '8px'});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateItems(key, value) {
|
||||||
|
var query = {
|
||||||
|
conditions: Ox.merge(
|
||||||
|
key != 'email' ? [{key: 'username', value: value, operator: '='}] : [],
|
||||||
|
key != 'username' ? [{key: 'email', value: value, operator: '='}] : []
|
||||||
|
),
|
||||||
|
operator: key == 'all' ? '|' : '&'
|
||||||
|
};
|
||||||
|
$list.options({
|
||||||
|
items: function(data, callback) {
|
||||||
|
return pandora.api.findUsers(Ox.extend(data, {
|
||||||
|
query: query
|
||||||
|
}), callback);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue