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?
+
+Cancel
+Delete
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}}
+
+
+
+ Cancel
+ Save
+
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);
+});