Add a simple component for displaying the rack

app/components/rack-display.js

+import Ember from 'ember';
+
+export default Ember.Component.extend({
+   id: 'rack',
+   width: 800,
+   height: 600,
+   nbColumns: 4,
+   nbRows: 4,
+   tickSize: 8,
+   style: 1,
+   bottles: null,
+
+   frame: {
+     frameBackgroundColor: '#DDDDDD',
+     frameBorderColor: '#999999',
+     frameBorderWidth: 3,
+     frameCornerSize: 50,
+     frameCornerShadow: true,
+  },
+
+  rack: {
+     strokeColor: '#3322FF',
+     strokeWidth: 3,
+     bottleColor: '#00EE00',
+     marginX: 10,
+     marginY: 10,
+     handle: 5,
+     percentBottle: 0.70
+  },
+
+  rackPath: Ember.computed('width', 'height', 'nbColumns', 'nbRows', 'rack', 'tickSize', function() {
+     let usefulWidth = this.get('width') - 2*this.get('rack.marginX');
+     let usefulHeight = this.get('height') - 2*this.get('rack.marginY');
+     let tick = this.get("tickSize");
+     let incX = usefulWidth / this.get('nbColumns')/2;
+     let incY = usefulHeight / this.get('nbRows')/2;
+     let rayon = Math.min(incX - this.get('rack.handle'), incY);
+     let line = "";
+     for (var row=0; row < this.get('nbRows'); row++) {
+        let cY = this.get('rack.marginY')+incY+row*2*incY;
+        //line += "M "+this.get('rack.marginX')+" "+offsetY;
+        for (var col=0; col < this.get('nbColumns'); col++) {
+           let cX = this.get('rack.marginX')+incX+col*2*incX;
+           line += "M "+(cX-tick)+" "+cY+" h "+2*tick+" M "+cX+" "+(cY-tick)+" v "+2*tick+" ";
+           if (this.get('style')==1)
+             line += "M "+(cX-rayon)+" "+cY+ "a"+rayon+" "+rayon+" 0 0 0 "+2*rayon+" 0";
+        }
+     }
+     return line;
+  })
+});

app/controllers/rack.js

+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+   actions: {
+     back() {
+      this.transitionToRoute('racks');
+     }
+   }
+});

app/templates/components/rack-display.hbs

+<p>{{yield}}</p>
+
+<svg version="1.1"
+      style='font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;font-size:12px;'
+      xmlns='http://www.w3.org/2000/svg' width={{width}} height={{height}}>
+      <!-- Bounding box -->
+     <rect x="0" y="0" width={{width}}  height={{height}}
+            rx={{frame.frameCornerSize}} ry={{frame.frameCornerSize}}
+            fill={{frame.frameBackgroundColor}}
+            stroke={{frame.frameBorderColor}} stroke-width={{frame.frameBorderWidth}}></rect>
+
+      <path d={{rackPath}} fill="none" stroke={{rack.strokeColor}} stroke-width={{rack.strokeWidth}}></path>
+</svg>

app/templates/rack.hbs

 <div class="col-md-12 phase-container">
-   <h4><strong>Rack Name:</strong> {{model.name}} ({{model.nbRows}} rows by {{model.nbColumns}} columns)</h4>
-   <ul>
-     {{#each model.bottles as |bottle|}}
-       <li>{{bottle.name}} : row {{bottle.yrow}}, column {{bottle.xcolumn}}</li>
-     {{/each}}
-   </ul>
-{{outlet}}
+   <p><button {{action "back"}}>Back</button></p>
+   {{#rack-display  nbColumns=model.nbColumns nbRows=model.nbRows bottles=model.bottles}}
+       <p><strong>Rack Name:</strong> {{model.name}} ({{model.nbRows}} rows by {{model.nbColumns}} columns)</p>
+   {{/rack-display}}
+   {{outlet}}
 </div>

tests/integration/components/rack-display-test.js

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