Rough in detail view for characteristics

app/pods/components/x-application/template.hbs

@@ -5,15 +5,15 @@
       {{#link-to 'protected.compare' tagName='li' href=false}}
         {{link-to 'Compare' 'protected.compare'}}
       {{/link-to}}
-      {{#link-to 'protected.characteristics' tagName='li' href=false}}
-        {{link-to 'Characteristics' 'protected.characteristics'}}
-      {{/link-to}}
       {{#link-to 'protected.species' tagName='li' href=false}}
         {{link-to 'Species' 'protected.species'}}
       {{/link-to}}
       {{#link-to 'protected.strains' tagName='li' href=false}}
         {{link-to 'Strains' 'protected.strains'}}
       {{/link-to}}
+      {{#link-to 'protected.characteristics' tagName='li' href=false}}
+        {{link-to 'Characteristics' 'protected.characteristics'}}
+      {{/link-to}}
       {{#link-to 'protected.about' tagName='li' href=false}}
         {{link-to 'About' 'protected.about'}}
       {{/link-to}}

app/pods/protected/characteristics/index/template.hbs

@@ -7,12 +7,19 @@
       <th>Name</th>
       <th>Type</th>
       <th>Sort Order</th>
-      <th></th>
     </tr>
   </thead>
   <tbody>
     {{#each sortedCharacteristics as |row|}}
-      {{protected/characteristics/editable-row row=row}}
+      <tr>
+        <td>
+          {{#link-to 'protected.characteristics.show' row}}
+            {{row.characteristicName}}
+          {{/link-to}}
+        </td>
+        <td>{{row.characteristicTypeName}}</td>
+        <td>{{row.sortOrder}}</td>
+      </tr>
     {{/each}}
   </tbody>
 </table>

app/pods/protected/characteristics/show/route.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model: function(params) {
+    return this.store.findRecord('characteristic', params.characteristic_id, { reload: true });
+  },
+
+});

app/pods/protected/characteristics/show/template.hbs

@@ -0,0 +1,53 @@
+<div class="grid-1">
+  <div class="span-1">
+    <fieldset class="flakes-information-box {{if isEditing 'is-editing'}}">
+      <legend>
+        {{model.characteristicName}}
+      </legend>
+
+      {{! ROW 1 }}
+      <div class="grid-2 gutter-20">
+        <dl class="span-2">
+          <dt>Characteristic Type</dt>
+          <dd>
+            {{model.characteristicTypeName}}
+          </dd>
+        </dl>
+      </div>
+
+      {{! ROW 2 }}
+      <div class="grid-2 gutter-20">
+        <dl class="span-2">
+          <dt>Strains</dt>
+          <dd>
+            <ul>
+              {{#each model.strains as |strain index|}}
+                <li>
+                  {{#link-to 'protected.strains.show' strain.id}}
+                    {{{strain.strainNameMU}}}
+                  {{/link-to}}
+                </li>
+              {{/each}}
+            </ul>
+          </dd>
+        </dl>
+      </div>
+
+      {{! ROW 3 }}
+      <div class="grid-3 gutter-20">
+        <dl class="span-1">
+          <dt>Record Created</dt>
+          <dd>{{null-time model.createdAt 'LL'}}</dd>
+        </dl>
+        <dl class="span-1">
+          <dt>Record Updated</dt>
+          <dd>{{null-time model.updatedAt 'LL'}}</dd>
+        </dl>
+        <dl class="span-1">
+          <dt>Record Deleted</dt>
+          <dd>{{null-time model.deletedAt 'LL'}}</dd>
+        </dl>
+      </div>
+    </fieldset>
+  </div>
+</div>

app/router.js

@@ -18,13 +18,15 @@ Router.map(function() {
 
   this.route('protected', { path: '/' }, function() {
     this.route('about');
-    this.route('characteristics');
-    this.route('measurements');
 
     this.route('compare', function() {
       this.route('results');
     });
 
+    this.route('characteristics', function() {
+      this.route('show', { path: ':characteristic_id' });
+    });
+
     this.route('species', function() {
       this.route('new');
       this.route('show', { path: ':species_id' });