add some more ui for user management

This commit is contained in:
rolux 2011-10-03 09:31:20 +00:00
parent d3588a5075
commit 0cd3218069
3 changed files with 363 additions and 147 deletions

View file

@ -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

View file

@ -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

View file

@ -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 + ' &lt;' + 'mail@example.com' + '&gt;'
}).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 + ' &lt;' + values.email + '&gt;'
});
$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;
}; };