From 984d40134f651512cf76d535ac3329d63c8106fd Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Sat, 8 Jul 2017 00:23:01 +0200 Subject: [PATCH] Add simulator editing and moving --- src/components/dialog/edit-simulator.js | 21 ++------ src/components/node-tree.js | 70 +++++++++++++++++-------- src/containers/simulators.js | 67 +++++++++++++++++++++-- 3 files changed, 116 insertions(+), 42 deletions(-) diff --git a/src/components/dialog/edit-simulator.js b/src/components/dialog/edit-simulator.js index 3f7f64e..6469b89 100644 --- a/src/components/dialog/edit-simulator.js +++ b/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 { this.handleChange(e)} /> - - Endpoint - this.handleChange(e)} /> - - ); diff --git a/src/components/node-tree.js b/src/components/node-tree.js index 1cf8226..1e60038 100644 --- a/src/components/node-tree.js +++ b/src/components/node-tree.js @@ -48,47 +48,75 @@ class NodeTree extends React.Component { buttons.push(); buttons.push(); } else { - buttons.push(); - buttons.push(); - } + // get child index + var index = rowInfo.path[1] - rowInfo.path[0] - 1; - console.log(rowInfo); + buttons.push(); + buttons.push(); + } 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 ( 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)} /> ); } diff --git a/src/containers/simulators.js b/src/containers/simulators.js index 8fd4a53..fd6c450 100644 --- a/src/containers/simulators.js +++ b/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 (
@@ -138,12 +195,16 @@ class Simulators extends Component { - this.showDeleteNodeModal(node)} onNodeEdit={(node) => this.showEditNodeModal(node)} onNodeAdd={(node) => this.showAddSimulatorModal(node)} onSimulatorEdit={(index) => this.onSimulatorEdit(index)} onSimulatorDelete={(index) => this.onSimulatorDelete(index)} /> + 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)} /> this.closeNewNodeModal(data)} /> this.closeEditNodeModal(data)} /> this.closeAddSimulatorModal(data)} /> + {this.state.editSimulatorModal && + this.closeEditSimulatorModal(data)} /> + } + Delete Node @@ -167,7 +228,7 @@ class Simulators extends Component { - {/*Are you sure you want to delete the simulator '{this.state.modalData.simulators[this.state.modalIndex].name}'?*/} + Are you sure you want to delete the simulator '{this.state.modalName}'?