diff --git a/static/js/pandora/ui/folderBrowserBar.js b/static/js/pandora/ui/folderBrowserBar.js
index 46d7d9953..7ff171d9d 100644
--- a/static/js/pandora/ui/folderBrowserBar.js
+++ b/static/js/pandora/ui/folderBrowserBar.js
@@ -31,7 +31,6 @@ pandora.ui.folderBrowserBar = function(id) {
})
.bindEvent({
change: function(data) {
- Ox.print('ID::', id)
var key = pandora.$ui.findListSelect[id].value() == 'user' ? 'user' : 'name',
value = data.value;
updateItems(key, value);
@@ -51,10 +50,10 @@ pandora.ui.folderBrowserBar = function(id) {
var query = id == 'favorite' ? {conditions: [
{key: 'status', value: 'public', operator: '='},
{key: 'user', value: pandora.user.username, operator: '!=='},
- {key: key, value: value, operator: ''}
+ {key: key, value: value, operator: '='}
], operator: '&'} : {conditions: [
{key: 'status', value: 'private', operator: '!='},
- {key: key, value: value, operator: ''}
+ {key: key, value: value, operator: '='}
], operator: '&'};
return pandora.api.findLists(Ox.extend(data, {
query: query
diff --git a/static/js/pandora/ui/folderBrowserList.js b/static/js/pandora/ui/folderBrowserList.js
index fe66b5402..5bce352e8 100644
--- a/static/js/pandora/ui/folderBrowserList.js
+++ b/static/js/pandora/ui/folderBrowserList.js
@@ -19,8 +19,8 @@ pandora.ui.folderBrowserList = function(id) {
id: 'id',
operator: '+',
title: $('![]()
').attr({
- src: Ox.UI.getImageURL('symbolIcon')
- }),
+ src: Ox.UI.getImageURL('symbolIcon')
+ }),
unique: true,
visible: true,
width: 16
diff --git a/static/js/pandora/ui/usersDialog.js b/static/js/pandora/ui/usersDialog.js
index 284286914..4131dbeff 100644
--- a/static/js/pandora/ui/usersDialog.js
+++ b/static/js/pandora/ui/usersDialog.js
@@ -1,7 +1,306 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
pandora.ui.usersDialog = function() {
+
var height = Math.round((window.innerHeight - 48) * 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 $('![]()
')
+ .attr({
+ src: Ox.UI.getImageURL('symbolCheck')
+ })
+ .css({
+ width: '10px',
+ height: '10px',
+ padding: '3px',
+ opacity: value ? 0.25 : 1
+ });
+ },
+ id: 'disabled',
+ operator: '-',
+ title: $('![]()
').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 '' + value + '';
+ },
+ id: 'username',
+ operator: '+',
+ removable: false,
+ title: 'Username',
+ visible: true,
+ unique: true,
+ width: 120
+ },
+ {
+ format: function(value, data) {
+ return '' + value + '';
+ },
+ id: 'email',
+ operator: '+',
+ title: 'E-Mail Address',
+ visible: true,
+ width: 180
+ },
+ {
+ align: 'center',
+ format: function(value) {
+ return $('')
+ .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({
buttons: [
Ox.Button({
@@ -21,144 +320,15 @@ pandora.ui.usersDialog = function() {
elements: [
{
element: Ox.Bar({size: 24})
+ .append($status)
+ .append($exportButton)
.append(
- Ox.Button({
- 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) {
-
- }
- })
+ $findElement
),
size: 24
},
{
- element: Ox.TextList({
- 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: '+'}
- ]
- })
+ element: $list
}
],
orientation: 'vertical'
@@ -169,18 +339,11 @@ pandora.ui.usersDialog = function() {
elements: [
{
element: Ox.Bar({size: 24})
- .append(
- Ox.Label({
- textAlign: 'center',
- title: 'No user selected',
- width: 248
- })
- .css({margin: '4px'})
- ),
+ .append($userLabel),
size: 24
},
{
- element: Ox.Element()
+ element: $user
}
],
orientation: 'vertical'
@@ -198,6 +361,60 @@ pandora.ui.usersDialog = function() {
title: 'Manage Users',
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;
+
};