Pomodoro

README_01.md

Pomodoro

View Twiddle | Copy Twiddle | View Gist

Original idea of this README taken from @rwjblue

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  timeLeft:'25:00',
  totalTime: 25*60*1000,
  start(time) {
    this.reset(time);
    this._startedAt = new Date();
    this._intervalId = setInterval(() => { 
      this.updateTimeLeft(); 			
    }, 100);
  },
  
  reset(time) {
    clearInterval(this._intervalId);
    if (time) {
      this.set('totalTime', time*60*1000);
    }
    this.set('timeLeft', this.msToString(this.get('totalTime')));
  },
  
  updateTimeLeft() {
    let now = new Date();
    let diff = now - this._startedAt;
    this.set('timeLeft', this.msToString(this.get('totalTime') - diff));
  },
    
  msToString(ms) {
    let seconds = parseInt(ms/1000, 10),
        minutes = parseInt(seconds/60, 10);
    
    function pad(num) {
        if (num < 10) return '0' + num;
        else return num.toString();
    }
    return pad(minutes) + ':' + pad(seconds - minutes * 60);    
  },  
	actions:{
    pomodoro: function(){
      this.start(25);
    },
    shortBreak: function() {
      this.start(5);
    },
    longBreak: function() {
      this.start(15);
    },
    stop: function() {
      this.reset();
    }
  }
});

application.template.hbs

<h1>Pomodoro</h1>

<div class='timeleft'>{{timeLeft}}</div>

<div>
	<button class='btn btn-large btn-primary' {{action "pomodoro"}}>Pomodoro</button>
	<button class='btn btn-large' {{action "shortBreak"}}>Short Break</button>
	<button class='btn btn-large' {{action "longBreak"}}>Long Break</button>
	<button class='btn btn-large btn-danger' {{action "stop"}}>Stop</button>
</div>

twiddle.json

{
  "version": "0.6.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.3.1/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.3.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}