Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

Add entity-chart component

Browse source 
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.
This commit is contained in:
Markus Grigull 2015-10-14 11:05:11 +02:00
parent b716b67bbc
commit 29b1da6ca1
6 changed files with 83 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
app/components/entity-chart.js Normal file
View file

@ -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);
}
}
});

32
app/controllers/lab-mashup.js
View file

@ -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.[]')
});

10
app/styles/app.css
View file

@ -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;

25
app/templates/components/entity-chart.hbs Normal file
View file

@ -0,0 +1,25 @@
<table>
{{#if entityName}}
<tr>
<th colspan="2">
<h2>{{entityName}}</h2>
</th>
</tr>
{{/if}}
<tr>
<td class="column-left">
{{property-table model=entity showProperty="showPropertyValues"}}
</td>
<td class="column-right">
{{#if visibleProperty}}
<h3>{{visibleProperty.name}}</h3>
{{/if}}
{{line-chart data=visibleProperty.values}}
{{#if visibleProperty}}
<h4>{{visibleProperty.type}}</h4>
{{/if}}
</td>
</tr>
</table>

40
app/templates/lab-mashup.hbs
View file

@ -2,11 +2,11 @@
<table class="grid">
<tr>
<td colspan="2">
<div class="layout-page" width="70%">
<div class="layout-page" width="75%">
<img src={{"assets/images/View2/TransmissionSystem.svg"}} class="svg-image" />
</div>
</td>
<td rowspan="2" width="30%" height="100%">
<td rowspan="2" width="25%">
<div class="layout-page">
<h2>Simulation</h2>
<p>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.<br />
@ -17,42 +17,10 @@
</tr>
<tr>
<td>
<div class="layout-page">
<table>
<tr>
<td class="column-left">
{{property-table model=S1Entity showProperty="showProperty1Values"}}
</td>
<td class="column-right">
{{#if S1Property}}
<h3>{{S1Property.name}}</h3>
{{/if}}
{{line-chart data=S1Property.values}}
{{#if S1Property}}
<h4>{{S1Property.type}}</h4>
{{/if}}
</td>
</tr>
</table>
</div>
{{entity-chart entity=S1Entity entityName="Transmission System"}}
</td>
<td>
<div class="layout-page">
<table>
<tr>
<td class="column-left">
{{property-table model=S2Entity showProperty="showProperty2Values"}}
</td>
<td class="column-right">
<h3>{{S2Property.name}}</h3>
{{line-chart data=S2Property.values}}
<h4>{{S2Property.type}}</h4>
</td>
</tr>
</table>
</div>
{{entity-chart entity=S2Entity entityName="Distribution System"}}
</td>
</tr>
</table>

26
tests/integration/components/entity-chart-test.js Normal file
View file

@ -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');
});