Why Does a Template That Renders for One User Not Render For Another User?

Question

New Meteor User.

Wanting to modify the leaderboard example for a story sizing tool where members in a team can rate a story simultaneously.

Very similar to leaderboard, but want to add a flag/event/button for an admin user to be able to turn on and off the leaderboard displayed.

Here is my feeble attempt at this -

// Set up a collection to contain member information. On the server,'

// it is backed by a MongoDB collection named "members".

Members = new Meteor.Collection("members");
Flags = new Meteor.Collection("Flags");


if (Meteor.isClient) {
    Meteor.startup(function() {

    Session.set("viewall", false);
  });
  Template.leaderboard.members = function () {
  if (Session.get("viewall"))
  {
    return Members.find({}, {sort: {score: -1, name: 1}});
  }

  };

  Template.size.members = function() {
  return Members.find({}, {sort: {name: 1}});
  };

  Template.size.events ({
    'click input.submit': function(){
        var memname = document.getElementById('select_member').value;
        //alert(memname);
        var member = Members.findOne({_id: memname});
        if(member._id)
        {
        Session.set("selected_player", member._id);
            //alert(member.name);
        }
        var memsize = document.getElementById('select_size').value;
        alert(memsize);
        Members.update(Session.get("selected_player"), {$set: {score: memsize}});
    }
  });

  Template.leaderboard.isAdmin = function() {
    var member=Members.findOne(Session.get("selected_player"));
    var  memtype = member.utype;
    if (memtype=== "admin")
    {
        return true;
    }
    else
    {   
        return false;
    }
  };
  Template.leaderboard.selected_name = function () {
    var member = Members.findOne(Session.get("selected_player"));
    return member && member.name;
  };

  Template.leaderboard.viewAll = function() {
    var flag = Flags.findOne({name:"showAll"});
    if (flag)
    {
    alert("View All flag set for current user : " + flag.value);
    return flag && flag.value;
    }
    else return false;
 };


  Template.leaderboard.selected_size = function () {
    var member = Members.findOne(Session.get("selected_player"));
    return member && member.score;
  };


  Template.member.selected = function () {
    return Session.equals("selected_player", this._id) ? "selected" : '';
  };

  Template.leaderboard.events({
    'click input.inc1': function () {
        alert('setting it to 1');
        updatePrevScore();
    //  Members.find({_id: Session.get("selected_player")}).foreach(function(doc){
    //  doc.prev_score = doc.score;
    //  Member.save(doc);
    //  });
        //Members.update(Session.get("selected_player"), {$set: {prev_score: score}});
      Members.update(Session.get("selected_player"), {$set: {score: 1}});
    },
    'click input.inc2': function () {
    updatePrevScore();
      Members.update(Session.get("selected_player"), {$set: {score: 2}});
    },
    'click input.inc3': function () {
    updatePrevScore();
      Members.update(Session.get("selected_player"), {$set: {score: 3}});
    },
    'click input.inc5': function () {
    updatePrevScore();
      Members.update(Session.get("selected_player"), {$set: {score: 5}});
    },
    'click input.inc8': function () {
    updatePrevScore();
      Members.update(Session.get("selected_player"), {$set: {score: 8}});
    },
    'click input.inc13': function () {
    updatePrevScore();
      Members.update(Session.get("selected_player"), {$set: {score: 13}});
    },
    'click input.inc20': function(){
    updatePrevScore();
    Members.update(Session.get("selected_player"),{$set: {score:20}});
    },
    'click input.reset': function(){
     if (confirm('Are you sure you want to reset the points?')) {
        resetScores();  
        }
    },
    'click input.showAll': function() {
            setFlag();
    },
    'click input.hideAll': function() {
            resetFlag();
    }

  });



  Template.member.events({
    'click': function () {
      Session.set("selected_player", this._id);
    }
  });


function resetFlag() {
    Meteor.call("resetFlag", function(error, value) {
    Session.set("viewall", false);
    });
};

function setFlag() {
    Meteor.call("setFlag", function(error, value) {
    Session.set("viewall", true);
    });
};

function resetScores() {
        //alert('resetting scores');
                Members.find().forEach(function (member) {
                Members.update(member._id, {$set: {prev_score: member.score}});
                Members.update(member._id, {$set: {score: 0}});
  });
    Session.set("selected_player", undefined);
};

function updatePrevScore() {
        //alert('resetting scores');
         Members.find().forEach(function (member) {
         if (member._id === Session.get("selected_player"))
         {
                Members.update(member._id, {$set: {prev_score: member.score}});
                Members.update(member._id, {$set: {score: 0}});
                }
  });

};
}
// On server startup, create some members if the database is empty.
if (Meteor.isServer) {

    Members.remove({});
    Meteor.startup(function () {
    if (Members.find().count() === 0) {
      var names = ["Member 1",
      "Member 2",
                   "Member 3",
                   "Member 4",
                   "Member 5"
                  ];
      var type; 
      for (var i = 0; i < names.length; i++)
        {

            if (i===0)
                type = "admin";
            else
                type="user";

            Members.insert({name: names[i], score: 0, prev_score:0, utype:type});
        }

    }
    else resetScores();

    if (Flags.find().count() === 0) {
        Flags.insert({name: "showAll", value: false});
    }
    else Flags.update({name:"showAll"}, {$set: {value:false}});

  }



  );
  Meteor.methods({
    setFlag: function() {
            Flags.update({name:"showAll"}, {$set: {value:true}});
            console.log("Updated flag to true");
            return true;
            },
    resetFlag: function() {
      Flags.update({name:"showAll"}, {$set: {value:false}});
      console.log("Updated flag to false");
        return false;
            },

    }
  );

HTML =>

<head>
  <title>Story Points Exercise</title>
</head>

<body>
   <div id="story_id">
   Story Sizing for Story ID: 78972
   </div>



  <div id="outer">
    {{> leaderboard}}
  </div>
</body>

<template name="size">

    <div class="select_member">
    <select id="select_member"> 
    {{#each members}}
    <option value={{_id}}> {{name}} </option>
    {{/each}}
    </select>
    </div>
    <div class="select_size">

    <select id="select_size"> Select Size:
    <option value=1>1</option>
    <option value=2>2</option>
    <option value=3>3</option>
    <option value=5>5</option>
    <option value=8>8</option>
    <option value=13>13</option>
    <option value=20>20</option>
    </select>
    </div>
    <div class="submitbutton">
    <input type="button" class="submit" value="Submit" />
    </div>

</template>

<template name="leaderboard">

<div class="leaderboard">

  {{#if selected_name}}



  <div class="details">
    <div class="name">{{selected_name}}</div>
    <div class="size">{{selected_size}}</div>

    <div class="details">
    <input type="button" class="inc1" value="1 points" />
    <input type="button" class="inc2" value="2 points" />
    <input type="button" class="inc3" value="3 points" />
    <input type="button" class="inc5" value="5 points" />
    <input type="button" class="inc8" value="8 points" />
    <input type="button" class="inc13" value="13 points" />
    <input type="button" class="inc20" value="20 points" />
    </div>

    {{#if isAdmin}}
        <input type="button" class="showAll" value="showAll" />
        <input type="button" class="hideAll" value="hideAll" />
        <input type="button" class="reset" value="Reset"/>
    {{/if}}


  {{#if viewAll}}

    {{#each members}}
      {{> member}}
    {{/each}}

  {{/if}}
  </div>

  {{/if}}

  {{#unless selected_name}}

  {{>size}}
  {{/unless}}


  </div>
</template>

<template name="member">
  <div class="member {{selected}}">
    <span class="name">{{name}}</span>
    <span class="score">{{score}}</span>
    <span class="prevscore">{{prev_score}}</span>
  </div>
</template>

Its working on one browser and one user (Admin type is able to enable the viewAll flag for the template to show all members.) But, not working for mulitple users.

So, if I open a browser, select my name and a story size and I am the admin, I click Submit - I see buttons for changing the story size and to showAll, hideAll and Resetting the leaderbaord.

when I click on showAll, I as admin can see the leaderboard. But another user is not able to see the leaderboard. I verified that the change display event (showAll flag=true) is being received by that user's client.

Any ideas?

Answer 1

I was able to solve this by using a new collection called Views and observing for a specific document called showAll.

The showAll was set to be updated by the admin only.

It was hooked up to the template view with an {{#if}}.