Add plot value dialog

app/components/plot-abstract.js

@@ -21,8 +21,6 @@ export default Ember.Component.extend(Resizable, Draggable, {
   grid: false,
   data: null,
 
-  simulator: 0,
-
   disabled_resize: false,
   autoHide_resize: false,
   grid_resize: [ 10, 10 ],
@@ -32,43 +30,14 @@ 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'),
 
+  name: function() {
+    return this.get('plot.name');
+  }.property('plot'),
+
   stop_resize(event, ui) {
     var width = ui.size.width;
     var height = ui.size.height;
@@ -77,10 +46,8 @@ export default Ember.Component.extend(Resizable, Draggable, {
     this.set('plot.height', height);
   },
 
-  resize_resize(event, ui) {
-    if (this._popoverDisplayed === true) {
-      this.$().popover('show');
-    }
+  resize_resize(/* event, ui */) {
+
   },
 
   stop_drag(event, ui) {
@@ -88,10 +55,8 @@ export default Ember.Component.extend(Resizable, Draggable, {
     this.set('plot.y', ui.position.top);
   },
 
-  drag_drag(event, ui) {
-    if (this._popoverDisplayed === true) {
-      this.$().popover('show');
-    }
+  drag_drag(/* event, ui */) {
+
   },
 
   _updateUI: function() {
@@ -114,9 +79,9 @@ export default Ember.Component.extend(Resizable, Draggable, {
     }
   }.observes('editing', 'grid').on('init'),
 
-  actions: {
-    savePlot() {
-      this.$().popover('hide');
+  doubleClick() {
+    if (this.get('editing')) {
+      this.sendAction('showPlotDialog', this.get('plot'));
     }
   }
 });

app/components/plot-container.js

@@ -47,5 +47,11 @@ export default Ember.Component.extend({
     maxHeight += 40;
 
     return maxHeight;
+  },
+
+  actions: {
+    showPlotDialog(plot) {
+      this.sendAction('showPlotDialog', plot);
+    }
   }
 });

app/components/plot-value.js

@@ -15,19 +15,16 @@ export default PlotAbstract.extend({
   minWidth_resize: 50,
   minHeight_resize: 20,
 
-  simulator: 2,
-  signal: 1,
-
   value: function() {
     // get all values for the choosen simulator
-    let values = this.get('data.' + this.get('simulator') + '.values');
+    let values = this.get('data.' + this.get('plot.simulator') + '.values');
     if (values) {
-      return values[this.get('signal')];
+      return values[this.get('plot.signal')];
     }
 
     // values is null, try to reload later
     Ember.run.later(this, function() {
-      this.notifyPropertyChange('data.' + this.get('simulator') + '.values');
+      this.notifyPropertyChange('data.' + this.get('plot.simulator') + '.values');
     }, 1000);
-  }.property('data.2.values')
+  }.property('data.2.values', 'plot.simulator', 'plot.signal')
 });

app/controllers/visualization/edit.js

@@ -11,17 +11,26 @@ import Ember from 'ember';
 import FetchLiveDataMixin from '../../mixins/fetch-live-data';
 
 export default Ember.Controller.extend(FetchLiveDataMixin, {
+  isShowingPlotValueModal: false,
+
+  errorMessage: null,
+
+  plot: null,
+  name: null,
+  simulator: null,
+  signal: null,
+
   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: 'plot-chart' });
+        plot = this.store.createRecord('plot', { name: 'Chart 1', type: 'plot-chart' });
       } else if (name === 'table') {
-        plot = this.store.createRecord('plot', { name: 'Table 1', signal: 'Signal 1', type: 'plot-table', width: 500, height: 200, title: 'Table 1' });
+        plot = this.store.createRecord('plot', { name: 'Table 1', type: 'plot-table', width: 500, height: 200, title: 'Table 1' });
       } else if (name === 'value') {
-        plot = this.store.createRecord('plot', { name: 'Value 1', signal: 'Signal 1', type: 'plot-value' });
+        plot = this.store.createRecord('plot', { name: 'Value 1', type: 'plot-value' });
       } else {
         // DEBUG
         console.log('Add plot: ' + name);
@@ -62,6 +71,47 @@ export default Ember.Controller.extend(FetchLiveDataMixin, {
 
       let id = this.get('model.id');
       this.transitionToRoute('/visualization/' + id);
+    },
+
+    showPlotDialog(plot) {
+      // show dialog by plot type
+      let plotType = plot.get('type');
+      if (plotType === 'plot-value') {
+        // set properties
+        this.set('plot', plot);
+        this.set('name', plot.get('name'));
+        this.set('simulator', plot.get('simulator'));
+        this.set('signal', plot.get('signal'));
+
+        this.set('isShowingPlotValueModal', true);
+      }
+    },
+
+    submitValuePlot() {
+      // verify properties
+      let properties = this.getProperties('name', 'simulator', 'signal');
+      if (properties['name'] === null || properties['name'] === "") {
+        this.set('errorMessage', 'Plot name is missing');
+        return;
+      }
+
+      properties['simulator'] = Number(properties['simulator']);
+      properties['signal'] = Number(properties['signal']);
+
+      // save properties
+      this.get('plot').setProperties(properties);
+
+      let self = this;
+
+      this.get('plot').save().then(function() {
+        self.set('isShowingPlotValueModal', false);
+      }, function() {
+        Ember.debug('Error saving value plot');
+      });
+    },
+
+    cancelValuePlot() {
+      this.set('isShowingPlotValueModal', false);
     }
   }
 });

app/models/plot.js

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

app/router.js

@@ -51,6 +51,10 @@ Router.map(function() {
 
   this.route('simulators');
   this.route('simulator');
+
+  this.route('dialog', function() {
+    this.route('plot', function() {});
+  });
 });
 
 export default Router;

app/templates/components/plot-container.hbs

@@ -1,3 +1,3 @@
 {{#each plots as |plot|}}
-  {{component plot.type plot=plot editing=editing grid=grid data=data}}
+  {{component plot.type plot=plot editing=editing grid=grid data=data showPlotDialog=showPlotDialog}}
 {{/each}}

app/templates/components/plot-value.hbs

@@ -1 +1 @@
-Value: {{value}}
+{{name}}: {{value}}

app/templates/dialog/plot/value.hbs

@@ -0,0 +1,44 @@
+{{#if isShowingPlotValueModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>Value</h1>
+
+    <form class="form-plot-value" {{action 'submitValuePlot' on='submit'}} >
+      <table>
+        <tr>
+          <td>
+            <label for="name">Name</label>
+          </td>
+          <td>
+            {{input id='name' placeholder='Enter plot name' value=name}}
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="simulator">Simulator</label>
+          </td>
+          <td>
+            {{input id='simulator' type='number' value=simulator min='1' max='255'}}
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="signal">Signal</label>
+          </td>
+          <td>
+            {{input id='signal' type='number' value=signal min='1'}}
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <button {{action 'cancelValuePlot'}}>Cancel</button>
+            <button type="submit">Save</button>
+          </td>
+        </tr>
+      </table>
+    </form>
+
+    {{#if errorMessage}}
+      <p><b>Error:</b> {{errorMessage}}</p>
+    {{/if}}
+  {{/modal-dialog}}
+{{/if}}

app/templates/dialog/project.hbs

@@ -0,0 +1,68 @@
+{{#if isShowingNewModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>New visualization</h1>
+
+    <form class="form-create-record" {{action 'submitNew' on='submit'}} >
+      <table>
+        <tr>
+          <td>
+            <label for="name">Name</label>
+          </td>
+          <td>
+            {{input id='name' placeholder='Enter visualization name' value=name}}
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <button {{action 'cancelNew'}}>Cancel</button>
+            <button type="submit">Create</button>
+          </td>
+        </tr>
+      </table>
+    </form>
+
+    {{#if errorMessage}}
+      <p><strong>Error:</strong> {{errorMessage}}</p>
+    {{/if}}
+  {{/modal-dialog}}
+{{/if}}
+
+{{#if isShowingEditModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>Edit visualization</h1>
+
+    <form class="form-edit-record" {{action 'submitEdit' on='submit'}} >
+      <table>
+        <tr>
+          <td>
+            <label for="name">Name</label>
+          </td>
+          <td>
+            {{input id='name' placeholder='Enter visualization name' value=name}}
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <button {{action 'cancelEdit'}}>Cancel</button>
+            <button type="submit">Save</button>
+          </td>
+        </tr>
+      </table>
+    </form>
+
+    {{#if errorMessage}}
+      <p><strong>Error:</strong> {{errorMessage}}</p>
+    {{/if}}
+  {{/modal-dialog}}
+{{/if}}
+
+{{#if isShowingDeleteModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>Delete visualization</h1>
+
+    <p>Are you sure you want to delete the visualization <b><i>{{visualization.name}}</i></b>?</p>
+
+    <button {{action 'cancelDelete'}}>Cancel</button>
+    <button {{action 'confirmDelete'}}>Delete</button>
+  {{/modal-dialog}}
+{{/if}}

app/templates/dialog/projects.hbs

@@ -0,0 +1,92 @@
+{{#if isShowingNewModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>New project</h1>
+
+    <form class="form-create-record" {{action 'submitNew' on='submit'}} >
+      <table>
+        <tr>
+          <td>
+            <label for="name">Name</label>
+          </td>
+          <td>
+            {{input id='name' placeholder='Enter project name' value=name}}
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="simulation">Simulation</label>
+          </td>
+          <td>
+            <select onchange={{action "selectSimulation" value="target.value"}}>
+              {{#each model.simulations as |simulation|}}
+                <option value={{simulation.name}}>{{simulation.name}}</option>
+              {{/each}}
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <button {{action 'cancelNew'}}>Cancel</button>
+            <button type="submit">Create</button>
+          </td>
+        </tr>
+      </table>
+    </form>
+
+    {{#if errorMessage}}
+      <p><strong>Error:</strong> {{errorMessage}}</p>
+    {{/if}}
+  {{/modal-dialog}}
+{{/if}}
+
+{{#if isShowingEditModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>Edit project</h1>
+
+    <form class="form-edit-record" {{action 'submitEdit' on='submit'}} >
+      <table>
+        <tr>
+          <td>
+            <label for="name">Name</label>
+          </td>
+          <td>
+            {{input id='name' placeholder='Enter project name' value=name}}
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="simulation">Simulation</label>
+          </td>
+          <td>
+            <select onchange={{action "selectSimulation" value="target.value"}}>
+              {{#each model.simulations as |simulation|}}
+                <option value={{simulation.name}} selected={{eq simulation.name projectSimulation.name}}>{{simulation.name}}</option>
+              {{/each}}
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <button {{action 'cancelEdit'}}>Cancel</button>
+            <button type="submit">Save</button>
+          </td>
+        </tr>
+      </table>
+    </form>
+
+    {{#if errorMessage}}
+      <p><strong>Error:</strong> {{errorMessage}}</p>
+    {{/if}}
+  {{/modal-dialog}}
+{{/if}}
+
+{{#if isShowingDeleteModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>Delete project</h1>
+
+    <p>Are you sure you want to delete the project <b><i>{{project.name}}</i></b>?</p>
+
+    <button {{action 'cancelDelete'}}>Cancel</button>
+    <button {{action 'confirmDelete'}}>Delete</button>
+  {{/modal-dialog}}
+{{/if}}

app/templates/dialog/simulation.hbs

@@ -0,0 +1,92 @@
+{{#if isShowingNewModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>New model</h1>
+
+    <form class="form-create-record" {{action 'submitNew' on='submit'}}>
+      <table>
+        <tr>
+          <td>
+            <label for="name">Name</label>
+          </td>
+          <td>
+            {{input id='name' placeholder='Enter model name' value=name}}
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="simulator">Simulator</label>
+          </td>
+          <td>
+            <select onchange={{action "selectSimulator" value="target.value"}}>
+              {{#each model.simulators as |simulator|}}
+                <option value={{simulator.name}}>{{simulator.name}}</option>
+              {{/each}}
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <button {{action 'cancelNew'}}>Cancel</button>
+            <button type="submit">Create</button>
+          </td>
+        </tr>
+      </table>
+    </form>
+
+    {{#if errorMessage}}
+      <p><strong>Error:</strong> {{errorMessage}}</p>
+    {{/if}}
+  {{/modal-dialog}}
+{{/if}}
+
+{{#if isShowingEditModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>Edit model</h1>
+
+    <form class="form-edit-record" {{action 'submitEdit' on='submit'}}>
+      <table>
+        <tr>
+          <td>
+            <label for="name">Name</label>
+          </td>
+          <td>
+            {{input id='name' placeholder='Enter model name' value=name}}
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="simulator">Simulator</label>
+          </td>
+          <td>
+            <select onchange={{action "selectSimulator" value="target.value"}}>
+              {{#each model.simulators as |simulator|}}
+                <option value={{simulator.name}} selected={{eq simulatorName simulator.name}}>{{simulator.name}}</option>
+              {{/each}}
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <button {{action 'cancelEdit'}}>Cancel</button>
+            <button type="submit">Save</button>
+          </td>
+        </tr>
+      </table>
+    </form>
+
+    {{#if errorMessage}}
+      <p><strong>Error:</strong> {{errorMessage}}</p>
+    {{/if}}
+  {{/modal-dialog}}
+{{/if}}
+
+{{#if isShowingDeleteModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>Delete simulation-model</h1>
+
+    <p>Are you sure you want to delete the simulation-model <b><i>{{simulationModel.name}}</i></b>?</p>
+
+    <button {{action 'cancelDelete'}}>Cancel</button>
+    <button {{action 'confirmDelete'}}>Delete</button>
+  {{/modal-dialog}}
+{{/if}}

app/templates/dialog/simulations.hbs

@@ -0,0 +1,86 @@
+{{#if isShowingNewModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>New simulation</h1>
+
+    <form class="form-create-record" {{action 'submitNew' on='submit'}}>
+      <table>
+        <tr>
+          <td>
+            <label for="name">Name</label>
+          </td>
+          <td>
+            {{input id='name' placeholder='Enter simulation name' value=name}}
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <button {{action 'cancelNew'}}>Cancel</button>
+            <button type="submit">Create</button>
+          </td>
+        </tr>
+      </table>
+    </form>
+
+    {{#if errorMessage}}
+      <p><strong>Error:</strong> {{errorMessage}}</p>
+    {{/if}}
+  {{/modal-dialog}}
+{{/if}}
+
+{{#if isShowingEditModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>Edit simulator</h1>
+
+    <form class="form-edit-record" {{action 'submitEdit' on='submit'}}>
+      <table>
+        <tr>
+          <td>
+            <label for="name">Name</label>
+          </td>
+          <td>
+            {{input id='name' placeholder='Enter simulation name' value=name}}
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <button {{action 'cancelEdit'}}>Cancel</button>
+            <button type="submit">Save</button>
+          </td>
+        </tr>
+      </table>
+    </form>
+
+    {{#if errorMessage}}
+      <p><strong>Error:</strong> {{errorMessage}}</p>
+    {{/if}}
+  {{/modal-dialog}}
+{{/if}}
+
+{{#if isShowingDeleteModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>Delete simulation</h1>
+
+    <p>Are you sure you want to delete the simulation <b><i>{{simulation.name}}</i></b>?</p>
+
+    <button {{action 'cancelDelete'}}>Cancel</button>
+    <button {{action 'confirmDelete'}}>Delete</button>
+  {{/modal-dialog}}
+{{/if}}
+
+{{#if isShowingRunningModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>Simulation running</h1>
+
+    {{simulation.name}}:
+
+    <select onchange={{action "selectRunning" value="target.value"}}>
+      <option value=true selected={{eq simulationRunning true}}>running</option>
+      <option value=false selected={{eq simulationRunning false}}>not running</option>
+    </select>
+
+    <br />
+
+    <button {{action 'cancelRunningSimulation'}}>Cancel</button>
+    <button {{action 'confirmRunningSimulation'}}>Save</button>
+  {{/modal-dialog}}
+{{/if}}

app/templates/dialog/simulators.hbs

@@ -0,0 +1,118 @@
+{{#if isShowingNewModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>New simulator</h1>
+
+    <form class="form-create-record" {{action 'newSimulator' on='submit'}}>
+      <table>
+        <tr>
+          <td>
+            <label for="name">Name</label>
+          </td>
+          <td>
+            {{input id='name' placeholder='Enter simulator name' value=name}}
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="simulatorid">Simulator ID</label>
+          </td>
+          <td>
+            {{input id='simulatorid' type='number' value=simulatorid min='1' max='255'}}
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="endpoint">Endpoint</label>
+          </td>
+          <td>
+            {{input id='endpoint' placeholder='Enter endpoint' value=endpoint}}
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <button {{action 'cancelNewSimulator'}}>Cancel</button>
+            <button type="submit">Create</button>
+          </td>
+        </tr>
+      </table>
+    </form>
+
+    {{#if errorMessage}}
+      <p><strong>Error:</strong> {{errorMessage}}</p>
+    {{/if}}
+  {{/modal-dialog}}
+{{/if}}
+
+{{#if isShowingDeleteModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>Delete simulator</h1>
+
+    <p>Are you sure you want to delete the simulator <b><i>{{simulator.name}}</i></b>?</p>
+
+    <button {{action 'cancelDeleteSimulator'}}>Cancel</button>
+    <button {{action 'confirmDeleteSimulator'}}>Delete</button>
+  {{/modal-dialog}}
+{{/if}}
+
+{{#if isShowingEditModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>New simulator</h1>
+
+    <form class="form-edit-record" {{action 'editSimulator' on='submit'}}>
+      <table>
+        <tr>
+          <td>
+            <label for="name">Name</label>
+          </td>
+          <td>
+            {{input id='name' placeholder='Enter simulator name' value=simulatorName}}
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="simulatorid">Simulator ID</label>
+          </td>
+          <td>
+            {{input id='simulatorid' type='number' value=simulatorid min='1' max='255'}}
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="endpoint">Endpoint</label>
+          </td>
+          <td>
+            {{input id='endpoint' placeholder='Enter endpoint' value=simulatorEndpoint}}
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <button {{action 'cancelEditSimulator'}}>Cancel</button>
+            <button type="submit">Save</button>
+          </td>
+        </tr>
+      </table>
+    </form>
+
+    {{#if errorMessage}}
+      <p><strong>Error:</strong> {{errorMessage}}</p>
+    {{/if}}
+  {{/modal-dialog}}
+{{/if}}
+
+{{#if isShowingRunningModal}}
+  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
+    <h1>Simulator running</h1>
+
+    {{simulator.name}}:
+
+    <select onchange={{action "selectRunning" value="target.value"}}>
+      <option value=true selected={{eq simulatorRunning true}}>running</option>
+      <option value=false selected={{eq simulatorRunning false}}>not running</option>
+    </select>
+
+    <br />
+
+    <button {{action 'cancelRunningSimulator'}}>Cancel</button>
+    <button {{action 'confirmRunningSimulator'}}>Save</button>
+  {{/modal-dialog}}
+{{/if}}

app/templates/project/index.hbs

@@ -28,71 +28,4 @@
   <button {{action 'showNewModal'}}>New visualization</button>
 </div>
 
-{{#if isShowingNewModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>New visualization</h1>
-
-    <form class="form-create-record" {{action 'submitNew' on='submit'}} >
-      <table>
-        <tr>
-          <td>
-            <label for="name">Name</label>
-          </td>
-          <td>
-            {{input id='name' placeholder='Enter visualization name' value=name}}
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <button {{action 'cancelNew'}}>Cancel</button>
-            <button type="submit">Create</button>
-          </td>
-        </tr>
-      </table>
-    </form>
-
-    {{#if errorMessage}}
-      <p><strong>Error:</strong> {{errorMessage}}</p>
-    {{/if}}
-  {{/modal-dialog}}
-{{/if}}
-
-{{#if isShowingEditModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>Edit visualization</h1>
-
-    <form class="form-edit-record" {{action 'submitEdit' on='submit'}} >
-      <table>
-        <tr>
-          <td>
-            <label for="name">Name</label>
-          </td>
-          <td>
-            {{input id='name' placeholder='Enter visualization name' value=name}}
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <button {{action 'cancelEdit'}}>Cancel</button>
-            <button type="submit">Save</button>
-          </td>
-        </tr>
-      </table>
-    </form>
-
-    {{#if errorMessage}}
-      <p><strong>Error:</strong> {{errorMessage}}</p>
-    {{/if}}
-  {{/modal-dialog}}
-{{/if}}
-
-{{#if isShowingDeleteModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>Delete visualization</h1>
-
-    <p>Are you sure you want to delete the visualization <b><i>{{visualization.name}}</i></b>?</p>
-
-    <button {{action 'cancelDelete'}}>Cancel</button>
-    <button {{action 'confirmDelete'}}>Delete</button>
-  {{/modal-dialog}}
-{{/if}}
+{{partial "dialog/project"}}

app/templates/projects.hbs

@@ -30,95 +30,4 @@
   <button {{action 'showNewModal'}}>New Project</button>
 </div>
 
-{{#if isShowingNewModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>New project</h1>
-
-    <form class="form-create-record" {{action 'submitNew' on='submit'}} >
-      <table>
-        <tr>
-          <td>
-            <label for="name">Name</label>
-          </td>
-          <td>
-            {{input id='name' placeholder='Enter project name' value=name}}
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label for="simulation">Simulation</label>
-          </td>
-          <td>
-            <select onchange={{action "selectSimulation" value="target.value"}}>
-              {{#each model.simulations as |simulation|}}
-                <option value={{simulation.name}}>{{simulation.name}}</option>
-              {{/each}}
-            </select>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <button {{action 'cancelNew'}}>Cancel</button>
-            <button type="submit">Create</button>
-          </td>
-        </tr>
-      </table>
-    </form>
-
-    {{#if errorMessage}}
-      <p><strong>Error:</strong> {{errorMessage}}</p>
-    {{/if}}
-  {{/modal-dialog}}
-{{/if}}
-
-{{#if isShowingEditModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>Edit project</h1>
-
-    <form class="form-edit-record" {{action 'submitEdit' on='submit'}} >
-      <table>
-        <tr>
-          <td>
-            <label for="name">Name</label>
-          </td>
-          <td>
-            {{input id='name' placeholder='Enter project name' value=name}}
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label for="simulation">Simulation</label>
-          </td>
-          <td>
-            <select onchange={{action "selectSimulation" value="target.value"}}>
-              {{#each model.simulations as |simulation|}}
-                <option value={{simulation.name}} selected={{eq simulation.name projectSimulation.name}}>{{simulation.name}}</option>
-              {{/each}}
-            </select>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <button {{action 'cancelEdit'}}>Cancel</button>
-            <button type="submit">Save</button>
-          </td>
-        </tr>
-      </table>
-    </form>
-
-    {{#if errorMessage}}
-      <p><strong>Error:</strong> {{errorMessage}}</p>
-    {{/if}}
-  {{/modal-dialog}}
-{{/if}}
-
-{{#if isShowingDeleteModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>Delete project</h1>
-
-    <p>Are you sure you want to delete the project <b><i>{{project.name}}</i></b>?</p>
-
-    <button {{action 'cancelDelete'}}>Cancel</button>
-    <button {{action 'confirmDelete'}}>Delete</button>
-  {{/modal-dialog}}
-{{/if}}
+{{partial "dialog/projects"}}

app/templates/simulation/index.hbs

@@ -32,95 +32,4 @@
   <button {{action 'showNewModal'}}>New model</button>
 </div>
 
-{{#if isShowingNewModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>New model</h1>
-
-    <form class="form-create-record" {{action 'submitNew' on='submit'}}>
-      <table>
-        <tr>
-          <td>
-            <label for="name">Name</label>
-          </td>
-          <td>
-            {{input id='name' placeholder='Enter model name' value=name}}
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label for="simulator">Simulator</label>
-          </td>
-          <td>
-            <select onchange={{action "selectSimulator" value="target.value"}}>
-              {{#each model.simulators as |simulator|}}
-                <option value={{simulator.name}}>{{simulator.name}}</option>
-              {{/each}}
-            </select>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <button {{action 'cancelNew'}}>Cancel</button>
-            <button type="submit">Create</button>
-          </td>
-        </tr>
-      </table>
-    </form>
-
-    {{#if errorMessage}}
-      <p><strong>Error:</strong> {{errorMessage}}</p>
-    {{/if}}
-  {{/modal-dialog}}
-{{/if}}
-
-{{#if isShowingEditModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>Edit model</h1>
-
-    <form class="form-edit-record" {{action 'submitEdit' on='submit'}}>
-      <table>
-        <tr>
-          <td>
-            <label for="name">Name</label>
-          </td>
-          <td>
-            {{input id='name' placeholder='Enter model name' value=name}}
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label for="simulator">Simulator</label>
-          </td>
-          <td>
-            <select onchange={{action "selectSimulator" value="target.value"}}>
-              {{#each model.simulators as |simulator|}}
-                <option value={{simulator.name}} selected={{eq simulatorName simulator.name}}>{{simulator.name}}</option>
-              {{/each}}
-            </select>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <button {{action 'cancelEdit'}}>Cancel</button>
-            <button type="submit">Save</button>
-          </td>
-        </tr>
-      </table>
-    </form>
-
-    {{#if errorMessage}}
-      <p><strong>Error:</strong> {{errorMessage}}</p>
-    {{/if}}
-  {{/modal-dialog}}
-{{/if}}
-
-{{#if isShowingDeleteModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>Delete simulation-model</h1>
-
-    <p>Are you sure you want to delete the simulation-model <b><i>{{simulationModel.name}}</i></b>?</p>
-
-    <button {{action 'cancelDelete'}}>Cancel</button>
-    <button {{action 'confirmDelete'}}>Delete</button>
-  {{/modal-dialog}}
-{{/if}}
+{{partial "dialog/simulation"}}

app/templates/simulations.hbs

@@ -31,89 +31,4 @@
   <button {{action 'showNewModal'}}>New Simulation</button>
 </div>
 
-{{#if isShowingNewModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>New simulation</h1>
-
-    <form class="form-create-record" {{action 'submitNew' on='submit'}}>
-      <table>
-        <tr>
-          <td>
-            <label for="name">Name</label>
-          </td>
-          <td>
-            {{input id='name' placeholder='Enter simulation name' value=name}}
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <button {{action 'cancelNew'}}>Cancel</button>
-            <button type="submit">Create</button>
-          </td>
-        </tr>
-      </table>
-    </form>
-
-    {{#if errorMessage}}
-      <p><strong>Error:</strong> {{errorMessage}}</p>
-    {{/if}}
-  {{/modal-dialog}}
-{{/if}}
-
-{{#if isShowingEditModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>Edit simulator</h1>
-
-    <form class="form-edit-record" {{action 'submitEdit' on='submit'}}>
-      <table>
-        <tr>
-          <td>
-            <label for="name">Name</label>
-          </td>
-          <td>
-            {{input id='name' placeholder='Enter simulation name' value=name}}
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <button {{action 'cancelEdit'}}>Cancel</button>
-            <button type="submit">Save</button>
-          </td>
-        </tr>
-      </table>
-    </form>
-
-    {{#if errorMessage}}
-      <p><strong>Error:</strong> {{errorMessage}}</p>
-    {{/if}}
-  {{/modal-dialog}}
-{{/if}}
-
-{{#if isShowingDeleteModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>Delete simulation</h1>
-
-    <p>Are you sure you want to delete the simulation <b><i>{{simulation.name}}</i></b>?</p>
-
-    <button {{action 'cancelDelete'}}>Cancel</button>
-    <button {{action 'confirmDelete'}}>Delete</button>
-  {{/modal-dialog}}
-{{/if}}
-
-{{#if isShowingRunningModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>Simulation running</h1>
-
-    {{simulation.name}}:
-
-    <select onchange={{action "selectRunning" value="target.value"}}>
-      <option value=true selected={{eq simulationRunning true}}>running</option>
-      <option value=false selected={{eq simulationRunning false}}>not running</option>
-    </select>
-
-    <br />
-
-    <button {{action 'cancelRunningSimulation'}}>Cancel</button>
-    <button {{action 'confirmRunningSimulation'}}>Save</button>
-  {{/modal-dialog}}
-{{/if}}
+{{partial "dialog/simulations"}}

app/templates/simulators.hbs

@@ -40,121 +40,4 @@
   <button {{action 'showNewModal'}}>New Simulator</button>
 </div>
 
-{{#if isShowingNewModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>New simulator</h1>
-
-    <form class="form-create-record" {{action 'newSimulator' on='submit'}}>
-      <table>
-        <tr>
-          <td>
-            <label for="name">Name</label>
-          </td>
-          <td>
-            {{input id='name' placeholder='Enter simulator name' value=name}}
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label for="simulatorid">Simulator ID</label>
-          </td>
-          <td>
-            {{input id='simulatorid' type='number' value=simulatorid min='1' max='255'}}
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label for="endpoint">Endpoint</label>
-          </td>
-          <td>
-            {{input id='endpoint' placeholder='Enter endpoint' value=endpoint}}
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <button {{action 'cancelNewSimulator'}}>Cancel</button>
-            <button type="submit">Create</button>
-          </td>
-        </tr>
-      </table>
-    </form>
-
-    {{#if errorMessage}}
-      <p><strong>Error:</strong> {{errorMessage}}</p>
-    {{/if}}
-  {{/modal-dialog}}
-{{/if}}
-
-{{#if isShowingDeleteModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>Delete simulator</h1>
-
-    <p>Are you sure you want to delete the simulator <b><i>{{simulator.name}}</i></b>?</p>
-
-    <button {{action 'cancelDeleteSimulator'}}>Cancel</button>
-    <button {{action 'confirmDeleteSimulator'}}>Delete</button>
-  {{/modal-dialog}}
-{{/if}}
-
-{{#if isShowingEditModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>New simulator</h1>
-
-    <form class="form-edit-record" {{action 'editSimulator' on='submit'}}>
-      <table>
-        <tr>
-          <td>
-            <label for="name">Name</label>
-          </td>
-          <td>
-            {{input id='name' placeholder='Enter simulator name' value=simulatorName}}
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label for="simulatorid">Simulator ID</label>
-          </td>
-          <td>
-            {{input id='simulatorid' type='number' value=simulatorid min='1' max='255'}}
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label for="endpoint">Endpoint</label>
-          </td>
-          <td>
-            {{input id='endpoint' placeholder='Enter endpoint' value=simulatorEndpoint}}
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <button {{action 'cancelEditSimulator'}}>Cancel</button>
-            <button type="submit">Save</button>
-          </td>
-        </tr>
-      </table>
-    </form>
-
-    {{#if errorMessage}}
-      <p><strong>Error:</strong> {{errorMessage}}</p>
-    {{/if}}
-  {{/modal-dialog}}
-{{/if}}
-
-{{#if isShowingRunningModal}}
-  {{#modal-dialog attachment="middle center" translucentOverlay=true}}
-    <h1>Simulator running</h1>
-
-    {{simulator.name}}:
-
-    <select onchange={{action "selectRunning" value="target.value"}}>
-      <option value=true selected={{eq simulatorRunning true}}>running</option>
-      <option value=false selected={{eq simulatorRunning false}}>not running</option>
-    </select>
-
-    <br />
-
-    <button {{action 'cancelRunningSimulator'}}>Cancel</button>
-    <button {{action 'confirmRunningSimulator'}}>Save</button>
-  {{/modal-dialog}}
-{{/if}}
+{{partial "dialog/simulators"}}

app/templates/visualization/edit.hbs

@@ -16,10 +16,12 @@
 </div>
 
 {{#draggable-dropzone dropped='addPlot'}}
-  {{plot-container plots=model.plots editing=true data=data}}
+  {{plot-container plots=model.plots editing=true data=data showPlotDialog='showPlotDialog'}}
 {{/draggable-dropzone}}
 
 <p>
   <button {{action 'cancelEdit'}}>Cancel</button>
   <button {{action 'saveEdit'}}>Save</button>
 </p>
+
+{{partial "dialog/plot/value"}}