Functioning socket implementation for live updating user statuses on …

…status listings page

public/js/script.js

@@ -1,13 +1,41 @@
 var socket = io.connect('http://localhost:3003');
 
-function update_or_append_status(username, status) {
-    $('.status-container[rel='+username+']').each(function (i,el) {el.innerHTML = status.status; console.log(el)});
+var status_template = "<p class=\"status-line\" rel=\"{{username}}\"><a href=\"/status/{{username}}\">{{username}}</a>: <span class=\"status-container\">{{status}}</span></p>"
+
+function update_or_append_status(list, username, status) {
+    var line = list.find('.status-line[rel='+username+']');
+    console.log(line);
+    if (!line.length) {
+        // there is no line in the parent element
+        var newline = $(status_template)
+            .attr('rel', username)
+            .find('a')
+            .each(function() {
+                $(this)
+                    .attr('href', '/status/'+username)
+                    .text(username);
+            })
+            .end()
+            .find('.status-container')
+            .each(function() {
+                $(this).text(status);
+            })
+                .end();
+
+        newline.appendTo(list);
+    } else {
+        line.find('.status-container').each(function () {
+            $(this).text(status);
+            console.log(el);
+        });
+    }
 }
 
 socket.on('status_update', function (data) {
-    var to_update = document.getElementsByClassName("status-container");
-    for (var k in data) {
-        var status = data[k];
-        update_or_append_status(status.username, status.status)
-    }
+    $('.status-list').each(function () {
+        for (var k in data) {
+            var status = data[k];
+            update_or_append_status($(this), status.username, status.status.status);
+        }
+    });
 });

routes/index.js

@@ -69,8 +69,7 @@ bootstrap();
 // Sockets
 
 io.sockets.on('connection', function (socket) {
-    var statuses = get_statuses();
-    socket.emit('status_update', statuses);
+    socket.emit('status_update', get_statuses());
     console.log('new connection opened');
 });
 
@@ -99,6 +98,7 @@ exports.alert = function(req, res){
     if (user != undefined) {
         user.alert();
 
+        io.sockets.emit('status_update', get_statuses());
         console.log("Alert received and processed for %s", username);
         res.render('alert', {
             locals: {'username': username}
@@ -144,6 +144,7 @@ exports.checkin = function(req, res) {
 
     if (user != undefined) {
         user.checkin(models.sources.SYSTEM, 'online checkin')
+        io.sockets.emit('status_update', get_statuses());
         console.log("Checked in for %s: %s", username, user.status);
         res.redirect('/status/' + user.username);
     } else {

views/status_listings.mustache

@@ -1,4 +1,3 @@
 <h1>Current status of all system users</h1>
-{{#statuses}}
-   <p><a href="/status/{{username}}">{{username}}</a>: <span class="status-container" rel="{{username}}">{{status.status}}</span></p>
-{{/statuses}}
+<div class="status-list">
+</div>