mongodbtogglemeteor-blazemeteor-helper

Toggle state based on true or false condition in Meteor Blaze


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")
}

Solution

  • 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.