From 29b1da6ca141ba4aadac44f5dc65750d6d50a68e Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Wed, 14 Oct 2015 11:05:11 +0200 Subject: [PATCH] Add entity-chart component The component combines the property-table and line-chart to manage and display the properties of one entity. Thus it is reusable for multiple entities at the same time. --- app/components/entity-chart.js | 17 ++++++++ app/controllers/lab-mashup.js | 32 +-------------- app/styles/app.css | 10 +++++ app/templates/components/entity-chart.hbs | 25 ++++++++++++ app/templates/lab-mashup.hbs | 40 ++----------------- .../components/entity-chart-test.js | 26 ++++++++++++ 6 files changed, 83 insertions(+), 67 deletions(-) create mode 100644 app/components/entity-chart.js create mode 100644 app/templates/components/entity-chart.hbs create mode 100644 tests/integration/components/entity-chart-test.js diff --git a/app/components/entity-chart.js b/app/components/entity-chart.js new file mode 100644 index 0000000..684a8f7 --- /dev/null +++ b/app/components/entity-chart.js @@ -0,0 +1,17 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + tagName: 'div', + classNames: ['layout-page'], + + visibleProperty: function() { + var properties = this.get('entity.properties'); + return properties.objectAt(0); + }.property('entity'), + + actions: { + showPropertyValues(_prop) { + this.set('visibleProperty', _prop); + } + } +}); diff --git a/app/controllers/lab-mashup.js b/app/controllers/lab-mashup.js index af3b5dd..f386b6a 100644 --- a/app/controllers/lab-mashup.js +++ b/app/controllers/lab-mashup.js @@ -23,35 +23,5 @@ export default Ember.Controller.extend({ }); return entity; - }.property('model.[]'), - - actions: { - showProperty1Values(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); - }, - - showProperty2Values(property) { - var id = property.id; - - var prop = null; - - this.get('S2Entity').get('properties').forEach(function (proper) { - if (proper.id === id) { - prop = proper; - } - }); - - this.set('S2Property', prop); - } - } + }.property('model.[]') }); diff --git a/app/styles/app.css b/app/styles/app.css index 897e144..e16e5e4 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -87,10 +87,16 @@ h2 { .column-right h3 { text-align: center; + + margin: 0; + padding: 0; } .column-right h4 { text-align: right; + + margin: 0; + padding: 0; } .layout-page { @@ -104,6 +110,10 @@ h2 { height: 100%; } +.layout-page h2 { + margin-bottom: 10px; +} + .line-chart { width: 400px; height: 400px; diff --git a/app/templates/components/entity-chart.hbs b/app/templates/components/entity-chart.hbs new file mode 100644 index 0000000..0892882 --- /dev/null +++ b/app/templates/components/entity-chart.hbs @@ -0,0 +1,25 @@ + + {{#if entityName}} + + + + {{/if}} + + + + +
+

{{entityName}}

+
+ {{property-table model=entity showProperty="showPropertyValues"}} + + {{#if visibleProperty}} +

{{visibleProperty.name}}

+ {{/if}} + + {{line-chart data=visibleProperty.values}} + + {{#if visibleProperty}} +

{{visibleProperty.type}}

+ {{/if}} +
diff --git a/app/templates/lab-mashup.hbs b/app/templates/lab-mashup.hbs index f7c553b..30c17ee 100644 --- a/app/templates/lab-mashup.hbs +++ b/app/templates/lab-mashup.hbs @@ -2,11 +2,11 @@ -
-
+
+

Simulation

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -17,42 +17,10 @@

-
- - - - - -
- {{property-table model=S1Entity showProperty="showProperty1Values"}} - - {{#if S1Property}} -

{{S1Property.name}}

- {{/if}} - - {{line-chart data=S1Property.values}} - - {{#if S1Property}} -

{{S1Property.type}}

- {{/if}} -
-
+ {{entity-chart entity=S1Entity entityName="Transmission System"}} 		-
- - - - - -
- {{property-table model=S2Entity showProperty="showProperty2Values"}} - -

{{S2Property.name}}

- {{line-chart data=S2Property.values}} -

{{S2Property.type}}

-
-
+ {{entity-chart entity=S2Entity entityName="Distribution System"}}
diff --git a/tests/integration/components/entity-chart-test.js b/tests/integration/components/entity-chart-test.js new file mode 100644 index 0000000..5d506c7 --- /dev/null +++ b/tests/integration/components/entity-chart-test.js @@ -0,0 +1,26 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('entity-chart', 'Integration | Component | entity chart', { + 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`{{entity-chart}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#entity-chart}} + template block text + {{/entity-chart}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +});