Merge pull request thedjpetersen#19 from thedjpetersen/9/feature/user…

…list

9/feature/userlist

assets/css/subway.css

@@ -179,6 +179,15 @@
   background: #F9F9F9;
 }
 
+.joinpart{
+  padding: 1% 0% 1% 1%;
+}
+
+.joinpart img{
+  padding-right: 1%;
+  vertical-align: text-bottom;
+}
+
 .chat_name{
   display: table-cell;
   width: 14%;
@@ -227,3 +236,32 @@
   overflow-y: auto;
   height: 95%;
 }
+
+.userlist_user{
+  border-bottom: 1px solid #CCCCCC;
+  display: table;
+  width: 100%;
+}
+
+.userlist_user_activity{
+  width: 13%;
+  display: table-cell;
+  padding: 2%;
+  background: #EFEFEF;
+  text-align: center;
+  border-right: 1px solid #DDDDDD;
+}
+
+.userlist_user_info{
+  display: table-cell;
+  width: 87%;
+  padding: 3% 0% 3% 5%;
+}
+
+.userlist_user_name{
+  font-weight: bold;
+}
+
+.userlist_user_active{
+  color: #666666;
+}

assets/js/client.js

@@ -56,7 +56,7 @@ $(function() {
       irc.chatWindows.add({name: data.channel});
     } else {
       var channel = irc.chatWindows.getByName(data.channel);
-      channel.participants.add({nick: data.nick});
+      channel.userList.add({nick: data.nick, role: data.role, idle:0, user_status: 'active', activity: 'Joined'});
       var joinMessage = new Message({type: 'join', nick: data.nick});
       joinMessage.setText();
       channel.stream.add(joinMessage);
@@ -69,13 +69,23 @@ $(function() {
     if (data.nick === irc.me.nick) {
       channel.part();
     } else {
-      channel.participants.getByNick(data.nick).destroy();
+      var user = channel.userList.getByNick(data.nick);
+      user.view.remove();
+      user.destroy();
       var partMessage = new Message({type: 'part', nick: data.nick});
       partMessage.setText();
       channel.stream.add(partMessage);
     }
   });
 
+  irc.socket.on('names', function(data) {
+    var channel = irc.chatWindows.getByName(data.channel);
+    channel.userList = new UserList(channel);
+    $.each(data.nicks, function(nick, role){
+      channel.userList.add(new User({nick: nick, role: role, idle:0, user_status: 'active', activity: 'Joined'}))
+    });
+  });
+
   irc.socket.on('topic', function(data) {
     var channel = irc.chatWindows.getByName(data.channel);
     channel.set({topic: data.topic});

assets/js/collections.js

@@ -55,10 +55,24 @@ var WindowList = Backbone.Collection.extend({
 
 var UserList = Backbone.Collection.extend({
   model: User,
+
+  initialize: function(channel) {
+    this.channel = channel;
+    this.view = new UserListView({collection:this});
+  },
+
   getByNick: function(nick) {
     return this.detect(function(user) {
       return user.get('nick') == nick;
     });
+  },
+
+  getUsers: function() {
+    var users = [];
+    for (var i=0; i<this.models.length; i++){
+      users.push(this.models[i].get('nick'));
+    }
+    return users;
   }
 });
 

assets/js/models.js

@@ -28,13 +28,13 @@ var Message = Backbone.Model.extend({
     var text = '';
     switch (this.get('type')) {
       case 'join':
-      text = this.get('nick') + ' joined the channel';
+      text = '<img src=\'/assets/images/join.png\' /><b>' + this.get('nick') + '</b> joined the channel';
       break;
       case 'part':
-      text = this.get('nick') + ' left the channel';
+      text = '<img src=\'/assets/images/part.png\' /><b>' + this.get('nick') + '</b> left the channel';
       break;
       case 'nick':
-      text = this.get('oldNick') + ' is now known as ' + this.get('newNick');
+      text = '<b>' + this.get('oldNick') + '</b> is now known as ' + this.get('newNick');
       break;
     }
     this.set({text: text});
@@ -136,8 +136,10 @@ var ChatWindow = Backbone.Model.extend({
 });
 
 var User = Backbone.Model.extend({
+  initialize: function(){
+  },
+
   defaults: {
     opStatus: ''
   }
 });
-

assets/js/views/chat.js

@@ -57,21 +57,21 @@ var ChatView = Backbone.View.extend({
             $(this).val('');
             $('#chat_button').addClass('disabled');
           } else if (event.keyCode == 9) {
-            console.log(event);
+            var channel = irc.chatWindows.getActive();
             // Tab completion of user names
-            var sentence = $(this).val().split(' ');
+            var sentence = $('#chat_input').val().split(' ');
             var partialMatch = sentence.pop();
             // TODO: Make this work (copy-paste from old code; it doesn't work)
             // All the below code is busted until this is resolved.
-            // channel = app.model.chatApp.channels.findChannel(app.activeChannel);
-            var users = channel.attributes.users;
-            for (user in users) {
+            var users = channel.userList.getUsers();
+            for (var i=0; i<users.length; i++) {
+              var user = users[i] || '';
               if (partialMatch.length > 0 && user.search(partialMatch) === 0) {
                 sentence.push(user);
                 if (sentence.length === 1) {
-                  $(this).val(sentence.join(' ') +  ":");
+                  $('#chat_input').val(sentence.join(' ') +  ":");
                 } else {
-                  $(this).val(sentence.join(' '));
+                  $('#chat_input').val(sentence.join(' '));
                 }
               }
             }
@@ -88,12 +88,24 @@ var ChatView = Backbone.View.extend({
   addMessage: function(msg) {
     var $chatWindow = this.$('#chat-contents');
     var view = new MessageView({model: msg});
+    var sender = msg.get('sender');
+    var type = msg.get('type');
+    if (sender !== '' && type === 'message'){
+      var user = this.model.userList.getByNick(sender);
+      user.set({idle: 0});
+      user.view.addToIdle();
+    }
+
     $chatWindow.append(view.el);
 
-    if (msg.get('sender') === irc.me.nick) {
+    if (sender === irc.me.nick) {
       $(view.el).addClass('message-me');
     }
 
+    if(type === 'join' || type === 'part'){
+      $(view.el).addClass('joinpart');
+    }
+
     // Scroll down to show new message
     var chatWindowHeight = ($chatWindow[0].scrollHeight - 555);
     // If the window is large enough to be scrollable

assets/js/views/user_list.js

@@ -0,0 +1,47 @@
+var UserView = Backbone.View.extend({
+  initialize: function(user) {
+    this.user = user;
+    this.setStatus();
+  },
+
+  className: 'userlist_user',
+
+  render: function() {
+    $(this.el).html(ich.userlist_user(this.user.model.attributes));
+    return this;
+  },
+
+  addToIdle: function(){
+    var idle_time = this.user.model.get('idle') + 1;
+    if (idle_time > 60) {
+      this.user.model.set({activity: 'idle', user_status: 'idle'});
+    } else {
+      this.user.model.set({activity: 'Last active ' + idle_time + ' minutes ago', idle: idle_time});
+    }
+    this.render();
+  },
+
+  setStatus: function(){
+    //One minute delays
+    var self = this;
+    var interval = 60000;
+    window.setInterval(function() { self.addToIdle() }, interval);
+  }
+});
+
+var UserListView = Backbone.View.extend({
+  initialize: function() {
+    this.el = this.collection.channel.view.$('#user-list');
+    this.collection.bind('add', this.add, this);
+  },
+
+  render: function() {
+    return this;
+  },
+
+  add: function(User) {
+    var userView = new UserView({model: User});
+    User.view = userView;
+    $(this.el).append(userView.render().el);
+  }
+});

views/templates.jade

@@ -71,7 +71,11 @@ script(id="unread_mentions", type="text/html")
   span(class="unread_mentions", title="Mentions in channel") {{unread_mentions}}
 
 script(id="userlist_user", type="text/html")
-  li {{username}}
+  div(class="userlist_user_activity")
+    img(src="/assets/images/{{user_status}}.png")
+  div(class="userlist_user_info")
+    div(class="userlist_user_name") {{role}}{{nick}}
+    div(class="userlist_user_active") {{activity}}
 
 script(id="link", type="text/html")
   a(target="_blank", href="{{link}}") {{link}}