Add simulator editing and moving

src/components/dialog/edit-simulator.js

@@ -37,9 +37,7 @@ class EditSimulatorDialog extends Component {
     super(props);
 
     this.state = {
-      name: '',
-      endpoint: '',
-      _id: ''
+      name: ''
     };
   }
 
@@ -57,30 +55,22 @@ class EditSimulatorDialog extends Component {
 
   resetState() {
     this.setState({
-      name: this.props.simulator.name,
-      endpoint: this.props.simulator.endpoint,
-      _id: this.props.simulator._id
+      name: this.props.simulator.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() {
@@ -92,11 +82,6 @@ class EditSimulatorDialog 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

@@ -48,47 +48,75 @@ class NodeTree extends React.Component {
       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>);
-    }
+      // get child index
+      var index = rowInfo.path[1] - rowInfo.path[0] - 1;
 
-    console.log(rowInfo);
+      buttons.push(<Button bsSize="small" onClick={() => this.props.onSimulatorEdit(rowInfo.parentNode, index)}><Glyphicon glyph="pencil" /></Button>);
+      buttons.push(<Button bsSize="small" onClick={() => this.props.onSimulatorDelete(rowInfo.parentNode, index)}><Glyphicon glyph="trash" /></Button>);
+    }
 
     return {
       buttons: buttons
     };
   }
 
+  nodesToTreeData(nodes) {
+    var treeData = [];
+
+    nodes.forEach((node) => {
+      var parent = { title: node.name, subtitle: node.endpoint, id: node._id, config: node.config, children: [], expanded: true };
+
+      node.simulators.forEach((simulator) => {
+        parent.children.push({ title: simulator.name });
+      });
+
+      treeData.push(parent);
+    });
+
+    return treeData;
+  }
+
+  treeDataToNodes(treeData) {
+    var nodes = [];
+
+    treeData.forEach((data) => {
+      var node = { name: data.title, endpoint: data.subtitle, _id: data.id, config: data.config, simulators: [] };
+
+      data.children.forEach((child) => {
+        node.simulators.push({ name: child.title });
+      });
+
+      nodes.push(node);
+    });
+
+    return nodes;
+  }
+
   componentWillReceiveProps(nextProps) {
     // compare if data changed
     if (this.props.data == null || this.props.data !== nextProps.data) {
       // generate new state
-      var treeData = [];
-
-      nextProps.data.forEach((node) => {
-        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);
-      });
-
+      var treeData = this.nodesToTreeData(nextProps.data);
       this.setState({ treeData });
     }
   }
 
+  onDataChange(treeData) {
+    this.setState({ treeData });
+
+    this.props.onDataChange(this.treeDataToNodes(treeData))
+  }
+
   render() {
     return (
       <SortableTree
-        treeData={ this.state.treeData }
-        onChange={ (treeData) => this.setState({ treeData }) }
+        treeData={this.state.treeData}
+        onChange={(treeData) => this.onDataChange(treeData)}
         style={{ height: 400 }}
         maxDepth={ 2 }
-        canDrag={ (node, path) => this.canNodeDrag(node, path) }
-        canDrop={ (node, prevPath) => this.canNodeDrop(node, prevPath) }
-        generateNodeProps={(rowInfo) => this.generateNodeProps(rowInfo) }
+        canDrag={(node, path) => this.canNodeDrag(node, path)}
+        canDrop={(node, prevPath) => this.canNodeDrop(node, prevPath)}
+        generateNodeProps={(rowInfo) => this.generateNodeProps(rowInfo)}
       />
     );
   }

src/containers/simulators.js

@@ -29,6 +29,7 @@ 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 EditSimulatorDialog from '../components/dialog/edit-simulator';
 import NodeTree from '../components/node-tree';
 
 class Simulators extends Component {
@@ -49,7 +50,8 @@ class Simulators extends Component {
       deleteSimulatorModal: false,
 
       modalData: {},
-      modalIndex: 0
+      modalIndex: 0,
+      modalName: ''
     };
   }
 
@@ -131,6 +133,61 @@ class Simulators extends Component {
     }
   }
 
+  showEditSimulatorModal(data, index) {
+    // find node with id
+    var node = this.state.nodes.find((element) => {
+      return element._id === data.id;
+    });
+
+    this.setState({ editSimulatorModal: true, modalData: node, modalIndex: index });
+  }
+
+  closeEditSimulatorModal(data) {
+    this.setState({ editSimulatorModal: false });
+
+    if (data) {
+      var node = this.state.modalData;
+      node.simulators[this.state.modalIndex] = data;
+
+      AppDispatcher.dispatch({
+        type: 'nodes/start-edit',
+        data: node
+      });
+    }
+  }
+
+  showDeleteSimulatorModal(data, index) {
+    // find node with id
+    var node = this.state.nodes.find((element) => {
+      return element._id === data.id;
+    });
+
+    this.setState({ deleteSimulatorModal: true, modalData: node, modalIndex: index, modalName: data.children[index].title });
+  }
+
+  confirmDeleteSimulatorModal() {
+    this.setState({ deleteSimulatorModal: false });
+
+    // remove simulator
+    var node = this.state.modalData;
+    node.simulators.splice(this.state.modalIndex);
+
+    AppDispatcher.dispatch({
+      type: 'nodes/start-edit',
+      data: node
+    });
+  }
+
+  onTreeDataChange(nodes) {
+    // update all at once
+    nodes.forEach((node) => {
+      AppDispatcher.dispatch({
+        type: 'nodes/start-edit',
+        data: node
+      });
+    });
+  }
+
   render() {
     return (
       <div className='section'>
@@ -138,12 +195,16 @@ class Simulators extends Component {
 
         <Button onClick={() => this.setState({ newNodeModal: true })}><Glyphicon glyph="plus" /> Add Node</Button>
 
-        <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)} />
+        <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)} />
 
         <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)} />
 
+        {this.state.editSimulatorModal &&
+          <EditSimulatorDialog simulator={this.state.modalData.simulators[this.state.modalIndex]} show={this.state.editSimulatorModal} onClose={(data) => this.closeEditSimulatorModal(data)} />
+        }
+
         <Modal show={this.state.deleteNodeModal}>
           <Modal.Header>
             <Modal.Title>Delete Node</Modal.Title>
@@ -167,7 +228,7 @@ class Simulators extends Component {
           </Modal.Header>
 
           <Modal.Body>
-            {/*Are you sure you want to delete the simulator <strong>'{this.state.modalData.simulators[this.state.modalIndex].name}'</strong>?*/}
+            Are you sure you want to delete the simulator <strong>'{this.state.modalName}'</strong>?
           </Modal.Body>
 
           <Modal.Footer>