From 86a6bac55eb15a2c2de4e40099875e7e827ce4ee Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Tue, 27 Jun 2017 09:58:10 +0200 Subject: [PATCH] Add node component --- package.json | 9 +-- src/components/node-tree.js | 75 +++++++++++++++++++++++++ src/containers/simulators.js | 18 ++++-- src/data-managers/nodes-data-manager.js | 24 ++++++++ src/data-managers/rest-data-manager.js | 2 +- src/stores/node-store.js | 25 +++++++++ 6 files changed, 142 insertions(+), 11 deletions(-) create mode 100644 src/components/node-tree.js create mode 100644 src/data-managers/nodes-data-manager.js create mode 100644 src/stores/node-store.js diff --git a/package.json b/package.json index a8cc8a2..3d0b18e 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,12 @@ "dependencies": { "bootstrap": "^3.3.7", "classnames": "^2.2.5", + "d3-scale": "^1.0.5", "es6-promise": "^4.0.5", "flux": "^3.1.2", + "gaugeJS": "^1.3.2", "immutable": "^3.8.1", + "rc-slider": "^7.0.1", "rd3": "^0.7.4", "react": "^15.4.2", "react-bootstrap": "^0.30.7", @@ -19,10 +22,8 @@ "react-notification-system": "^0.2.13", "react-rnd": "^4.2.2", "react-router": "^3.0.2", - "superagent": "^3.5.0", - "gaugeJS": "^1.3.2", - "d3-scale": "^1.0.5", - "rc-slider": "^7.0.1" + "react-sortable-tree": "^0.1.19", + "superagent": "^3.5.0" }, "devDependencies": { "chai": "^3.5.0", diff --git a/src/components/node-tree.js b/src/components/node-tree.js new file mode 100644 index 0000000..6ef02b7 --- /dev/null +++ b/src/components/node-tree.js @@ -0,0 +1,75 @@ +/** + * File: node-tree.js + * Author: Markus Grigull + * Date: 26.06.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 SortableTree from 'react-sortable-tree'; +import { Button, Glyphicon } from 'react-bootstrap'; + +class NodeTree extends React.Component { + constructor(props) { + 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 }, + ] + }; + } + + canNodeDrag(node, path) { + return (node.parentNode != null); + } + + canNodeDrop(node, prevPath) { + return (node.nextParent != null); + } + + generateNodeProps(rowInfo) { + var buttons = []; + + if (rowInfo.parentNode == null) { + buttons.push() + } + + buttons.push(); + + return { + buttons: buttons + }; + } + + render() { + return ( + this.setState({ 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) } + /> + ); + } +} + +export default NodeTree; diff --git a/src/containers/simulators.js b/src/containers/simulators.js index e9a2af8..8a9c01e 100644 --- a/src/containers/simulators.js +++ b/src/containers/simulators.js @@ -24,21 +24,23 @@ import { Container } from 'flux/utils'; import { Button, Modal, Glyphicon } from 'react-bootstrap'; import AppDispatcher from '../app-dispatcher'; -import SimulatorStore from '../stores/simulator-store'; +//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 NodeTree from '../components/node-tree'; class Simulators extends Component { static getStores() { - return [ SimulatorStore ]; + return [ NodeStore ]; } static calculateState() { return { - simulators: SimulatorStore.getState(), + nodes: NodeStore.getState(), newModal: false, deleteModal: false, @@ -49,7 +51,7 @@ class Simulators extends Component { componentWillMount() { AppDispatcher.dispatch({ - type: 'simulators/start-load' + type: 'nodes/start-load' }); } @@ -99,7 +101,11 @@ class Simulators extends Component {

Simulators

- + + + + + {/*
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] })} /> @@ -124,7 +130,7 @@ class Simulators extends Component { - + */} ); } diff --git a/src/data-managers/nodes-data-manager.js b/src/data-managers/nodes-data-manager.js new file mode 100644 index 0000000..a253ac9 --- /dev/null +++ b/src/data-managers/nodes-data-manager.js @@ -0,0 +1,24 @@ +/** + * File: nodes-data-manager.js + * Author: Markus Grigull + * Date: 26.06.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 RestDataManager from './rest-data-manager'; + +export default new RestDataManager('node', '/nodes'); diff --git a/src/data-managers/rest-data-manager.js b/src/data-managers/rest-data-manager.js index 51560a2..749cdcd 100644 --- a/src/data-managers/rest-data-manager.js +++ b/src/data-managers/rest-data-manager.js @@ -22,7 +22,7 @@ import RestAPI from '../api/rest-api'; import AppDispatcher from '../app-dispatcher'; -const HOST = process.env.REACT_APP_HTTP_PROXY || ""; +const HOST = process.env.REACT_APP_HTTP_PROXY || "http://localhost:4000"; const API_URL = HOST + '/api/v1'; class RestDataManager { diff --git a/src/stores/node-store.js b/src/stores/node-store.js new file mode 100644 index 0000000..8945885 --- /dev/null +++ b/src/stores/node-store.js @@ -0,0 +1,25 @@ +/** + * File: node-store.js + * Author: Markus Grigull + * Date: 26.06.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 ArrayStore from './array-store'; +import NodesDataManager from '../data-managers/nodes-data-manager'; + +export default new ArrayStore('nodes', NodesDataManager);