W2.6: display editing users.

.eslintrc.js

@@ -203,7 +203,7 @@ module.exports = {
     "no-spaced-func": 1, // disallow space between function identifier and application
     "no-ternary": 0, // disallow the use of ternary operators (off by default)
     "no-trailing-spaces": 1, // disallow trailing whitespace at the end of lines
-    "no-underscore-dangle": 1, // disallow dangling underscores in identifiers
+    "no-underscore-dangle": 0, // disallow dangling underscores in identifiers
     "object-curly-spacing": [2, "always"],
     "one-var": [2, "never"], // allow just one var statement per function (off by default)
     "operator-assignment": [1, "never"], // require assignment operator shorthand where possible or prohibit it entirely (off by default)
@@ -242,7 +242,7 @@ module.exports = {
     "max-params": [2, 5], // limits the number of parameters that can be used in the function declaration. (off by default)
     "max-statements": 0, // specify the maximum number of statement allowed in a function (off by default)
     "no-bitwise": 0, // disallow use of bitwise operators (off by default)
-    "no-plusplus": 2, // disallow use of unary operators, ++ and -- (off by default)
+    "no-plusplus": 0, // disallow use of unary operators, ++ and -- (off by default)
 
     //
     // eslint-plugin-react

textcircle.html

@@ -13,6 +13,11 @@
   </nav><!-- /nav -->
 
   <div class="container top-margin">
+    <div class="row">
+      <div class="col-md-12">
+        {{> editingUsers }}
+      </div>
+    </div>
     <div class="row">
       <div class="col-md-6">
         {{> editor}}
@@ -33,3 +38,10 @@
   <iframe id="viewer_iframe">
   </iframe>
 </template>
+
+<template name="editingUsers">
+  {{#each users }}
+  <span class="label label-success">{{firstname}}</span>
+
+  {{/each}}
+</template>

textcircle.js

@@ -1,6 +1,7 @@
 // This collection stores all the documents.
 // Note: not Documents, but this.Documents, because of the editing package (?)
 this.Documents = new Mongo.Collection("documents");
+// This collection stores sets of users that are editing documents.
 EditingUsers = new Mongo.Collection("editingUsers");
 
 if (Meteor.isClient) {
@@ -15,16 +16,42 @@ if (Meteor.isClient) {
       return function (editor) {
         editor.setOption("lineNumbers", true);
         editor.setOption("mode", "html");
-        editor.on("change", function (cmEditor, info) {
+        // Set a callback that gets triggered whenever the user
+        // makes a change in the code editing window.
+        editor.on("change", function (cmEditor /* , info */) {
           let $preview = $("#viewer_iframe");
+          // Send the current code over to the iframe for rendering.
           $preview.contents().find("html").html(cmEditor.getValue());
           Meteor.call("addEditingUser");
         });
       };
-    },
+    }
   });
 
-}
+  Template.editingUsers.helpers({
+    // Retrieve a set of users that are editing this document.
+    users: function () {
+      let doc = Documents.findOne();
+      if (!doc) {
+        // Give up.
+        return null;
+      }
+      let eUsers = EditingUsers.findOne({ docId: doc._id });
+      if (!eUsers) {
+        // Give up.
+        return null;
+      }
+      let users = new Array();
+      let i = 0;
+      for (let userId in eUsers.users) {
+        users[i] = fixObjectsKeys(eUsers.users[userId]);
+        users[i]._id = userId;
+        i++;
+      }
+      return users;
+    }
+  });
+} // end isClient...
 
 if (Meteor.isServer) {
   Meteor.startup(function () {
@@ -35,10 +62,10 @@ if (Meteor.isServer) {
   });
 }
 
+// Methods that provide write access to the data.
 Meteor.methods({
   addEditingUser: function () {
-    var doc, user, eUsers;
-    doc = Documents.findOne();
+    let doc = Documents.findOne();
     if (!doc) {
       // No doc: give up.
       return;
@@ -48,8 +75,8 @@ Meteor.methods({
       return;
     }
     // Now I have a doc and possibly a user.
-    user = Meteor.user().profile;
-    eUsers = EditingUsers.findOne({ docId: doc._id });
+    let user = Meteor.user().profile;
+    let eUsers = EditingUsers.findOne({ docId: doc._id });
     // No editing users have been stored yet.
     if (!eUsers) {
       eUsers = {
@@ -59,6 +86,20 @@ Meteor.methods({
     }
     user.lastEdit = new Date();
     eUsers.users[this.userId] = user;
+    // Upsert: insert or update if filter matches.
     EditingUsers.upsert({ _id: eUsers._id }, eUsers);
   }
 });
+
+// This renames object keys by removing hyphens to make them compatible
+// with spacebars.
+function fixObjectsKeys(obj) {
+  let newObj = {};
+  for (let key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      const key2 = key.replace("-", "");
+      newObj[key2] = obj[key];
+    }
+  }
+  return newObj;
+}