Multiple Timers On A Single Page In A Meteor Application

Question

I am trying to display multiple timers on a template. My template onCreated function is given below

   Template.viewTeamTermPaper.onCreated(function(){
     let template = Template.instance();
     template.subscribe('getTeamTermPaper');
     template.lastDateSubmit = new ReactiveVar()
     template.timeInterval = new ReactiveVar();
     template.timeLapse = new ReactiveVar()
     template.autorun(function () {
        if (template.lastDateSubmit.get()){
           template.timeInterval.set(setInterval(function() {
           let todayDate = new Date()
           //Session.set("time" , todayDate);
           template.timeLapse.set(getTimeRemaining(template.lastDateSubmit.get()));
        //Session.set("timeLapse" , timeLapse);
   } , 1000));
 }

});

});

I am displaying the each instance of the template with an helper called lastDate().

   Template.viewTeamTermPaper.helpers({
     lastDate(){
     let papers =  TeamTermPaper.find({}).fetch();
     return papers.map(function(paper){
     let obj = {}
     obj.paper = paper;
     Template.instance().lastDateSubmit.set(paper.last_submission_date);
     obj.time = Template.instance().timeLapse.get()
  //arr.push(obj)
     return obj
});

//return arr;

}

});

I have a function which calculates the elapsed time.

     function getTimeRemaining (endtime){
        let t = Date.parse(endtime) - new Date();
        let seconds = ("0" + Math.floor((t/1000) % 60)).slice(-2);
        let minutes = ("0" + Math.floor((t/1000/60) % 60)).slice(-2);
        let hours =   ("0" + Math.floor((t/(1000 * 60 * 60)) %   24)).slice(-2);
        let days = Math.floor(t/(1000*60*60*24));

        if (t <= 0){
            //clearInterval(timeInterval);
        }

        return {
            'total' : t,
            'days'  : days,
            'hours' : hours,
            'minutes': minutes,
            'seconds' : seconds
        }

}

This is how i out put the instance of the template

  <template name="viewTeamTermPaper">
    {{#each lastDate}}
        {{> studentViewTeamPaper}}
    {{/each}}
  </template>

My problem is i have the same timer for each item that is contained in the lastDate helper instead of different count down timers. I was thinking maybe for each item in my collection i should create a reactive variable that can be stored in an array. I don't know how to go about this line of thought. Any help is really appreciated.

 <template name="studentViewTeamPaper">
   <div class="row">
      <div class="col-md-12 card">
          <div class="table-responsive">
            <table class="table table-bordered">

               <thead>
                 <tr>
                  <th class="text-danger">Term Paper Name</th>
                  <th class="text-danger">View</th>
                  <th class="text-danger">Count Down</th>
                </tr>
               </thead>


             <tbody>

               <tr>
                  <td>

                      {{paper_name}}


                  </td>

                  <td>
                      {{last_submission_date}}

                  </td>

                  <td></td>
              </tr>

            </tbody>
          </table>
        </div>


     </div>
   </div>
 </template>

Answer 1

You're trying to control everything from the parent template instead of from the individual item template. If you define the countdown timer at the lower level studentViewTeamPaper template then you'll automatically get a different timer for each.

Also look at the remcoder:chronos package which makes time reactive.