Moved on with layout

app/adapters/entity.js

@@ -35,4 +35,8 @@ export default DS.RESTAdapter.extend({
 
     return this.ajax(this.host + '/' + this.namespace + '/queryContext', 'POST', { data: requestBody });
   },
+
+  query: function(store, type, query) {
+    return this.ajax(this.host + '/' + this.namespace + '/queryContext', 'POST', { data: query });
+  }
 });

app/models/category.js

@@ -0,0 +1,7 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  name: DS.attr('string'),
+  properties: DS.hasMany('property'),
+  entity: DS.belongsTo('entity')
+});

app/models/entity.js

@@ -3,5 +3,6 @@ import DS from 'ember-data';
 
 export default DS.Model.extend({
   type: DS.attr('string'),
-  properties: DS.hasMany('property')
+  properties: DS.hasMany('property'),
+  categories: DS.hasMany('category')
 });

app/models/property.js

@@ -5,5 +5,6 @@ export default DS.Model.extend({
   value: DS.attr('number'),
   type: DS.attr('string'),
   timestamp: DS.attr('date'),
-  entity: DS.belongsTo('entity')
+  entity: DS.belongsTo('entity'),
+  category: DS.belongsTo('category')
 });

app/router.js

@@ -9,7 +9,7 @@ Router.map(function() {
     this.route('lab-mashup', { path: '/' }, function() {
       // dynamic routes
       this.route('entity', { path: '/:entity_id' }, function() {
-        this.route('property', { path: '/:property_id'});
+        this.route('category', { path: '/:category_id'});
       });
 
       // static routes

app/routes/lab-mashup.js

@@ -2,6 +2,18 @@ import Ember from 'ember';
 
 export default Ember.Route.extend({
   model() {
+    /*return this.store.query('entity', { entities: [
+      {
+        id: 'S1_ElectricalGrid',
+        isPattern: false,
+        type: 'ElectricalGridMonitoring'
+      },
+      {
+        id: 'S2_ElectricalGrid',
+        isPattern: false,
+        type: 'ElectricalGridMonitoring'
+      }
+    ]});*/
     return this.store.findAll('entity');
   },
 
@@ -14,6 +26,19 @@ export default Ember.Route.extend({
 
   refreshEntities: function() {
     // fetch new data from server
+    /*this.store.query('entity', { entities: [
+      {
+        id: 'S1_ElectricalGrid',
+        isPattern: false,
+        type: 'ElectricalGridMonitoring'
+      },
+      {
+        id: 'S2_ElectricalGrid',
+        isPattern: false,
+        type: 'ElectricalGridMonitoring'
+      }
+    ]});*/
+
     this.store.findAll('entity');
 
     // reschedule refresh

app/routes/lab-mashup/entity/category.js

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

app/routes/lab-mashup/entity/property.js

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

app/serializers/application.js

@@ -1,89 +0,0 @@
-import DS from 'ember-data';
-
-export default DS.RESTSerializer.extend({
-  normalizeFindAllResponse: function(store, primaryModelClass, payload, id, requestType) {
-    var json = { data: [] };
-
-    this._normalizePayload(payload, function(entity) {
-      json.data.push(entity);
-      return true;
-    });
-
-    return json;
-  },
-
-  normalizeFindRecordResponse: function(store, primaryModelClass, payload, id, requestType) {
-    var json = { data: {} };
-
-    this._normalizePayload(payload, function(entity) {
-      json.data = entity;
-      return false;
-    });
-
-    return json;
-  },
-
-  _normalizePayload: function(payload, handleEntity) {
-    var propertyIndex = 0;
-
-    // check if payload has context responses
-    if (payload.contextResponses) {
-      payload.contextResponses.forEach(function(item) {
-        // check if item has context element
-        if (item.contextElement) {
-          // create new entity object
-          var entity = {
-            type: 'entity',
-            id: item.contextElement.id,
-            attributes: {
-              type: item.contextElement.type//,
-              //properties: []
-            },
-            relationships: {
-              properties: {
-                data: []
-              }
-            }
-          }
-
-          if (item.contextElement.attributes) {
-            item.contextElement.attributes.forEach(function(attribute) {
-              // create property
-              var property = {
-                type: 'property',
-                id: 'property_' + propertyIndex++,
-                attributes: {
-                  name: attribute.name,
-                  type: attribute.type,
-                  value: attribute.value,
-                },
-                relationships: {
-                  entity: {
-                    data: { type: 'entity', id: entity.id }
-                  }
-                }
-              }
-
-              // find timestamp
-              attribute.metadatas.forEach(function(metadata) {
-                if (metadata.name === 'timestamp') {
-                  property.attributes.timestamp = metadata.value;
-                }
-              });
-
-              entity.relationships.properties.data.push({ type: 'property', id: property.id });
-
-              handleEntity(property);
-            });
-          }
-
-          // pass entity to caller function
-          if (handleEntity(entity) == false) {
-            // if false returned the caller needs no more entites
-            return;
-          }
-        }
-      });
-    }
-  }
-});

app/serializers/entity.js

@@ -0,0 +1,128 @@
+import DS from 'ember-data';
+
+export default DS.RESTSerializer.extend({
+  normalizeFindAllResponse: function(store, primaryModelClass, payload, id, requestType) {
+    var json = { data: [] };
+
+    this._normalizePayload(payload, function(item) {
+      json.data.push(item);
+      return true;
+    });
+
+    return json;
+  },
+
+  normalizeFindRecordResponse: function(store, primaryModelClass, payload, id, requestType) {
+    var json = { data: {} };
+
+    this._normalizePayload(payload, function(item) {
+      json.data = item;
+      return false;
+    });
+
+    return json;
+  },
+
+  normalizeQueryResponse: function(store, primaryModelClass, payload, id, requestType) {
+    var json = { data: [] };
+
+    this._normalizePayload(payload, function(item) {
+      if (item.type === 'entity') {
+        json.data.push(item);
+      } else {
+        _createRecord(store, item);
+      }
+
+      return true;
+    });
+
+    return json;
+  },
+
+  _normalizePayload: function(payload, handleItem) {
+    var propertyIndex = 0;
+
+    // check if payload has context responses
+    if (payload.contextResponses) {
+      payload.contextResponses.forEach(function(item) {
+        // check if item has context element
+        if (item.contextElement) {
+          // create new entity object
+          var entity = {
+            type: 'entity',
+            id: item.contextElement.id,
+            attributes: {
+              type: item.contextElement.type//,
+              //properties: []
+            },
+            relationships: {
+              properties: {
+                data: []
+              }
+            }
+          }
+
+          if (item.contextElement.attributes) {
+            item.contextElement.attributes.forEach(function(attribute) {
+              if (attribute.type !== 'category') {
+                // create property
+                var property = {
+                  type: 'property',
+                  id: 'property_' + propertyIndex++,
+                  attributes: {
+                    name: attribute.name,
+                    type: attribute.type,
+                    value: attribute.value,
+                  },
+                  relationships: {
+                    entity: {
+                      data: { type: 'entity', id: entity.id }
+                    }
+                  }
+                }
+
+                // find timestamp
+                attribute.metadatas.forEach(function(metadata) {
+                  if (metadata.name === 'timestamp') {
+                    property.attributes.timestamp = metadata.value;
+                  }
+                });
+
+                entity.relationships.properties.data.push({ type: 'property', id: property.id });
+
+                handleItem(property);
+              } else {
+                var category = {
+                  type: 'category',
+                  id: 'category_' + propertyIndex++,
+                  attributes: {
+                    name: attribute.name,
+                  },
+                  relationships: {
+                    entity: {
+                      data: { type: 'entity', id: entity.id }
+                    }
+                  }
+                }
+
+                handleItem(category);
+              }
+            });
+          }
+
+          // pass entity to caller function
+          if (handleItem(entity) == false) {
+            // if false returned the caller needs no more entites
+            return;
+          }
+        }
+      });
+    }
+  },
+
+  _createRecord: function(store, item) {
+    store.createRecord(item.type, {
+
+    });
+  }
+});

app/styles/app.css

@@ -40,39 +40,14 @@ header {
 	-moz-text-rendering: optimizeLegibitliy;
 }
 
-#menu {
-	background-color: #6060C9;
+footer {
+	color: #777;
 
-	border-top: 1px solid #3030C9;
+	margin: 35px auto 0;
 
-	width: 100%;
-}
-
-.nav-tabs {
-	color: #ccc;
-	background-color: #6060C9;
-
-	padding-left: 30px;
-
-	border: 0;
-}
-
-.nav-tabs > li > a {
-	color: #ccc;
-	background-color: #5050C9;
-	box-shadow: none;
-
-	border: 0;
-}
-
-.nav-tabs > li > a:hover {
-	color: #ccc;
-	background-color: #7070C9;
-
-	box-shadow: none;
-
-	border: 0;
-	border-radius: 0;
+	font-size: 12px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+	text-align: center;
 }
 
 #main {
@@ -102,23 +77,6 @@ header {
 	clear: both;
 }
 
-#info {
-	color: #777;
-
-	margin: 35px auto 0;
-
-	font-size: 12px;
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-	text-align: center;
-}
-
-#last-update-info {
-	padding: 0px 0 20px 0;
-
-	font-size: 15px;
-	text-align: left;
-}
-
 .data-table {
 	background: #eee;
 
@@ -153,3 +111,14 @@ header {
 	width: 45%;
 	margin: 0;
 }
+
+.mockup-image {
+	width: 600px;
+	height: 400px;
+
+	border: 1px solid black;
+
+	text-align: center;
+	vertical-align: middle;
+	line-height: 400px;
+}

app/templates/components/properties-table.hbs

@@ -3,9 +3,10 @@
   <th>Value</th>
   <th>Date</th>
 </tr>
-{{#each entity.properties as |property|}}
+{{#each properties as |property|}}
   <tr>
-    <td>{{#link-to 'lab-mashup.entity.property' property}}{{property.name}}{{/link-to}}</td>
+    <!-- <td>{{#link-to 'lab-mashup.entity.property' property}}{{property.name}}{{/link-to}}</td> -->
+    <td>{{property.name}}</td>
     <td>{{property.value}} {{property.type}}</td>
     <td>{{property.timestamp}}</td>
   </tr>

app/templates/lab-mashup.hbs

@@ -1,7 +1,10 @@
 <ul class="nav nav-tabs" role="tablist">
 	{{#link-to 'lab-mashup.static1' tagName='li' activeClass='active'}}{{#link-to 'lab-mashup.static1'}}Static 1{{/link-to}}{{/link-to}}
-	{{#link-to 'lab-mashup.entity' 'S1_ElectricalGrid' tagName='li'}}{{#link-to 'lab-mashup.entity' 'S1_ElectricalGrid'}}Entity 1{{/link-to}}{{/link-to}}
-	{{#link-to 'lab-mashup.entity' 'S2_ElectricalGrid' tagName='li'}}{{#link-to 'lab-mashup.entity' 'S2_ElectricalGrid'}}Entity 2{{/link-to}}{{/link-to}}
+
+	{{#each model as |entity|}}
+		{{#link-to 'lab-mashup.entity' entity tagName='li'}}{{#link-to 'lab-mashup.entity' entity}}{{entity.id}}{{/link-to}}{{/link-to}}
+	{{/each}}
+
 	{{#link-to 'lab-mashup.static2' tagName='li'}}{{#link-to 'lab-mashup.static1'}}Static 2{{/link-to}}{{/link-to}}
 </ul>
 

app/templates/lab-mashup/entity.hbs

@@ -1,13 +1,13 @@
-<h3>{{model.id}}</h3>
-
-{{#if model.properties}}
 <section id="main-left">
-  {{properties-table entity=model}}
+  <section class="mockup-image">[Node Layout Image]</section>
 </section>
 
 <section id="main-right">
+  <ul class="nav nav-tabs" role="tablist">
+    {{#each model.categories as |category|}}
+      {{#link-to 'lab-mashup.entity.category' category tagName='li' activeClass='active'}}{{#link-to 'lab-mashup.entity.category' category}}{{category.name}}{{/link-to}}{{/link-to}}
+    {{/each}}
+  </ul>
+
   {{outlet}}
 </section>
-{{else}}
-  <h3>No properties</h3>
-{{/if}}

app/templates/lab-mashup/entity/category.hbs

@@ -0,0 +1 @@
+{{properties-table properties=model.properties}}

app/templates/lab-mashup/entity/index.hbs

@@ -1 +1 @@
-<p>Select a property</p>
+{{properties-table properties=model.properties}}

app/templates/lab-mashup/entity/property.hbs

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

app/templates/lab-mashup/static1.hbs

@@ -1 +1 @@
-<p>Static 1 page</p>
+<section class="mockup-image">[Static 1 Image]</section>