add menuExtras directory, add users script

menuExtras/users.js

@@ -0,0 +1,98 @@
+(function() {
+
+    var css = {
+            width: '12px',
+            height: '12px',
+            margin: '2px',
+            borderRadius: '3px'
+        },
+        reload = pandora.$ui.appPanel.reload,
+        timeout,
+        $users = $('<div>'),
+        $icon = $('<img>')
+            .attr({src: Ox.getFlagByGeoname('', 16)})
+            .css(css)
+            .bind({click: start})
+            .appendTo($users);
+
+    load();
+
+    function getUsers() {
+        Ox.Request.clearCache('findUsers');
+        pandora.api.findUsers({
+            keys: ['firstseen', 'lastseen', 'location'],
+            query: {
+                conditions: [{key: 'level', operator: '!=', value: 'robot'}],
+                operator: '&'
+            },
+            range: [0, 2400],
+            sort: [{key: 'lastseen', operator: '-'}]
+        }, function(result) {
+            var time = new Date(),
+                newUsers = result.data.items.filter(function(user) {
+                    return time - new Date(user.firstseen) < 86400000;
+                }).length,
+                allUsers = result.data.items.filter(function(user) {
+                    return time - new Date(user.lastseen) < 86400000;
+                }).length;
+            $users.empty();
+            result.data.items.slice(0, 16).forEach(function(user) {
+                $users.prepend(
+                    Ox.Element({
+                            element: '<img>',
+                            tooltip: '<div style="text-align: center">'
+                                + (user.location || 'Unknown')
+                                + '<br><span class="OxLight">'
+                                + Ox.formatDate(user.lastseen, '%T')
+                                + '</span></div>'
+                        })
+                        .attr({src: Ox.getFlagByGeoname(user.location, 16)})
+                        .css(css)
+                        .bindEvent({anyclick: stop})
+                );
+            });
+            $users.prepend(
+                Ox.Element({
+                        tooltip: Ox.formatNumber(newUsers) + '/'
+                            + Ox.formatNumber(allUsers)
+                            + ' (new/total) users in the last 24 hours'
+                    })
+                    .addClass('OxLight')
+                    .css({float: 'left', margin: '2px', fontSize: '10px'})
+                    .html(
+                        Ox.formatNumber(newUsers) + '/'
+                        + Ox.formatNumber(allUsers)
+                    )
+                    .bindEvent({anyclick: stop})
+            );
+        });
+        timeout = setTimeout(getUsers, 60000);
+    }
+
+    function load() {
+        pandora.$ui.mainMenu.find('.OxExtras').prepend($users);
+        patchReload();
+    }
+
+    function patchReload() {
+        pandora.$ui.appPanel.reload = function() {
+            reload();
+            load();
+            timeout ? start() : stop();
+        }
+    }
+
+    function start() {
+        clearTimeout(timeout);
+        timeout = void 0;
+        getUsers();
+    }
+
+    function stop() {
+        clearTimeout(timeout);
+        timeout = void 0;
+        $('.OxTooltip').hide();
+        $users.empty().append($icon.bind({click: start}));
+    }
+
+}());