From 480c90530d9243d484cab9b86aaa8d14fdaaf336 Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Tue, 28 Jun 2016 22:05:54 +0200 Subject: [PATCH] Add visualization create, edit and delete All plots will be saved in the plot model (no subclasses). --- app/adapters/application.js | 4 +- app/components/plot-container.js | 4 +- app/controllers/project/delete.js | 20 ++++++++-- app/controllers/project/index.js | 22 +++++++++++ app/controllers/visualization/delete.js | 34 +++++++++++++++++ app/controllers/visualization/edit.js | 38 +++++++++++++++++++ app/controllers/visualization/index.js | 27 ------------- app/models/plot-table.js | 7 ---- app/models/plot.js | 3 +- app/models/visualization.js | 5 ++- app/serializers/project.js | 3 +- app/serializers/visualization.js | 8 ++++ app/templates/project/index.hbs | 2 +- app/templates/visualization/delete.hbs | 5 +++ app/templates/visualization/edit.hbs | 30 ++++++++++++++- app/templates/visualization/index.hbs | 23 ++--------- tests/unit/controllers/project/index-test.js | 12 ++++++ .../controllers/visualization/delete-test.js | 12 ++++++ .../controllers/visualization/edit-test.js | 12 ++++++ tests/unit/models/plot-table-test.js | 12 ------ tests/unit/serializers/visualization-test.js | 15 ++++++++ 21 files changed, 216 insertions(+), 82 deletions(-) create mode 100644 app/controllers/project/index.js create mode 100644 app/controllers/visualization/delete.js create mode 100644 app/controllers/visualization/edit.js delete mode 100644 app/models/plot-table.js create mode 100644 app/serializers/visualization.js create mode 100644 tests/unit/controllers/project/index-test.js create mode 100644 tests/unit/controllers/visualization/delete-test.js create mode 100644 tests/unit/controllers/visualization/edit-test.js delete mode 100644 tests/unit/models/plot-table-test.js create mode 100644 tests/unit/serializers/visualization-test.js diff --git a/app/adapters/application.js b/app/adapters/application.js index b24b25b..8eb0625 100644 --- a/app/adapters/application.js +++ b/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' } }); diff --git a/app/components/plot-container.js b/app/components/plot-container.js index 125d433..b4b402b 100644 --- a/app/components/plot-container.js +++ b/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') }); diff --git a/app/controllers/project/delete.js b/app/controllers/project/delete.js index 498cd53..6435bed 100644 --- a/app/controllers/project/delete.js +++ b/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'); + }); } } }); diff --git a/app/controllers/project/index.js b/app/controllers/project/index.js new file mode 100644 index 0000000..eb33367 --- /dev/null +++ b/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(); + }); + } + } +}); diff --git a/app/controllers/visualization/delete.js b/app/controllers/visualization/delete.js new file mode 100644 index 0000000..6ceee2b --- /dev/null +++ b/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); + }); + } + } +}); diff --git a/app/controllers/visualization/edit.js b/app/controllers/visualization/edit.js new file mode 100644 index 0000000..9dd113f --- /dev/null +++ b/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); + } + } + } +}); diff --git a/app/controllers/visualization/index.js b/app/controllers/visualization/index.js index a349f1c..55ff9aa 100644 --- a/app/controllers/visualization/index.js +++ b/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); - } - } - } }); diff --git a/app/models/plot-table.js b/app/models/plot-table.js deleted file mode 100644 index 8832e27..0000000 --- a/app/models/plot-table.js +++ /dev/null @@ -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' -}); diff --git a/app/models/plot.js b/app/models/plot.js index 82cf15c..ec1bb8f 100644 --- a/app/models/plot.js +++ b/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') }); diff --git a/app/models/visualization.js b/app/models/visualization.js index 709e47c..3779d59 100644 --- a/app/models/visualization.js +++ b/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 }) }); diff --git a/app/serializers/project.js b/app/serializers/project.js index cf2bb44..afe8e13 100644 --- a/app/serializers/project.js +++ b/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' } } }); diff --git a/app/serializers/visualization.js b/app/serializers/visualization.js new file mode 100644 index 0000000..eade34d --- /dev/null +++ b/app/serializers/visualization.js @@ -0,0 +1,8 @@ +import ApplicationSerializer from './application'; + +export default ApplicationSerializer.extend({ + attrs: { + project: { serialize: 'ids' }, + plots: { serialize: 'ids' } + } +}); diff --git a/app/templates/project/index.hbs b/app/templates/project/index.hbs index 2ecd482..d35cd7f 100644 --- a/app/templates/project/index.hbs +++ b/app/templates/project/index.hbs @@ -13,7 +13,7 @@
- {{#link-to 'visualization.new'}}New visualization{{/link-to}} + New visualization


diff --git a/app/templates/visualization/delete.hbs b/app/templates/visualization/delete.hbs index 49e85ea..0be5279 100644 --- a/app/templates/visualization/delete.hbs +++ b/app/templates/visualization/delete.hbs @@ -1 +1,6 @@

Delete

+ +

Are you sure you want to delete the visualization?

+ + + diff --git a/app/templates/visualization/edit.hbs b/app/templates/visualization/edit.hbs index a835e09..2a10125 100644 --- a/app/templates/visualization/edit.hbs +++ b/app/templates/visualization/edit.hbs @@ -1 +1,29 @@ -

Edit

+

{{model.name}}

+ +
+

Toolbox

+ {{#draggable-item content='chart'}} + Chart + {{/draggable-item}} + + {{#draggable-item content='table'}} + Table + {{/draggable-item}} + + {{#draggable-item content='value'}} + Value + {{/draggable-item}} +
+ +
+ {{#draggable-dropzone dropped='addPlot'}} + {{#each model.plots as |plot|}} + {{#plot-container plot=plot}}{{/plot-container}} + {{/each}} + {{/draggable-dropzone}} +
+ +

+ + +

diff --git a/app/templates/visualization/index.hbs b/app/templates/visualization/index.hbs index b11c764..b41cca6 100644 --- a/app/templates/visualization/index.hbs +++ b/app/templates/visualization/index.hbs @@ -1,26 +1,9 @@

{{model.name}}

-
-

Toolbox

- {{#draggable-item content='chart'}} - Chart - {{/draggable-item}} - - {{#draggable-item content='table'}} - Table - {{/draggable-item}} - - {{#draggable-item content='value'}} - Value - {{/draggable-item}} -
-
- {{#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}}

diff --git a/tests/unit/controllers/project/index-test.js b/tests/unit/controllers/project/index-test.js new file mode 100644 index 0000000..b72dc07 --- /dev/null +++ b/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); +}); diff --git a/tests/unit/controllers/visualization/delete-test.js b/tests/unit/controllers/visualization/delete-test.js new file mode 100644 index 0000000..dc98464 --- /dev/null +++ b/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); +}); diff --git a/tests/unit/controllers/visualization/edit-test.js b/tests/unit/controllers/visualization/edit-test.js new file mode 100644 index 0000000..e0a5451 --- /dev/null +++ b/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); +}); diff --git a/tests/unit/models/plot-table-test.js b/tests/unit/models/plot-table-test.js deleted file mode 100644 index d1406f5..0000000 --- a/tests/unit/models/plot-table-test.js +++ /dev/null @@ -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); -}); diff --git a/tests/unit/serializers/visualization-test.js b/tests/unit/serializers/visualization-test.js new file mode 100644 index 0000000..f31eeec --- /dev/null +++ b/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); +});