Add image widget and file upload

File upload is in image widget edit dialog
Add ember-uploader package

app/components/file-upload.js

@@ -0,0 +1,19 @@
+/**
+ * File: file-upload.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 05.12.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 EmberUploader from 'ember-uploader';
+
+export default EmberUploader.FileField.extend({
+  files: null,
+
+  filesDidChange: function(files) {
+    this.set('files', files);
+  }
+});

app/components/widget-image.js

@@ -0,0 +1,106 @@
+/**
+ * File: widget-image.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 05.12.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';
+import Ember from 'ember';
+import ENV from '../config/environment';
+import EmberUploader from 'ember-uploader';
+
+const {
+  inject: { service },
+  RSVP
+} = Ember;
+
+export default WidgetAbstract.extend({
+  classNames: [ 'widgetImage' ],
+
+  session: service('session'),
+  sessionUser: Ember.inject.service('session-user'),
+  store: service(),
+
+  url: 'http://' + ENV.APP.API_HOST,
+  namespace: 'api/v1',
+
+  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');
+      properties.widgetData = { path: this.get('image.path') };
+
+      this.get('widget').setProperties(properties);
+
+      let self = this;
+      
+      this.get('widget').save().then(function() {
+        self.set('isShowingModal', false);
+      });
+    },
+
+    cancelModal() {
+      this.set('isShowingModal', false);
+    },
+
+    selectImage(image) {
+      // get image by path
+      var self = this;
+
+      this.get('widget.visualization').then((visualization) => {
+        visualization.get('project').then((project) => {
+          project.get('owner').then((user) => {
+            user.get('files').then((files) => {
+              files.forEach(function(file) {
+                if (file.get('name') === image) {
+                  // set image
+                  self.set('image', file);
+                }
+              });
+            });
+          });
+        });
+      });
+    },
+
+    upload() {
+      // check if any files to upload
+      let files = this.get('uploadFiles');
+
+      if (!Ember.isEmpty(files)) {
+        var uploadURL = this.get('url') + '/' + this.get('namespace') + '/upload';
+
+        const uploader = EmberUploader.Uploader.create({
+          multiple: true,
+          url: uploadURL,
+          ajaxSettings: {
+            headers: {
+              'x-access-token': this.get('session.data.authenticated.token')
+            }
+          }
+        });
+
+        var self = this;
+
+        uploader.upload(files).then(event => {
+          // reload user
+          var user = self.get('sessionUser.user');
+          self.get('store').findRecord('user', user.get('id'));
+        });
+      }
+    }
+  }
+});

app/controllers/visualization/edit.js

@@ -50,7 +50,7 @@ export default Ember.Controller.extend(FetchLiveDataMixin, {
                 properties.type = 'widget-table';
                 properties.name = "Table";
                 properties.width = 500;
-                proeprties.height = 200;
+                properties.height = 200;
                 properties.widgetData = { simulator: defaultSimulatorid };
               } else if (name === 'value') {
                 properties.type = 'widget-value';
@@ -64,6 +64,12 @@ export default Ember.Controller.extend(FetchLiveDataMixin, {
                 properties.width = 500;
                 properties.height = 400;
                 properties.widgetData = { signals: [0], simulator: defaultSimulatorid, type: 'multiple' };
+              } else if (name === 'image') {
+                properties.type = 'widget-image';
+                properties.name = 'Image';
+                properties.width = 300;
+                properties.height = 300;
+                properties.widgetData = { path: null };
               } else {
                 // DEBUG
                 console.log('Add unknown widget ' + name);

app/models/file.js

@@ -0,0 +1,18 @@
+/**
+ * File: file.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 25.01.2017
+ * 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 DS from 'ember-data';
+
+export default DS.Model.extend({
+  name: DS.attr('string'),
+  path: DS.attr('string'),
+  type: DS.attr('string'),
+  user: DS.belongsTo('user', { async: true }),
+  date: DS.attr('date')
+});

app/models/user.js

@@ -17,5 +17,6 @@ export default Model.extend({
   adminLevel: attr('number'),
   projects: hasMany('project', { async: true }),
   simulations: hasMany('simulation', { async: true }),
-  mail: attr('string')
+  mail: attr('string'),
+  files: hasMany('file', { async: true })
 });

app/templates/components/file-upload.hbs

@@ -0,0 +1 @@
+{{yield}}

app/templates/components/widget-image.hbs

@@ -0,0 +1,51 @@
+{{#if widget.widgetData.path}}
+  <img src={{concat url "/" widget.widgetData.path}} width="100%" />
+{{/if}}
+
+{{#if isShowingModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>Image</h1>
+
+    <form class="form-widget-image" {{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="image">Image</label>
+          </td>
+          <td>
+            <select onchange={{action "selectImage" value="target.value"}}>
+              {{#each widget.visualization.project.owner.files as |imageFile|}}
+                <option value={{imageFile.name}} selected={{eq imageFile.name image}}>{{imageFile.name}}</option>
+              {{/each}}
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td>
+          </td>
+          <td>
+            {{file-upload files=uploadFiles}} <button {{action 'upload'}}>Upload</button>
+          </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}}

app/templates/visualization/edit.hbs

@@ -18,6 +18,10 @@
     <span>Plot</span>
   {{/draggable-item}}
 
+  {{#draggable-item content='image'}}
+    <span>Image</span>
+  {{/draggable-item}}
+
   <p>
     <i>Hint: Double click widgets to edit or delete them.</i>
   </p>

package.json

@@ -44,6 +44,7 @@
     "ember-simple-auth": "^1.1.0",
     "ember-tether": "0.3.1",
     "ember-truth-helpers": "1.2.0",
+    "ember-uploader": "1.2.3",
     "loader.js": "^4.0.1"
   },
   "dependencies": {}

tests/integration/components/file-upload-test.js

@@ -0,0 +1,24 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('file-upload', 'Integration | Component | file upload', {
+  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`{{file-upload}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#file-upload}}
+      template block text
+    {{/file-upload}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/components/widget-image-test.js

@@ -0,0 +1,24 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('widget-image', 'Integration | Component | widget image', {
+  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-image}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#widget-image}}
+      template block text
+    {{/widget-image}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/unit/models/file-test.js

@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('file', 'Unit | Model | file', {
+  // Specify the other units that are required for this test.
+  needs: []
+});
+
+test('it exists', function(assert) {
+  let model = this.subject();
+  // let store = this.store();
+  assert.ok(!!model);
+});