New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  activity: undefined,
  periods: Ember.A(),
  duration: Ember.computed.sum('periods'),
  lastResumeTimestamp: undefined,
  isStarted: Ember.computed.notEmpty('periods'),
  isRunning: false,
  
  start() {
    let now = Date.now();
    this.set('lastResumeTimestamp', now);
    this.set('isRunning', true);
    this.get('periods').push(0);
    this.saveToLocalStorage();
    this.run();
  },
  
  clearTimer: function() {
    Ember.run.cancel(this.get("timerId"));
  },
  
  saveToLocalStorage() {
    const periods = this.get('periods');
    const lastResumeTimestamp = this.get("lastResumeTimestamp");
    const isRunning = this.get('isRunning');
    const activity = this.get('activity');
          
  	const unsaveActivity = {
      periods: isRunning ? periods.slice(0, -1) : periods,
      lastResumeTimestamp,
      isRunning,
      activity
    };
    
    console.info(JSON.stringify(unsaveActivity));
    //localStorage.setItem('unsaveActivity', JSON.stringify(unsaveActivity));
  },
  
  run: function() {
    const lastResumeTimestamp = this.get("lastResumeTimestamp");
    this.set('timerId', Ember.run.later(this, function() {
      const now = Date.now();
      const timeElapsed = now - lastResumeTimestamp;
      const lastindex = this.get('periods.length') - 1;
      this.get('periods')[lastindex] = timeElapsed;
      this.get('periods').arrayContentDidChange(0);
      this.run();
    }, 100));
  },
  
  actions: {
    startActivity() {
      let store = this.get('store');
      this.set('activity', store.createRecord('activity', {
  			description: 'New activity'
			}));
      this.start();
    },
    resumeActivity() {
      this.start();
    },
    pauseActivity() {
      this.clearTimer();
      this.set('isRunning', false);
      this.saveToLocalStorage();
  	},
    stopActivity() {
      const activity = this.get('activity');
      const duration = this.get('duration');
      const minutes = Math.ceil((duration / 1000 / 60) % 60);
      const hours = Math.floor((duration / 1000 / 60 / 60) % 24);
      activity.set('minutes', minutes);
      activity.set('hours', hours);
      activity.set('id', 'new');
      this.clearTimer();
      this.set('isRunning', false);
      // clearLocalStorage
      
      console.info(activity.toJSON());
      this.transitionToRoute('activity-edit', activity);
      this.set('activity', undefined);
      this.set('periods', Ember.A());
  	}
  }
});

models.activity.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  description: attr('string'),
  hours: attr('number'),
  minutes: attr('number'),
  task: belongsTo('task'),
  
});

models.task.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  name: attr('string'),
  activities: hasMany('activity')
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('activity-edit', { path: '/edit/:activity_id' });
});

export default Router;

templates.activity-edit.hbs

<h2>Activity Edit</h2>

<div>{{model.description}}</div>
<div>{{model.hours}}:{{model.minutes}}</div>

templates.application.hbs

<div class="activity-builder">
	<span class="title">{{activity.description}}</span>
	<span class="duration">{{duration}}</span>
  {{#if isStarted}}
  	{{#if isRunning}}
  		<button class="pause-activity-button" {{action "pauseActivity"}}>|| Pause</button>
  	{{else}}
  		<button class="resume-activity-button" {{action "resumeActivity"}}>|>Resume</button>
  	{{/if}}
  	<button class="stop-activity-button" {{action "stopActivity"}}>[] Stop</button>
  {{else}}
  	<button class="start-activity-button" {{action "startActivity"}}>|>Start</button>
  {{/if}}
</div>
{{outlet}}

tests.acceptance.my-acceptance-test.js

import { test } from 'qunit';
import Ember from 'ember';
import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';

moduleForAcceptance('Activity');

const activityBuilderSelector = '.activity-builder';
var waitFor = function(assert, callback, timeout) {
    timeout = timeout || 500;
    var done = assert.async();
    Ember.run.later(function(){
        callback();
        done();
    }, timeout);
};

test('I want to start/pause new activity', function(assert) {
  visit('/');

  andThen(function() {
    assert.equal(find('.duration', activityBuilderSelector).text(), "0");
    
    click('.start-activity-button', activityBuilderSelector);
    
    waitFor(assert, function() {
      const val = find('.duration', activityBuilderSelector).text()
      assert.notEqual(val, "0", `notEqual 0 (${val})`);
      assert.equal(find('.title', activityBuilderSelector).text(), "New activity", "there should be activity title");
      Ember.$('.pause-activity-button', activityBuilderSelector).click();
  	});
  });
    
  andThen(function() {
      //click('.resume-activity-button', activityBuilderSelector);
  });
});

test('As a User I want to stop tracking activity and save it.', function(assert) {});
test('As a User I want to pass activtity description, task/project during tracking', function(assert) {});
test('As a User I want to pass activtity description, task/project, date and time before save', function(assert) {});
test('As a User I want to edit any existing activity by clicing on it', function(assert) {});
test('As a User I want to add new activity by clicking on Add new activity', function(assert) {});
test('As a User I want to add new activity by clicking on day, when it happen', function(assert) {});

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

tests.helpers.module-for-acceptance.js

import { module } from 'qunit';
import Ember from 'ember';
import startApp from '../helpers/start-app';
import destroyApp from '../helpers/destroy-app';

const { RSVP: { Promise } } = Ember;

export default function(name, options = {}) {
  module(name, {
    beforeEach() {
      this.application = startApp();

      if (options.beforeEach) {
        return options.beforeEach.apply(this, arguments);
      }
    },

    afterEach() {
      let afterEach = options.afterEach && options.afterEach.apply(this, arguments);
      return Promise.resolve(afterEach).then(() => destroyApp(this.application));
    }
  });
}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.helpers.start-app.js

import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}