Add a component in component

app/components/bottle-display.js

+import Ember from 'ember';
+
+export default Ember.Component.extend({
+   tagName: 'g',
+   bottle: null,
+   nbRows:4,
+   nbColumns:4,
+   flipped: false,
+   width: 100,
+   height: 200,
+   margin: 10,
+   spacing: 10,
+   bottleColor: '#22EE11',
+   bottleFill: '#00AA00',
+   bottleStrokeWidth: 2,
+   bottleSize: 0.80,
+
+   incX: Ember.computed('nbColumns', 'width', 'margin', 'spacing', function() {
+      let usefulWidth = this.get('width') - 2*this.get('margin');
+      return usefulWidth / this.get('nbColumns')/2;
+   }),
+   incY: Ember.computed('nbRows', 'height', 'margin', function() {
+      let usefulHeight = this.get('height') - 2*this.get('margin');
+      return usefulHeight / this.get('nbRows')/2;
+   }),
+   cx: Ember.computed('bottle', 'incX', 'margin', function() {
+      let xcolumn = this.get('bottle').get('xcolumn');
+      return this.get('margin')+this.get('incX')+xcolumn*2*this.get('incX');
+   }),
+   cy: Ember.computed('bottle', 'incY', 'margin', function() {
+      let yrow = this.get('bottle').get('yrow');
+      return this.get('margin')+this.get('incY')+yrow*2*this.get('incY');
+   }),
+   radius: Ember.computed('incX', 'incY', 'spacing', 'bottleSize', function() {
+      return Math.min(this.get('incX') - this.get('spacing'), this.get('incY')) * this.get('bottleSize');
+   })
+});

app/components/rack-display.js

@@ -7,6 +7,8 @@ export default Ember.Component.extend({
    nbColumns: 4,
    nbRows: 4,
    tickSize: 8,
+   margin: 10,
+   spacing: 5,
    style: 1,
    bottles: null,
 
@@ -21,29 +23,31 @@ export default Ember.Component.extend({
   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');
+  rackPath: Ember.computed('width', 'height', 'nbColumns', 'nbRows', 'margin', 'spacing', 'tickSize', function() {
+     let bottles = this.get('bottles');
+     for (var i=0; i<bottles.content.length;i++) {
+        // pre-fetch data in relationship with rack (but do nothing with it :-())
+        let bottle = bottles.objectAt(i);
+        //console.log("Retrieve botlle "+bottle.get('name'));
+     }
+     let usefulWidth = this.get('width') - 2*this.get('margin');
+     let usefulHeight = this.get('height') - 2*this.get('margin');
      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 rayon = Math.min(incX - this.get('spacing'), incY);
      let line = "";
      for (var row=0; row < this.get('nbRows'); row++) {
-        let cY = this.get('rack.marginY')+incY+row*2*incY;
+        let cY = this.get('margin')+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;
+           let cX = this.get('margin')+incX+col*2*incX;
            line += "M "+(cX-tick)+" "+cY+" h "+2*tick+" M "+cX+" "+(cY-tick)+" v "+2*tick+" ";
-           if (this.get('style')==1)
+           if (this.get('style')===1) {
              line += "M "+(cX-rayon)+" "+cY+ "a"+rayon+" "+rayon+" 0 0 0 "+2*rayon+" 0";
+          }
         }
      }
      return line;

app/routes/rack.js

@@ -4,7 +4,7 @@ export default Ember.Route.extend({
   model(params) {
     let pid = params.rack_id;
 
-    let rack = this.store.peekRecord('rack', pid);
+    let rack = this.store.findRecord('rack', pid, { reload: true });
     if (rack == null) {
       this.transitionTo('racks');
     } else {

app/routes/racks.js

@@ -2,5 +2,8 @@ import Ember from 'ember';
 
 export default Ember.Route.extend({
    model() {
-      return this.store.findAll('rack', {include: 'bottles'});   }
+      // Preload all bottles
+      let bottles = this.store.findAll('bottle', { reload: true });
+      return this.store.findAll('rack', {include: 'bottles'});
+      }
 });

app/templates/components/bottle-display.hbs

+{{yield}}
+<circle cx={{cx}} cy={{cy}} r={{radius}} fill={{bottleFill}} stroke={{bottleColor}} stroke-width={{bottleStrokeWidth}}  />

app/templates/components/rack-display.hbs

@@ -10,4 +10,9 @@
             stroke={{frame.frameBorderColor}} stroke-width={{frame.frameBorderWidth}}></rect>
 
       <path d={{rackPath}} fill="none" stroke={{rack.strokeColor}} stroke-width={{rack.strokeWidth}}></path>
+
+      {{#each bottles as |bottle|}}
+         {{#bottle-display bottle=bottle height=height width=width nbRows=nbRows nbColumns=nbColumns margin=margin spacing=spacing}}
+         {{/bottle-display}}
+      {{/each}}
 </svg>

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

+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('bottle-display', 'Integration | Component | bottle 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`{{bottle-display}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#bottle-display}}
+      template block text
+    {{/bottle-display}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});