Add a detail page for displaying the bottle of a rack

app/controllers/racks.js

@@ -8,6 +8,7 @@ rackTableColumns: Ember.computed(function() {
     Ember.Object.create({
       propertyName: "name",
       title: "Name",
+      routeName: "rack"
     }),
     Ember.Object.create({
      propertyName: 'nbColumns',

app/router.js

@@ -8,6 +8,7 @@ const Router = Ember.Router.extend({
 
 Router.map(function() {
   this.route('racks');
+  this.route('rack', { path: '/rack/:rack_id' });
 });
 
 export default Router;

app/routes/rack.js

+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model(params) {
+    let pid = params.rack_id;
+
+    let rack = this.store.peekRecord('rack', pid);
+    if (rack == null) {
+      this.transitionTo('racks');
+    } else {
+      return rack;
+   }
+  }
+});

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}}
+</div>

tests/unit/routes/rack-test.js

+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:rack', 'Unit | Route | rack', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});