Add visualization create, edit and delete

All plots will be saved in the plot model (no subclasses).

app/adapters/application.js

@@ -5,7 +5,5 @@ export default RESTAdapter.extend(DataAdapterMixin, {
   host: 'http://192.168.99.100:3000',
   namespace: 'api/v1',
   authorizer: 'authorizer:custom',
-  headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
-
-
+  headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }
 });

app/components/plot-container.js

@@ -11,7 +11,7 @@ export default Ember.Component.extend({
   }.property('plot'),
 
   isTable: function() {
-    var modelName = this.get('plot.constructor.modelName');
-    return modelName === 'plot-table';
+    var type = this.get('plot.type');
+    return type === 'table';
   }.property('plot.type')
 });

app/controllers/project/delete.js

@@ -21,12 +21,24 @@ export default Ember.Controller.extend({
 
       // delete the project and remove from user projects
       user.get('projects').removeObject(projectId);
-      user.save();
+      user.save().then(function() {
+        // destroy all visualizations
+        var visualizations = project.get('visualizations');
+        visualizations.forEach(function(visualization) {
+          // destroy all plots
+          var plots = visualization.get('plots');
+          plots.forEach(function(plot) {
+            plot.destroyRecord();
+          });
 
-      project.destroyRecord();
+          visualization.destroyRecord();
+        });
 
-      // go back to project list
-      this.transitionToRoute('/projects');
+        project.destroyRecord();
+
+        // go back to project list
+        this.transitionToRoute('/projects');
+      });
     }
   }
 });

app/controllers/project/index.js

@@ -0,0 +1,22 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  actions: {
+    newVisualization() {
+      // get the project
+      var project = this.get('model');
+      var projectId = this.get('model.id');
+
+      // create the visualization
+      var visualization = this.store.createRecord('visualization', { name: 'Visualization', project: projectId });
+
+      // the visualization must be added to the project before the project is saved, otherwise ember will set the projectId to null!
+      project.get('visualizations').pushObject(visualization);
+
+      // save the visualization and project
+      visualization.save().then(function() {
+        project.save();
+      });
+    }
+  }
+});

app/controllers/visualization/delete.js

@@ -0,0 +1,34 @@
+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 visualization = this.get('model');
+      let visualizationId = this.get('model.id');
+
+      var projectId = this.get('model.project.id');
+      var project = this.store.peekRecord('project', projectId);
+
+      // delete the visualization and remove from the project
+      project.get('visualizations').removeObject(visualizationId);
+      project.save().then(function() {
+        // destroy all plots
+        var plots = visualization.get('plots');
+        plots.forEach(function(plot) {
+          plot.destroyRecord();
+        });
+
+        visualization.destroyRecord();
+
+        this.transitionToRoute('/project/' + projectId);
+      });
+    }
+  }
+});

app/controllers/visualization/edit.js

@@ -0,0 +1,38 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  actions: {
+    addPlot(name) {
+      var plot = null;
+
+      if (name === 'chart') {
+        // 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 });
+      } else if (name === 'value') {
+        plot = this.store.createRecord('plot', { name: 'Value 1', signal: 'Signal 1', type: 'value' });
+      } else {
+        // DEBUG
+        console.log('Add plot: ' + name);
+        return;
+      }
+
+      if (plot != null) {
+        // add plot to visualization
+        this.get('model.plots').pushObject(plot);
+
+        // save new plot
+        var visualization = this.get('model');
+
+        plot.save().then(function() {
+          // save the plot in the visualization
+          visualization.get('plots').pushObject(plot);
+          visualization.save();
+        });
+      } else {
+        console.error('Unknown plot type: ' + name);
+      }
+    }
+  }
+});

app/controllers/visualization/index.js

@@ -1,31 +1,4 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
-  plots: [],
-
-  actions: {
-    addPlot(name) {
-      var plot = null;
-
-      if (name === 'chart') {
-        // create new chart plot
-        plot = this.store.createRecord('plot', { name: 'Chart 1', signal: 'Signal 1' });
-      } else if (name === 'table') {
-        plot = this.store.createRecord('plot-table', { name: 'Table 1', signal: 'Signal 1', width: 500 });
-      } else if (name === 'value') {
-        plot = this.store.createRecord('plot', { name: 'Value 1', signal: 'Signal 1' });
-      } else {
-        // DEBUG
-        console.log('Add plot: ' + name);
-        return;
-      }
-
-      if (plot != null) {
-        // add plot to visualization
-        this.plots.pushObject(plot);
-      } else {
-        console.error('Unknown plot type: ' + name);
-      }
-    }
-  }
 });

app/models/plot-table.js

@@ -1,7 +0,0 @@
-import Plot from './plot';
-// import attr from 'ember-data/attr';
-// import { belongsTo, hasMany } from 'ember-data/relationships';
-
-export default Plot.extend({
-  type: 'table'
-});

app/models/plot.js

@@ -8,6 +8,5 @@ export default Model.extend({
   width: attr('number', { defaultValue: 100 }),
   height: attr('number', { defaultValue: 100 }),
   title: attr('string'),
-
-  type: 'plot'
+  type: attr('string')
 });

app/models/visualization.js

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

app/serializers/project.js

@@ -2,6 +2,7 @@ import ApplicationSerializer from './application';
 
 export default ApplicationSerializer.extend({
   attrs: {
-    owner: { serialize: 'ids' }
+    owner: { serialize: 'ids' },
+    visualizations: { serialize: 'ids' }
   }
 });

app/serializers/visualization.js

@@ -0,0 +1,8 @@
+import ApplicationSerializer from './application';
+
+export default ApplicationSerializer.extend({
+  attrs: {
+    project: { serialize: 'ids' },
+    plots: { serialize: 'ids' }
+  }
+});

app/templates/project/index.hbs

@@ -13,7 +13,7 @@
 
   <br />
 
-  {{#link-to 'visualization.new'}}New visualization{{/link-to}}
+  <a href="" {{action 'newVisualization'}}>New visualization</a>
 </p>
 
 <br />

app/templates/visualization/delete.hbs

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

app/templates/visualization/edit.hbs

@@ -1 +1,29 @@
-<h1>Edit</h1>
+<h1>{{model.name}}</h1>
+
+<div class="plot-toolbox">
+  <h3>Toolbox</h3>
+  {{#draggable-item content='chart'}}
+    <span>Chart</span>
+  {{/draggable-item}}
+
+  {{#draggable-item content='table'}}
+    <span>Table</span>
+  {{/draggable-item}}
+
+  {{#draggable-item content='value'}}
+    <span>Value</span>
+  {{/draggable-item}}
+</div>
+
+<div class="plots">
+  {{#draggable-dropzone dropped='addPlot'}}
+    {{#each model.plots as |plot|}}
+      {{#plot-container plot=plot}}{{/plot-container}}
+    {{/each}}
+  {{/draggable-dropzone}}
+</div>
+
+<p>
+  <button {{action 'cancelEdit'}}>Cancel</button>
+  <button {{action 'saveEdit'}}>Save</button>
+</p>

app/templates/visualization/index.hbs

@@ -1,26 +1,9 @@
 <h1>{{model.name}}</h1>
 
-<div class="plot-toolbox">
-  <h3>Toolbox</h3>
-  {{#draggable-item content='chart'}}
-    <span>Chart</span>
-  {{/draggable-item}}
-
-  {{#draggable-item content='table'}}
-    <span>Table</span>
-  {{/draggable-item}}
-
-  {{#draggable-item content='value'}}
-    <span>Value</span>
-  {{/draggable-item}}
-</div>
-
 <div class="plots">
-  {{#draggable-dropzone dropped='addPlot'}}
-    {{#each plots as |plot|}}
-      {{#plot-container plot=plot}}{{/plot-container}}
-    {{/each}}
-  {{/draggable-dropzone}}
+  {{#each model.plots as |plot|}}
+    {{#plot-container plot=plot}}{{/plot-container}}
+  {{/each}}
 </div>
 
 <p>

tests/unit/controllers/project/index-test.js

@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:project/index', 'Unit | Controller | project/index', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});

tests/unit/controllers/visualization/delete-test.js

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

tests/unit/controllers/visualization/edit-test.js

@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:visualization/edit', 'Unit | Controller | visualization/edit', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});

tests/unit/models/plot-table-test.js

@@ -1,12 +0,0 @@
-import { moduleForModel, test } from 'ember-qunit';
-
-moduleForModel('plot-table', 'Unit | Model | plot table', {
-  // 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);
-});

tests/unit/serializers/visualization-test.js

@@ -0,0 +1,15 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('visualization', 'Unit | Serializer | visualization', {
+  // Specify the other units that are required for this test.
+  needs: ['serializer:visualization']
+});
+
+// Replace this with your real tests.
+test('it serializes records', function(assert) {
+  let record = this.subject();
+
+  let serializedRecord = record.serialize();
+
+  assert.ok(serializedRecord);
+});