Add todo.md

Fix project and visualization delete
Start with plot styling

app/components/plot-container.js

@@ -3,11 +3,13 @@ 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; border: 1px solid black;';
+    return 'width: ' + this.get('plot.width') + 'px; height: ' + this.get('plot.height') + 'px;';
   }.property('plot'),
 
   isTable: function() {

app/components/plot-table.js

@@ -1,5 +1,8 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-  tagName: 'table'
+  tagName: 'div',
+  classNames: [ '' ],
+
+  editing: false
 });

app/controllers/project/delete.js

@@ -20,24 +20,25 @@ export default Ember.Controller.extend({
       let projectId = project.get('id');
 
       // delete the project and remove from user projects
-      user.get('projects').removeObject(projectId);
-      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();
-          });
-
-          visualization.destroyRecord();
+      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();
+
+      // save the changes to project
+      var controller = this;
+
+      user.get('projects').removeObject(projectId);
+      user.save().then(function() {
+        controller.transitionToRoute('/projects');
       });
     }
   }

app/controllers/visualization/delete.js

@@ -16,18 +16,20 @@ export default Ember.Controller.extend({
       var projectId = this.get('model.project.id');
       var project = this.store.peekRecord('project', projectId);
 
+      // destroy all plots
+      var plots = visualization.get('plots');
+      plots.forEach(function(plot) {
+        plot.destroyRecord();
+      });
+
+      visualization.destroyRecord();
+
       // delete the visualization and remove from the project
+      var controller = this;
+
       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);
+        controller.transitionToRoute('/project/' + projectId);
       });
     }
   }

app/router.js

@@ -19,12 +19,15 @@ Router.map(function() {
   this.route('user', function() {
     this.route('edit');
   });
+
   this.route('visualization', function() {
     this.route('index', { path: '/:visualizationid' });
     this.route('new');
     this.route('edit', { path: '/edit/:visualizationid' });
     this.route('delete', { path: '/delete/:visualizationid' });
   });
+
+  this.route('404', { path: '/*path' });
 });
 
 export default Router;

app/routes/404.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});

app/styles/app.css

@@ -122,9 +122,6 @@ footer {
 
   min-height: 200px;
 
-  padding-top: 5px;
-  padding-left: 10px;
-
   border: 3px dashed #aaa;
 
   &.activated {
@@ -148,3 +145,25 @@ footer {
     background-color: #aaa;
   }
 }
+
+.plotContainer {
+  border: 1px solid lightgray;
+
+  margin: 10px;
+  padding: 5px 10px;
+}
+
+.plotTable {
+  width: 100%;
+  height: 100%;
+
+  border: 1px solid gray;
+
+  border-collapse: collapse;
+}
+
+.plotTable td, th {
+  border: 1px solid gray;
+
+  padding: 2px 5px;
+}

app/templates/404.hbs

@@ -0,0 +1 @@
+<h1>404 - Not found</h1>

app/templates/components/plot-container.hbs

@@ -1,5 +1,5 @@
 {{#if isTable}}
-  {{#plot-table plot=plot}}{{/plot-table}}
+  {{#plot-table plot=plot editing=editing}}{{/plot-table}}
 {{else}}
   <strong>Plot</strong>
 {{/if}}

app/templates/components/plot-table.hbs

@@ -1,8 +1,16 @@
-<tr>
-  <th>Name</th>
-  <th>Value</th>
-</tr>
-<tr>
-  <td>Signal X</td>
-  <td>1.234</td>
-</tr>
+{{#if editing}}
+  {{input value=plot.title placeholder='Enter title'}}
+{{else}}
+  <h4>{{plot.title}}</h4>
+{{/if}}
+
+<table class="plotTable">
+  <tr>
+    <th>Name</th>
+    <th>Value</th>
+  </tr>
+  <tr>
+    <td>Signal X</td>
+    <td>1.234</td>
+  </tr>
+</table>

app/templates/visualization/edit.hbs

@@ -18,7 +18,7 @@
 <div class="plots">
   {{#draggable-dropzone dropped='addPlot'}}
     {{#each model.plots as |plot|}}
-      {{#plot-container plot=plot}}{{/plot-container}}
+      {{#plot-container plot=plot editing=true}}{{/plot-container}}
     {{/each}}
   {{/draggable-dropzone}}
 </div>

tests/unit/routes/404-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:404', 'Unit | Route | 404', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});

todo.md

@@ -0,0 +1,8 @@
+# To-Do
+ - Logout route
+ - Change password
+ - Create/register user
+ - User management
+ - Rename preferences into account
+ - ! Don't save user password
+ - ! Fix user logged-in on invalidate account (after account was deleted)