Commit 40c5fa9d authored by Bertrand PINEL's avatar Bertrand PINEL

Add a simple component for displaying the rack

parent 8783862c
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;
})
});
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
back() {
this.transitionToRoute('racks');
}
}
});
<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>
<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>
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');
});
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