Add import dialog

Add empty export dialog
Add export button to table

src/components/dialog/export-simulator.js

@@ -0,0 +1,88 @@
+/**
+ * File: export-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 ExportSimulatorDialog 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: '' });
+  }
+
+  validateForm(target) {
+    // check all controls
+    var endpoint = true;
+    var name = true;
+
+    if (this.state.name === '') {
+      name = false;
+    }
+
+    if (this.state.endpoint === '') {
+      endpoint = false;
+    }
+
+    this.valid = endpoint && name;
+
+    // return state to control
+    if (target === 'name') return name ? "success" : "error";
+    else return endpoint ? "success" : "error";
+  }
+
+  render() {
+    return (
+      <Dialog show={this.props.show} title="Export Simulator" buttonTitle="Export" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
+        <form>
+          <FormGroup controlId="name" validationState={this.validateForm('name')}>
+            <ControlLabel>Name</ControlLabel>
+            <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="endpoint" validationState={this.validateForm('endpoint')}>
+            <ControlLabel>Endpoint</ControlLabel>
+            <FormControl type="text" placeholder="Enter endpoint" value={this.state.endpoint} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+        </form>
+      </Dialog>
+    );
+  }
+}
+
+export default ExportSimulatorDialog;

src/components/dialog/import-simulator.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/table-column.js

@@ -28,6 +28,7 @@ class TableColumn extends Component {
     width: null,
     editButton: false,
     deleteButton: false,
+    exportButton: false,
     link: '/',
     linkKey: '',
     dataIndex: false,

src/components/table.js

@@ -102,6 +102,10 @@ class CustomTable extends Component {
       cell.push(<Checkbox className="table-control-checkbox" inline checked={checkboxKey ? data[checkboxKey] : null} onChange={e => child.props.onChecked(index, e)}></Checkbox>);
     }
 
+    if (child.props.exportButton) {
+      cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onExport(index)}><Glyphicon glyph='export' /></Button>);
+    }
+
     return cell;
   }
 

src/containers/simulators.js

@@ -32,6 +32,8 @@ 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';
 
 class Simulators extends Component {
   static getStores() {
@@ -46,6 +48,8 @@ class Simulators extends Component {
       newNodeModal: false,
       deleteNodeModal: false,
       editNodeModal: false,
+      importModal: false,
+      exportModal: false,
 
       addSimulatorModal: false,
       editSimulatorModal: false,
@@ -186,6 +190,22 @@ class Simulators extends Component {
       token: this.state.sessionToken
     });
   }
+  
+  closeImportModal(data) {
+    this.setState({ importModal: false });
+
+    if (data) {
+      AppDispatcher.dispatch({
+        type: 'simulators/start-add',
+        data: data
+      });
+    }
+  }
+
+  labelStyle(value) {
+    if (value === true) return 'success';
+    else return 'warning';
+  }
 
   onTreeDataChange(nodes) {
     // update all at once