angular timer - .stop() and .resume() problems

Question

I'm having a bit trouble with my timer. I might have made it more complicated than it should be because what I need is the following:

I need to count from 00:00 to say 45:00 and I need to be able to stop and resume the timer within these boundaries.

Right now I've got this timer code:

<timer id="timer" autostart="false" start-time="coutingStart" end-time="countingEnd">{{mminutes}}:{{sseconds}}</timer>

countingStart and countingEnd initializes like this:

var time = (45 * 60000); // should give me 45 minutes of time.
$scope.countingStart = (new Date()).getTime();
$scope.countingEnd = (new Date()).getTime() + time;

This code above works, atleast I think it does. I've got a button with this function on it:

$scope.startGame = function() {
    $scope.gameIsLive = true;
    document.getElementById('timer').start();
};

which starts my counter, no problem, it starts from 00:00 atleast. But then I have buttons with these functions aswell which is where I'm having my problem.

$scope.PauseGame = function() {
    switch ($scope.periodNum) {
        case 1:
            document.getElementById('timer').stop();
            $scope.PauseIsActive = true;
            break;
        case 2:
            document.getElementById('timer').stop();
            $scope.PauseIsActive = true;
            break;
    }
};

$scope.ResumeGame = function() {
    switch ($scope.periodNum) {
        case 1:
            document.getElementById('timer').resume();
            $scope.PauseIsActive = false;
            break;
        case 2:
            document.getElementById('timer').resume();
            $scope.PauseIsActive = false;
            break;
    }
};

Both pauseGame() and resumeGame() works as expected. They are pausing and resuming the timer. But, when I pause the timer on say 00:10 and count for myself 10 seconds and then resume it the timer now stands on 00:20 which made me just lost 10 seconds of the timer.

I can think that my problem is inside the instantiating of $scope.counterStart and $scope.counterEnd. But I am not sure. How can I count from 00:00 to 45:00 and still being able to stop and resume the clock when needed?

Angular timer uses the Date object and milliseconds to count time so I suppose I have to use this approach to get 00:00 which is now and count 45 minutes forward. Can it be done otherwise with stop and resume functionality?

Thanks.

Answer 1

If I understand the angular-timer docs end-time sets the countdown time. It doesn't provide a maximum value.

end-time Sets the countdown based on predefined end time (in milliseconds).

To have a maximum value you can check each tick event to see if the configured maximum value has been reached. I have created an example below in which the timer is stopped when it reaches the maximum value (10 seconds).

(function() {
  angular
    .module('exampleApp', ['timer'])
    .controller('ExampleController', ExampleController);

  function ExampleController($scope, TimerStatusEnum, $timeout) {
    var vm = this;
    vm.max = 10000; // 10 seconds
    vm.isMaxReached = false;
    vm.timerStatus = TimerStatusEnum.NotStarted;

    vm.startTimer = function() {
      if (!vm.isMaxReached) {
        if (vm.timerStatus === TimerStatusEnum.NotStarted) {
          $scope.$broadcast('timer-start');
          vm.timerStatus = TimerStatusEnum.Running
        } else if (vm.timerStatus === TimerStatusEnum.Stopped) {
          $scope.$broadcast('timer-resume');
          vm.timerStatus = TimerStatusEnum.Running
        }
      }
    };

    vm.stopTimer = function() {
      if (vm.timerStatus === TimerStatusEnum.Running) {
        $scope.$broadcast('timer-stop');
        vm.timerStatus = TimerStatusEnum.Stopped
      }
    };

    vm.isTimerStopped = function() {
      return vm.timerStatus === TimerStatusEnum.Stopped;
    }

    vm.isTimerRunning = function() {

      return vm.timerStatus === TimerStatusEnum.Running;
    }

    $scope.$on('timer-tick', function(event, args) {
      var roundedMiliSecondCount = Math.round(args.millis / 1000) * 1000;
      if (roundedMiliSecondCount === vm.max) {
        $timeout(function() {
          vm.isMaxReached = true;
          vm.stopTimer();
        }, 0);
      }
    });

  }
  ExampleController.$inject = ['$scope', 'TimerStatusEnum', '$timeout'];
})();

(function() {
  angular
    .module('exampleApp')
    .constant('TimerStatusEnum', {
      'NotStarted': 0,
      'Stopped': 1,
      'Running': 2
    });

})();

<!DOCTYPE html>
<html ng-app='exampleApp'>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-timer/1.3.4/angular-timer.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/humanize-duration/3.9.1/humanize-duration.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
</head>

<body ng-controller="ExampleController as vm">
  <timer id="timer" autostart="false" interval="1000">{{mminutes}}:{{sseconds}}</timer>
  <button ng-click="vm.startTimer()" ng-disabled="vm.isTimerRunning() || vm.isMaxReached">Start Timer</button>
  <button ng-click="vm.stopTimer()" ng-disabled="vm.isTimerStopped() || vm.isMaxReached">Stop Timer</button>
  <p ng-if="vm.isMaxReached">Max time has been reached</p>
</body>

</html>