Add simulator export

Add FileSaver.js dependency

package.json

@@ -12,6 +12,7 @@
     "d3-shape": "^1.2.0",
     "d3-time-format": "^2.0.5",
     "es6-promise": "^4.0.5",
+    "file-saver": "^1.3.3",
     "flux": "^3.1.2",
     "gaugeJS": "^1.3.2",
     "immutable": "^3.8.1",

src/components/dialog/import-node.js

@@ -0,0 +1,94 @@
+/**
+ * File: import-simulator.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 04.04.2017
+ * Copyright: 2017, 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 React, { Component, PropTypes } from 'react';
+import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
+
+import Dialog from './dialog';
+
+class ImportSimulatorDialog extends Component {
+  static propTypes = {
+    show: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired
+  };
+
+  valid: false;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      name: '',
+      endpoint: ''
+    };
+  }
+
+  onClose(canceled) {
+    if (canceled === false) {
+      this.props.onClose(this.state);
+    } else {
+      this.props.onClose();
+    }
+  }
+
+  handleChange(e) {
+    this.setState({ [e.target.id]: e.target.value });
+  }
+
+  resetState() {
+    this.setState({ name: '', endpoint: '' });
+  }
+
+  loadFile(fileList) {
+    // get file
+    const file = fileList[0];
+    if (!file.type.match('application/json')) {
+      return;
+    }
+
+    // create file reader
+    var reader = new FileReader();
+    var self = this;
+
+    reader.onload = function(event) {
+      // read simulator
+      const simulator = JSON.parse(event.target.result);
+      self.valid = true;
+      self.setState({ name: simulator.name, endpoint: simulator.endpoint });
+    };
+
+    reader.readAsText(file);
+  }
+
+  render() {
+    return (
+      <Dialog show={this.props.show} title="Import Simulator" buttonTitle="Import" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
+        <form>
+          <FormGroup controlId="file">
+            <ControlLabel>Simulator File</ControlLabel>
+            <FormControl type="file" onChange={(e) => this.loadFile(e.target.files)} />
+          </FormGroup>
+
+          <FormGroup controlId="name">
+            <ControlLabel>Name</ControlLabel>
+            <FormControl readOnly type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="endpoint">
+            <ControlLabel>Endpoint</ControlLabel>
+            <FormControl readOnly type="text" placeholder="Enter endpoint" value={this.state.endpoint} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+        </form>
+      </Dialog>
+    );
+  }
+}
+
+export default ImportSimulatorDialog;

src/components/dialog/import-simulation-model.js

@@ -0,0 +1,189 @@
+/**
+ * File: import-simulation-model.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 03.09.2017
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
+
+import Table from '../table';
+import TableColumn from '../table-column';
+import Dialog from './dialog';
+
+class ImportSimulationModelDialog extends React.Component {
+  valid = false;
+  imported = false;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      name: '',
+      simulator: { node: '', simulator: '' },
+      length: '1',
+      mapping: [ { name: 'Signal', type: 'Type' } ]
+    };
+  }
+
+  onClose(canceled) {
+    if (canceled === false) {
+      this.props.onClose(this.state);
+    } else {
+      this.props.onClose();
+    }
+  }
+
+  resetState() {
+    this.setState({
+      name: '',
+      simulator: { node: this.props.nodes[0] ? this.props.nodes[0]._id : '', simulator: this.props.nodes[0].simulators[0] ? 0 : '' },
+      length: '1',
+      mapping: [ { name: 'Signal', type: 'Type' } ]
+    });
+
+    this.imported = false;
+  }
+
+  handleChange(e) {
+    if (e.target.id === 'length') {
+      // change mapping size
+      if (e.target.value > this.state.mapping.length) {
+        // add missing signals
+        while (this.state.mapping.length < e.target.value) {
+          this.state.mapping.push({ name: 'Signal', type: 'Type' });
+        }
+      } else {
+        // remove signals
+        this.state.mapping.splice(e.target.value, this.state.mapping.length - e.target.value);
+      }
+    }
+
+    if (e.target.id === 'simulator') {
+      this.setState({ simulator: JSON.parse(e.target.value) });
+    } else {
+      this.setState({ [e.target.id]: e.target.value });
+    }
+  }
+
+  handleMappingChange(event, row, column) {
+    var mapping = this.state.mapping;
+
+    if (column === 1) {
+      mapping[row].name = event.target.value;
+    } else if (column === 2) {
+      mapping[row].type = event.target.value;
+    }
+
+    this.setState({ mapping: mapping });
+  }
+
+  loadFile(fileList) {
+    // get file
+    const file = fileList[0];
+    if (!file.type.match('application/json')) {
+      return;
+    }
+
+    // create file reader
+    var reader = new FileReader();
+    var self = this;
+
+    reader.onload = function(event) {
+      // read simulator
+      const model = JSON.parse(event.target.result);
+
+      self.imported = true;
+      self.valid = true;
+      self.setState({ name: model.name, mapping: model.mapping, length: model.length, simulator: { node: self.props.nodes[0]._id, simulator: 0 } });
+    };
+
+    reader.readAsText(file);
+  }
+
+  validateForm(target) {
+    // check all controls
+    var name = true;
+    var length = true;
+    var simulator = true;
+
+    if (this.state.name === '') {
+      name = false;
+    }
+
+    if (this.state.simulator === '') {
+      simulator = false;
+    }
+
+    // test if simulatorid is a number (in a string, not type of number)
+    if (!/^\d+$/.test(this.state.length)) {
+      length = false;
+    }
+
+    this.valid = name && length && simulator;
+
+    // return state to control
+    if (target === 'name') return name ? "success" : "error";
+    else if (target === 'length') return length ? "success" : "error";
+    else if (target === 'simulator') return simulator ? "success" : "error";
+  }
+
+  render() {
+    return (
+      <Dialog show={this.props.show} title="Import Simulation Model" buttonTitle="Import" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
+        <form>
+          <FormGroup controlId="file">
+            <ControlLabel>Simulation Model File</ControlLabel>
+            <FormControl type="file" onChange={(e) => this.loadFile(e.target.files)} />
+          </FormGroup>
+
+          <FormGroup controlId="name" validationState={this.validateForm('name')}>
+            <ControlLabel>Name</ControlLabel>
+            <FormControl readOnly={!this.imported} type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="simulator">
+            <ControlLabel>Simulator</ControlLabel>
+            <FormControl readOnly={!this.imported} componentClass="select" placeholder="Select simulator" value={JSON.stringify({ node: this.state.simulator.node, simulator: this.state.simulator.simulator})} onChange={(e) => this.handleChange(e)}>
+              {this.props.nodes.map(node => (
+                node.simulators.map((simulator, index) => (
+                  <option key={node._id + index} value={JSON.stringify({ node: node.name, simulator: simulator.name })}>{node.name}/{simulator.name}</option>
+                ))
+              ))}
+            </FormControl>
+          </FormGroup>
+          <FormGroup controlId="length" validationState={this.validateForm('length')}>
+            <ControlLabel>Length</ControlLabel>
+            <FormControl readOnly={!this.imported} type="number" placeholder="Enter length" min="1" value={this.state.length} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="mapping">
+            <ControlLabel>Mapping</ControlLabel>
+            <Table data={this.state.mapping}>
+              <TableColumn title='ID' width='60' dataIndex />
+              <TableColumn title='Name' dataKey='name' inlineEditable onInlineChange={(event, row, column) => this.handleMappingChange(event, row, column)} />
+              <TableColumn title='Type' dataKey='type' inlineEditable onInlineChange={(event, row, column) => this.handleMappingChange(event, row, column)} />
+            </Table>
+          </FormGroup>
+        </form>
+      </Dialog>
+    );
+  }
+}
+
+export default ImportSimulationModelDialog;

src/components/dialog/import-simulation.js

@@ -0,0 +1,140 @@
+/**
+ * File: import-simulation.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 03.09.2017
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
+
+import Dialog from './dialog';
+
+class ImportSimulationDialog extends React.Component {
+  valid = false;
+  imported = false;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      name: '',
+      models: []
+    };
+  }
+
+  onClose(canceled) {
+    if (canceled === false) {
+      this.props.onClose(this.state);
+    } else {
+      this.props.onClose();
+    }
+  }
+
+  handleChange(e, index) {
+    if (e.target.id === 'simulator') {
+      const models = this.state.models;
+      models[index].simulator = JSON.parse(e.target.value);
+
+      this.setState({ models });
+    } else {
+      this.setState({ [e.target.id]: e.target.value });
+    }
+  }
+
+  resetState() {
+    this.setState({ name: '', models: [] });
+
+    this.imported = false;
+  }
+
+  loadFile(fileList) {
+    // get file
+    const file = fileList[0];
+    if (!file.type.match('application/json')) {
+      return;
+    }
+
+    // create file reader
+    var reader = new FileReader();
+    var self = this;
+
+    reader.onload = function(event) {
+      // read simulator
+      const simulation = JSON.parse(event.target.result);
+      simulation.models.forEach(model => {
+        model.simulator = {
+          node: self.props.nodes[0]._id,
+          simulator: 0
+        }
+      });
+
+      self.imported = true;
+      self.setState({ name: simulation.name, models: simulation.models });
+    };
+
+    reader.readAsText(file);
+  }
+
+  validateForm(target) {
+    // check all controls
+    let name = true;
+
+    if (this.state.name === '') {
+      name = false;
+    }
+
+    this.valid =  name;
+
+    // return state to control
+    if (target === 'name') return name ? "success" : "error";
+  }
+
+  render() {
+    return (
+      <Dialog show={this.props.show} title="Import Simulation" buttonTitle="Import" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
+        <form>
+          <FormGroup controlId="file">
+            <ControlLabel>Simulation File</ControlLabel>
+            <FormControl type="file" onChange={(e) => this.loadFile(e.target.files)} />
+          </FormGroup>
+
+          <FormGroup controlId="name" validationState={this.validateForm('name')}>
+            <ControlLabel>Name</ControlLabel>
+            <FormControl readOnly={!this.imported} type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+
+          {this.state.models.map((model, index) => (
+            <FormGroup controlId="simulator" key={index}>
+              <ControlLabel>{model.name} - Simulator</ControlLabel>
+              <FormControl componentClass="select" placeholder="Select simulator" value={JSON.stringify({ node: model.simulator.node, simulator: model.simulator.simulator})} onChange={(e) => this.handleChange(e, index)}>
+                {this.props.nodes.map(node => (
+                  node.simulators.map((simulator, index) => (
+                    <option key={node._id + index} value={JSON.stringify({ node: node._id, simulator: index })}>{node.name}/{simulator.name}</option>
+                  ))
+                ))}
+              </FormControl>
+            </FormGroup>
+          ))}
+        </form>
+      </Dialog>
+    );
+  }
+}
+
+export default ImportSimulationDialog;

src/containers/simulators.js

@@ -22,6 +22,7 @@
 import React, { Component } from 'react';
 import { Container } from 'flux/utils';
 import { Button, Modal, Glyphicon } from 'react-bootstrap';
+import FileSaver from 'file-saver';
 
 import AppDispatcher from '../app-dispatcher';
 import NodeStore from '../stores/node-store';
@@ -32,8 +33,7 @@ import EditNodeDialog from '../components/dialog/edit-node';
 import NewSimulatorDialog from '../components/dialog/new-simulator';
 import EditSimulatorDialog from '../components/dialog/edit-simulator';
 import NodeTree from '../components/node-tree';
-import ImportSimulatorDialog from '../components/dialog/import-simulator';
-import ExportSimulatorDialog from '../components/dialog/export-simulator';
+import ImportNodeDialog from '../components/dialog/import-node';
 
 class Simulators extends Component {
   static getStores() {
@@ -191,17 +191,36 @@ class Simulators extends Component {
     });
   }
   
-  closeImportModal(data) {
-    this.setState({ importModal: false });
+  closeImportNodeModal(data) {
+    this.setState({ importNodeModal: false });
 
     if (data) {
       AppDispatcher.dispatch({
-        type: 'simulators/start-add',
-        data: data
+        type: 'nodes/start-add',
+        data,
+        token: this.state.sessionToken
       });
     }
   }
 
+  exportNode(data) {
+    const node = this.state.nodes.find((element) => {
+      return element._id === data.id;
+    });
+
+    // filter properties
+    let simulator = Object.assign({}, node);
+    delete simulator._id;
+
+    simulator.simulators.forEach(simulator => {
+      delete simulator.id;
+    });
+
+    // show save dialog
+    const blob = new Blob([JSON.stringify(simulator, null, 2)], { type: 'application/json' });
+    FileSaver.saveAs(blob, 'node - ' + node.name + '.json');
+  }
+
   labelStyle(value) {
     if (value === true) return 'success';
     else return 'warning';
@@ -240,15 +259,26 @@ class Simulators extends Component {
         <h1>Simulators</h1>
 
         <Button onClick={() => this.setState({ newNodeModal: true })}><Glyphicon glyph="plus" /> Node</Button>
+        <Button onClick={() => this.setState({ importNodeModal: true })}><Glyphicon glyph="import" /> Import</Button>
 
         <br />
         <small><i>Hint: Node names must be unique. Simulator names must be unique on a node.</i></small>
 
-        <NodeTree data={this.state.nodes} onDataChange={(treeData) => this.onTreeDataChange(treeData)} onNodeDelete={(node) => this.showDeleteNodeModal(node)} onNodeEdit={(node) => this.showEditNodeModal(node)} onNodeAdd={(node) => this.showAddSimulatorModal(node)} onSimulatorEdit={(node, index) => this.showEditSimulatorModal(node, index)} onSimulatorDelete={(node, index) => this.showDeleteSimulatorModal(node, index)} />
+        <NodeTree 
+          data={this.state.nodes} 
+          onDataChange={(treeData) => this.onTreeDataChange(treeData)} 
+          onNodeDelete={(node) => this.showDeleteNodeModal(node)} 
+          onNodeEdit={(node) => this.showEditNodeModal(node)} 
+          onNodeAdd={(node) => this.showAddSimulatorModal(node)} 
+          onNodeExport={node => this.exportNode(node)}
+          onSimulatorEdit={(node, index) => this.showEditSimulatorModal(node, index)} 
+          onSimulatorDelete={(node, index) => this.showDeleteSimulatorModal(node, index)} 
+        />
 
         <NewNodeDialog show={this.state.newNodeModal} onClose={(data) => this.closeNewNodeModal(data)} nodes={this.state.nodes} />
         <EditNodeDialog node={this.state.modalData} show={this.state.editNodeModal} onClose={(data) => this.closeEditNodeModal(data)} nodes={this.state.nodes} />
         <NewSimulatorDialog show={this.state.addSimulatorModal} onClose={(data) => this.closeAddSimulatorModal(data)} node={this.state.modalData}/>
+        <ImportNodeDialog show={this.state.importNodeModal} onClose={data => this.closeImportNodeModal(data)} nodes={this.state.nodes} />
 
         {this.state.editSimulatorModal &&
           <EditSimulatorDialog simulator={this.state.modalData.simulators[this.state.modalIndex]} show={this.state.editSimulatorModal} onClose={(data) => this.closeEditSimulatorModal(data)} node={this.state.modalData} />