From 232e972657ebaf322b232807fc349d1082fcd216 Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Thu, 6 Jul 2017 11:41:26 +0200 Subject: [PATCH] Add node dialogs and backend --- src/components/dialog/edit-node.js | 98 ++++++++++++++++++++++++++++++ src/components/dialog/new-node.js | 97 +++++++++++++++++++++++++++++ src/components/node-tree.js | 24 ++++++-- src/containers/simulators.js | 89 +++++++++++++-------------- 4 files changed, 256 insertions(+), 52 deletions(-) create mode 100644 src/components/dialog/edit-node.js create mode 100644 src/components/dialog/new-node.js diff --git a/src/components/dialog/edit-node.js b/src/components/dialog/edit-node.js new file mode 100644 index 0000000..da72a4a --- /dev/null +++ b/src/components/dialog/edit-node.js @@ -0,0 +1,98 @@ +/** + * File: edit-node.js + * Author: Markus Grigull + * Date: 06.07.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 . + ******************************************************************************/ + +import React from 'react'; +import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; + +import Dialog from './dialog'; + +class NewNodeDialog extends React.Component { + valid: false; + + constructor(props) { + super(props); + + this.state = { + name: '', + endpoint: '', + config: {}, + simulators: [], + _id: '' + }; + } + + 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: this.props.node.name, endpoint: this.props.node.endpoint, config: this.props.node.config, simulators: this.props.node.simulators, _id: this.props.node._id }); + } + + 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 ( + this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> +
+ + Name + this.handleChange(e)} /> + + + + Endpoint + this.handleChange(e)} /> + + +
+
+ ); + } +} + +export default NewNodeDialog; diff --git a/src/components/dialog/new-node.js b/src/components/dialog/new-node.js new file mode 100644 index 0000000..ae89a35 --- /dev/null +++ b/src/components/dialog/new-node.js @@ -0,0 +1,97 @@ +/** + * File: new-node.js + * Author: Markus Grigull + * Date: 06.07.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 . + ******************************************************************************/ + +import React from 'react'; +import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; + +import Dialog from './dialog'; + +class NewNodeDialog extends React.Component { + valid: false; + + constructor(props) { + super(props); + + this.state = { + name: '', + endpoint: '', + config: {}, + simulators: [] + }; + } + + 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: '', config: {}, simulators: [] }); + } + + 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 ( + this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> +
+ + Name + this.handleChange(e)} /> + + + + Endpoint + this.handleChange(e)} /> + + +
+
+ ); + } +} + +export default NewNodeDialog; diff --git a/src/components/node-tree.js b/src/components/node-tree.js index 6ef02b7..ea79d6c 100644 --- a/src/components/node-tree.js +++ b/src/components/node-tree.js @@ -28,10 +28,7 @@ class NodeTree extends React.Component { super(props); this.state = { - treeData: [ - { title: 'Chicken', subtitle: 'localhost:5000', children: [ { title: 'Egg' } ], expanded: true }, - { title: 'Cow', subtitle: 'localhost:5001', children: [ { title: 'Milk' }, { title: 'Cheese' }], expanded: true }, - ] + treeData: [] }; } @@ -50,20 +47,35 @@ class NodeTree extends React.Component { buttons.push() } - buttons.push(); + buttons.push(); + buttons.push(); return { buttons: buttons }; } + 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) => { + treeData.push({ title: node.name, subtitle: node.endpoint, id: node._id }); + }); + + this.setState({ treeData }); + } + } + render() { return ( this.setState({ treeData }) } style={{ height: 400 }} - maxDepth='2' + maxDepth={ 2 } 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 8a9c01e..a6024c5 100644 --- a/src/containers/simulators.js +++ b/src/containers/simulators.js @@ -27,10 +27,8 @@ import AppDispatcher from '../app-dispatcher'; //import SimulatorStore from '../stores/simulator-store'; import NodeStore from '../stores/node-store'; -import Table from '../components/table'; -import TableColumn from '../components/table-column'; -import NewSimulatorDialog from '../components/dialog/new-simulator'; -import EditSimulatorDialog from '../components/dialog/edit-simulator'; +import NewNodeDialog from '../components/dialog/new-node'; +import EditNodeDialog from '../components/dialog/edit-node'; import NodeTree from '../components/node-tree'; class Simulators extends Component { @@ -45,7 +43,7 @@ class Simulators extends Component { newModal: false, deleteModal: false, editModal: false, - modalSimulator: {} + modalData: {} }; } @@ -56,81 +54,80 @@ class Simulators extends Component { } closeNewModal(data) { - this.setState({ newModal : false }); + this.setState({ newModal: false }); if (data) { AppDispatcher.dispatch({ - type: 'simulators/start-add', + type: 'nodes/start-add', data: data }); } } + showEditModal(data) { + // find node with id + var node = this.state.nodes.find((element) => { + return element._id === data.id; + }); + + this.setState({ editModal: true, modalData: node }); + } + + closeEditModal(data) { + this.setState({ editModal: false }); + + if (data) { + AppDispatcher.dispatch({ + type: 'nodes/start-edit', + data: data + }); + } + } + + showDeleteModal(data) { + // find node with id + var node = this.state.nodes.find((element) => { + return element._id === data.id; + }); + + this.setState({ deleteModal: true, modalData: node }); + } + confirmDeleteModal() { this.setState({ deleteModal: false }); AppDispatcher.dispatch({ - type: 'simulators/start-remove', - data: this.state.modalSimulator + type: 'nodes/start-remove', + data: this.state.modalData }); } - closeEditModal(data) { - this.setState({ editModal : false }); - - if (data) { - AppDispatcher.dispatch({ - type: 'simulators/start-edit', - data: data - }); - } - } - - labelStyle(value) { - if (value === true) return 'success'; - else return 'warning'; - } - - labelModifier(value) { - if (value === true) return 'Running'; - else return 'Not running'; - } - render() { return (

Simulators

- + - + this.showDeleteModal(node)} onEdit={(node) => this.showEditModal(node)} /> - {/* - this.labelStyle(value)} labelModifier={(value) => this.labelModifier(value)} /> - - this.setState({ editModal: true, modalSimulator: this.state.simulators[index] })} onDelete={(index) => this.setState({ deleteModal: true, modalSimulator: this.state.simulators[index] })} /> -
- - - - this.closeNewModal(data)} /> - - this.closeEditModal(data)} simulator={this.state.modalSimulator} /> + this.closeNewModal(data)} /> + this.closeEditModal(data)} /> - Delete Simulator + Delete Node - Are you sure you want to delete the simulator '{this.state.modalSimulator.name}'? + Are you sure you want to delete the node '{this.state.modalData.name}'? - */} +
); }