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

Prepare for new layout

Browse source
This commit is contained in:
Markus Grigull 2015-10-14 09:55:04 +02:00
parent 8ecc8ba95d
commit bb470e940a
3 changed files with 98 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,7 +26,7 @@ export default Ember.Controller.extend({
}.property('model.[]'),
actions: {
showPropertyValues(property) {
showProperty1Values(property) {
var id = property.id;
var prop = null;
@ -38,7 +38,20 @@ export default Ember.Controller.extend({
});
this.set('S1Property', prop);
console.log(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);
}
}
});

43
app/styles/app.css
View file

@ -62,6 +62,7 @@ h2 {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
@ -69,7 +70,8 @@ h2 {
}
.grid2x2 td {
padding: 5px;
padding: 0;
margin: 0;
width: 50%;
height: 50%;
@ -78,37 +80,44 @@ h2 {
.grid3x1 td {
height: 100%;
width: auto;
padding: 5px;
border: 1px solid black;
}
#S1-left {
width: 150px;
#S1-image {
height: auto;
}
#S1-right {
.column-left {
width: 150px !important;
}
.column-right {
width: auto;
padding: 25px;
padding-bottom: 30px;
padding-bottom: 40px;
}
#S1-right h3 {
.column-right h3 {
text-align: center;
}
#S1-right h4 {
.column-right h4 {
text-align: right;
}
#S2-left {
width: 40%;
}
#S2-center {
width: 200px;
}
#S2-right {
width: auto;
.layout-page {
background-color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.1);
margin: 10px;
padding: 10px;
height: 100%;
}
.line-chart {

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

@ -1,55 +1,69 @@
<section id="main">
<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">
<h3>{{S1Property.name}}</h3>
{{line-chart data=S1Property.values}}
<h4>{{S1Property.type}}</h4>
</td>
</tr>
</table>
<td>
<div id="top-left" class="layout-page">
<h2>Transmission System</h2>
<table class="grid grid3x1">
<tr>
<td colspan="2" id="S1-image">
<img src={{"assets/images/View2/TransmissionSystem.svg"}} class="svg-image" />
</td>
</tr>
<tr>
<td class="column-left">
{{property-table model=S1Entity showProperty="showProperty1Values"}}
</td>
<td class="column-right">
<h3>{{S1Property.name}}</h3>
{{line-chart data=S1Property.values}}
<h4>{{S1Property.type}}</h4>
</td>
</tr>
</table>
</div>
</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}}
</td>
</tr>
</table>
<td>
<div id="top-right" class="layout-page">
<h2>Distribution System</h2>
<table class="grid grid3x1">
<tr>
<td colspan="2" id="S1-image">
<img src={{"assets/images/View3/DistributionSystem.svg"}} class="svg-image" />
</td>
</tr>
<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>
</td>
</tr>
<tr>
<td id="bottom-left">
<td>
<div id="bottom-left" class="layout-page">
<h2>Simulation</h2>
<h2>Simulation</h2>
<img src={{"assets/images/View1/Simulation Scenario.svg"}} class="svg-image" />
<img src={{"assets/images/View1/Simulation Scenario.svg"}} class="svg-image" />
</div>
</td>
<td id="bottom-right">
<h2>Static</h2>
<td>
<div id="bottom-right" class="layout-page">
<h2>Static</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.</p>
</div>
</td>
</tr>
</table>