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

Move value plot modal to component

Browse source 
Change simulator and signal from numbers to combo boxes
This commit is contained in:
Markus Grigull 2016-10-12 22:06:24 +02:00
parent ddea7e5e32
commit 22780b9d7a
23 changed files with 298 additions and 201 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/components/plot-abstract.js
View file

@ -79,9 +79,9 @@ export default Ember.Component.extend(Resizable, Draggable, {
}
}.observes('editing', 'grid').on('init'),
doubleClick() {
/*doubleClick() {
if (this.get('editing')) {
this.sendAction('showPlotDialog', this.get('plot'));
}
}
}*/
});

121
app/components/plot-value.js
View file

@ -26,5 +26,124 @@ export default PlotAbstract.extend({
Ember.run.later(this, function() {
this.notifyPropertyChange('data.' + this.get('plot.simulator') + '.values');
}, 1000);
}.property('data.2.values', 'plot.simulator', 'plot.signal')
}.property('data.2.values', 'plot.simulator', 'plot.signal'),
doubleClick() {
if (this.get('editing') === true) {
// prepare modal
this.set('name', this.get('plot.name'));
// get signal mapping for simulation model
let self = this;
let simulatorid = this.get('plot.simulator');
this.get('plot.visualization').then((visualization) => {
visualization.get('project').then((project) => {
project.get('simulation').then((simulation) => {
simulation.get('models').then((simulationModels) => {
// find simulation model by simulatorid
simulationModels.forEach(function(simulationModel) {
simulationModel.get('simulator').then((simulator) => {
if (simulator.get('simulatorid') === simulatorid) {
// set simulation model
self.set('simulationModel', simulationModel);
self.set('simulationModelName', simulationModel.get('name'));
// set signal
let mapping = simulationModel.get('mapping');
self.set('signalName', mapping[self.get('plot.signal')]);
}
});
});
});
});
});
});
// shot modal
this.set('isShowingModal', true);
}
},
actions: {
submitModal() {
// verify properties
let properties = this.getProperties('name');
if (properties['name'] === null || properties['name'] === "") {
this.set('errorMessage', 'Plot name is missing');
return;
}
// set simulator by simulation model name
let simulationModelName = this.get('simulationModelName');
let self = this;
this.get('plot.visualization').then((visualization) => {
visualization.get('project').then((project) => {
project.get('simulation').then((simulation) => {
simulation.get('models').then((simulationModels) => {
// find simulation model by name
simulationModels.forEach(function(simulationModel) {
if (simulationModel.get('name') === simulationModelName) {
simulationModel.get('simulator').then((simulator) => {
// set simulator
properties['simulator'] = simulator.get('simulatorid');
// set signal by name
let mapping = simulationModel.get('mapping');
let signalName = self.get('signalName');
for (let i = 0; i < mapping.length; i++) {
if (mapping[i] === signalName) {
properties['signal'] = i;
}
}
// save properties
self.get('plot').setProperties(properties);
self.get('plot').save().then(function() {
self.set('isShowingModal', false);
});
});
}
});
});
});
});
});
},
cancelModal() {
this.set('isShowingModal', false);
},
selectSimulationModel(simulationModelName) {
// save simulation model
this.set('simulationModelName', simulationModelName);
// get signal mapping for simulation model
let self = this;
let simulatorid = this.get('plot.simulator');
this.get('plot.visualization').then((visualization) => {
visualization.get('project').then((project) => {
project.get('simulation').then((simulation) => {
simulation.get('models').then((simulationModels) => {
// find simulation model by name
simulationModels.forEach(function(simulationModel) {
if (simulationModel.get('name') === simulationModelName) {
self.set('simulationModel', simulationModel);
}
});
});
});
});
});
},
selectSignal(signalName) {
this.set('signalName', signalName);
}
}
});

7
app/routes/visualization/new.js → app/controllers/dialog/plot/value.js
View file

@ -1,14 +1,13 @@
/**
* File: new.js
* File: value.js
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
* Date: 28.06.2016
* Date: 12.07.2016
* Copyright: 2016, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin, {
export default Ember.Controller.extend({
});

34
app/controllers/simulation-model/index.js
View file

@ -10,38 +10,4 @@
import Ember from 'ember';
export default Ember.Controller.extend({
values: function() {
return this.get('simulationData.values');
}.property('simulationData.values.@each'),
_getData: function() {
if (this.get('model.simulation.running') === true) {
var simulator = this.get('model.simulator');
if (simulator == null) {
return;
}
var data = this.store.peekRecord('simulation-data', simulator);
this.set('simulationData', data);
// load model again if simulation data is null
// this prevents from simulation data not being loaded when the controller
// is loaded before the websocket connects
if (data === null) {
Ember.run.later(this, function() {
// trigger _getData
this.notifyPropertyChange('model');
}, 1000);
}
} else {
// clear simulation data
this.set('simulationData', null);
// check again if simulation is running now
Ember.run.later(this, function() {
// trigger _getData
this.notifyPropertyChange('model');
}, 1000);
}
}.observes('model').on('init')
});

59
app/controllers/simulation/index.js
View file

@ -21,7 +21,7 @@ export default Ember.Controller.extend({
_updateSimulators: function() {
if (this.get('model.simulators') != null && this.get('model.simulators.length') > 0) {
var simulators = this.get('model.simulators');
let simulators = this.get('model.simulators');
this.set('simulatorName', simulators.toArray()[0].get('name'));
}
}.observes('model'),
@ -31,6 +31,7 @@ export default Ember.Controller.extend({
// reset properties
this.set('errorMessage', null);
this.set('name', null);
this.set('length', 1);
// show the dialog
this.set('isShowingNewModal', true);
@ -41,10 +42,11 @@ export default Ember.Controller.extend({
this.set('errorMessage', null);
this.set('simulationModel', simulationModel);
this.set('name', simulationModel.get('name'));
this.set('length', simulationModel.get('length'));
var simulators = this.get('model.simulators');
var simulatorId = simulationModel.get('simulator.id');
var simulatorName = null;
let simulators = this.get('model.simulators');
let simulatorId = simulationModel.get('simulator.id');
let simulatorName = null;
simulators.forEach(function(simulator) {
if (simulator.get('id') === simulatorId) {
@ -68,19 +70,19 @@ export default Ember.Controller.extend({
submitNew() {
// verify properties
var properties = this.getProperties('name');
let properties = this.getProperties('name', 'length');
if (properties['name'] == null || properties['name'] === "") {
this.set('errorMessage', 'Simulation model name is missing');
return;
}
// set simuatlion properties
var simulation = this.get('model.simulation');
let simulation = this.get('model.simulation');
properties['simulation'] = simulation;
// get the simulator id by simulator name
var simulators = this.get('model.simulators');
var simulatorName = this.get('simulatorName');
// get the simulator by simulator name
let simulators = this.get('model.simulators');
let simulatorName = this.get('simulatorName');
simulators.forEach(function(simulator) {
if (simulator.get('name') === simulatorName) {
@ -88,13 +90,22 @@ export default Ember.Controller.extend({
}
});
// create mapping
let mapping = [];
for (let i = 0; i < properties['length']; i++) {
mapping.pushObject("Signal " + (i + 1));
}
properties['mapping'] = mapping;
// create new model
var simulationModel = this.store.createRecord('simulation-model', properties);
let simulationModel = this.store.createRecord('simulation-model', properties);
// this change will not be saved, but it is nessecary otherwise ember will omit the simulation's id in the post request
simulation.get('models').pushObject(simulationModel);
var controller = this;
let controller = this;
simulationModel.save().then(function() {
controller.set('isShowingNewModal', false);
@ -109,36 +120,28 @@ export default Ember.Controller.extend({
submitEdit() {
// verify properties
var properties = this.getProperties('name');
let properties = this.getProperties('name', 'length');
if (properties['name'] == null || properties['name'] === "") {
this.set('errorMessage', 'Simulation model name is missing');
return;
}
// set simuatlion properties
var simulation = this.get('model.simulation');
properties['simulation'] = simulation.get('id');
let simulation = this.get('model.simulation');
properties['simulation'] = simulation;
// get the simulator id by simulator name
var simulators = this.get('model.simulators');
var simulatorId = null;
var simulatorName = this.get('simulatorName');
// get the simulator by simulator name
let simulators = this.get('model.simulators');
let simulatorName = this.get('simulatorName');
simulators.forEach(function(simulator) {
if (simulator.get('name') === simulatorName) {
simulatorId = simulator.get('simulatorid');
properties['simulator'] = simulator;
}
});
if (simulatorId == null) {
Ember.debug('Unable to find simulator by name');
return;
}
properties['simulator'] = simulatorId;
// save properties
var controller = this;
let controller = this;
this.get('simulationModel').setProperties(properties);
@ -155,7 +158,7 @@ export default Ember.Controller.extend({
confirmDelete() {
// delete the model
var simulationModel = this.get('simulationModel');
let simulationModel = this.get('simulationModel');
simulationModel.destroyRecord();
// hide the dialog

30
app/controllers/visualization/delete.js
View file

@ -1,30 +0,0 @@
/**
* File: delete.js
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
* Date: 28.06.2016
* Copyright: 2016, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
cancelDelete() {
// go back to visualization edit view
let visualizationId = this.get('model.id');
this.transitionToRoute('/visualization/' + visualizationId);
},
confirmDelete() {
// get the objects
var projectId = this.get('model.project.id');
var visualization = this.get('model');
visualization.destroyRecord();
this.transitionToRoute('/project/' + projectId);
}
}
});

21
app/controllers/visualization/edit.js
View file

@ -18,8 +18,16 @@ export default Ember.Controller.extend(FetchLiveDataMixin, {
plot: null,
name: null,
simulator: null,
simulatorName: null,
signal: null,
_updateSimulators: function() {
if (this.get('model.simulators') !== null && this.get('model.simulators.length') > 0) {
let simulators = this.get('model.simulators');
this.set('simulatorName', simulators.toArray()[0].get('name'));
}
}.observes('model'),
actions: {
addPlot(name) {
var plot = null;
@ -30,7 +38,7 @@ export default Ember.Controller.extend(FetchLiveDataMixin, {
} else if (name === 'table') {
plot = this.store.createRecord('plot', { name: 'Table 1', type: 'plot-table', width: 500, height: 200, title: 'Table 1' });
} else if (name === 'value') {
plot = this.store.createRecord('plot', { name: 'Value 1', type: 'plot-value' });
plot = this.store.createRecord('plot', { name: 'Value 1', type: 'plot-value', simulator: 2 });
} else {
// DEBUG
console.log('Add plot: ' + name);
@ -79,9 +87,10 @@ export default Ember.Controller.extend(FetchLiveDataMixin, {
if (plotType === 'plot-value') {
// set properties
this.set('plot', plot);
this.set('name', plot.get('name'));
this.set('simulator', plot.get('simulator'));
this.set('signal', plot.get('signal'));
/*this.set('name', plot.get('name'));
this.set('signal', plot.get('signal'));*/
//this.set('simulatorName', simulatorName);
this.set('isShowingPlotValueModal', true);
}
@ -112,6 +121,10 @@ export default Ember.Controller.extend(FetchLiveDataMixin, {
cancelValuePlot() {
this.set('isShowingPlotValueModal', false);
},
selectSimulator(simulator) {
this.set('simulatorName', simulator);
}
}
});

1
app/models/plot.js
View file

@ -17,7 +17,6 @@ export default Model.extend({
simulator: attr('number', { defaultValue: 1 }),
width: attr('number', { defaultValue: 100 }),
height: attr('number', { defaultValue: 100 }),
title: attr('string'),
type: attr('string'),
x: attr('number', { defaultValue: 0 }),
y: attr('number', { defaultValue: 0 }),

6
app/router.js
View file

@ -27,9 +27,7 @@ Router.map(function() {
this.route('visualization', function() {
this.route('index', { path: '/:visualizationid' });
this.route('new');
this.route('edit', { path: '/edit/:visualizationid' });
this.route('delete', { path: '/delete/:visualizationid' });
});
this.route('user', function() {
@ -53,7 +51,9 @@ Router.map(function() {
this.route('simulator');
this.route('dialog', function() {
this.route('plot', function() {});
this.route('plot', function() {
this.route('value');
});
});
});

4
app/routes/dialog/plot/value.js Normal file
View file

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

1
app/styles/app.scss
View file

@ -12,6 +12,7 @@
@import 'simulations';
@import 'projects';
@import 'simulators';
@import 'simulation-models';
@import "ember-modal-dialog/ember-modal-structure";
@import "ember-modal-dialog/ember-modal-appearance";

20
app/routes/visualization/delete.js → app/styles/simulation-models.scss
View file

@ -1,17 +1,19 @@
/**
* File: delete.js
* File: simulation-models.css
* Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
* Date: 28.06.2016
* Date: 12.10.2016
* Copyright: 2016, Institute for Automation of Complex Power Systems, EONERC
* This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
* Unauthorized copying of this file, via any medium is strictly prohibited.
**********************************************************************************/
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
/**
* Route: simulation-model/index
*/
.simulation-model-index-mapping {
margin-top: 20px;
}
export default Ember.Route.extend(AuthenticatedRouteMixin, {
model(params) {
return this.store.findRecord('visualization', params.visualizationid);
}
});
.simulation-model-index-buttons {
margin-top: 20px;
}

53
app/templates/components/plot-value.hbs
View file

@ -1 +1,54 @@
{{name}}: {{value}}
{{#if isShowingModal}}
{{#modal-dialog attachment="middle center" translucentOverlay=true}}
<h1>Value</h1>
<form class="form-plot-value" {{action 'submitModal' on='submit'}} >
<table>
<tr>
<td>
<label for="name">Name</label>
</td>
<td>
{{input id='name' placeholder='Enter plot name' value=name}}
</td>
</tr>
<tr>
<td>
<label for="simulator">Simulator</label>
</td>
<td>
<select onchange={{action "selectSimulationModel" value="target.value"}}>
{{#each plot.visualization.project.simulation.models as |simulationModel|}}
<option value={{simulationModel.name}} selected={{eq simulationModelName simulationModel.name}}>{{simulationModel.name}}</option>
{{/each}}
</select>
</td>
</tr>
<tr>
<td>
<label for="signal">Signal</label>
</td>
<td>
<select onchange={{action "selectSignal" value="target.value"}}>
{{#each simulationModel.mapping as |signal|}}
<option value={{signal}} selected={{eq signalName signal}}>{{signal}}</option>
{{/each}}
</select>
</td>
</tr>
<tr>
<td colspan="2">
<button {{action 'cancelModal'}}>Cancel</button>
<button type="submit">Save</button>
</td>
</tr>
</table>
</form>
{{#if errorMessage}}
<p><b>Error:</b> {{errorMessage}}</p>
{{/if}}
{{/modal-dialog}}
{{/if}}

47
app/templates/dialog/plot/value.hbs
View file

@ -1,44 +1,5 @@
{{#if isShowingPlotValueModal}}
{{#modal-dialog attachment="middle center" translucentOverlay=true}}
<h1>Value</h1>
<h1>Test</h1>
<form class="form-plot-value" {{action 'submitValuePlot' on='submit'}} >
<table>
<tr>
<td>
<label for="name">Name</label>
</td>
<td>
{{input id='name' placeholder='Enter plot name' value=name}}
</td>
</tr>
<tr>
<td>
<label for="simulator">Simulator</label>
</td>
<td>
{{input id='simulator' type='number' value=simulator min='1' max='255'}}
</td>
</tr>
<tr>
<td>
<label for="signal">Signal</label>
</td>
<td>
{{input id='signal' type='number' value=signal min='1'}}
</td>
</tr>
<tr>
<td colspan="2">
<button {{action 'cancelValuePlot'}}>Cancel</button>
<button type="submit">Save</button>
</td>
</tr>
</table>
</form>
{{#if errorMessage}}
<p><b>Error:</b> {{errorMessage}}</p>
{{/if}}
{{/modal-dialog}}
{{/if}}
<!-- {{#if isShowingPlotValueModal}} -->
<!-- {{/if}} -->

16
app/templates/dialog/simulation.hbs
View file

@ -24,6 +24,14 @@
</select>
</td>
</tr>
<tr>
<td>
<label for="length">Length</label>
</td>
<td>
{{input id='length' type='number' value=length min='1'}}
</td>
</tr>
<tr>
<td colspan="2">
<button {{action 'cancelNew'}}>Cancel</button>
@ -65,6 +73,14 @@
</select>
</td>
</tr>
<tr>
<td>
<label for="length">Length</label>
</td>
<td>
{{input id='length' type='number' value=length min='1'}}
</td>
</tr>
<tr>
<td colspan="2">
<button {{action 'cancelEdit'}}>Cancel</button>

39
app/templates/simulation-model/index.hbs
View file

@ -1,18 +1,29 @@
{{#link-to 'simulation.index' model.simulation.id}}Back to {{model.simulation.name}}{{/link-to}}
<h1>{{model.name}}</h1>
<p>
Running: {{model.simulation.running}}
</p>
<h3>Mapping</h3>
<p>
Simulator: {{model.simulator}}
</p>
<div class="simulation-model-index-mapping">
<table class="table-full-width">
<tr>
<th width="80px">Signal</th>
<th>Name</th>
</tr>
{{#each-in model.mapping as |signal name|}}
<tr>
<td>
{{signal}}
</td>
<td>
{{name}}
</td>
</tr>
{{/each-in}}
</table>
</div>
<p>
Data:
</p>
{{#each values as |value|}}
{{value}}
<br />
{{/each}}
<div class="simulation-model-index-buttons">
<!-- <button {{action 'cancelMapping'}}>Cancel</button> -->
<button {{action 'saveMapping'}}>Save</button>
</div>

2
app/templates/simulations.hbs
View file

@ -5,7 +5,7 @@
<tr>
<th>Name</th>
<th width="80px" class="column-center">Running</th>
<th width="140px"></th>
<th width="180px"></th>
</tr>
{{#each model as |simulation|}}
<tr>

6
app/templates/visualization/delete.hbs
View file

@ -1,6 +0,0 @@
<h1>Delete</h1>
<p>Are you sure you want to delete the visualization?</p>
<button {{action 'cancelDelete'}}>Cancel</button>
<button {{action 'confirmDelete'}}>Delete</button>

12
app/templates/visualization/edit.hbs
View file

@ -1,14 +1,14 @@
<h1>{{model.name}}</h1>
<h1>{{model.ame}}</h1>
<div class="plot-toolbox">
<h3>Toolbox</h3>
{{#draggable-item content='chart'}}
<!-- {{#draggable-item content='chart'}}
<span>Chart</span>
{{/draggable-item}}
{{/draggable-item}} -->
{{#draggable-item content='table'}}
<!-- {{#draggable-item content='table'}}
<span>Table</span>
{{/draggable-item}}
{{/draggable-item}} -->
{{#draggable-item content='value'}}
<span>Value</span>
@ -23,5 +23,3 @@
<button {{action 'cancelEdit'}}>Cancel</button>
<button {{action 'saveEdit'}}>Save</button>
</p>
{{partial "dialog/plot/value"}}

1
app/templates/visualization/new.hbs
View file

@ -1 +0,0 @@
<h1>New visualization</h1>

2
tests/unit/controllers/visualization/delete-test.js → tests/unit/controllers/dialog/plot/value-test.js
View file

@ -1,6 +1,6 @@
import { moduleFor, test } from 'ember-qunit';
moduleFor('controller:visualization/delete', 'Unit | Controller | visualization/delete', {
moduleFor('controller:dialog/plot/value', 'Unit | Controller | dialog/plot/value', {
// Specify the other units that are required for this test.
// needs: ['controller:foo']
});

2
tests/unit/routes/visualization/new-test.js → tests/unit/routes/dialog/plot/value-test.js
View file

@ -1,6 +1,6 @@
import { moduleFor, test } from 'ember-qunit';
moduleFor('route:visualization/new', 'Unit | Route | visualization/new', {
moduleFor('route:dialog/plot/value', 'Unit | Route | dialog/plot/value', {
// Specify the other units that are required for this test.
// needs: ['controller:foo']
});

11
tests/unit/routes/visualization/delete-test.js
View file

@ -1,11 +0,0 @@
import { moduleFor, test } from 'ember-qunit';
moduleFor('route:visualization/delete', 'Unit | Route | visualization/delete', {
// Specify the other units that are required for this test.
// needs: ['controller:foo']
});
test('it exists', function(assert) {
let route = this.subject();
assert.ok(route);
});