add support for activity timestamps and user profiles

src/app.js

@@ -85,6 +85,16 @@ io.on('connection', function(socket){
   socket.on('refresh navbar', function() {
     socket.emit('refresh navbar', connectionManager.getConnections());
   });
+
+  socket.on('typing', function(){
+    var connection = connectionManager.getConnection(socket);
+    connection['lastActive'] = (new Date()).toLocaleTimeString();
+    console.log(connection['lastActive']);
+  });
+
+  socket.on('view profile', function(nickname){
+    socket.emit('populate profile', connectionManager.getConnectionByNickname(nickname));
+  })
 });
 
 var port = process.env.PORT || 3000;

src/connection-manager.js

@@ -3,7 +3,8 @@ var connections = []
 function addConnection(name, socket){
   connections.push({
     nickname: name,
-    _id: socket.id
+    _id: socket.id,
+    lastActive: (new Date()).toLocaleTimeString()
   });
   console.log(connections.length);
 };
@@ -26,6 +27,14 @@ function getConnection(socket){
   }
 };
 
+function getConnectionByNickname(nickname){
+  for (var i = 0; i < connections.length; i++){
+    if (connections[i].nickname == nickname){
+      return connections[i];
+    }
+  }
+}
+
 function getConnections(){
   return connections;
 };
@@ -40,6 +49,7 @@ module.exports = {
   addConnection: addConnection,
   removeConnection: removeConnection,
   getConnection: getConnection,
+  getConnectionByNickname, getConnectionByNickname,
   getConnections: getConnections,
   setAvatar: setAvatar,
   connections: connections

src/index.html

@@ -22,7 +22,7 @@
          <div class="background">
            <img src="images/office.jpg">
          </div>
-         <a href="#!user"><img class="circle" id="profile-avatar" src=""></a>
+         <a href="#!user"><img class="circle" id="avatar" src=""></a>
          <a href="#!name"><span class="white-text name" id="nickname-navbar"></span></a>
          <a href="#!email"><span class="white-text email"></span></a>
        </div></li>
@@ -38,13 +38,26 @@
       <div class="modal-content">
         <div class="row center-align">
           <div class="input-field col s4">
-            <input id="nickname" type="text" maxlength="30">
+            <input id="nickname" type="text" maxlength="22">
             <label for="nickname">Nickname</label>
           </div>
           <button class="waves-effect waves-light btn gap" id="join" onclick="attemptToJoin()">Join</button>
         </div>
       </div>
     </div>
+    <!-- Profile Modal -->
+    <div id="modal2" class="modal profile">
+      <div class="modal-content center-align">
+        <div class="userView">
+          <img class="circle" id="profile-avatar" src="">
+          <div class="black-text profile-nickname" id="profile-nickname"></div>
+          <div class="black-text profile-active"><div class="chip">Last Active: <span id="profile-activity"></span></div></div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat" onclick="$('#modal2').modal('close');">Close</a>
+      </div>
+    </div>
 
     <ul id="messages"></ul>
     <form action="" id="input">

src/public/css/main.css

@@ -14,3 +14,6 @@ form button { width: 9%; background: rgb(130, 224, 255); border: none; padding:
 .side-nav .valign-wrapper:hover { background-color: rgba(0,0,0,0.05) !important; }
 .side-nav .valign-wrapper .user { background-color: transparent !important; }
 .sendButton { float: right; margin-top: 0.3%; margin-right: 0.3%; }
+.profile { width: 30% !important; }
+.profile-nickname { font-size: 2.5rem; }
+.profile-active { font-size: 1rem; }

src/public/js/main.js

@@ -40,12 +40,18 @@ function openSocket(nickname){
   });
   socket.on('update avatar', function(connectionObject, connections){
     Materialize.toast("Your avatar has been updated", 3000, 'rounded');
-    $('#profile-avatar').attr('src', connectionObject.avatar);
+    $('#avatar').attr('src', connectionObject.avatar);
     updateUserList(connections);
   });
   socket.on('refresh navbar', function(connections){
     updateUserList(connections);
   });
+  socket.on('populate profile', function(connectionObject){
+    $('#profile-avatar').attr('src', connectionObject.avatar);
+    $('#profile-nickname').text(connectionObject.nickname);
+    $('#profile-activity').text(connectionObject.lastActive);
+    $('#modal2').modal('open');
+  })
 };
 function notifyDOM(info){
   $('#messages').append($('<li><b>' + info.msg + '</b></li>'));
@@ -57,7 +63,7 @@ function updateUserList(connections){
   $('#users-online').nextAll().remove();
   $('#users-online-status').text('Users online: ' + usersOnline);
   for (var i = 0; i < usersOnline; i++){
-    $('#slide-out').append($('<li class="valign-wrapper"><a class="waves-effect user" href="#!"><img class="circle avatar-sidenav-list" src="' + connections[i].avatar + '">' + connections[i].nickname + '</a></li>'));
+    $('#slide-out').append($('<li class="valign-wrapper" onClick="socket.emit(\'view profile\', this.id)" id="' + connections[i].nickname + '"><a class="waves-effect user" href="#!"><img class="circle avatar-sidenav-list" src="' + connections[i].avatar + '">' + connections[i].nickname + '</a></li>'));
   }
 };
 
@@ -81,3 +87,22 @@ function attemptToJoin() {
     socket.emit('attempt login', nickname);
   }
 };
+
+var typing = false;
+var timeout;
+function finishedTyping(){
+  typing = false;
+  socket.emit('typing');
+};
+$("#m").keypress(function(event){
+  // Only monitor activity when user is pressing any key other than enter key
+  if (event.keyCode != 13){
+    if (!typing){
+      typing = true;
+      socket.emit('typing');
+    }else{
+      clearTimeout(timeout);
+      timeout = setTimeout(finishedTyping, 3000);
+    }
+  }
+});

src/public/js/modal.js

@@ -1,7 +1,7 @@
 $(document).ready(function(){
     // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
     $('.modal').modal({dismissible: false});
-    $('#image-select').modal({dismissible: true});
+    $('#modal2').modal({dismissible: true});
     $('#modal1').modal('open');
     $('.button-collapse').sideNav({
       menuWidth: 300, // Default is 240