Add simulators and modal dialogs

app/controllers/simulation-model/new.js

@@ -10,19 +10,26 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
-  simulator: 1,
+  simulator: null,
 
   actions: {
     newModel() {
       // get the simulation
-      var simulation = this.get('model');
-      var simulationId = this.get('model.id');
+      var simulation = this.get('model.simulation');
+      var simulationId = this.get('model.simulation.id');
 
       // create new model from properties
-      var properties = this.getProperties('name', 'simulator');
+      var properties = this.getProperties('name');
       properties['simulation'] = simulationId;
 
-      var simulationModel = this.store.createRecord('simulation-model', properties);
+      // get the simulator id by simulator name
+      if (this.get('simulator') == null) {
+        this.set('simulator', this.get('model.simulators')[0]);
+      }
+
+      console.log(this.get('model.simulators')[0]);
+
+      /*var simulationModel = this.store.createRecord('simulation-model', properties);
 
       // this change will not be saved, but it is nessecary otherwise ember will omit the simulation's id in the post request
       simulation.get('models').pushObject(simulationModel);
@@ -33,12 +40,16 @@ export default Ember.Controller.extend({
         controller.transitionToRoute('/simulation/' + simulationId);
       }, function() {
         Ember.debug('Error saving new model');
-      });
+      });*/
     },
 
     cancelNewModel() {
-      var simulationId = this.get('model.id');
+      var simulationId = this.get('model.simulation.id');
       this.transitionToRoute('/simulation/' + simulationId);
+    },
+
+    selectSimulator(simulator) {
+      this.set('simulator', simulator);
     }
   }
 });

app/controllers/simulators.js

@@ -0,0 +1,119 @@
+/**
+ * File: simulators.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 30.09.2016
+ * Copyright: 2016, Institute for Automation of Complex Power Systems, EONERC
+ *   This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
+ *   Unauthorized copying of this file, via any medium is strictly prohibited.
+ **********************************************************************************/
+
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  isShowingNewModal: false,
+  isShowingDeleteModal: false,
+  isShowingEditModal: false,
+
+  simulatorid: 1,
+  errorMessage: null,
+  simulator: null,
+  simulatorName: null,
+  simulatorEdit: null,
+
+  actions: {
+    showNewModal() {
+      // reset the properties
+      this.set('errorMessage', null);
+      this.set('simulatorid', 1);
+      this.set('name', null);
+      this.set('endpoint', null);
+
+      // show the modal dialog
+      this.set('isShowingNewModal', true);
+    },
+
+    showDeleteModal(simulator) {
+      this.set('isShowingDeleteModal', true);
+      this.set('simulator', simulator);
+    },
+
+    showEditModal(simulator) {
+      // set properties
+      this.set('errorMessage', null);
+      this.set('simulator', simulator);
+      this.set('simulatorid', simulator.get('simulatorid'));
+      this.set('simulatorName', simulator.get('name'));
+      this.set('simulatorEndpoint', simulator.get('endpoint'));
+
+      // show the modal dialog
+      this.set('isShowingEditModal', true);
+    },
+
+    newSimulator() {
+      // verify properties
+      var properties = this.getProperties('name', 'simulatorid', 'endpoint');
+      if (properties['name'] == null) {
+        this.set('errorMessage', 'Simulator name is missing');
+        return;
+      } else if (properties['endpoint'] == null) {
+        this.set('errorMessage', 'Simulator endpoint is missing');
+        return;
+      }
+
+      // create new simulator from properties
+      var simulator = this.store.createRecord('simulator', properties);
+      var controller = this;
+
+      simulator.save().then(function() {
+        controller.set('isShowingNewModal', false);
+      }, function() {
+        Ember.debug('Error saving new simulator');
+      });
+    },
+
+    cancelNewSimulator() {
+      this.set('isShowingNewModal', false);
+    },
+
+    cancelDeleteSimulator() {
+      this.set('isShowingDeleteModal', false);
+    },
+
+    confirmDeleteSimulator() {
+      // delete the simulator
+      var simulator = this.get('simulator');
+      simulator.destroyRecord();
+
+      // hide the modal dialog
+      this.set('isShowingDeleteModal', false);
+    },
+
+    editSimulator() {
+      // verify new properties
+      if (this.get('simulatorName') == null) {
+        this.set('errorMessage', 'Simulator name is missing');
+        return;
+      } else if (this.get('simulatorEndpoint') == null) {
+        this.set('errorMessage', 'Simulator endpoint is missing');
+        return;
+      }
+
+      // save property changes
+      this.get('simulator').set('name', this.get('simulatorName'));
+      this.get('simulator').set('simulatorid', this.get('simulatorid'));
+      this.get('simulator').set('endpoint', this.get('simulatorEndpoint'));
+
+      var controller = this;
+
+      this.get('simulator').save().then(function() {
+        controller.set('isShowingEditModal', false);
+      }, function() {
+        Ember.debug('Error saving edit simulator');
+      });
+    },
+
+    cancelEditSimulator() {
+      this.set('isShowingEditModal', false);
+    }
+  }
+});

app/models/simulator.js

@@ -0,0 +1,18 @@
+/**
+ * File: simulator.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 28.09.2016
+ * Copyright: 2016, Institute for Automation of Complex Power Systems, EONERC
+ *   This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
+ *   Unauthorized copying of this file, via any medium is strictly prohibited.
+ **********************************************************************************/
+
+import DS from 'ember-data';
+import attr from 'ember-data/attr';
+
+export default DS.Model.extend({
+  name: attr('string'),
+  running: attr('boolean'),
+  simulatorid: attr('number'),
+  endpoint: attr('string')
+});

app/router.js

@@ -58,6 +58,9 @@ Router.map(function() {
     this.route('new');
     this.route('edit', { path: '/edit/:simulationid' });
   });
+
+  this.route('simulators');
+  this.route('simulator');
 });
 
 export default Router;

app/routes/simulation-model/new.js

@@ -12,6 +12,9 @@ import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-rout
 
 export default Ember.Route.extend(AuthenticatedRouteMixin, {
   model(params) {
-    return this.store.findRecord('simulation', params.simulationid);
+    return Ember.RSVP.hash({
+      simulation: this.store.findRecord('simulation', params.simulationid),
+      simulators: this.store.findAll('simulator')
+    });
   }
 });

app/routes/simulators.js

@@ -0,0 +1,18 @@
+/**
+ * File: simulators.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 28.09.2016
+ * Copyright: 2016, Institute for Automation of Complex Power Systems, EONERC
+ *   This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
+ *   Unauthorized copying of this file, via any medium is strictly prohibited.
+ **********************************************************************************/
+
+import Ember from 'ember';
+import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
+
+export default Ember.Route.extend(AuthenticatedRouteMixin, {
+  model() {
+    // get simulators
+    return this.store.findAll('simulator');
+  }
+});

app/styles/app.scss

@@ -11,6 +11,10 @@
 @import 'models.css';
 @import 'simulations.css';
 @import 'projects.css';
+@import 'simulators.css';
+
+@import "ember-modal-dialog/ember-modal-structure";
+@import "ember-modal-dialog/ember-modal-appearance";
 
 * {
   margin: 0;
@@ -235,6 +239,24 @@ footer {
   background: #373;
 }
 
+button {
+  background-color: #151;
+  color: #fff;
+
+  font-size: 14px;
+
+  margin-top: 10px;
+  padding: 4px 8px;
+
+  border: none;
+
+  cursor: pointer;
+}
+
+button:hover {
+  background: #373;
+}
+
 /**
  *
  */

app/styles/simulators.css

@@ -0,0 +1,27 @@
+/**
+ * File: simulators.css
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 30.09.2016
+ * Copyright: 2016, Institute for Automation of Complex Power Systems, EONERC
+ *   This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
+ *   Unauthorized copying of this file, via any medium is strictly prohibited.
+ **********************************************************************************/
+
+/**
+ * Route: simulators
+ */
+.simulators-container {
+  margin-top: 20px;
+}
+
+.simulators-row-controls {
+  float: right;
+}
+
+.simulators-row-controls a {
+  margin-left: 10px;
+}
+
+.simulators-new-container {
+  margin-top: 50px;
+}

app/templates/application.hbs

@@ -10,6 +10,7 @@
       <li>{{#link-to 'index'}}Home{{/link-to}}</li>
       <li>{{#link-to 'projects'}}Projects{{/link-to}}</li>
       <li>{{#link-to 'simulations'}}Simulations{{/link-to}}</li>
+      <li>{{#link-to 'simulators'}}Simulators{{/link-to}}</li>
       <li>{{#link-to 'me'}}Account{{/link-to}}</li>
       <li>{{#link-to 'logout'}}Logout{{/link-to}}</li>
     </ul>

app/templates/simulation-model/new.hbs

@@ -15,7 +15,11 @@
         <label for="simulator">Simulator</label>
       </td>
       <td>
-        {{input id='simulator' value=simulator type='number' min=1 max=255 step=1}}
+        <select onchange={{action "selectSimulator" value="target.value"}}>
+          {{#each model.simulators as |simulator|}}
+            <option value={{simulator.name}}>{{simulator.name}}</option>
+          {{/each}}
+        </select>
       </td>
     </tr>
     <tr>

app/templates/simulators.hbs

@@ -0,0 +1,143 @@
+<h1>Simulators</h1>
+
+<div class="simulators-container">
+  <table class="table-full-width">
+    <tr>
+      <th>Name</th>
+      <th width="80px" class="column-center">ID</th>
+      <th width="80px" class="column-center">Running</th>
+      <th width="120px" class="column-center">Endpoint</th>
+      <th width="100px"></th>
+    </tr>
+    {{#each model as |simulator|}}
+      <tr>
+        <td>
+          <!-- {{#link-to "simulator.index" simulator.id}}{{simulator.name}}{{/link-to}} -->
+          {{simulator.name}}
+        </td>
+        <td>
+          {{simulator.simulatorid}}
+        </td>
+        <td>
+          {{simulator.running}}
+        </td>
+        <td>
+          {{simulator.endpoint}}
+        </td>
+        <td>
+          <div class="simulators-row-controls">
+            <!-- {{#link-to "simulator.edit" simulator.id}}Edit{{/link-to}} -->
+            <!-- {{#link-to "simulator.delete" simulator.id}}Delete{{/link-to}} -->
+            <a href="" {{action 'showEditModal' simulator}}>Edit</a>
+            <a href="" {{action 'showDeleteModal' simulator}}>Delete</a>
+          </div>
+        </td>
+      </tr>
+    {{/each}}
+  </table>
+</div>
+
+<div class="simulators-new-container">
+  <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">Create</button>
+          </td>
+        </tr>
+      </table>
+    </form>
+
+    {{#if errorMessage}}
+      <p><strong>Error:</strong> {{errorMessage}}</p>
+    {{/if}}
+  {{/modal-dialog}}
+{{/if}}

package.json

@@ -32,13 +32,16 @@
     "ember-cli-jshint": "^1.0.0",
     "ember-cli-qunit": "^1.4.0",
     "ember-cli-release": "0.2.8",
+    "ember-cli-sass": "5.5.2",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^1.2.0",
     "ember-data": "^2.5.0",
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.5.1",
+    "ember-modal-dialog": "^0.9.0",
     "ember-resolver": "^2.0.3",
     "ember-simple-auth": "^1.1.0",
+    "ember-tether": "0.3.1",
     "loader.js": "^4.0.1"
   },
   "dependencies": {}

tests/unit/controllers/simulators-test.js

@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:simulators', 'Unit | Controller | simulators', {
+  // 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);
+});

tests/unit/models/simulator-test.js

@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('simulator', 'Unit | Model | simulator', {
+  // 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);
+});

tests/unit/routes/simulators-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:simulators', 'Unit | Route | simulators', {
+  // 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);
+});

tests/unit/routes/simulators/delete-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:simulators/delete', 'Unit | Route | simulators/delete', {
+  // 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);
+});

tests/unit/routes/simulators/edit-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:simulators/edit', 'Unit | Route | simulators/edit', {
+  // 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);
+});

tests/unit/routes/simulators/index-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:simulators/index', 'Unit | Route | simulators/index', {
+  // 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);
+});