ember-concurrency-fun

controllers.application.js

import Ember from 'ember';
import { task, taskGroup, timeout } from 'ember-concurrency';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  year: 2017,
  event: 'Party',
  events: ['Party', 'Fiesta', 'Souiree', 'Murder Mystery Party', 'Ball', 'Conference', 'Get Down'],
  error: null,
  
  taskGroup: taskGroup(),
  
	changeYear: task(function * () {
  	let newYear = yield Math.floor(Math.random() * 4000);
    yield timeout(Math.floor(Math.random() * 40));
    this.set('year', newYear);
    try{
      if (Math.floor(Math.random() * 100) > 90) {
      	throw new Error();
    	}else{
        this.set('error', null);
      }
    }
    catch(e){
      this.set('error', 'Error in changeYear');
      console.log('e =', 'Error in changeYear');
    }
    return newYear;
  }).group('taskGroup'),
  
  changeEvent: task(function * () {
    let events = yield this.get('events');
    yield timeout(Math.floor(Math.random() * 400));
    let i = yield Math.floor(Math.random() * events.length);
    let newEvent = yield events[i];
    this.set('event', newEvent);
    return newEvent;
  }).group('taskGroup'),
  
  changeBoth: task(function * () {
    let newEvent = yield this.get('changeEvent').perform();
    let newYear = yield this.get('changeYear').perform();
    this.set('year', newYear);
    this.set('event', newEvent);
  }).group('taskGroup'),
  
  tasks: Ember.computed(function() {
    return [
      this.get('changeYear'),
      this.get('changeEvent'),
      this.get('changeBoth'),
    ];
  }),
});

templates.application.hbs

<h1>Welcome to the {{year}} {{appName}} {{event}}</h1>
<br>
<br>
<h5>tasks group state: {{taskGroup.state}}</h5>
<h5>tasks group count: {{taskGroup.concurrency}}</h5>
{{#if taskGroup.isRunning}}
  <div>WAIT, SUCKA!</div>
{{/if}}
<h5>
  Most Recent Task:
  {{#with taskGroup.last as |taskInstance|}}
    {{taskInstance.task.name}} ({{taskInstance.state}})
  {{/with}}
</h5>
{{#each tasks as |task|}}
  <button onclick={{perform task}}>{{task.name}}</button>
{{/each}}
{{#if error}}
	<h1>ERROR: {{error}}</h1>
{{/if}}
{{outlet}}
<br>
<br>

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",
    "ember-concurrency": "0.8.6"
  }
}