Commit 86e86c0d authored by Bertrand PINEL's avatar Bertrand PINEL

Add a component in component

parent 40c5fa9d
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');
})
});
......@@ -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;
......
......@@ -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 {
......
......@@ -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'});
}
});
{{yield}}
<circle cx={{cx}} cy={{cy}} r={{radius}} fill={{bottleFill}} stroke={{bottleColor}} stroke-width={{bottleStrokeWidth}} />
......@@ -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>
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');
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment