// vim: et:ts=4:sw=4:sts=4:ft=javascript 'use strict'; pandora.ui.usersDialog = function() { var browsers = [ 'Camino', 'Chrome Frame', 'Chrome', 'Chromium', 'Epiphany', 'Firefox', 'Internet Explorer', 'Konqueror', 'Nokia Browser', 'Opera', 'Safari', 'WebKit' ], dialogHeight = Math.round((window.innerHeight - 48) * 0.9), dialogWidth = Math.round(window.innerWidth * 0.9), formWidth = 256, numberOfUsers = 0, systems = [ 'Android', 'BlackBerry', 'BSD', 'iOS', 'Java', 'Linux', 'Mac OS X', 'Nokia', 'PlayStation', 'RIM Tablet OS', 'Unix', 'Wii', 'Windows Phone', 'Windows' ], userLevels = pandora.site.userLevels.map(function(userLevel) { return Ox.toTitleCase(userLevel); }).concat(['Robot']), $reloadButton = Ox.Button({ disabled: true, title: 'redo', tooltip: Ox._('Reload'), type: 'image' }) .css({float: 'left', margin: '4px 2px 4px 4px'}) .bindEvent({ click: function() { $reloadButton.options({disabled: true}); Ox.Request.clearCache('findUsers'); $list.reloadList(true); } }), $guestsCheckbox = Ox.Checkbox({ title: Ox._('Include Guests'), value: false }) .css({float: 'left', margin: '4px 2px'}) .bindEvent({ change: function(data) { data.value ? $robotsCheckbox.show() : $robotsCheckbox.hide().options({value: false}); updateList(); } }), $robotsCheckbox = Ox.Checkbox({ title: Ox._('Include Robots'), value: false }) .css({float: 'left', margin: '4px 2px'}) .hide() .bindEvent({ change: updateList }), $findSelect = Ox.Select({ items: [ {id: 'all', title: Ox._('Find: All')}, {id: 'username', title: Ox._('Find: Username')}, {id: 'email', title: Ox._('Find: E-Mail Address')} ], overlap: 'right', type: 'image' }) .bindEvent({ change: function(data) { $findInput.value() && updateList(); $findInput.options({placeholder: data.title}); } }), $findInput = Ox.Input({ changeOnKeypress: true, clear: true, placeholder: Ox._('Find: All'), width: 192 }) .bindEvent({ change: updateList }), $findElement = Ox.FormElementGroup({ elements: [ $findSelect, $findInput ] }) .css({float: 'right', margin: '4px'}), $list = Ox.TableList({ columns: [ { format: function(value, data) { return $('') .attr({ src: Ox.UI.getImageURL('symbolCheck') }) .css({ width: '10px', height: '10px', padding: '3px', opacity: value || [ 'guest', 'robot' ].indexOf(data.level) > -1 ? 0 : 1 }); }, id: 'disabled', operator: '-', title: Ox._('Enabled'), titleImage: 'check', visible: true, width: 16 }, { format: function(value) { return $('') .attr({ src: Ox.UI.getImageURL('symbolMail') }) .css({ width: '10px', height: '10px', padding: '3px', opacity: +value }); }, id: 'newsletter', title: Ox._('Newsletter'), titleImage: 'mail', operator: '-', visible: true, width: 16 }, { format: function(value, data) { return '' + Ox.encodeHTMLEntities(value) + ''; }, id: 'username', operator: '+', removable: false, title: Ox._('Username'), visible: true, width: 128 }, { format: function(value, data) { return '' + value + ''; }, id: 'email', operator: '+', title: Ox._('E-Mail Address'), visible: true, width: 192 }, { align: 'center', format: function(value) { return Ox.Theme.formatColorLevel( userLevels.indexOf(Ox.toTitleCase(value)), userLevels, [0, 300] ); }, id: 'level', operator: '-', title: Ox._('Level'), type: 'label', visible: true, width: 80 }, { format: function(value) { return value ? Ox.Element({ element: '', tooltip: value }) .attr({ src: Ox.getFlagByGeoname(value, 16) }) .css({ width: '14px', height: '14px', borderRadius: '4px', marginLeft: '-3px', marginTop: 0 }) : ''; }, id: 'location', operator: '+', title: Ox._('Location'), titleImage: 'flag', visible: true, width: 16 }, { format: function(value) { var system; Ox.forEach(systems, function(s) { if (new RegExp('^' + s).test(value)) { system = s; return false; } }); return system ? Ox.Element({ element: '', tooltip: value .replace(/BSD \((.+)\)/, '$1') .replace(/Linux \((.+)\)/, '$1') .replace(/Unix \((.+)\)/, '$1') .replace(/Windows (NT \d+\.\d+) \((.+)\)/, 'Windows $2 ($1)') }) .attr({ src: Ox.UI_PATH + 'png/system' + system.replace(/ /g, '') + '128.png' }) .css({ width: '14px', height: '14px', marginLeft: '-3px', marginTop: 0 }) : ''; }, id: 'system', operator: '+', title: Ox._('System'), titleImage: 'square', visible: true, width: 16 }, { format: function(value) { var browser; Ox.forEach(browsers, function(b) { if (new RegExp('^' + b).test(value)) { browser = b; return false; } }); return browser ? Ox.Element({ element: '', tooltip: value }) .attr({ src: Ox.UI_PATH + 'png/browser' + browser.replace(/ /g, '') + '128.png' }) .css({ width: '14px', height: '14px', marginLeft: '-3px', marginTop: 0 }) : ''; }, id: 'browser', operator: '+', title: Ox._('Browser'), titleImage: 'circle', visible: true, width: 16 }, { align: 'right', format: function(value) { return Ox.formatNumber(value); }, id: 'timesseen', operator: '-', title: Ox._('Times Seen'), visible: true, width: 80 }, { align: 'right', format: function(value) { return Ox.formatDate(value, '%F %T'); }, id: 'firstseen', operator: '-', title: Ox._('First Seen'), visible: true, width: 144 }, { align: 'right', format: function(value) { return Ox.formatDate(value, '%F %T'); }, id: 'lastseen', operator: '-', title: Ox._('Last Seen'), visible: true, width: 144 }, { align: 'right', format: function(value, data) { return ['guest', 'robot'].indexOf(data.level) > -1 ? '' : value; }, id: 'numberoflists', operator: '-', title: Ox._('Lists'), visible: true, width: 64 }, { id: 'groups', operator: '+', title: Ox._('Groups'), visible: true, width: 64 }, { id: 'screensize', align: 'right', operator: '-', title: Ox._('Screen Size'), visible: true, width: 80 }, { align: 'right', id: 'windowsize', operator: '-', title: Ox._('Window Size'), visible: true, width: 80 }, { align: 'right', id: 'ip', operator: '+', title: Ox._('IP Address'), visible: true, width: 128 }, { id: 'useragent', operator: '+', title: Ox._('User Agent'), visible: true, width: 768 } ], columnsRemovable: true, columnsVisible: true, items: pandora.api.findUsers, query: { conditions: [ {key: 'level', value: 'guest', operator: '!='}, {key: 'level', value: 'robot', operator: '!='} ], operator: '&' }, keys: ['notes', 'groups'], max: -1, scrollbarVisible: true, sort: [{key: 'lastseen', operator: '-'}], unique: 'id' }) .bindEvent({ init: function(data) { numberOfUsers = data.users; $status.html( Ox.formatNumber(data.items) + ' user' + (data.items == 1 ? '' : 's') + ( $guestsCheckbox.value() ? ' (' + Ox.formatNumber(data.users) + ' registered, ' + Ox.formatNumber(data.guests) + ' guest' + (data.guests == 1 ? '' : 's') + ( $robotsCheckbox.value() ? ', ' + Ox.formatNumber(data.robots) + ' robot' + (data.robots == 1 ? '' : 's') : '' ) + ')' : '' ) ); }, load: function() { $reloadButton.options({disabled: false}); }, select: selectUsers }), $formButton = Ox.ButtonGroup({ buttons: [ { id: 'edit', selected: true, title: 'edit', tooltip: Ox._('Edit') }, { id: 'mail', title: 'mail', tooltip: Ox._('Mail') } ], selectable: true, type: 'image' }) .css({float: 'left', margin: '4px 2px 4px 4px'}) .bindEvent({ change: selectForm }), $formLabel = Ox.Label({ textAlign: 'center', title: Ox._('No user selected'), width: 192 }) .css({float: 'left', margin: '4px 2px'}), $deselectButton = Ox.Button({ disabled: true, title: 'close', tooltip: Ox._('Done'), type: 'image' }) .css({float: 'left', margin: '4px 4px 4px 2px'}) .bindEvent({ click: function() { $list.options({selected: []}); selectUsers({ids: []}); } }), $form = Ox.Element(), $editForm, $sendButton = Ox.Button({ disabled: true, id: 'send', title: Ox._('Send'), width: 64 }) .bindEvent({ click: sendMail }), $mailForm = renderMailForm(), $content = Ox.SplitPanel({ elements: [ { element: Ox.SplitPanel({ elements: [ { element: Ox.Bar({size: 24}) .append($reloadButton) .append($guestsCheckbox) .append($robotsCheckbox) .append($findElement), size: 24 }, { element: $list } ], orientation: 'vertical' }) }, { element: Ox.SplitPanel({ elements: [ { element: Ox.Bar({size: 24}) .append($formButton) .append($formLabel) .append($deselectButton), size: 24 }, { element: $form } ], orientation: 'vertical' }) .bindEvent({ resize: setWidth }), resizable: true, resize: [256, 384, 512], size: 256 } ], orientation: 'horizontal' }), that = Ox.Dialog({ buttons: [ Ox.Button({ id: 'statistics', title: Ox._('Statistics...') }).bindEvent({ click: function() { that.close(); pandora.$ui.statisticsDialog = pandora.ui.statisticsDialog().open(); } }), {}, Ox.Button({ title: Ox._('Export E-Mail Addresses...') }) .css({margin: '4px 4px 4px 0'}) .bindEvent({ click: function() { var $button = this; $button.options({disabled: true}); pandora.api.findUsers({ query: {conditions: [], operator: '&'}, keys: ['email', 'username'], range: [0, numberOfUsers], sort: [{key: 'username', operator: '+'}] }, function(result) { pandora.ui.exportDialog({ data: result.data.items.filter(function(item) { return item.email; }).map(function(item) { return Ox.encodeHTMLEntities(item.username) + ' <' + item.email + '>'; }).join(', '), title: Ox._('E-Mail Addresses') }).open(); $button.options({disabled: false}); }); } }), Ox.Button({ id: 'done', title: Ox._('Done'), width: 48 }).bindEvent({ click: function() { that.close(); } }) ], closeButton: true, content: $content, height: dialogHeight, maximizeButton: true, minHeight: 256, minWidth: 512, padding: 0, removeOnClose: true, title: Ox._('Manage Users'), width: dialogWidth }) .bindEvent({ resize: setHeight }), $status = $('