Bloctime: taking breaks

As both the next steps in my Bloctime project involve taking breaks, I’m going to write about both user story 3 (Take a break) and 4 (Take a 30-minute break) together.

The goal of user story 3 is to allow the user to take a five-minute break after a 25-minute work session. Users shouldn’t be able to begin their break unless they have finished a work session, but once on the break should be able to pause if necessary. Users should also only ever see a single timer and button, regardless of whether they’re on break or working.

The goal of user story 4 is to allow the user to take a longer 30-minute break after they have completed four completed work sessions.

Buttons, buttons, who’s got the buttons?

I originally wanted to use the same button to control all timer activity, but this proved to be slightly too difficult – especially taking into consideration some of the requirements that would eventually need to tie into my app.

So I created a second button that controls the break timer. Both buttons use ngHide to determine which should be shown based on whether my onBreak variable is set to its default of false, when the task button appears, or true, when the break button is shown:

<div class="button-container">
  <div class="button-styling">
    <p ng-class="setButtonClass()" ng-click="toggleTimer()" ng-hide="onBreak">{{ buttonText }}</p>

    <p ng-class="setBreakButtonClass()" ng-click="toggleBreak()" ng-hide="!onBreak">{{ breakButtonText }}</p>
  </div>
</div>

 

The break button controls both the five- and 30-minute breaks, and uses almost exactly the same function under a different name than that controlling the work session – the only difference is that instead of resetting the timer, the user is able to pause their break.

Time is everything

In user story 3, the idea of constants was introduced. Constants are used whenever variables are known and set, and won’t be changing. I’ve assigned three constants for this project: TIME_TASK, which is the 25 minutes for a task; TIME_BREAK, the five minutes for a normal break; and TIME_LONG_BREAK, which is 30 minutes.

I’ve now got to keep track of quite a lot in the app:

• The timer needs to stop when it reaches 0, which wasn’t happening in my last post.
• After completing a work session, the user should be told to take a five-minute break.
• The number of work sessions needs to be tracked, so that after four completed work sessions the user is prompted to take a 30-minute break.

In order to make the logic of my app easier to understand – and because endless nested if statements hurt my eyes – I’ve broken it down into two functions and made use of Angular’s $watch method.

My first function, checkRunning(), makes sure that a work session is followed by a short break, counts how many work sessions have occurred and stops the timer:

scope.checkRunning = function() {
  if (scope.isTimerRunning === true) {
    $interval.cancel(scope.timerInterval);
    scope.isTimerRunning = false;
    scope.onBreak = true;
    scope.tasktime = TIME_BREAK;
    scope.sessionTracker += 1;
    scope.breakButtonText = "Start break";
    scope.buttonText = "Start";
  }
  if (scope.isBreakRunning === true) {
    $interval.cancel(scope.timerInterval);
    scope.onBreak = false;
    scope.isBreakRunning = false;
    scope.tasktime = TIME_TASK;
    scope.buttonText = "Start";
  }
};

 
expireTimer() stops all timer countdowns at 0. If the user has completed three or fewer work sessions, it does this by calling checkRunning(). If the user has completed four work sessions, it prompts the user to take a longer break:

scope.expireTimer = function(){
  if (scope.tasktime === 0){
    if (scope.sessionTracker <= 3) {
      scope.checkRunning(); 
    }  
    if (scope.sessionTracker === 4) {
      $interval.cancel(scope.timerInterval);
      scope.onBreak = true;
      scope.tasktime = TIME_LONG_BREAK;
      scope.sessionTracker = 0;
      scope.breakButtonText = "Start break";
      scope.buttonText = "Start";
    }
  }
};

 
And this is all controlled using Angular’s $watch method, which, well, watches the value that you give it – in this case, tasktime, which is what I’ve called my timer – and does something when the value is equal to 0:

scope.$watch('tasktime', function(newVal, oldVal) {
  if (newVal === 0) {
    scope.expireTimer();
  }
});

 

Next

My next task will be to allow a user to input tasks into my app, and then check off when they have completed them.