From 0cd321806983d65abfa46bf81908eb34aef1e59d Mon Sep 17 00:00:00 2001 From: rolux Date: Mon, 3 Oct 2011 09:31:20 +0000 Subject: [PATCH] add some more ui for user management --- static/js/pandora/ui/folderBrowserBar.js | 5 +- static/js/pandora/ui/folderBrowserList.js | 4 +- static/js/pandora/ui/usersDialog.js | 501 ++++++++++++++++------ 3 files changed, 363 insertions(+), 147 deletions(-) diff --git a/static/js/pandora/ui/folderBrowserBar.js b/static/js/pandora/ui/folderBrowserBar.js index 46d7d995..7ff171d9 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 fe66b540..5bce352e 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 28428691..4131dbef 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; + };