Change CSS property of element when time changes

Question

I'm building a toy job scheduling system using meteor.

Here's the controller where I pass a "shifts" collection:

angular.module('eamorr').controller('EamorrCtrl', ['$scope', '$meteor', function ($scope, $meteor) {
    $scope.shifts = $meteor.collection(Shifts);
    ...
}]);

... to my .ng.html:

<tr ng-repeat="shift in shifts">
   ...
   <td>{{shift.unixTime_start*1000 | date:'yyyy-MM-dd'}}</td> 
   ...
</tr>

Now, when shift.unixTime_start is less than the current time, I want the whole row to have background-color:orange and when shift.unixTime_start is greater than the current time, I want the whole row to have background-color:green.

Can anyone give me a tip as to how to do this neatly, cleanly and concisely?

I've been looking at doing a load of ng-if statements, etc. Do I have to use an interval? Check every 5 seconds and update the table accordingly? This doesn't seem the right way to me...

I would do this in the controller. Adding a new $scope function getStyle(shift) which does the check in the controller and the in the html set the return value into the style tag of the td element. — STORM, Sep 25 '15 at 20:19

corvid · Accepted Answer · 2015-09-25T21:33:14.827

Not necessarily.

Template.shifts.onCreated(function () {
  this.now = new ReactiveVar(moment());
  this.timerId = null;

  let oneSecond = moment().add(1, 'minute').startOf('minute');
  Meteor.setTimeout(() => {
    this.timerId = Meteor.setInterval(() => {
      this.now.set(moment());
    }, 5000)
  }, oneSecond.get('milliseconds'));
});

Template.shifts.helpers({
  timeColor: function (unix) {
    let time = moment(unix);
    if (moment.isBefore(time, this.now.get())) {
      return '#FF00FF';
    } else if (moment.isAfter(time, this.now.get())) {
      return '#FF0000';
    } else {
      return '#003366';
    }
  }
});

Template.shifts.onDestroyed(function () {
  Meteor.clearInterval(this.timerId);
})

Then in your template

<tr style="background-color: {{ timeColor shift.unixTime_start }};">
  <td>{{ shift.unixTime_start }}</td>
</tr>

Change CSS property of element when time changes

1 Answers1