How can we increment the Semantic UI Progress bar based on the mongoDB data?

Question

I have a situation where the progress of a job should be displayed on the UI, for that I'm constantly(5 sec) retrieving the job progress and storing into mongoDB. As Semantic UI provide progress bar functionality, I tried implementing in my meteor project. The problem is that progress is not getting incremented.

sample.html

<div class="ui blue active progress stats" style="padding:0.25%;;width:7%;margin:0% 1%;margin-top:0.5%;" data-value={{prog}} id="statProgress">
    <div class="bar">
        <div class="progress {{progValue}}"></div>
    </div>
</div>

sample.js

$('#statProgress')
  .progress({
    label: 'ratio',
    text: {
      ratio: '{value}'
    }
 });

Template.sample.onRendered (function(){
   var progv=Session.get("selectedProgress");
   this.$('.ui.progress').progress({value: progv});
});

Template.sample.helpers({
 'progValue':function(){
    var id=this._id; //job ID
    console.log("inside the progValue and the id is: ",id);
    var jobDetails=job.find({_id:id}).fetch();
    console.log(jobDetails);
    console.log(jobDetails[0].prog);
    Session.set("selectedProgress",jobDetails[0].prog);
    var x=Session.get("selectedProgress");
    console.log(x);
 }
});

Can anyone point where exactly I have missed out and how can i correct it?

Answer 1

Several things to double check:

1. Semantic UI initialisation: Your don't need to set a value here as your value will be provided by your helper

   Template.sample.onRendered (function(){ var progv=Session.get("selectedProgress"); this.$('.ui.progress').progress(); });

2. Semantic UI usage (I removed your style for simplicity): If you use data-value to get the value of the Blaze helper, you don't need to add the value again in the inner div.

    <div class="ui blue active progress stats" data-value={{progValue}} id="statProgress"> <div class="bar"> <div class="progress"></div> </div> </div>

3. Blaze Helper: Your helper should return a value ! If your last statement is a console.log(..), the return value will be 'undefined'. You don't need the Session as the Mongo find is also reactive and will re-run on every update (By the way, another suggestion could be to query your collection with 'findOne' instead of find().fetch() and your helper could take a single line):

    'progValue':function(){ var id=this._id; //job ID var jobDetails=job.find({_id:id}).fetch(); return(jobDetails[0].prog); }

Good luck JF