add ability to set operators

app/components/change-operator-button.js

@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'button',
+
+  operator: null,
+
+  click() {
+    this.get('onClick')(this.get('operator'));
+  }
+});

app/controllers/application.js

@@ -2,5 +2,14 @@ import Ember from 'ember';
 
 export default Ember.Controller.extend({
   isOn: null,
-  level: null
+
+  level: null,
+
+  actions: {
+    changeOperator(operator) {
+      if (this.get('isOn')) {
+        this.set('operator', operator);
+      }
+    }
+  }
 });

app/helpers/format-operator.js

@@ -0,0 +1,22 @@
+import Ember from 'ember';
+
+export function formatOperator(params/*, hash*/) {
+  var formatted;
+  switch (params[0]) {
+    case "+":
+      formatted = "+";
+      break;
+    case "-":
+      formatted = "-";
+      break;
+    case "*":
+      formatted = "×";
+      break;
+    case "%":
+      formatted = "÷";
+      break;
+  }
+  return new Ember.Handlebars.SafeString(formatted);
+}
+
+export default Ember.Helper.helper(formatOperator);

app/routes/application.js

@@ -12,14 +12,15 @@ export default Ember.Route.extend({
       const c = this.controllerFor('application');
       c.set('isOn', true);
       c.set('level', this.get('levels').objectAt(0));
+      c.set('operator', '+');
     },
     turnOff() {
       const c = this.controllerFor('application');
       c.set('isOn', false);
     },
     nextLevel() {
-      if (this.controllerFor('application').get('isOn')) {
-        const c = this.controllerFor('application');
+      const c = this.controllerFor('application');
+      if (c.get('isOn')) {
         const level = c.get('level');
         const levelIndex = this.get('levels').indexOf(level);
         const nextLevel = this.get('levels').objectAt(

app/templates/application.hbs

@@ -1,9 +1,10 @@
 <div id="display">
   {{#if isOn}}
-    ON
+    {{format-operator operator}}
+    L
     {{level}}
   {{else}}
-    OFF
+    &nbsp;
   {{/if}}
 </div>
 
@@ -18,3 +19,11 @@
 <button {{action 'nextLevel'}}>
   LEVEL
 </button>
+
+{{change-operator-button operator='+' onClick=(action 'changeOperator')}}
+
+{{change-operator-button operator='-' onClick=(action 'changeOperator')}}
+
+{{change-operator-button operator='%' onClick=(action 'changeOperator')}}
+
+{{change-operator-button operator='*' onClick=(action 'changeOperator')}}

app/templates/components/change-operator-button.hbs

@@ -0,0 +1 @@
+{{format-operator operator}}

tests/integration/components/change-operator-button-test.js

@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('change-operator-button', 'Integration | Component | change operator button', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });" + EOL + EOL +
+
+  this.render(hbs`{{change-operator-button}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:" + EOL +
+  this.render(hbs`
+    {{#change-operator-button}}
+      template block text
+    {{/change-operator-button}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/unit/helpers/format-operator-test.js

@@ -0,0 +1,10 @@
+import { formatOperator } from '../../../helpers/format-operator';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | format operator');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let result = formatOperator(42);
+  assert.ok(result);
+});