Added property route

The list of properties of an entity is clickable and redirects
to the detailed view of the property (not programmed yet).
The routes have changed (renamed lab-mashup to entities).

The layout has changed and is work in progress.

The data model has changed. Properties have an own model and
are connected via relationships to the entity model.

app/components/entities-table.js

@@ -2,5 +2,5 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   tagName: 'table',
-  classNames: ['data-table']
+  classNames: ['data-table', 'entity-table']
 });

app/mirage/factories/entity.js

@@ -8,14 +8,9 @@ export default Mirage.Factory.extend({
   properties: function(i) {
     var data = [];
 
-    for (var j = 0; j < 10; j++) {
-      data.push({
-        name: faker.random.arrayElement(['Current', 'Max. Current', 'Voltage', 'Max. Voltage', 'Power', 'Max. Power']),
-        value: faker.finance.amount(-100, 100, 4),
-        type: faker.random.arrayElement(['A', 'kV', 'MW']),
-        timestamp: faker.date.past()
-      })
-    }
+    data.push({name: 'Current', value: faker.finance.amount(-100, 100, 4), type: 'A', timestamp: faker.date.past()});
+    data.push({name: 'Voltage', value: faker.finance.amount(-100, 100, 4), type: 'kV', timestamp: faker.date.past()});
+    data.push({name: 'Power', value: faker.finance.amount(-100, 100, 4), type: 'MW', timestamp: faker.date.past()});
 
     return data;
   }

app/models/entity.js

@@ -3,13 +3,13 @@ import DS from 'ember-data';
 
 export default DS.Model.extend({
   type: DS.attr('string'),
-  properties: DS.attr(),
+  properties: DS.hasMany('property'),
 
-  poll: function() {
+  /*poll: function() {
       var _this = this;
       Ember.run.later( function() {
         _this.reload();
         _this.poll();
       }, 1000);
-   }.on('didLoad')
+   }.on('didLoad')*/
 });

app/models/property.js

@@ -0,0 +1,9 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  name: DS.attr('string'),
+  value: DS.attr('number'),
+  type: DS.attr('string'),
+  timestamp: DS.attr('date'),
+  entity: DS.belongsTo('entity')
+});

app/router.js

@@ -6,8 +6,10 @@ var Router = Ember.Router.extend({
 });
 
 Router.map(function() {
-    this.route('lab-mashup', { path: '/' }, function() {
-      this.route('entity', { path: '/:entity_id' });
+    this.route('entities', { path: '/' }, function() {
+      this.route('entity', { path: '/:entity_id' }, function() {
+        this.route('property', { path: '/:property_id'});
+      });
     });
 });
 

app/routes/entities.js

@@ -2,6 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Route.extend({
   model() {
+    console.log('entities');
     return this.store.findAll('entity');
   }
 });

app/routes/entities/entity.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model(params) {
+    console.log("entity: " + params.entity_id);
+    return this.store.findRecord('entity', params.entity_id);
+  }
+});

app/routes/entities/entity/property.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model(params) {
+    console.log("property: " + params.property_id);
+    return this.store.findRecord('property', params.property_id);
+  }
+});

app/routes/entities/index.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});

app/routes/lab-mashup/entity.js

@@ -1,7 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Route.extend({
-	model(params) {
-		return this.store.findRecord('entity', params.entity_id);
-	}
-});

app/serializers/application.js

@@ -24,6 +24,8 @@ export default DS.RESTSerializer.extend({
   },
 
   _normalizePayload: function(payload, handleEntity) {
+    var propertyIndex = 0;
+
     // check if payload has context responses
     if (payload.contextResponses) {
       payload.contextResponses.forEach(function(item) {
@@ -34,21 +36,37 @@ export default DS.RESTSerializer.extend({
             type: 'entity',
             id: item.contextElement.id,
             attributes: {
-              type: item.contextElement.type,
-              properties: []
+              type: item.contextElement.type//,
+              //properties: []
+            },
+            relationships: {
+              properties: {
+                data: []
+              }
             }
           }
 
           if (item.contextElement.attributes) {
             item.contextElement.attributes.forEach(function(attribute) {
               var property = {
-                name: attribute.name,
-                value: attribute.value,
-                type: attribute.type,
-                timestamp: attribute.metadatas[0].value
+                type: 'property',
+                id: 'property_' + propertyIndex++,
+                attributes: {
+                  name: attribute.name,
+                  type: attribute.type,
+                  value: attribute.value,
+                  timestamp: attribute.metadatas[0].value
+                },
+                relationships: {
+                  entity: {
+                    data: { type: 'entity', id: entity.id }
+                  }
+                }
               }
 
-              entity.attributes.properties.push(property);
+              entity.relationships.properties.data.push({ type: 'property', id: property.id });
+
+              handleEntity(property);
             });
           }
 

app/styles/app.css

@@ -58,16 +58,20 @@ body {
 	float: left;
 	width: 45%;
 
+	margin-top: 20px;
+
 	padding-top: 10px;
-	padding-left: 25px;
+	/*padding-left: 25px;*/
 }
 
 #main-right {
 	float: right;
 	width: 45%;
 
+	margin-top: 20px;
+
 	padding-top: 10px;
-	padding-right: 25px;
+	/*padding-right: 25px;*/
 }
 
 #main::after {
@@ -122,3 +126,8 @@ body {
 
 	font-size: 14px;
 }
+
+.data-table.entity-table {
+	width: 45%;
+	margin: 0;
+}

app/templates/components/entities-table.hbs

@@ -4,7 +4,7 @@
 </tr>
 {{#each entities as |entity|}}
   <tr>
-    <td>{{#link-to 'lab-mashup.entity' entity}}{{entity.id}}{{/link-to}}</td>
+    <td>{{#link-to 'entities.entity' entity}}{{entity.id}}{{/link-to}}</td>
     <td>{{entity.type}}</td>
   </tr>
 {{/each}}

app/templates/components/properties-table.hbs

@@ -5,7 +5,7 @@
 </tr>
 {{#each entity.properties as |property|}}
   <tr>
-    <td>{{property.name}}</td>
+    <td>{{#link-to 'entities.entity.property' property}}{{property.name}}{{/link-to}}</td>
     <td>{{property.value}} {{property.type}}</td>
     <td>{{property.timestamp}}</td>
   </tr>

app/templates/entities.hbs

@@ -0,0 +1,7 @@
+<section id="main">
+	<h2>Entities</h2>
+
+	{{entities-table entities=model}}
+
+	{{outlet}}
+</section>

app/templates/entities/entity.hbs

@@ -1,3 +1,5 @@
 {{entity-title entity=model}}
 
 {{properties-table entity=model}}
+
+{{outlet}}

app/templates/entities/entity/property.hbs

@@ -0,0 +1 @@
+<p>{{model.name}}: {{model.value}} {{model.type}}</p>

app/templates/lab-mashup.hbs

@@ -1,11 +0,0 @@
-<section id="main">
-	<section id="main-left">
-		<h2>Entities</h2>
-
-		{{entities-table entities=model}}
-	</section>
-
-	<section id="main-right">
-		{{outlet}}
-	</section>
-</section>

config/environment.js

@@ -38,7 +38,7 @@ module.exports = function(environment) {
     // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
     // ENV.APP.LOG_VIEW_LOOKUPS = true;
 
-    ENV.APP.API_HOST = 'http://46.101.131.212:4200';
+    ENV.APP.API_HOST = 'http://localhost:4200';
 
     ENV['ember-cli-mirage'] = {
       enabled: true