Add jQuery UI

Add resizeable, droppable and draggable mixins
Add API_HOST in environment.js

app/adapters/application.js

@@ -1,8 +1,9 @@
 import RESTAdapter from 'ember-data/adapters/rest';
 import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';
+import ENV from '../config/environment';
 
 export default RESTAdapter.extend(DataAdapterMixin, {
-  host: 'http://192.168.99.100:3000',
+  host: 'http://' + ENV.APP.API_HOST,
   namespace: 'api/v1',
   authorizer: 'authorizer:custom',
   headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }

app/authenticators/custom.js

@@ -1,8 +1,9 @@
 import Ember from 'ember';
 import Base from 'ember-simple-auth/authenticators/base';
+import ENV from '../config/environment';
 
 export default Base.extend({
-  tokenEndpoint: 'http://192.168.99.100:3000/api/v1/authenticate',
+  tokenEndpoint: 'http://' + ENV.APP.API_HOST + '/api/v1/authenticate',
 
   restore(data) {
     return new Ember.RSVP.Promise(function(resolve, reject) {

app/components/draggable-dropzone.js

@@ -3,7 +3,8 @@ import Ember from 'ember';
 var { set } = Ember;
 
 export default Ember.Component.extend({
-  classNames: [ 'draggableDropzone' ],
+  tagName: 'div',
+  classNames: [ 'draggableDropzone plots' ],
   classNameBindings: [ 'dragClass' ],
   dragClass: 'deactivated',
 

app/components/draggable-item.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import Draggable from '../mixins/draggable';
 
 var { get } = Ember;
 

app/components/plot-container.js

@@ -1,19 +1,18 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-  tagName: 'div',
-  attributeBindings: [ 'style' ],
-  classNames: [ 'plotContainer' ],
-
-  plot: null,
-  editing: false,
-
-  style: function() {
-    return 'width: ' + this.get('plot.width') + 'px; height: ' + this.get('plot.height') + 'px;';
-  }.property('plot'),
-
   isTable: function() {
     var type = this.get('plot.type');
     return type === 'table';
+  }.property('plot.type'),
+
+  isChart: function() {
+    var type = this.get('plot.type');
+    return type === 'chart';
+  }.property('plot.type'),
+
+  isValue: function() {
+    var type = this.get('plot.type');
+    return type === 'value';
   }.property('plot.type')
 });

app/components/plot-table.js

@@ -1,8 +1,20 @@
 import Ember from 'ember';
+import Resizable from '../mixins/resizable';
 
-export default Ember.Component.extend({
+export default Ember.Component.extend(Resizable, {
   tagName: 'div',
-  classNames: [ '' ],
+  attributeBindings: [ 'style' ],
+  classNames: [ 'plotContainer', 'plotTable' ],
 
-  editing: false
+  plot: null,
+  editing: false,
+
+  style: function() {
+    return 'width: ' + this.get('plot.width') + 'px; height: ' + this.get('plot.height') + 'px;';
+  }.property('plot'),
+
+  stop_resize(event, ui) {
+    this.set('plot.width', this.$().width());
+    this.set('plot.height', this.$().height());
+  }
 });

app/components/plot-value.js

@@ -1,4 +1,23 @@
 import Ember from 'ember';
+import Resizable from '../mixins/resizable';
 
-export default Ember.Component.extend({
+export default Ember.Component.extend(Resizable, {
+  tagName: 'div',
+  attributeBindings: [ 'style' ],
+  classNames: [ 'plotContainer', 'plotValue' ],
+
+  plot: null,
+  editing: false,
+
+  minWidth_resize: 50,
+  minHeight_resize: 20,
+
+  style: function() {
+    return 'width: ' + this.get('plot.width') + 'px; height: ' + this.get('plot.height') + 'px;';
+  }.property('plot'),
+
+  stop_resize(event, ui) {
+    this.set('plot.width', this.$().width());
+    this.set('plot.height', this.$().height());
+  }
 });

app/controllers/visualization/edit.js

@@ -9,7 +9,7 @@ export default Ember.Controller.extend({
         // create new chart plot
         plot = this.store.createRecord('plot', { name: 'Chart 1', signal: 'Signal 1', type: 'chart' });
       } else if (name === 'table') {
-        plot = this.store.createRecord('plot', { name: 'Table 1', signal: 'Signal 1', type: 'table', width: 500 });
+        plot = this.store.createRecord('plot', { name: 'Table 1', signal: 'Signal 1', type: 'table', width: 500, height: 200 });
       } else if (name === 'value') {
         plot = this.store.createRecord('plot', { name: 'Value 1', signal: 'Signal 1', type: 'value' });
       } else {

app/mixins/draggable.js

@@ -0,0 +1,73 @@
+import Ember from 'ember';
+
+export default Ember.Mixin.create({
+  uiDragOptions: [ 'disabled_drag', 'addClasses_drag', 'appendTo_drag', 'axis_drag',
+    'cancel_drag', 'connectToSortable_drag', 'containment_drag', 'cursor_drag',
+    'delay_drag', 'distance_drag', 'grid_drag', 'handle_drag','helper_drag',
+    'iframeFix_drag','opacity_drag','scope_drag', 'snap_drag', 'snapMode_drag', 'stack_drag' ],
+  uiDragEvents: [ 'create_drag', 'start_drag', 'drag_drag', 'stop_drag' ],
+
+  didInsertElement() {
+    this._super();
+
+    // get available options and events
+    var options = this._gatherDragOptions();
+    this._gatherDragEvents(options);
+
+    // create a new jQuery UI widget
+    var ui = Ember.$.ui['draggable'](options, this.get('element'));
+    this.set('ui', ui);
+  },
+
+  willDestroyElement() {
+    var ui = this.get('ui');
+
+    if (ui) {
+      // remove all observers for jQuery UI widget
+      var observers = this._observers;
+      for (var property in observers) {
+        this.removeObserver(property, observers[property]);
+      }
+
+      ui.destroy();
+    }
+  },
+
+  _gatherDragOptions() {
+    // parse all options and add observers for them
+    var uiDragOptions = this.get('uiDragOptions') || [];
+    var options = {};
+
+    uiDragOptions.forEach(function(key) {
+      // save the drag option without the prefix
+      options[key.split('_')[0]] = this.get(key);
+
+      // create an observer for this option
+      var observer = function() {
+        var value = this.get(key);
+        this.get('ui').option(key.split('_')[0], value);
+      };
+
+      this.addObserver(key, observer);
+
+      // save observer to remove it later on
+      this._observers = this._observers || {};
+      this._observers[key] = observer;
+    }, this);
+
+    return options;
+  },
+
+  _gatherDragEvents(options) {
+    // register callbacks for each event
+    var uiDragEvents = this.get('uiDragEvents') || [];
+    uiDragEvents.forEach(function(event) {
+      var callback = this[event];
+      if (callback) {
+        options[event.split('_')[0]] = function(event, ui) {
+          callback.call(this, event, ui);
+        };
+      }
+    }, this);
+  }
+});

app/mixins/droppable.js

@@ -0,0 +1,72 @@
+import Ember from 'ember';
+
+export default Ember.Mixin.create({
+  uiDropOptions: [ 'accept_drop', 'addClasses_drop', 'disabled_drop', 'greedy_drop',
+    'hoverClass_drop', 'scope_drop' ],
+  uiDropEvents: [ 'create_drop', 'activate_drop', 'deactivate_drop', 'over_drop',
+    'out_drop', 'drop_drop' ],
+
+  didInsertElement() {
+    this._super();
+
+    // get available options and events
+    var options = this._gatherDropOptions();
+    this._gatherDropEvents(options);
+
+    // create a new jQuery UI widget
+    var ui = Ember.$.ui['droppable'](options, this.get('element'));
+    this.set('ui', ui);
+  },
+
+  willDestroyElement() {
+    var ui = this.get('ui');
+
+    if (ui) {
+      // remove all observers for jQuery UI widget
+      var observers = this._observers;
+      for (var property in observers) {
+        this.removeObserver(property, observers[property]);
+      }
+
+      ui.destroy();
+    }
+  },
+
+  _gatherDropOptions() {
+    // parse all options and add observers for them
+    var uiDropOptions = this.get('uiDropOptions') || [];
+    var options = {};
+
+    uiDropOptions.forEach(function(key) {
+      // save the drop option without the postfix
+      options[key.split('_')[0]] = this.get(key);
+
+      // create an observer for this option
+      var observer = function() {
+        var value = this.get(key);
+        this.get('ui').option(key.split('_')[0], value);
+      };
+
+      this.addObserver(key, observer);
+
+      // save observer to remove it later on
+      this._observers = this._observers || {};
+      this._observers[key] = observer;
+    }, this);
+
+    return options;
+  },
+
+  _gatherDropEvents(options) {
+    // register callbacks for each event
+    var uiDropEvents = this.get('uiDropEvents') || [];
+    uiDropEvents.forEach(function(event) {
+      var callback = this[event];
+      if (callback) {
+        options[event.split('_')[0]] = function(event, ui) {
+          callback.call(this, event, ui);
+        };
+      }
+    }, this);
+  }
+});

app/mixins/resizable.js

@@ -0,0 +1,71 @@
+import Ember from 'ember';
+
+export default Ember.Mixin.create({
+  uiResizeOptions: [ 'disable_resize', 'alsoResize_resize', 'animate_resize',
+    'animateDuration_resize', 'animateEasing_resize', 'aspectRatio_resize',
+    'autoHide_resize', 'cancel_resize', 'containment_resize', 'delay_resize', 
+    'distance_resize', 'ghost_resize', 'grid_resize', 'handles_resize', 'helper_resize',
+    'maxHeight_resize', 'maxWidth_resize', 'minHeight_resize', 'minWidth_resize' ],
+  uiResizeEvents: [ 'create_resize', 'start_resize', 'resize_resize', 'stop_resize' ],
+
+  didInsertElement() {
+    this._super();
+
+    var options = this._gatherResizeOptions();
+
+    this._gatherResizeEvents(options);
+
+    var ui = Ember.$.ui['resizable'](options, this.get('element'));
+
+    this.set('ui', ui);
+  },
+
+  willDestroyElement() {
+    var ui = this.get('ui');
+
+    if (ui) {
+      var observers = this._observers;
+      for (var prop in observers) {
+        if (observers.hasOwnProperty(prop)) {
+          this.removeObserver(prop, observers[prop]);
+        }
+      }
+
+      ui._destroy();
+    }
+  },
+
+  _gatherResizeOptions() {
+    var uiResizeOptions = this.get('uiResizeOptions'), options = {};
+
+    uiResizeOptions.forEach(function(key) {
+      options[key.split('_')[0]] = this.get(key);
+
+      var observer = function() {
+        var value = this.get(key);
+        console.log(key + ': ' + value);
+        this.get('ui').option(key.split('_')[0], value);
+      };
+
+      this.addObserver(key, observer);
+
+      this._observers = this._observers || {};
+      this._observers[key] = observer;
+    }, this);
+
+    return options;
+  },
+
+  _gatherResizeEvents(options) {
+    var uiResizeEvents = this.get('uiResizeEvents') || [], self = this;
+    uiResizeEvents.forEach(function(event) {
+      var callback = self[event];
+
+      if (callback) {
+        options[event.split('_')[0]] = function(event, ui) {
+          callback.call(self, event, ui);
+        };
+      }
+    });
+  }
+});

app/models/plot.js

@@ -1,6 +1,6 @@
 import Model from 'ember-data/model';
 import attr from 'ember-data/attr';
-// import { belongsTo, hasMany } from 'ember-data/relationships';
+import { belongsTo } from 'ember-data/relationships';
 
 export default Model.extend({
   name: attr('string'),
@@ -8,5 +8,8 @@ export default Model.extend({
   width: attr('number', { defaultValue: 100 }),
   height: attr('number', { defaultValue: 100 }),
   title: attr('string'),
-  type: attr('string')
+  type: attr('string'),
+  row: attr('number'),
+  column: attr('number'),
+  visualization: belongsTo('Visualization', { async: true })
 });

app/models/visualization.js

@@ -5,5 +5,6 @@ import { belongsTo, hasMany } from 'ember-data/relationships';
 export default Model.extend({
   name: attr('string'),
   plots: hasMany('plot', { async: true }),
-  project: belongsTo('project', { async: true })
+  project: belongsTo('project', { async: true }),
+  rows: attr('number', { defaultValue: 1 })
 });

app/styles/app.css

@@ -43,6 +43,8 @@ footer {
   margin-top: 20px;
 
   text-align: center;
+
+  clear: both;
 }
 
 /**
@@ -111,16 +113,28 @@ footer {
 .plots {
   margin-top: 20px;
   margin-bottom: 20px;
+
+  overflow: auto;
 }
 
 .plot-toolbox {
   margin-top: 20px;
 }
 
+.plot-add-row {
+  font-size: 100px;
+  font-weight: 800;
+
+  text-align: center;
+
+  margin: 0;
+  margin-top: -25px;
+}
+
 .draggableDropzone {
   display: block;
 
-  min-height: 200px;
+  min-height: 100px;
 
   border: 3px dashed #aaa;
 
@@ -151,6 +165,12 @@ footer {
 
   margin: 10px;
   padding: 5px 10px;
+
+  float: left;
+}
+
+.plotValue {
+
 }
 
 .plotTable {

app/templates/components/plot-container.hbs

@@ -1,5 +1,9 @@
 {{#if isTable}}
   {{#plot-table plot=plot editing=editing}}{{/plot-table}}
+{{else if isChart}}
+  {{#plot-chart plot=plot editing=editing}}{{/plot-chart}}
+{{else if isValue}}
+  {{#plot-value plot=plot editing=editing}}{{/plot-value}}
 {{else}}
-  <strong>Plot</strong>
+  <strong>Unknown Plot</strong>
 {{/if}}

app/templates/components/plot-value.hbs

@@ -1 +1 @@
-{{yield}}
+Value

app/templates/visualization/edit.hbs

@@ -15,13 +15,15 @@
   {{/draggable-item}}
 </div>
 
-<div class="plots">
-  {{#draggable-dropzone dropped='addPlot'}}
-    {{#each model.plots as |plot|}}
-      {{#plot-container plot=plot editing=true}}{{/plot-container}}
-    {{/each}}
-  {{/draggable-dropzone}}
-</div>
+{{#draggable-dropzone dropped='addPlot'}}
+  {{#each model.plots as |plot|}}
+    {{#plot-container plot=plot editing=true}}{{/plot-container}}
+  {{/each}}
+{{/draggable-dropzone}}
+
+{{#draggable-dropzone dropped='addRowWithPlot'}}
+  <div class="plot-add-row">+</div>
+{{/draggable-dropzone}}
 
 <p>
   <button {{action 'cancelEdit'}}>Cancel</button>

bower.json

@@ -4,6 +4,7 @@
     "ember": "~2.5.0",
     "ember-cli-shims": "0.1.1",
     "ember-cli-test-loader": "0.2.2",
-    "ember-qunit-notifications": "0.1.0"
+    "ember-qunit-notifications": "0.1.0",
+    "jquery-ui": "1.11.4"
   }
 }

config/environment.js

@@ -14,8 +14,7 @@ module.exports = function(environment) {
     },
 
     APP: {
-      // Here you can pass flags/options to your application instance
-      // when it is created
+      API_HOST: 'localhost:3000'
     }
   };
 

package.json

@@ -28,6 +28,7 @@
     "ember-cli-htmlbars": "^1.0.3",
     "ember-cli-htmlbars-inline-precompile": "^0.3.1",
     "ember-cli-inject-live-reload": "^1.4.0",
+    "ember-cli-jquery-ui": "0.0.20",
     "ember-cli-jshint": "^1.0.0",
     "ember-cli-qunit": "^1.4.0",
     "ember-cli-release": "0.2.8",

tests/unit/mixins/draggable-test.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+import DraggableMixin from 'villasweb-frontend/mixins/draggable';
+import { module, test } from 'qunit';
+
+module('Unit | Mixin | draggable');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let DraggableObject = Ember.Object.extend(DraggableMixin);
+  let subject = DraggableObject.create();
+  assert.ok(subject);
+});

tests/unit/mixins/droppable-test.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+import DroppableMixin from 'villasweb-frontend/mixins/droppable';
+import { module, test } from 'qunit';
+
+module('Unit | Mixin | droppable');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let DroppableObject = Ember.Object.extend(DroppableMixin);
+  let subject = DroppableObject.create();
+  assert.ok(subject);
+});

tests/unit/mixins/resizable-test.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+import ResizableMixin from 'villasweb-frontend/mixins/resizable';
+import { module, test } from 'qunit';
+
+module('Unit | Mixin | resizable');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let ResizableObject = Ember.Object.extend(ResizableMixin);
+  let subject = ResizableObject.create();
+  assert.ok(subject);
+});

todo.md

@@ -1,3 +1,12 @@
 # To-Do
  - Change password
  - Don't log out on unauthorized access (admin level lower than required)
+ - Move plot attributes/styling from plot-container into actual plots
+ - Move drag-n-drop to mixins
+ - Websocket node is working in develop branch
+ - Add API host to config/environment.js
+ - Empty visualization after delete
+
+
+websocketserverip/config.json
+websocketserverip/nodes.json