Add widget-table and widget-label

Remove console output in UI mixins

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) {

app/components/widget-label.js

@@ -0,0 +1,52 @@
+/**
+ * File: widget-label.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * 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);
+    }
+  }
+});

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

app/components/widget-value.js

@@ -61,7 +61,7 @@ export default WidgetAbstract.extend({
         });
       });
 
-      // shot modal
+      // show modal
       this.set('isShowingModal', true);
     }
   },

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 {

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

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

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;
 }
 
 /**

app/templates/components/widget-label.hbs

@@ -0,0 +1,26 @@
+<h4>{{widget.name}}</h4>
+
+{{#if isShowingModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>Label</h1>
+
+    <form class="form-widget-label" {{action 'submitModal' on='submit'}} >
+      <table>
+        <tr>
+          <td>
+            <label for="name">Name</label>
+          </td>
+          <td>
+            {{input id='name' placeholder='Enter widget name' value=name}}
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <button {{action 'cancelModal'}}>Cancel</button>
+            <button type="submit">Save</button>
+          </td>
+        </tr>
+      </table>
+    </form>
+  {{/modal-dialog}}
+{{/if}}

app/templates/components/widget-table.hbs

@@ -1,16 +1,55 @@
-{{#if editing}}
-  {{input value=widget.title placeholder='Enter title'}}
-{{else}}
-  <h4>{{widget.title}}</h4>
-{{/if}}
+<h4>{{widget.name}}</h4>
 
 <table class="widgetTable">
   <tr>
     <th>Name</th>
     <th>Value</th>
   </tr>
-  <tr>
-    <td>Signal X</td>
-    <td>1.234</td>
-  </tr>
+  {{#each signals as |signal|}}
+    <tr>
+      <td>
+        {{signal.name}}
+      </td>
+      <td>
+        {{signal.value}}
+      </td>
+    </tr>
+  {{/each}}
 </table>
+
+{{#if isShowingModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>Table</h1>
+
+    <form class="form-widget-table" {{action 'submitModal' on='submit'}} >
+      <table>
+        <tr>
+          <td>
+            <label for="name">Name</label>
+          </td>
+          <td>
+            {{input id='name' placeholder='Enter widget name' value=name}}
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="simulator">Simulator</label>
+          </td>
+          <td>
+            <select onchange={{action "selectSimulationModel" value="target.value"}} >
+              {{#each widget.visualization.project.simulation.models as |simulationModel|}}
+                <option value={{simulationModel.name}} selected={{eq simulationModelName simulationModel.name}}>{{simulationModel.name}}</option>
+              {{/each}}
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <button {{action 'cancelModal'}}>Cancel</button>
+            <button type="submit">Save</button>
+          </td>
+        </tr>
+      </table>
+    </form>
+  {{/modal-dialog}}
+{{/if}}

app/templates/visualization/edit.hbs

@@ -2,10 +2,6 @@
 
 <div class="widget-toolbox">
   <h3>Toolbox</h3>
-  <!-- {{#draggable-item content='chart'}}
-    <span>Chart</span>
-  {{/draggable-item}} -->
-
   {{#draggable-item content='table'}}
     <span>Table</span>
   {{/draggable-item}}
@@ -13,6 +9,10 @@
   {{#draggable-item content='value'}}
     <span>Value</span>
   {{/draggable-item}}
+
+  {{#draggable-item content='label'}}
+    <span>Label</span>
+  {{/draggable-item}}
 </div>
 
 {{#draggable-dropzone dropped='addWidget'}}

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