Add simulators to nodes

src/components/dialog/new-simulator.js

@@ -36,8 +36,7 @@ class NewSimulatorDialog extends Component {
     super(props);
 
     this.state = {
-      name: '',
-      endpoint: ''
+      name: ''
     };
   }
 
@@ -54,27 +53,21 @@ class NewSimulatorDialog extends Component {
   }
 
   resetState() {
-    this.setState({ name: '', endpoint: '' });
+    this.setState({ name: '' });
   }
 
   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;
+    this.valid = name;
 
     // return state to control
     if (target === 'name') return name ? "success" : "error";
-    else return endpoint ? "success" : "error";
   }
 
   render() {
@@ -86,11 +79,6 @@ class NewSimulatorDialog extends Component {
             <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>
     );

src/components/node-tree.js

@@ -44,11 +44,15 @@ class NodeTree extends React.Component {
     var buttons = [];
 
     if (rowInfo.parentNode == null) {
-      buttons.push(<Button bsSize="small"><Glyphicon glyph="plus" /></Button>)
+      buttons.push(<Button bsSize="small" onClick={() => this.props.onNodeAdd(rowInfo.node)}><Glyphicon glyph="plus" /></Button>);
+      buttons.push(<Button bsSize="small" onClick={() => this.props.onNodeEdit(rowInfo.node)}><Glyphicon glyph="pencil" /></Button>);
+      buttons.push(<Button bsSize="small" onClick={() => this.props.onNodeDelete(rowInfo.node)}><Glyphicon glyph="trash" /></Button>);
+    } else {
+      buttons.push(<Button bsSize="small" onClick={() => this.props.onSimulatorEdit(rowInfo.node)}><Glyphicon glyph="pencil" /></Button>);
+      buttons.push(<Button bsSize="small" onClick={() => this.props.onSimulatorDelete(rowInfo.node)}><Glyphicon glyph="trash" /></Button>);
     }
 
-    buttons.push(<Button bsSize="small" onClick={() => this.props.onEdit(rowInfo.node)}><Glyphicon glyph="pencil" /></Button>);
-    buttons.push(<Button bsSize="small" onClick={() => this.props.onDelete(rowInfo.node)}><Glyphicon glyph="trash" /></Button>);
+    console.log(rowInfo);
 
     return {
       buttons: buttons
@@ -62,7 +66,13 @@ class NodeTree extends React.Component {
       var treeData = [];
 
       nextProps.data.forEach((node) => {
-        treeData.push({ title: node.name, subtitle: node.endpoint, id: node._id });
+        var parent = { title: node.name, subtitle: node.endpoint, id: node._id, children: [], expanded: true };
+
+        node.simulators.forEach((simulator) => {
+          parent.children.push({ title: simulator.name });
+        });
+
+        treeData.push(parent);
       });
 
       this.setState({ treeData });

src/containers/simulators.js

@@ -24,11 +24,11 @@ import { Container } from 'flux/utils';
 import { Button, Modal, Glyphicon } from 'react-bootstrap';
 
 import AppDispatcher from '../app-dispatcher';
-//import SimulatorStore from '../stores/simulator-store';
 import NodeStore from '../stores/node-store';
 
 import NewNodeDialog from '../components/dialog/new-node';
 import EditNodeDialog from '../components/dialog/edit-node';
+import NewSimulatorDialog from '../components/dialog/new-simulator';
 import NodeTree from '../components/node-tree';
 
 class Simulators extends Component {
@@ -40,10 +40,16 @@ class Simulators extends Component {
     return {
       nodes: NodeStore.getState(),
 
-      newModal: false,
-      deleteModal: false,
-      editModal: false,
-      modalData: {}
+      newNodeModal: false,
+      deleteNodeModal: false,
+      editNodeModal: false,
+
+      addSimulatorModal: false,
+      editSimulatorModal: false,
+      deleteSimulatorModal: false,
+
+      modalData: {},
+      modalIndex: 0
     };
   }
 
@@ -53,8 +59,8 @@ class Simulators extends Component {
     });
   }
 
-  closeNewModal(data) {
-    this.setState({ newModal: false });
+  closeNewNodeModal(data) {
+    this.setState({ newNodeModal: false });
 
     if (data) {
       AppDispatcher.dispatch({
@@ -64,17 +70,17 @@ class Simulators extends Component {
     }
   }
 
-  showEditModal(data) {
+  showEditNodeModal(data) {
     // find node with id
     var node = this.state.nodes.find((element) => {
       return element._id === data.id;
     });
 
-    this.setState({ editModal: true, modalData: node });
+    this.setState({ editNodeModal: true, modalData: node });
   }
 
-  closeEditModal(data) {
-    this.setState({ editModal: false });
+  closeEditNodeModal(data) {
+    this.setState({ editNodeModal: false });
 
     if (data) {
       AppDispatcher.dispatch({
@@ -84,16 +90,16 @@ class Simulators extends Component {
     }
   }
 
-  showDeleteModal(data) {
+  showDeleteNodeModal(data) {
     // find node with id
     var node = this.state.nodes.find((element) => {
       return element._id === data.id;
     });
 
-    this.setState({ deleteModal: true, modalData: node });
+    this.setState({ deleteNodeModal: true, modalData: node });
   }
 
-  confirmDeleteModal() {
+  confirmDeleteNodeModal() {
     this.setState({ deleteModal: false });
 
     AppDispatcher.dispatch({
@@ -102,30 +108,71 @@ class Simulators extends Component {
     });
   }
 
+  showAddSimulatorModal(data) {
+    // find node with id
+    var node = this.state.nodes.find((element) => {
+      return element._id === data.id;
+    });
+
+    this.setState({ addSimulatorModal: true, modalData: node });
+  }
+
+  closeAddSimulatorModal(data) {
+    this.setState({ addSimulatorModal: false });
+
+    if (data) {
+      var node = this.state.modalData;
+      node.simulators.push(data);
+
+      AppDispatcher.dispatch({
+        type: 'nodes/start-edit',
+        data: node
+      });
+    }
+  }
+
   render() {
     return (
       <div className='section'>
         <h1>Simulators</h1>
 
-        <Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph="plus" /> Add Node</Button>
+        <Button onClick={() => this.setState({ newNodeModal: true })}><Glyphicon glyph="plus" /> Add Node</Button>
 
-        <NodeTree data={this.state.nodes} onDelete={(node) => this.showDeleteModal(node)} onEdit={(node) => this.showEditModal(node)} />
+        <NodeTree data={this.state.nodes} onNodeDelete={(node) => this.showDeleteNodeModal(node)} onNodeEdit={(node) => this.showEditNodeModal(node)} onNodeAdd={(node) => this.showAddSimulatorModal(node)} onSimulatorEdit={(index) => this.onSimulatorEdit(index)} onSimulatorDelete={(index) => this.onSimulatorDelete(index)} />
 
-        <NewNodeDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
-        <EditNodeDialog node={this.state.modalData} show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} />
+        <NewNodeDialog show={this.state.newNodeModal} onClose={(data) => this.closeNewNodeModal(data)} />
+        <EditNodeDialog node={this.state.modalData} show={this.state.editNodeModal} onClose={(data) => this.closeEditNodeModal(data)} />
+        <NewSimulatorDialog show={this.state.addSimulatorModal} onClose={(data) => this.closeAddSimulatorModal(data)} />
 
-        <Modal show={this.state.deleteModal}>
+        <Modal show={this.state.deleteNodeModal}>
           <Modal.Header>
             <Modal.Title>Delete Node</Modal.Title>
           </Modal.Header>
 
           <Modal.Body>
             Are you sure you want to delete the node <strong>'{this.state.modalData.name}'</strong>?
+            <br />
+            This will delete all simulators assigned to this node.
           </Modal.Body>
 
           <Modal.Footer>
-            <Button onClick={() => this.setState({ deleteModal: false })}>Cancel</Button>
-            <Button bsStyle="danger" onClick={() => this.confirmDeleteModal()}>Delete</Button>
+            <Button onClick={() => this.setState({ deleteNodeModal: false })}>Cancel</Button>
+            <Button bsStyle="danger" onClick={() => this.confirmDeleteNodeModal()}>Delete</Button>
+          </Modal.Footer>
+        </Modal>
+
+        <Modal show={this.state.deleteSimulatorModal}>
+          <Modal.Header>
+            <Modal.Title>Delete Simulator</Modal.Title>
+          </Modal.Header>
+
+          <Modal.Body>
+            {/*Are you sure you want to delete the simulator <strong>'{this.state.modalData.simulators[this.state.modalIndex].name}'</strong>?*/}
+          </Modal.Body>
+
+          <Modal.Footer>
+            <Button onClick={() => this.setState({ deleteSimulatorModal: false })}>Cancel</Button>
+            <Button bsStyle="danger" onClick={() => this.confirmDeleteSimulatorModal()}>Delete</Button>
           </Modal.Footer>
         </Modal>
       </div>