From 7099651272aadbe4ff0de08929220864393bb994 Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Thu, 3 Nov 2016 09:42:16 +0100 Subject: [PATCH] Add widget-table and widget-label Remove console output in UI mixins --- app/components/widget-abstract.js | 14 +- app/components/widget-label.js | 52 +++++++ app/components/widget-table.js | 139 +++++++++++++++++- app/components/widget-value.js | 2 +- app/controllers/visualization/edit.js | 15 +- app/mixins/resizable.js | 2 +- app/mixins/sortable.js | 2 +- app/styles/widgets.scss | 8 +- app/templates/components/widget-label.hbs | 26 ++++ app/templates/components/widget-table.hbs | 57 +++++-- app/templates/visualization/edit.hbs | 8 +- .../components/widget-label-test.js | 24 +++ 12 files changed, 312 insertions(+), 37 deletions(-) create mode 100644 app/components/widget-label.js create mode 100644 app/templates/components/widget-label.hbs create mode 100644 tests/integration/components/widget-label-test.js diff --git a/app/components/widget-abstract.js b/app/components/widget-abstract.js index 2b674cc..61af405 100644 --- a/app/components/widget-abstract.js +++ b/app/components/widget-abstract.js @@ -14,15 +14,17 @@ import Draggable from '../mixins/draggable'; export default Ember.Component.extend(Resizable, Draggable, { tagName: 'div', classNames: [ 'widgetAbstract' ], + classNameBindings: [ 'widgetEditing' ], attributeBindings: [ 'style' ], widget: null, + widgetEditing: true, editing: false, grid: false, data: null, disabled_resize: false, - autoHide_resize: false, + autoHide_resize: true, grid_resize: [ 10, 10 ], disabled_drag: false, @@ -59,15 +61,19 @@ export default Ember.Component.extend(Resizable, Draggable, { }, - _updateUI: Ember.on('init', Ember.observer('editing', 'grid', function() { + _updateUI: Ember.on('init', Ember.observer('editing', 'grid', 'isShowingModal', function() { if (this.get('editing') === true) { this.set('disabled_resize', false); - this.set('autoHide_resize', false); + //this.set('autoHide_resize', false); this.set('disabled_drag', false); + + this.set('widgetEditing', true); } else { this.set('disabled_resize', true); - this.set('autoHide_resize', true); + //this.set('autoHide_resize', true); this.set('disabled_drag', true); + + this.set('widgetEditing', false); } if (this.get('grid') === true) { diff --git a/app/components/widget-label.js b/app/components/widget-label.js new file mode 100644 index 0000000..c94115c --- /dev/null +++ b/app/components/widget-label.js @@ -0,0 +1,52 @@ +/** + * File: widget-label.js + * Author: Markus Grigull + * Date: 03.11.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 WidgetAbstract from './widget-abstract'; + +export default WidgetAbstract.extend({ + classNames: [ 'widgetLabel' ], + + minWidth_resize: 50, + minHeight_resize: 20, + + doubleClick() { + if (this.get('editing') === true) { + // prepare modal + this.set('name', this.get('widget.name')); + + // show modal + this.set('isShowingModal', true); + } + }, + + actions: { + submitModal() { + // verify properties + let properties = this.getProperties('name'); + + if (properties['name'] === null || properties['name'] === "") { + this.set('errorMessage', 'Widget name is missing'); + return; + } + + // save properties + this.get('widget').setProperties(properties); + + let self = this; + + this.get('widget').save().then(function() { + self.set('isShowingModal', false); + }); + }, + + cancelModal() { + this.set('isShowingModal', false); + } + } +}); diff --git a/app/components/widget-table.js b/app/components/widget-table.js index da6223b..7640406 100644 --- a/app/components/widget-table.js +++ b/app/components/widget-table.js @@ -15,10 +15,143 @@ export default WidgetAbstract.extend({ minWidth_resize: 200, minHeight_resize: 60, - _updateDataObserver: Ember.on('init', Ember.observer('widget.simulator', 'widget.signal', function() { - let query = 'data.' + this.get('widget.simulator') + '.sequence'; + signals: [], + + _updateDataObserver: Ember.on('init', Ember.observer('widget.widgetData.simulator', function() { + // get query for observer + let simulatorId = this.get('widget.widgetData.simulator'); + let query = 'data.' + simulatorId + '.sequence'; + this.addObserver(query, function() { + // get signal names to fill data in + let signals = this.get('signals'); + if (!signals) { + // wait till names are loaded + return; + } + // get values from array + let values = this.get('data.' + simulatorId + '.values'); + for (let i = 0; i < values.length; i++) { + if (!signals[i]) { + break; + } + + Ember.set(signals[i], 'value', values[i]); + } }); - })) + + // get signal names + let self = this; + + this.get('widget.visualization').then((visualization) => { + visualization.get('project').then((project) => { + project.get('simulation').then((simulation) => { + simulation.get('models').then((simulationModels) => { + // get simulation model by simulatorId + simulationModels.forEach((simulationModel) => { + simulationModel.get('simulator').then((simulator) => { + if (simulator.get('simulatorid') === simulatorId) { + // set signal names + let signals = []; + + simulationModel.get('mapping').forEach((signalName) => { + signals.push({ name: signalName, value: null }); + }); + + self.set('signals', signals); + } + }); + }); + }); + }); + }); + }); + })), + + doubleClick() { + if (this.get('editing') === true) { + // prepare modal + this.set('name', this.get('widget.name')); + + // get simlator name from id + let self = this; + let simulatorid = this.get('widget.widgetData.simulator'); + + this.get('widget.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((simulationModel) => { + simulationModel.get('simulator').then((simulator) => { + if (simulator.get('simulatorid') === simulatorid) { + // set simulation model + self.set('simulationModel', simulationModel); + self.set('simulationModelName', simulationModel.get('name')); + } + }); + }); + }); + }); + }); + }); + + // show modal + this.set('isShowingModal', true); + } + }, + + actions: { + submitModal() { + // verify properties + let properties = this.getProperties('name'); + + if (properties['name'] === null || properties['name'] === "") { + this.set('errorMessage', 'Widget name is missing'); + return; + } + + // set simulator by simulation model name + let simulationModelName = this.get('simulationModelName'); + let self = this; + + this.get('widget.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 + let widgetData = {}; + widgetData.simulator = simulator.get('simulatorid'); + + // save properties + properties['widgetData'] = widgetData; + + self.get('widget').setProperties(properties); + + self.get('widget').save().then(function() { + self.set('isShowingModal', false); + }); + }); + } + }); + }); + }); + }); + }); + }, + + cancelModal() { + this.set('isShowingModal', false); + }, + + selectSimulationModel(simulationModelName) { + // save simulation model + this.set('simulationModelName', simulationModelName); + } + } }); diff --git a/app/components/widget-value.js b/app/components/widget-value.js index 367b467..1381705 100644 --- a/app/components/widget-value.js +++ b/app/components/widget-value.js @@ -61,7 +61,7 @@ export default WidgetAbstract.extend({ }); }); - // shot modal + // show modal this.set('isShowingModal', true); } }, diff --git a/app/controllers/visualization/edit.js b/app/controllers/visualization/edit.js index 621d816..ee269df 100644 --- a/app/controllers/visualization/edit.js +++ b/app/controllers/visualization/edit.js @@ -21,21 +21,14 @@ export default Ember.Controller.extend(FetchLiveDataMixin, { simulatorName: null, signal: null, - _updateSimulators: Ember.observer('model', 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')); - } - }), - actions: { addWidget(name) { - var widget = null; + let widget = null; - if (name === 'chart') { - widget = this.store.createRecord('widget', { name: 'Chart 1', type: 'widget-chart' }); + if (name === 'label') { + widget = this.store.createRecord('widget', { name: 'Label', type: 'widget-label', width: 100, height: 20 }); } else if (name === 'table') { - widget = this.store.createRecord('widget', { name: 'Table 1', type: 'widget-table', width: 500, height: 200 }); + widget = this.store.createRecord('widget', { name: 'Table 1', type: 'widget-table', width: 500, height: 200, widgetData: { simulator: 2 } }); } else if (name === 'value') { widget = this.store.createRecord('widget', { name: 'Value 1', type: 'widget-value', width: 250, height: 20, widgetData: { signal: 0, simulator: 2 } }); } else { diff --git a/app/mixins/resizable.js b/app/mixins/resizable.js index 2c67704..28a1073 100644 --- a/app/mixins/resizable.js +++ b/app/mixins/resizable.js @@ -57,7 +57,7 @@ export default Ember.Mixin.create({ // create an observer for this option var observer = function() { var value = this.get(key); - console.log(key + ': ' + value); + //console.log(key + ': ' + value); this.get('ui').option(key.split('_')[0], value); }; diff --git a/app/mixins/sortable.js b/app/mixins/sortable.js index f7633a1..737367f 100644 --- a/app/mixins/sortable.js +++ b/app/mixins/sortable.js @@ -60,7 +60,7 @@ export default Ember.Mixin.create({ // create an observer for this option var observer = function() { var value = this.get(key); - console.log(key + ': ' + value); + //console.log(key + ': ' + value); this.get('ui').option(key.split('_')[0], value); }; diff --git a/app/styles/widgets.scss b/app/styles/widgets.scss index 77f96f7..39e0eb8 100644 --- a/app/styles/widgets.scss +++ b/app/styles/widgets.scss @@ -27,12 +27,14 @@ * Component: widget-abstract */ .widgetAbstract { + position: absolute; +} + +.widget-editing { border: 1px solid lightgray; - margin: 10px; padding: 5px 10px; - - position: absolute; + margin: 10px; } /** diff --git a/app/templates/components/widget-label.hbs b/app/templates/components/widget-label.hbs new file mode 100644 index 0000000..fa0b636 --- /dev/null +++ b/app/templates/components/widget-label.hbs @@ -0,0 +1,26 @@ +

{{widget.name}}

+ +{{#if isShowingModal}} + {{#modal-dialog attachment="middle center" translucentOverlay=true}} +

Label

+ +
+ + + + + + + + +
+ + + {{input id='name' placeholder='Enter widget name' value=name}} +
+ + +
+
+ {{/modal-dialog}} +{{/if}} diff --git a/app/templates/components/widget-table.hbs b/app/templates/components/widget-table.hbs index bc832ba..082c40a 100644 --- a/app/templates/components/widget-table.hbs +++ b/app/templates/components/widget-table.hbs @@ -1,16 +1,55 @@ -{{#if editing}} - {{input value=widget.title placeholder='Enter title'}} -{{else}} -

{{widget.title}}

-{{/if}} +

{{widget.name}}

- - - - + {{#each signals as |signal|}} + + + + + {{/each}}
Name Value
Signal X1.234
+ {{signal.name}} + + {{signal.value}} +
+ +{{#if isShowingModal}} + {{#modal-dialog attachment="middle center" translucentOverlay=true}} +

Table

+ +
+ + + + + + + + + + + + +
+ + + {{input id='name' placeholder='Enter widget name' value=name}} +
+ + + +
+ + +
+
+ {{/modal-dialog}} +{{/if}} diff --git a/app/templates/visualization/edit.hbs b/app/templates/visualization/edit.hbs index e2d26f2..ebc1358 100644 --- a/app/templates/visualization/edit.hbs +++ b/app/templates/visualization/edit.hbs @@ -2,10 +2,6 @@

Toolbox

- - {{#draggable-item content='table'}} Table {{/draggable-item}} @@ -13,6 +9,10 @@ {{#draggable-item content='value'}} Value {{/draggable-item}} + + {{#draggable-item content='label'}} + Label + {{/draggable-item}}
{{#draggable-dropzone dropped='addWidget'}} diff --git a/tests/integration/components/widget-label-test.js b/tests/integration/components/widget-label-test.js new file mode 100644 index 0000000..7312395 --- /dev/null +++ b/tests/integration/components/widget-label-test.js @@ -0,0 +1,24 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('widget-label', 'Integration | Component | widget label', { + integration: true +}); + +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`{{widget-label}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#widget-label}} + template block text + {{/widget-label}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +});