Add bootstrap popover to plots

app/components/plot-abstract.js

@@ -20,6 +20,8 @@ export default Ember.Component.extend(Resizable, Draggable, {
   editing: false,
   grid: false,
 
+  simulator: 0,
+
   disabled_resize: false,
   autoHide_resize: false,
   grid_resize: [ 10, 10 ],
@@ -29,6 +31,39 @@ export default Ember.Component.extend(Resizable, Draggable, {
   grid_drag: [ 10, 10 ],
   scroll_drag: true,
 
+  _popoverDisplayed: false,
+
+  didInsertElement() {
+    this._super();
+
+    if (this.get('editing') === true) {
+      // create popover
+      var self = this;
+
+      this.$().popover({
+        html: true,
+        placement: 'auto right',
+        content: function () {
+          return self.$('.popover-content').html();
+        },
+        viewport: { selector: '.plots', padding: 10 }
+      });
+
+      // register popover events
+      this.$().on('show.bs.popover', function() {
+
+      });
+
+      this.$().on('shown.bs.popover', function() {
+        self._popoverDisplayed = true;
+      });
+
+      this.$().on('hide.bs.popover', function() {
+        self._popoverDisplayed = false;
+      });
+    }
+  },
+
   style: function() {
     return Ember.String.htmlSafe('width: ' + this.get('plot.width') + 'px; height: ' + this.get('plot.height') + 'px; left: ' + this.get('plot.x') + 'px; top: ' + this.get('plot.y') + 'px;');
   }.property('plot'),
@@ -41,11 +76,23 @@ export default Ember.Component.extend(Resizable, Draggable, {
     this.set('plot.height', height);
   },
 
+  resize_resize(event, ui) {
+    if (this._popoverDisplayed === true) {
+      this.$().popover('show');
+    }
+  },
+
   stop_drag(event, ui) {
     this.set('plot.x', ui.position.left);
     this.set('plot.y', ui.position.top);
   },
 
+  drag_drag(event, ui) {
+    if (this._popoverDisplayed === true) {
+      this.$().popover('show');
+    }
+  },
+
   _updateUI: function() {
     if (this.get('editing') === true) {
       this.set('disabled_resize', false);
@@ -64,5 +111,11 @@ export default Ember.Component.extend(Resizable, Draggable, {
       this.set('grid_resize', false);
       this.set('grid_drag', false);
     }
-  }.observes('editing', 'grid').on('init')
+  }.observes('editing', 'grid').on('init'),
+
+  actions: {
+    savePlot() {
+      this.$().popover('hide');
+    }
+  }
 });

app/components/plot-container.js

@@ -19,7 +19,12 @@ export default Ember.Component.extend({
   grid: true,
 
   style: function() {
-    return Ember.String.htmlSafe('height: ' + this._calculateHeight() + 'px;');
+    var height = this._calculateHeight();
+    if (this.get('editing') === true && height < 400) {
+      height = 400;
+    }
+
+    return Ember.String.htmlSafe('height: ' + height + 'px;');
   }.property('plots.@each.height', 'plots.@each.y'),
 
   _calculateHeight() {

app/controllers/simulation-model/index.js

@@ -15,7 +15,7 @@ export default Ember.Controller.extend({
   }.property('simulationData.values.@each'),
 
   _getData: function() {
-    if (this.get('model.simulation.running') == true) {
+    if (this.get('model.simulation.running') === true) {
       var simulator = this.get('model.simulator');
       if (simulator == null) {
         return;

app/mixins/websocket-live-stream-mixin.js

@@ -51,7 +51,7 @@ export default Ember.Mixin.create({
     }
   }.observes('runningSimulation.simulation'),
 
-  onopen(event) {
+  onopen(/*event*/) {
     Ember.debug('websocket opened');
   },
 
@@ -76,7 +76,7 @@ export default Ember.Mixin.create({
     }
   },
 
-  onerror(event) {
+  onerror(/*event*/) {
     Ember.debug('websocket error');
   },
 

app/models/plot.js

@@ -14,6 +14,7 @@ import { belongsTo } from 'ember-data/relationships';
 export default Model.extend({
   name: attr('string'),
   signal: attr('string'),
+  simulator: attr('number', { defaultValue: 1 }),
   width: attr('number', { defaultValue: 100 }),
   height: attr('number', { defaultValue: 100 }),
   title: attr('string'),

app/models/simulation-model.js

@@ -9,7 +9,7 @@
 
 import Model from 'ember-data/model';
 import attr from 'ember-data/attr';
-import { belongsTo, hasMany } from 'ember-data/relationships';
+import { belongsTo/*, hasMany*/ } from 'ember-data/relationships';
 
 export default Model.extend({
   name: attr('string'),

app/services/running-simulation.js

@@ -27,12 +27,12 @@ export default Ember.Service.extend({
         var newSimulation = null;
 
         simulations.forEach(function(simulation) {
-          if (simulation.get('running') == true) {
+          if (simulation.get('running') === true) {
             newSimulation = simulation;
           }
         });
 
-        if (newSimulation != self.get('simulation')) {
+        if (newSimulation !== self.get('simulation')) {
           self.set('simulation', newSimulation);
         }
       });

app/styles/app.css

@@ -168,6 +168,8 @@ footer {
 
   border: 0;
   border-collapse: collapse;
+
+  background-color: #f6f6f6;
 }
 
 .table-full-width th, td {
@@ -232,3 +234,21 @@ footer {
 .form-create-record button:hover {
   background: #373;
 }
+
+/**
+ *
+ */
+.popover {
+  z-index: 1010;
+
+  width: 120px;
+  height: 100px;
+}
+
+.arrow {
+  border-right-color: red !important;
+}
+
+.hidden {
+  visibility: hidden;
+}

app/styles/plots.css

@@ -42,6 +42,18 @@
 
 }
 
+.plot-edit-container {
+  width: 200px !important;
+
+  background-color: #ddd;
+
+  border: 1px dotted black;
+}
+
+.plot-edit-form {
+
+}
+
 /**
  * Component: plot-table
  */

app/styles/projects.css

@@ -25,3 +25,22 @@
 .projects-new-container {
   margin-top: 20px;
 }
+
+/**
+ * Route: project.index
+ */
+.project-index-container {
+  margin-top: 20px;
+}
+
+.project-index-row-controls {
+  float: right;
+}
+
+.project-index-row-controls a {
+  margin:left: 10px;
+}
+
+.project-index-new-visualization {
+  margin-top: 20px;
+}

app/styles/simulations.css

@@ -29,7 +29,6 @@
 /**
  * Route: simulation/index
  */
-
 .simulation-index-models-container {
   margin-top: 20px;
 }

app/templates/components/plot-value.hbs

@@ -1 +1,31 @@
 Value
+
+<div class="popover-content hidden">
+  <div class="plot-edit-container">
+    <form class="plot-edit-form" {{action 'savePlot' on='submit'}}>
+      <table>
+        <tr>
+          <td>
+            <label for="simulator">Simulator</label>
+          </td>
+          <td>
+            {{input id='simulator' type='number' value=plot.simulator min=1 max=255 width='60px'}}
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="signal">Signal</label>
+          </td>
+          <td>
+            {{input id='signal' value=plot.signal}}
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <button type="submit">Save</button>
+          </td>
+        </tr>
+      </table>
+    </form>
+  </div>
+</div>

app/templates/project/index.hbs

@@ -1,24 +1,27 @@
 <h1>{{model.name}}</h1>
 
-<br />
-
-<p>
-  <h3>Visualizations</h3>
-
-  <ul>
+<div class="project-index-container">
+  <table class="table-full-width">
+    <tr>
+      <th>Name</th>
+      <th width="100px"></th>
+    </tr>
     {{#each model.visualizations as |visualization|}}
-      <li>{{#link-to 'visualization.index' visualization.id}}{{visualization.name}}{{/link-to}}</li>
+      <tr>
+        <td>
+          {{#link-to 'visualization.index' visualization.id}}{{visualization.name}}{{/link-to}}
+        </td>
+        <td>
+          <div class="project-index-row-controls">
+            {{#link-to "visualization.edit" visualization.id}}Edit{{/link-to}}
+            {{#link-to "visualization.delete" visualization.id}}Delete{{/link-to}}
+          </div>
+        </td>
+      </tr>
     {{/each}}
-  </ul>
-
-  <br />
+  </table>
+</div>
 
+<div class="project-index-new-visualization">
   <a href="" {{action 'newVisualization'}}>New visualization</a>
-</p>
-
-<br />
-
-<p>
-  {{#link-to "project.edit" model.id}}Edit project{{/link-to}}
-  {{#link-to "project.delete" model.id}}Delete project{{/link-to}}
-</p>
+</div>

bower.json

@@ -5,6 +5,10 @@
     "ember-cli-shims": "0.1.1",
     "ember-cli-test-loader": "0.2.2",
     "ember-qunit-notifications": "0.1.0",
-    "jquery-ui": "1.11.4"
+    "jquery-ui": "1.11.4",
+    "bootstrap": "~3.3.5"
+  },
+  "resolutions": {
+    "ember": "~2.5.0"
   }
 }

ember-cli-build.js

@@ -20,5 +20,7 @@ module.exports = function(defaults) {
   // please specify an object with the list of modules as keys
   // along with the exports of each module as its value.
 
+  app.import('bower_components/bootstrap/dist/js/bootstrap.js');
+
   return app.toTree();
 };

package.json

@@ -40,5 +40,6 @@
     "ember-resolver": "^2.0.3",
     "ember-simple-auth": "^1.1.0",
     "loader.js": "^4.0.1"
-  }
+  },
+  "dependencies": {}
 }