diff --git a/package.json b/package.json index 57c7657..79cde11 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "flux": "^3.1.2", "gaugeJS": "^1.3.2", "immutable": "^3.8.1", - "rc-slider": "^7.0.1", + "rc-slider": "^8.3.0", "react": "^15.4.2", "react-bootstrap": "^0.31.1", "react-contextmenu": "^2.3.0", @@ -24,14 +24,14 @@ "react-dnd-html5-backend": "^2.2.4", "react-dom": "^15.4.2", "react-notification-system": "^0.2.13", - "react-rnd": "^4.2.2", - "react-router": "^3.0.2", + "react-rnd": "^5.0.9", + "react-router": "^4.1.2", "react-sortable-tree": "^0.1.19", "superagent": "^3.5.0" }, "devDependencies": { - "chai": "^3.5.0", - "react-scripts": "0.9.3" + "chai": "^4.1.0", + "react-scripts": "1.0.10" }, "scripts": { "start": "react-scripts start", diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js index b0dff93..3f3058a 100644 --- a/src/components/dialog/dialog.js +++ b/src/components/dialog/dialog.js @@ -19,17 +19,10 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { Modal, Button } from 'react-bootstrap'; -class Dialog extends Component { - static propTypes = { - title: PropTypes.string.isRequired, - show: PropTypes.bool.isRequired, - buttonTitle: PropTypes.string.isRequired, - onClose: PropTypes.func.isRequired - }; - +class Dialog extends React.Component { closeModal() { this.props.onClose(false); } diff --git a/src/components/dialog/edit-project.js b/src/components/dialog/edit-project.js index d1fe9b4..62d8c41 100644 --- a/src/components/dialog/edit-project.js +++ b/src/components/dialog/edit-project.js @@ -19,19 +19,12 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; import Dialog from './dialog'; -class EditProjectDialog extends Component { - static propTypes = { - show: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - project: PropTypes.object.isRequired, - simulations: PropTypes.array.isRequired - }; - +class EditProjectDialog extends React.Component { valid: true; constructor(props) { diff --git a/src/components/dialog/edit-simulation-model.js b/src/components/dialog/edit-simulation-model.js index de5855d..9a99480 100644 --- a/src/components/dialog/edit-simulation-model.js +++ b/src/components/dialog/edit-simulation-model.js @@ -19,21 +19,14 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; import Table from '../table'; import TableColumn from '../table-column'; import Dialog from './dialog'; -class EditSimulationModelDialog extends Component { - static propTypes = { - show: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - data: PropTypes.object.isRequired, - nodes: PropTypes.array.isRequired - }; - +class EditSimulationModelDialog extends React.Component { valid: false; constructor(props) { diff --git a/src/components/dialog/edit-simulation.js b/src/components/dialog/edit-simulation.js index 95860a0..0da9b29 100644 --- a/src/components/dialog/edit-simulation.js +++ b/src/components/dialog/edit-simulation.js @@ -19,18 +19,12 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; import Dialog from './dialog'; -class EditSimulationDialog extends Component { - static propTypes = { - show: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - simulation: PropTypes.object.isRequired - }; - +class EditSimulationDialog extends React.Component { valid: false; constructor(props) { diff --git a/src/components/dialog/edit-simulator.js b/src/components/dialog/edit-simulator.js index f7f6d76..ec4aa18 100644 --- a/src/components/dialog/edit-simulator.js +++ b/src/components/dialog/edit-simulator.js @@ -19,18 +19,12 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; import Dialog from './dialog'; -class EditSimulatorDialog extends Component { - static propTypes = { - show: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - simulator: PropTypes.object.isRequired - }; - +class EditSimulatorDialog extends React.Component { valid: false; constructor(props) { diff --git a/src/components/dialog/edit-user.js b/src/components/dialog/edit-user.js index 1720a3b..cc9e5d0 100644 --- a/src/components/dialog/edit-user.js +++ b/src/components/dialog/edit-user.js @@ -19,18 +19,12 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; import Dialog from './dialog'; -class EditUserDialog extends Component { - static propTypes = { - show: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - user: PropTypes.object.isRequired - }; - +class EditUserDialog extends React.Component { valid: true; constructor(props) { diff --git a/src/components/dialog/edit-visualization.js b/src/components/dialog/edit-visualization.js index 8524bce..3cc2a09 100644 --- a/src/components/dialog/edit-visualization.js +++ b/src/components/dialog/edit-visualization.js @@ -19,18 +19,12 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; import Dialog from './dialog'; -class EditVisualizationDialog extends Component { - static propTypes = { - show: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - visualization: PropTypes.object.isRequired - }; - +class EditVisualizationDialog extends React.Component { valid: false; constructor(props) { diff --git a/src/components/dialog/edit-widget-control-creator.js b/src/components/dialog/edit-widget-control-creator.js index bfe6fab..7a12b29 100644 --- a/src/components/dialog/edit-widget-control-creator.js +++ b/src/components/dialog/edit-widget-control-creator.js @@ -37,7 +37,7 @@ export default function createControls(widgetType = null, widget = null, session var dialogControls = []; switch(widgetType) { - case 'Value': { + case 'Value': let valueBoundOnChange = (e) => { handleChange([e, {target: {id: 'signal', value: 0}}]); } @@ -45,10 +45,9 @@ export default function createControls(widgetType = null, widget = null, session validateForm(id)} simulation={simulation} handleChange={(e) => valueBoundOnChange(e)} />, validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />, handleChange(e)} /> - ) - } + ); break; - case 'Plot': { + case 'Plot': let plotBoundOnChange = (e) => { handleChange([e, {target: {id: 'signals', value: []}}]); } @@ -56,54 +55,54 @@ export default function createControls(widgetType = null, widget = null, session validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />, validateForm(id)} simulation={simulation} handleChange={(e) => plotBoundOnChange(e)} />, validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />, - handleChange(e)} />) - } + handleChange(e)} /> + ); break; - case 'Table': { + case 'Table': dialogControls.push( - validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />) - } + validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} /> + ); break; - case 'Image': { + case 'Image': dialogControls.push( validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />, - handleChange(e)} />); - } + handleChange(e)} /> + ); break; - case 'Gauge': { + case 'Gauge': let gaugeBoundOnChange = (e) => { handleChange([e, {target: {id: 'signal', value: ''}}]); } dialogControls.push( validateForm(id)} simulation={simulation} handleChange={(e) => gaugeBoundOnChange(e) } />, - validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />) - } + validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} /> + ); break; - case 'PlotTable': { + case 'PlotTable': let plotTableBoundOnChange = (e) => { handleChange([e, {target: {id: 'preselectedSignals', value: []}}]); } dialogControls.push( validateForm(id)} simulation={simulation} handleChange={(e) => plotTableBoundOnChange(e)} />, validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />, - handleChange(e)} />) - } + handleChange(e)} /> + ); break; - case 'Slider': { + case 'Slider': dialogControls.push( - validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />) - } + validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} /> + ); break; - case 'Button': { + case 'Button': dialogControls.push( validateForm(id)} handleChange={(e) => handleChange(e)} />, - validateForm(id)} handleChange={(e) => handleChange(e)} />) - } + validateForm(id)} handleChange={(e) => handleChange(e)} /> + ); break; - case 'Box': { + case 'Box': dialogControls.push( - validateForm(id)} handleChange={(e) => handleChange(e)} />) - } + validateForm(id)} handleChange={(e) => handleChange(e)} /> + ); break; case 'Label': dialogControls.push( diff --git a/src/components/dialog/edit-widget.js b/src/components/dialog/edit-widget.js index 90416f4..825f661 100644 --- a/src/components/dialog/edit-widget.js +++ b/src/components/dialog/edit-widget.js @@ -19,20 +19,14 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; //import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; import Dialog from './dialog'; import createControls from './edit-widget-control-creator'; -class EditWidgetDialog extends Component { - static propTypes = { - sessionToken: PropTypes.string.isRequired, - show: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired - }; - +class EditWidgetDialog extends React.Component { valid: true; constructor(props) { diff --git a/src/components/dialog/new-project.js b/src/components/dialog/new-project.js index d61d53a..43e0ab2 100644 --- a/src/components/dialog/new-project.js +++ b/src/components/dialog/new-project.js @@ -19,18 +19,12 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; import Dialog from './dialog'; -class NewProjectDialog extends Component { - static propTypes = { - show: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - simulations: PropTypes.array.isRequired - }; - +class NewProjectDialog extends React.Component { valid: false; constructor(props) { diff --git a/src/components/dialog/new-simulation-model.js b/src/components/dialog/new-simulation-model.js index 79b3548..205c41c 100644 --- a/src/components/dialog/new-simulation-model.js +++ b/src/components/dialog/new-simulation-model.js @@ -19,20 +19,14 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { FormGroup, FormControl, ControlLabel, HelpBlock } from 'react-bootstrap'; import Table from '../table'; import TableColumn from '../table-column'; import Dialog from './dialog'; -class NewSimulationModelDialog extends Component { - static propTypes = { - show: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - nodes: PropTypes.array.isRequired - }; - +class NewSimulationModelDialog extends React.Component { valid: false; constructor(props) { diff --git a/src/components/dialog/new-simulation.js b/src/components/dialog/new-simulation.js index e0d6313..cfe0bc1 100644 --- a/src/components/dialog/new-simulation.js +++ b/src/components/dialog/new-simulation.js @@ -19,17 +19,12 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; import Dialog from './dialog'; -class NewSimulationDialog extends Component { - static propTypes = { - show: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired - }; - +class NewSimulationDialog extends React.Component { valid: false; constructor(props) { diff --git a/src/components/dialog/new-simulator.js b/src/components/dialog/new-simulator.js index 3d9890c..a6160ae 100644 --- a/src/components/dialog/new-simulator.js +++ b/src/components/dialog/new-simulator.js @@ -19,17 +19,12 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; import Dialog from './dialog'; -class NewSimulatorDialog extends Component { - static propTypes = { - show: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired - }; - +class NewSimulatorDialog extends React.Component { valid: false; constructor(props) { diff --git a/src/components/dialog/new-user.js b/src/components/dialog/new-user.js index fd01f99..9746f41 100644 --- a/src/components/dialog/new-user.js +++ b/src/components/dialog/new-user.js @@ -19,17 +19,12 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { FormGroup, FormControl, ControlLabel, HelpBlock } from 'react-bootstrap'; import Dialog from './dialog'; -class NewUserDialog extends Component { - static propTypes = { - show: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired - }; - +class NewUserDialog extends React.Component { valid: false; constructor(props) { diff --git a/src/components/dialog/new-visualization.js b/src/components/dialog/new-visualization.js index a735b04..2f5f212 100644 --- a/src/components/dialog/new-visualization.js +++ b/src/components/dialog/new-visualization.js @@ -19,17 +19,12 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap'; import Dialog from './dialog'; -class NewVisualzationDialog extends Component { - static propTypes = { - show: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired - }; - +class NewVisualzationDialog extends React.Component { valid: false; constructor(props) { diff --git a/src/components/dropzone.js b/src/components/dropzone.js index 21bad6b..7a9af88 100644 --- a/src/components/dropzone.js +++ b/src/components/dropzone.js @@ -19,7 +19,7 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { DropTarget } from 'react-dnd'; import classNames from 'classnames'; @@ -59,14 +59,7 @@ function collect(connect, monitor) { }; } -class Dropzone extends Component { - static propTypes = { - connectDropTarget: PropTypes.func.isRequired, - isOver: PropTypes.bool.isRequired, - canDrop: PropTypes.bool.isRequired, - onDrop: PropTypes.func.isRequired - }; - +class Dropzone extends React.Component { render() { var toolboxClass = classNames({ 'box-content': true, diff --git a/src/components/menu-sidebar.js b/src/components/menu-sidebar.js index 152644a..110a206 100644 --- a/src/components/menu-sidebar.js +++ b/src/components/menu-sidebar.js @@ -20,7 +20,7 @@ ******************************************************************************/ import React, { Component } from 'react'; -import { Link } from 'react-router'; +import { NavLink } from 'react-router-dom'; class SidebarMenu extends Component { render() { @@ -29,14 +29,14 @@ class SidebarMenu extends Component {

Menu

    -
  • Home
  • -
  • Projects
  • -
  • Simulations
  • -
  • Simulators
  • +
  • Home
  • +
  • Projects
  • +
  • Simulations
  • +
  • Simulators
  • { this.props.currentRole === 'admin' ? -
  • User Management
  • : '' +
  • User Management
  • : '' } -
  • Logout
  • +
  • Logout
); diff --git a/src/components/table.js b/src/components/table.js index f0798c5..232cc0b 100644 --- a/src/components/table.js +++ b/src/components/table.js @@ -21,7 +21,7 @@ import React, { Component } from 'react'; import { Table, Button, Glyphicon, FormControl, Label } from 'react-bootstrap'; -import { Link } from 'react-router'; +import { Link } from 'react-router-dom'; //import TableColumn from './table-column'; diff --git a/src/components/toolbox-item.js b/src/components/toolbox-item.js index 8d253f3..56b8b73 100644 --- a/src/components/toolbox-item.js +++ b/src/components/toolbox-item.js @@ -19,7 +19,7 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component, PropTypes } from 'react'; +import React from 'react'; import { DragSource } from 'react-dnd'; import classNames from 'classnames'; @@ -38,14 +38,7 @@ function collect(connect, monitor) { } } -class ToolboxItem extends Component { - static propTypes = { - connectDragSource: PropTypes.func.isRequired, - isDragging: PropTypes.bool.isRequired, - name: PropTypes.string.isRequired, - type: PropTypes.string.isRequired - }; - +class ToolboxItem extends React.Component { static defaultProps = { disabled: false }; diff --git a/src/containers/app.js b/src/containers/app.js index 40bfcde..8a64bbd 100644 --- a/src/containers/app.js +++ b/src/containers/app.js @@ -19,11 +19,12 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component } from 'react'; +import React from 'react'; import { Container } from 'flux/utils'; import { DragDropContext } from 'react-dnd'; import HTML5Backend from 'react-dnd-html5-backend'; import NotificationSystem from 'react-notification-system'; +import { Redirect, Route } from 'react-router-dom'; import AppDispatcher from '../app-dispatcher'; import SimulationStore from '../stores/simulation-store'; @@ -34,57 +35,31 @@ import NotificationsDataManager from '../data-managers/notifications-data-manage import Header from '../components/header'; import Footer from '../components/footer'; import SidebarMenu from '../components/menu-sidebar'; + import Home from './home'; +import Projects from './projects'; +import Project from './project'; +import Simulators from './simulators'; +import Visualization from './visualization'; +import Simulations from './simulations'; +import Simulation from './simulation'; +import Users from './users'; import '../styles/app.css'; -class App extends Component { +class App extends React.Component { static getStores() { return [ NodeStore, UserStore, SimulationStore ]; } static calculateState(prevState) { - // get list of running simulators - /*var simulators = SimulatorStore.getState().filter(simulator => { - return simulator.running === true; - }); - - // check if running simulators changed - if (prevState != null) { - var equal = true; - - // compare each element with its old one - if (prevState.runningSimulators.length === simulators.length) { - equal = prevState.runningSimulators.every(oldSimulator => { - const simulator = simulators.find(element => { - return element._id === oldSimulator._id; - }); - - if (simulator == null) { - return false; - } - - return simulator.running === oldSimulator.running; - }); - } else { - equal = false; - } - - // replace with old array to prevent change trigger - if (equal) { - simulators = prevState.runningSimulators; - } - }*/ - let currentUser = UserStore.getState().currentUser; return { nodes: NodeStore.getState(), simulations: SimulationStore.getState(), - currentRole: currentUser? currentUser.role : '', - token: UserStore.getState().token/*, - - runningSimulators: simulators*/ + currentRole: currentUser ? currentUser.role : '', + token: UserStore.getState().token }; } @@ -93,89 +68,34 @@ class App extends Component { const token = localStorage.getItem('token'); if (token != null && token !== '') { + // save token so we dont logout + this.setState({ token }); + AppDispatcher.dispatch({ type: 'users/logged-in', token: token }); - } else { - // transition to login page - this.props.router.push('/login'); } + } + componentDidMount() { // load all simulators and simulations to fetch simulation data AppDispatcher.dispatch({ type: 'nodes/start-load', - token + token: this.state.token }); AppDispatcher.dispatch({ type: 'simulations/start-load', - token + token: this.state.token }); - } - componentDidMount() { NotificationsDataManager.setSystem(this.refs.notificationSystem); } - componentWillUpdate(nextProps, nextState) { - // check if user is still logged in - if (nextState.token == null) { - // discard local token - localStorage.setItem('token', ''); - - this.props.router.push('/login'); - - return; - } - - // open connection to each node - /*const requiredNodes = this.requiredNodesBySimulations(); - - requiredNodes.forEach(node => { - AppDispatcher.dispatch({ - type: 'simulatorData/open', - identifier: simulator._id, - endpoint: node.endpoint, - signals: data.signals - }); - });*/ - } - - /*requiredNodesBySimulations() { - var nodes = {}; - - this.state.simulations.forEach(simulation => { - simulation.models.forEach(model => { - // get ID for node - var node = this.state.nodes.find(element => { - return element.name === model.simulator.node; - }); - - // add empty node if not existing - if (node !== undefined) { - if (nodes[node._id] == null) { - nodes[node._id] = { simulators: [] } - } - - // get simulator id - var simulator = node.simulators.find(simulator => { - return simulator.name === model.simulator.simulator; - }); - - nodes[node._id].simulators.push({ id: simulator.id, signals: model.length }); - } - }); - }); - - return nodes; - }*/ - render() { - // get children - var children = this.props.children; - if (this.props.location.pathname === "/") { - children = + if (this.state.token == null) { + return (); } return ( @@ -186,8 +106,16 @@ class App extends Component {
+
- {children} + + + + + + + +
diff --git a/src/containers/login.js b/src/containers/login.js index d568bc7..cb23359 100644 --- a/src/containers/login.js +++ b/src/containers/login.js @@ -23,6 +23,7 @@ import React, { Component } from 'react'; import { Container } from 'flux/utils'; import { PageHeader } from 'react-bootstrap'; import NotificationSystem from 'react-notification-system'; +import { Redirect } from 'react-router-dom'; import LoginForm from '../components/login-form'; import Header from '../components/header'; @@ -64,14 +65,15 @@ class Login extends Component { if (nextState.currentUser != null) { // save login in local storage localStorage.setItem('token', nextState.token); - - // transition to index - nextProps.router.push('/'); } } } render() { + if (this.state.currentUser != null) { + return (); + } + return (
diff --git a/src/containers/logout.js b/src/containers/logout.js index 5e246bb..9fa39ae 100644 --- a/src/containers/logout.js +++ b/src/containers/logout.js @@ -19,23 +19,12 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component } from 'react'; -import { Container } from 'flux/utils'; +import React from 'react'; +import { Redirect } from 'react-router-dom'; import AppDispatcher from '../app-dispatcher'; -import UserStore from '../stores/villas-store'; - -class Home extends Component { - static getStores() { - return [ UserStore ]; - } - - static calculateState() { - return { - currentUser: UserStore.getState().currentUser - }; - } +class Logout extends React.Component { componentWillMount() { AppDispatcher.dispatch({ type: 'users/logout' @@ -45,19 +34,11 @@ class Home extends Component { localStorage.setItem('token', ''); } - componentWillUpdate(nextProps, nextState) { - // check if logged out - if (nextState.token == null) { - // transition to login page - nextProps.router.push('/login'); - } - } - render() { return ( - Login out + ); } } -export default Container.create(Home); +export default Logout; diff --git a/src/containers/project.js b/src/containers/project.js index ef427e2..d781ad2 100644 --- a/src/containers/project.js +++ b/src/containers/project.js @@ -54,7 +54,7 @@ class Visualizations extends Component { // Compare content of the projects array, update visualizations if changed if (JSON.stringify(prevState.projects) !== JSON.stringify(currentProjects)) { - projectUpdate = Visualizations.findProjectInState(currentProjects, props.params.project); + projectUpdate = Visualizations.findProjectInState(currentProjects, props.match.params.project); Visualizations.loadVisualizations(projectUpdate.visualizations, sessionToken); } @@ -72,7 +72,7 @@ class Visualizations extends Component { }; } else { - let initialProject = Visualizations.findProjectInState(currentProjects, props.params.project); + let initialProject = Visualizations.findProjectInState(currentProjects, props.match.params.project); // If projects have been loaded already but visualizations not (redirect from Projects page) if (initialProject && (!currentVisualizations || currentVisualizations.length === 0)) { Visualizations.loadVisualizations(initialProject.visualizations, sessionToken); diff --git a/src/containers/projects.js b/src/containers/projects.js index 93dd94d..a6c49b8 100644 --- a/src/containers/projects.js +++ b/src/containers/projects.js @@ -19,7 +19,7 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component } from 'react'; +import React from 'react'; import { Container } from 'flux/utils'; import { Button, Modal, Glyphicon } from 'react-bootstrap'; @@ -33,7 +33,7 @@ import TableColumn from '../components/table-column'; import NewProjectDialog from '../components/dialog/new-project'; import EditProjectDialog from '../components/dialog/edit-project'; -class Projects extends Component { +class Projects extends React.Component { static getStores() { return [ ProjectStore, SimulationStore, UserStore ]; } diff --git a/src/containers/simulation.js b/src/containers/simulation.js index d021478..304c7d6 100644 --- a/src/containers/simulation.js +++ b/src/containers/simulation.js @@ -19,7 +19,7 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component } from 'react'; +import React from 'react'; import { Container } from 'flux/utils'; import { Button, Modal, Glyphicon } from 'react-bootstrap'; @@ -33,7 +33,7 @@ import TableColumn from '../components/table-column'; import NewSimulationModelDialog from '../components/dialog/new-simulation-model'; import EditSimulationModelDialog from '../components/dialog/edit-simulation-model'; -class Simulation extends Component { +class Simulation extends React.Component { static getStores() { return [ SimulationStore, NodeStore, UserStore ]; } @@ -67,7 +67,7 @@ class Simulation extends Component { } componentDidUpdate() { - if (this.state.simulation._id !== this.props.params.simulation) { + if (this.state.simulation._id !== this.props.match.params.simulation) { this.reloadSimulation(); } } @@ -75,7 +75,7 @@ class Simulation extends Component { reloadSimulation() { // select simulation by param id this.state.simulations.forEach((simulation) => { - if (simulation._id === this.props.params.simulation) { + if (simulation._id === this.props.match.params.simulation) { // JSON.parse(JSON.stringify(obj)) = deep clone to make also copy of widget objects inside this.setState({ simulation: JSON.parse(JSON.stringify(simulation)) }); } diff --git a/src/containers/visualization.js b/src/containers/visualization.js index 869df52..c342430 100644 --- a/src/containers/visualization.js +++ b/src/containers/visualization.js @@ -19,7 +19,7 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component } from 'react'; +import React from 'react'; import { Container } from 'flux/utils'; import { Button } from 'react-bootstrap'; import { ContextMenu, MenuItem } from 'react-contextmenu'; @@ -41,7 +41,7 @@ import AppDispatcher from '../app-dispatcher'; import NotificationsDataManager from '../data-managers/notifications-data-manager'; import NotificationsFactory from '../data-managers/notifications-factory'; -class Visualization extends Component { +class Visualization extends React.Component { static getStores() { return [ VisualizationStore, ProjectStore, SimulationStore, FileStore, UserStore ]; } @@ -74,6 +74,7 @@ class Visualization extends Component { } componentWillMount() { + // TODO: Don't fetch token from local, use user-store! const token = localStorage.getItem('token'); AppDispatcher.dispatch({ @@ -83,7 +84,7 @@ class Visualization extends Component { } componentDidUpdate() { - if (this.state.visualization._id !== this.props.params.visualization) { + if (this.state.visualization._id !== this.props.match.params.visualization) { this.reloadVisualization(); } @@ -133,7 +134,7 @@ class Visualization extends Component { reloadVisualization() { // select visualization by param id this.state.visualizations.forEach((tempVisualization) => { - if (tempVisualization._id === this.props.params.visualization) { + if (tempVisualization._id === this.props.match.params.visualization) { // convert widgets list to a dictionary var visualization = Object.assign({}, tempVisualization, { diff --git a/src/containers/widget.js b/src/containers/widget.js index ced8980..42b4177 100644 --- a/src/containers/widget.js +++ b/src/containers/widget.js @@ -95,25 +95,26 @@ class Widget extends Component { return Math.round(value / this.props.grid) * this.props.grid; } - drag(event, ui) { - let x = this.snapToGrid(ui.position.left); - let y = this.snapToGrid(ui.position.top); + drag(event, data) { + const x = this.snapToGrid(data.x); + const y = this.snapToGrid(data.y); - if (x !== ui.position.left || y !== ui.position.top) { + if (x !== data.x || y !== data.y) { this.rnd.updatePosition({ x, y }); + console.log(this.rnd); } } - dragStop(event, ui) { + dragStop(event, data) { // update widget - var widget = this.props.data; - widget.x = this.snapToGrid(ui.position.left); - widget.y = this.snapToGrid(ui.position.top); + let widget = this.props.data; + widget.x = this.snapToGrid(data.x); + widget.y = this.snapToGrid(data.y); this.props.onWidgetChange(widget, this.props.index); } - resizeStop(direction, styleSize, clientSize, delta) { + resizeStop(direction, delta, event) { // update widget let widget = Object.assign({}, this.props.data); @@ -126,8 +127,8 @@ class Widget extends Component { widget.y -= delta.height; } - widget.width = styleSize.width; - widget.height = styleSize.height; + widget.width += delta.width; + widget.height += delta.height; this.props.onWidgetChange(widget, this.props.index); } @@ -187,17 +188,17 @@ class Widget extends Component { return ( { this.rnd = c; }} - initial={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }} + default={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }} minWidth={widget.minWidth} minHeight={widget.minHeight} lockAspectRatio={Boolean(widget.lockAspect)} bounds={'parent'} className={ widgetClasses } - onResizeStart={ (direction, styleSize, clientSize, event) => this.borderWasClicked(event) } - onResizeStop={(direction, styleSize, clientSize, delta) => this.resizeStop(direction, styleSize, clientSize, delta)} - onDrag={(event, ui) => this.drag(event, ui)} - onDragStop={(event, ui) => this.dragStop(event, ui)} - moveGrid={grid} + onResizeStart={(event, direction, ref) => this.borderWasClicked(event)} + onResizeStop={(event, direction, ref, delta) => this.resizeStop(direction, delta, event)} + onDrag={(event, data) => this.drag(event, data)} + onDragStop={(event, data) => this.dragStop(event, data)} + dragGrid={grid} resizeGrid={grid} zIndex={widget.z} > diff --git a/src/router.js b/src/router.js index a4ab751..d9f3e45 100644 --- a/src/router.js +++ b/src/router.js @@ -19,45 +19,23 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component } from 'react'; -import { Router, Route, browserHistory } from 'react-router'; +import React from 'react'; +import { BrowserRouter, Route, Switch } from 'react-router-dom'; import App from './containers/app'; -import Home from './containers/home'; -import Projects from './containers/projects'; -import Project from './containers/project'; -import Simulators from './containers/simulators'; -import Visualization from './containers/visualization'; -import Simulations from './containers/simulations'; -import Simulation from './containers/simulation'; -import Users from './containers/users'; import Login from './containers/login'; import Logout from './containers/logout'; -class Root extends Component { +class Root extends React.Component { render() { return ( - - - - - - - - - - - - - - - - + + + - - - - + + + ); } } diff --git a/src/stores/user-store.js b/src/stores/user-store.js index 0c3a70a..cbe2791 100644 --- a/src/stores/user-store.js +++ b/src/stores/user-store.js @@ -50,7 +50,7 @@ class UserStore extends ReduceStore { SimulatorDataDataManager.closeAll(); // delete user and token - return Object.assign({}, state, { token: null }); + return Object.assign({}, state, { token: null, currentUser: null }); case 'users/logged-in': // request logged-in user data @@ -67,16 +67,15 @@ class UserStore extends ReduceStore { return Object.assign({}, state, { currentUser: null, token: null }); case 'users/login-error': - if (action.error && !action.error.handled) { // If it was an error and hasn't been handled, the credentials must have been wrong. const WRONG_CREDENTIALS_NOTIFICATION = { title: 'Incorrect credentials', message: 'Please modify and try again.', level: 'error' - } - NotificationsDataManager.addNotification(WRONG_CREDENTIALS_NOTIFICATION); + }; + NotificationsDataManager.addNotification(WRONG_CREDENTIALS_NOTIFICATION); } return state;