Improve online users UI [REQ Bootstrap]

modules/users/web.js

@@ -25,33 +25,44 @@ var pages = function(dbot) {
             if(connections.hasOwnProperty(connection) && 
                 connections[connection].channels.hasOwnProperty(channel)) {
 
+                var userData = { "active": [], "inactive": [], "offline": []};
                 var channelUsers = dbot.db.knownUsers[connection].channelUsers[channel];
-                var usersData = {};
-                for(var i=0;i<channelUsers.length;i++) {
-                    usersData[channelUsers[i]] = { 
-                        'name': channelUsers[i], 
-                        'online': false, 
-                        'active': false 
-                    }; 
-                }
 
                 var onlineNicks = connections[connection].channels[channel].nicks;
-                onlineNicks.each(function(nick) {
-                    var nick = nick.name;
-                    var user = dbot.api.users.resolveUser(connection, nick); 
-                    if(onlineNicks.hasOwnProperty(nick)) {
-                        usersData[user].online = true;
+                for(var i=0;i<channelUsers.length;i++) {
+                    if(channelUsers[i] == dbot.config.name){
+                        continue;
                     }
-                    console.log(user);
-                    usersData[user].active = dbot.api.stats.isActive({
-                        'server': connection,
-                        'user': user,
-                        'channel': channel
-                    });
-                }.bind(this));
+                    if(onlineNicks.hasOwnProperty(channelUsers[i])){
+                        var user = dbot.api.users.resolveUser(connection, channelUsers[i]);
+                        if(dbot.api.stats.isActive({'server': connection,
+                                                    'user': user,
+                                                    'channel': channel
+                        })){
+                            userData.active.push(channelUsers[i]);
+                        }
+                        else{
+                            userData.inactive.push(channelUsers[i]);
+                        }
+                    }
+                    else{
+                        userData.offline.push(channelUsers[i]);
+                    }
+                }
+
+                var userSort = function(a, b){
+                    var x = a.toLowerCase();
+                    var y = b.toLowerCase();
+                    if(x > y) return 1;
+                    if(x < y) return -1;
+                    return 0;
+                }
+                userData.active.sort(userSort);
+                userData.inactive.sort(userSort);
+                userData.offline.sort(userSort);
 
                 res.render('users', { 'name': dbot.config.name, 'connection': connection,
-                    'channel': channel, 'nicks': usersData });
+                    'channel': channel, 'nicks': userData });
             } else {
                 res.render_core('error', { 'name': dbot.config.name, 'message': 'No such connection or channel.' });
             }

public/styles.css

@@ -6,19 +6,19 @@
  */
 
 html {
-    background: url("background.jpg") no-repeat center center fixed;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
 }
 
 body {
     padding: 25px;
     margin: 0;
-    font-family: "Lucida Grande";
+    font-family: "Source Sans Pro", sans-serif;
     color: #444;
     text-shadow: 1px 1px 2px #2B2B2B;
+    background: url("background.jpg") no-repeat center center fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
 }
 
 h1,h2 {

views/layout.jade

@@ -2,12 +2,17 @@
 html(lang='en')
   head 
     meta(charset='utf-8')
+    link(rel="stylesheet", type="text/css", href="http://fonts.googleapis.com/css?family=Source+Sans+Pro")
+    link(rel="stylesheet", type="text/css", href="/bootstrap/css/bootstrap.min.css")
     link(rel='stylesheet', type='text/css', href='/styles.css')
     title #{name} web interface
   body
-    div#page
-        div#title 
-            a(href='/') #{name} web interface
-        div#main
-            block content
+    div.container
+        div#page
+            div#title 
+                a(href='/') #{name} web interface
+            div#main
+                block content
+    script(type="text/javascript", src="/bootstrap/js/bootstrap.min.js")
     script(type="text/javascript", src="/script.js")
+

views/users/users.jade

@@ -4,14 +4,29 @@ block content
     h3 Users of #{channel} on #{connection}
     div#backlink 
         a(href='/channels/'+connection) « Channel List
-    ul#quotelist
-      -each nick in nicks
-        if nicks.hasOwnProperty(nick.name)
-          a(href='/user/'+connection+'/'+channel.substr(1,channel.length)+'/'+nick.name)
-            if nick.online
-              if nick.active
-                li.quotes #{nick.name} (Online, Active) 
-              else
-                li.quotes #{nick.name} (Online, Inactive)
-            else
-              li.quotes #{nick.name} (Offline) 
+    div#row
+        table.table.table-striped
+            thead
+                tr: th Users
+            tbody
+              -each nick in nicks.active
+                tr
+                  td
+                      a(href='/user/'+connection+'/'+channel.substr(1,channel.length)+'/'+nick)
+                        #{nick}
+                      span 
+                      span.label.label-success Active
+              -each nick in nicks.inactive
+                tr
+                  td
+                      a(href='/user/'+connection+'/'+channel.substr(1,channel.length)+'/'+nick)
+                        #{nick}
+                      span   
+                      span.label.label-important Inactive 
+              -each nick in nicks.offline
+                tr
+                  td
+                      a(href='/user/'+connection+'/'+channel.substr(1,channel.length)+'/'+nick)
+                        #{nick}
+                      span   
+                      span.label Offline