Start 2x2 grid layout

app/adapters/application.js

@@ -13,10 +13,8 @@ export default DS.RESTAdapter.extend({
       entities: [
         {
           type: 'ElectricalGridMonitoring',
-          /*isPattern: true,
-          id: 'S?_ElectricalGrid'*/
-          isPattern: false,
-          id: 'S3_ElectricalGrid'
+          isPattern: true,
+          id: 'S?_ElectricalGrid'
         }
       ]
     };

app/components/entities-table.js

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

app/components/line-chart.js

@@ -4,6 +4,7 @@ export default Ember.Component.extend({
   tagName: 'div',
   classNames: ['line-chart'],
   xaxisLength: 60,
+  updateTime: 100,
 
   init: function() {
     this._super();
@@ -15,7 +16,7 @@ export default Ember.Component.extend({
 
     Ember.run.later(this, function() {
       this._drawPlot();
-    }, 500);
+    }, this.updateTime);
   },
 
   dataDidChange: function() {
@@ -23,27 +24,9 @@ export default Ember.Component.extend({
   },
 
   _drawPlot: function() {
-    if (this.data) {
-      var element = this.get('element');
-      if (element && element.id) {
-        // calculate displayed xaxis
-        /*var length = this.data.length;
-        var startIndex = 0;
-        var endIndex = this.xaxisLength;
-
-        if (length > this.xaxisLength) {
-          startIndex = length - this.xaxisLength;
-          endIndex = length;
-        }
-
-        // display the chart
-        $.plot('#' + element.id, this.data, {
-          xaxis: {
-  					min: startIndex,
-            max: endIndex
-  				},
-        });*/
-
+    var element = this.get('element');
+    if (element && element.id) {
+      if (this.data && this.data.length > 0) {
         var firstTimestamp = this.data[0][0];
         var lastTimestamp = this.data[this.data.length - 1][0];
 
@@ -64,11 +47,22 @@ export default Ember.Component.extend({
             max: lastTimestamp
           }
         });
-
-        Ember.run.later(this, function() {
-          this._drawPlot();
-        }, 500);
+      } else {
+        // display empty chart
+        $.plot('#' + element.id, [[]], {
+          xaxis: {
+            show: false
+          },
+          yaxis: {
+            show: false
+          }
+        });
       }
     }
+
+    // try again
+    Ember.run.later(this, function() {
+      this._drawPlot();
+    }, this.updateTime);
   }
 });

app/components/properties-table.js

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

app/components/property-table.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'table',
+  classNames: ['data-table'],
+
+  actions: {
+    propertyClicked(property) {
+      this.sendAction('showProperty', property);
+    }
+  }
+});

app/controllers/lab-mashup.js

@@ -0,0 +1,44 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  S1Entity: function() {
+    var entity = null;
+
+    this.model.forEach(function (_entity) {
+      if (_entity.id === 'S1_ElectricalGrid') {
+        entity = _entity;
+      }
+    });
+
+    return entity;
+  }.property('model.[]'),
+
+  S2Entity: function() {
+    var entity = null;
+
+    this.model.forEach(function (_entity) {
+      if (_entity.id === 'S2_ElectricalGrid') {
+        entity = _entity;
+      }
+    });
+
+    return entity;
+  }.property('model.[]'),
+
+  actions: {
+    showPropertyValues(property) {
+      var id = property.id;
+
+      var prop = null;
+
+      this.get('S1Entity').get('properties').forEach(function (proper) {
+        if (proper.id === id) {
+          prop = proper;
+        }
+      });
+
+      this.set('S1Property', prop);
+      console.log(prop);
+    }
+  }
+});

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

@@ -1,12 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Controller.extend({
-  model(params) {
-    Ember.run.later(this, function() {
-      this.refresh();
-    }, 500);
-
-    var record = this.store.peekRecord('property', params.property_id);
-    return record;
-  }
-});

app/router.js

@@ -6,17 +6,7 @@ var Router = Ember.Router.extend({
 });
 
 Router.map(function() {
-    this.route('lab-mashup', { path: '/' }, function() {
-      // dynamic routes
-      this.route('entity', { path: '/:entity_id' }, function() {
-        //this.route('category', { path: '/:category_id'});
-        this.route('property', { path: '/:property_id'});
-      });
-
-      // static routes
-      this.route('static1', { path: '/static1' });
-      this.route('static2', { path: '/static2' });
-    });
+    this.route('lab-mashup', { path: '/' });
 });
 
 export default Router;

app/routes/lab-mashup.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Route.extend({
   model() {
-    /*return this.store.query('entity', { entities: [
+    return this.store.query('entity', { entities: [
       {
         id: 'S1_ElectricalGrid',
         isPattern: false,
@@ -13,22 +13,22 @@ export default Ember.Route.extend({
         isPattern: false,
         type: 'ElectricalGridMonitoring'
       }
-    ]});*/
-    return this.store.findAll('entity');
+    ]});
+    //return this.store.findAll('entity');
   },
 
   afterModel() {
     // first time call poll
     Ember.run.later(this, function() {
       this.refreshEntities();
-    }, 500);
+    }, 100);
   },
 
   refreshEntities: function() {
     // fetch new data from server
-    /*this.store.query('entity', { entities: [
+    this.store.query('entity', { entities: [
       {
-        id: 'S1_ElectricalGrid',
+        id: 'S3_ElectricalGrid',
         isPattern: false,
         type: 'ElectricalGridMonitoring'
       },
@@ -37,13 +37,12 @@ export default Ember.Route.extend({
         isPattern: false,
         type: 'ElectricalGridMonitoring'
       }
-    ]});*/
-
-    this.store.findAll('entity');
+    ]});
+    //this.store.findAll('entity');
 
     // reschedule refresh
     Ember.run.later(this, function() {
       this.refreshEntities();
-    }, 500);
+    }, 100);
   }
 });

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/routes/lab-mashup/entity/category.js

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

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

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

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

@@ -1,12 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Route.extend({
-  model(params) {
-    Ember.run.later(this, function() {
-      this.refresh();
-    }, 500);
-
-    var record = this.store.peekRecord('property', params.property_id);
-    return record;
-  }
-});

app/routes/lab-mashup/index.js

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

app/serializers/application.js

@@ -89,6 +89,10 @@ export default DS.RESTSerializer.extend({
                   }
                 });
 
+                if (timestamp === 0) {
+                  timestamp = (new Date()).getTime();
+                }
+
                 // create property
                 var property = {
                   type: 'property',
@@ -96,7 +100,7 @@ export default DS.RESTSerializer.extend({
                   attributes: {
                     name: attribute.name,
                     type: attribute.type,
-                    date: timestamp,
+                    timestamp: timestamp,
                     visible: false,
                     values: []
                   },
@@ -109,9 +113,13 @@ export default DS.RESTSerializer.extend({
 
                 // add values
                 if (attribute.value) {
-                  attribute.value.forEach(function (value) {
-                    property.attributes.values.push(value);
-                  });
+                  if ($.isArray(attribute.value)) {
+                    attribute.value.forEach(function (value) {
+                      property.attributes.values.push(value);
+                    });
+                  } else {
+                    property.attributes.values.push([timestamp, attribute.value]);
+                  }
                 }
 
                 entity.relationships.properties.data.push({ type: 'property', id: property.id });

app/styles/app.css

@@ -7,8 +7,6 @@ body {
 	background: #eee;
 	color: #4d4d4d;
 
-	min-width: 300px;
-	/*max-width: 1500px;*/
 	margin: 0 auto;
 
 	font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -43,72 +41,78 @@ header {
 footer {
 	color: #777;
 
-	margin: 35px auto 0;
+	padding-top: 10px;
 
 	width: 100%;
 
-	font-size: 12px;
+	font-size: 13px;
 	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 	text-align: center;
 }
 
+h2 {
+	text-align: center;
+}
+
 #main {
-	margin-top: 15px;
-	margin-left: 15px;
 
+}
+
+.grid {
 	width: 100%;
-}
-
-.layout-left {
-	float: left;
-
 	height: 100%;
+	margin: 0;
 
-	/*margin: 10px;*/
+	border: 0;
 }
 
-.layout-right {
-	float: right;
+.grid2x2 td {
+	padding: 5px;
 
+	width: 50%;
+	height: 50%;
+}
+
+.grid3x1 td {
 	height: 100%;
-
-	/*margin: 10px;*/
+	width: auto;
 }
 
-.layout::after {
-	display: block;
-	content: "";
-	clear: both;
+#S1-left {
+	width: 200px;
 }
 
-#properties {
-	padding-top: 20px;
+#S1-right {
+	width: auto;
 }
 
-#properties > .layout-left {
-	width: 25%;
-}
-
-#properties > .layout-right {
-	width: 70%;
-}
-
-#main > .layout-left {
+#S2-left {
 	width: 40%;
 }
 
-#main > .layout-right {
-	width: 55%;
+#S2-center {
+	width: 200px;
+}
+
+#S2-right {
+	width: auto;
+}
+
+.line-chart {
+	width: 100%;
+	height: 100%;
 }
 
 .data-table {
 	background: #eee;
 
-	border: 1px solid #999;
-	border-collapse: collapse;
+	margin: 0;
+	padding: 0;
 
 	width: 100%;
-	margin: 0 auto;
+
+	border: 1px solid #999;
+	border-collapse: collapse;
 }
 
 .data-table th {
@@ -131,23 +135,7 @@ footer {
 	font-size: 14px;
 }
 
-.data-table.entity-table {
-	width: 45%;
-	margin: 0;
-}
-
-.line-chart {
-	width: 90%;
-	height: 500px;
-}
-
-.mockup-image {
+.svg-image {
 	width: 100%;
-	height: 75%;
-
-	border: 1px solid black;
-
-	text-align: center;
-	vertical-align: middle;
-	line-height: 400px;
+	height: auto;
 }

app/templates/application.hbs

@@ -5,8 +5,7 @@
 
 	{{outlet}}
 </section>
-<!--
+
 <footer id="info">
 	<p>&copy; 2015 - Institute for Automation of Complex Power Systems</p>
 </footer>
--->

app/templates/components/entities-table.hbs

@@ -1,10 +0,0 @@
-<tr>
-  <th>ID</th>
-  <th>Type</th>
-</tr>
-{{#each entities as |entity|}}
-  <tr>
-    <td>{{#link-to 'entities.entity' entity}}{{entity.id}}{{/link-to}}</td>
-    <td>{{entity.type}}</td>
-  </tr>
-{{/each}}

app/templates/components/properties-table.hbs

@@ -1,12 +0,0 @@
-<tr>
-  <th>Name</th>
-  <th>Value</th>
-  <th>Date</th>
-</tr>
-{{#each properties as |property|}}
-  <tr>
-    <td>{{#link-to 'lab-mashup.entity.property' property}}{{property.name}}{{/link-to}}</td>
-    <td>{{property.value}} {{property.type}}</td>
-    <td>{{property.timestamp}}</td>
-  </tr>
-{{/each}}

app/templates/components/property-table.hbs

@@ -0,0 +1,8 @@
+<tr>
+  <th>Name</th>
+</tr>
+{{#each model.properties as |property|}}
+  <tr>
+    <td {{action "propertyClicked" property}}>{{property.name}}</td>
+  </tr>
+{{/each}}

app/templates/lab-mashup.hbs

@@ -1,13 +1,54 @@
-<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}}
-
-	{{#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>
-
 <section id="main">
-	{{outlet}}
+	<table class="grid grid2x2">
+		<tr>
+			<td id="top-left">
+				<h2>Transmission System</h2>
+
+				<table class="grid grid3x1">
+					<tr>
+						<td colspan="2">
+							<img src={{"assets/images/View2/TransmissionSystem.svg"}} class="svg-image" />
+						</td>
+					</tr>
+					<tr>
+						<td id="S1-left">
+							{{property-table model=S1Entity showProperty="showPropertyValues"}}
+						</td>
+
+						<td id="S1-right">
+							{{line-chart data=S1Property.values dataName=S1Property.name}}
+						</td>
+					</tr>
+				</table>
+			</td>
+			<td id="top-right">
+				<h2>Distribution System</h2>
+
+				<table class="grid grid3x1">
+					<tr>
+						<td id="S2-left">
+							<img src={{"assets/images/View3/DistributionSystem.svg"}} class="svg-image" />
+						</td>
+						<td id="S2-center">
+							{{property-table model=S2Entity showProperty="showPropertyValues"}}
+						</td>
+						<td id="S2-right">
+							{{line-chart data=S2Property.values dataName=S2Property.name}}
+						</td>
+					</tr>
+				</table>
+			</td>
+		</tr>
+		<tr>
+			<td id="bottom-left">
+
+				<h2>Simulation</h2>
+
+				<img src={{"assets/images/View1/Simulation Scenario.svg"}} class="svg-image" />
+			</td>
+			<td id="bottom-right">
+				<h2>Static</h2>
+			</td>
+		</tr>
+	</table>
 </section>

app/templates/lab-mashup/entity.hbs

@@ -1,30 +0,0 @@
-<section class="layout-left">
-  <section class="mockup-image">[Node Layout Image]</section>
-</section>
-
-<section class="layout-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>
-
-  <section id="properties">
-    <section class="layout-left">
-      <table class="data-table">
-        <tr>
-          <th>Name</th>
-        </tr>
-        {{#each model.properties as |property|}}
-          <tr>
-            <td>{{#link-to 'lab-mashup.entity.property' property}}{{property.name}}{{/link-to}}</td>
-          </tr>
-        {{/each}}
-      </table>
-    </section>
-
-    <section class="layout-right">
-      {{outlet}}
-    </section>
-  </section>
-</section>

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

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

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

@@ -1 +0,0 @@
-

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

@@ -1 +0,0 @@
-{{line-chart data=model.values xaxisLength=600}}

app/templates/lab-mashup/index.hbs

@@ -1 +0,0 @@
-<p>Select an entity to show it's properties</p>

app/templates/lab-mashup/static1.hbs

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

app/templates/lab-mashup/static2.hbs

@@ -1 +0,0 @@
-<p>Static 2 page</p>

app/transforms/property.js

@@ -1,12 +0,0 @@
-import Ember from 'ember';
-import DS from 'ember-data';
-
-export default DS.Transform.extend({
-  deserialize: function(value) {
-    return Ember.create({ name: value[0], value: value[1], type: value[2], timestamp: value[3]});
-  },
-
-  serialize: function(value) {
-    return [value.get('name'), value.get('value'), value.get('type'), value.get('timestamp')];
-  }
-});

tests/integration/components/properties-table-test.js

@@ -1,26 +0,0 @@
-import { moduleForComponent, test } from 'ember-qunit';
-import hbs from 'htmlbars-inline-precompile';
-
-moduleForComponent('properties-table', 'Integration | Component | properties table', {
-  integration: true
-});
-
-test('it renders', function(assert) {
-  assert.expect(2);
-
-  // Set any properties with this.set('myProperty', 'value');
-  // Handle any actions with this.on('myAction', function(val) { ... });
-
-  this.render(hbs`{{properties-table}}`);
-
-  assert.equal(this.$().text().trim(), '');
-
-  // Template block usage:
-  this.render(hbs`
-    {{#properties-table}}
-      template block text
-    {{/properties-table}}
-  `);
-
-  assert.equal(this.$().text().trim(), 'template block text');
-});

tests/integration/components/property-table-test.js

@@ -1,7 +1,7 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 
-moduleForComponent('entities-table', 'Integration | Component | entities table', {
+moduleForComponent('property-table', 'Integration | Component | property table', {
   integration: true
 });
 
@@ -11,15 +11,15 @@ 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`{{entities-table}}`);
+  this.render(hbs`{{property-table}}`);
 
   assert.equal(this.$().text().trim(), '');
 
   // Template block usage:
   this.render(hbs`
-    {{#entities-table}}
+    {{#property-table}}
       template block text
-    {{/entities-table}}
+    {{/property-table}}
   `);
 
   assert.equal(this.$().text().trim(), 'template block text');

tests/unit/controllers/lab-mashup-test.js

@@ -1,6 +1,6 @@
 import { moduleFor, test } from 'ember-qunit';
 
-moduleFor('controller:lab-mashup/entity/property', {
+moduleFor('controller:lab-mashup', {
   // Specify the other units that are required for this test.
   // needs: ['controller:foo']
 });

tests/unit/transforms/property-test.js

@@ -1,12 +0,0 @@
-import { moduleFor, test } from 'ember-qunit';
-
-moduleFor('transform:property', 'Unit | Transform | property', {
-  // Specify the other units that are required for this test.
-  // needs: ['serializer:foo']
-});
-
-// Replace this with your real tests.
-test('it exists', function(assert) {
-  var transform = this.subject();
-  assert.ok(transform);
-});