Toggle state based on true or false condition in Meteor Blaze

Question

What's the best way to toggle status? I have this data sample below. The status field is to track when a user becomes active online. This is a referral program. The person who referred a user should be able to know when the user creates an account by the status changing from red to green. How do I make these status to toggle.

From the DB when status.active === true that means the user is active, the status should turn green. If status.active === false, this means the user is inactive, it should turn to red.

The is the Blade template

<h4 class="media-heading">
  {{#if equals 'status.active' 'true' }}
    <div> class="circle active"></div> 
  {{else}}
    <div class="circle not-active"></div>
  {{/if}}<a href="/student/{{slug}}" target="_parent">{{firstname}} {{lastname}}  <small class="pull-right">{{ createAt}}<label><input type="checkbox" name="eachstudents" value="{{_id}}">Add to Module</label></small></a></h4>

Sample data

{ 
    "_id" : "5jW9gcLaKg83LynML", 
    "registra" : "kadeoya", 
    "status" : {
        "active" : true, 
        "activedate" : ISODate("2017-09-16T08:59:55.062+0000")
    }, 
    "userId" : "n5rqFSHbhm7zqADyB", 
    "createdAt" : ISODate("2017-09-05T18:45:14.804+0000")
}
{ 
    "_id" : "MbNoqW2ZYhZco3My5", 
    "registra" : "kadeoya", 
    "status" : {
        "active" : true, 
        "activedate" : ISODate("2017-09-11T08:49:08.830+0000")
    }, 
    "userId" : "n5rqFSHbhm7zqADyB", 
    "createdAt" : ISODate("2017-09-05T18:45:14.824+0000")
}

Answer 1

You simply have to make a helper to check the status "online" or "offline". You can use below code,

Template.Template_Name.helper({
    isActive(){
        var document = Collection.find({}).fetch()[0]; // add ur conditions in find({})
        return document && document.status && document.status.active;
    }
});

then you can call this helper in blade template as below,

{{#if isActive }}
   <div class="circle active"></div> 
{{else}}
   <div class="circle not-active"></div>
{{/if}}

In this way, your helper will be reactive and will toggle as and when the value for "status.active" changes in the particular document.