-export default Container.create(FluxContainerConverter.convert(App));
+let fluxContainerConverter = require('./common/FluxContainerConverter');
+export default Container.create(fluxContainerConverter.convert(App));
//DragDropContext(HTML5Backend)(Container.create(App));
diff --git a/src/common/FluxContainerConverter.js b/src/common/FluxContainerConverter.js
index efa2ece..bd2196a 100644
--- a/src/common/FluxContainerConverter.js
+++ b/src/common/FluxContainerConverter.js
@@ -1,7 +1,7 @@
/// FluxContainerConverter.js
/// This is an ugly workaround found here https://github.com/facebook/flux/issues/351 to make Flux Containers work with ES6
-export default {
+module.exports = {
convert: function(containerClass) {
const tmp = containerClass;
containerClass = function(...args) {
diff --git a/src/common/api/rest-api.js b/src/common/api/rest-api.js
index 4fb5395..bb92e10 100644
--- a/src/common/api/rest-api.js
+++ b/src/common/api/rest-api.js
@@ -37,7 +37,7 @@ const REQUEST_TIMEOUT_NOTIFICATION = {
level: 'error'
};
-// Check if the error was due to network failure, timeouts, etc.
+// Check if the error was due to network failure, timeouts, etc.
// Can be used for the rest of requests
function isNetworkError(err) {
let result = false;
@@ -45,7 +45,7 @@ function isNetworkError(err) {
// If not status nor response fields, it is a network error. TODO: Handle timeouts
if (err.status == null || err.response == null) {
result = true;
-
+
let notification = err.timeout? REQUEST_TIMEOUT_NOTIFICATION : SERVER_NOT_REACHABLE_NOTIFICATION;
NotificationsDataManager.addNotification(notification);
}
@@ -79,7 +79,7 @@ class RestAPI {
if (token != null) {
req.set('Authorization', "Bearer " + token);
}
-
+
req.end(function (error, res) {
if (res == null || res.status !== 200) {
diff --git a/src/common/array-store.js b/src/common/array-store.js
index 710ff94..bd18854 100644
--- a/src/common/array-store.js
+++ b/src/common/array-store.js
@@ -68,7 +68,6 @@ class ArrayStore extends ReduceStore {
reduce(state, action) {
switch (action.type) {
case this.type + '/start-load':
-
if (Array.isArray(action.data)) {
action.data.forEach((id) => {
this.dataManager.load(id, action.token,action.param);
@@ -87,17 +86,17 @@ class ArrayStore extends ReduceStore {
case this.type + '/load-error':
if (action.error && !action.error.handled && action.error.response) {
-
+
const USER_LOAD_ERROR_NOTIFICATION = {
title: 'Failed to load',
message: action.error.response.body.message,
level: 'error'
};
NotificationsDataManager.addNotification(USER_LOAD_ERROR_NOTIFICATION);
-
+
}
return super.reduce(state, action);
-
+
case this.type + '/start-add':
this.dataManager.add(action.data, action.token,action.param);
return state;
@@ -106,7 +105,7 @@ class ArrayStore extends ReduceStore {
return this.updateElements(state, [action.data]);
case this.type + '/add-error':
-
+
return state;
@@ -128,30 +127,17 @@ class ArrayStore extends ReduceStore {
level: 'error'
};
NotificationsDataManager.addNotification(USER_REMOVE_ERROR_NOTIFICATION);
-
+
}
return super.reduce(state, action);
-
- case this.type + '/start-edit':
- this.dataManager.update(action.data, action.token,action.param);
- return state;
- case this.type + '/start-own-edit':
+ case this.type + '/start-edit':
this.dataManager.update(action.data, action.token,action.param);
return state;
case this.type + '/edited':
return this.updateElements(state, [action.data]);
- case this.type + '/confirm-pw-doesnt-match':
- const USER_PW_ERROR_NOTIFICATION = {
- title: 'The new password does not match',
- message: 'Try again',
- level: 'error'
- };
- NotificationsDataManager.addNotification(USER_PW_ERROR_NOTIFICATION);
- return state;
-
case this.type + '/edit-error':
return state;
diff --git a/src/common/data-managers/rest-data-manager.js b/src/common/data-managers/rest-data-manager.js
index a502086..559d404 100644
--- a/src/common/data-managers/rest-data-manager.js
+++ b/src/common/data-managers/rest-data-manager.js
@@ -65,10 +65,10 @@ class RestDataManager {
}
else{
if(id != null){
- return this.makeURL(this.url + '/' + id + '?' + param);
+ return this.makeURL(this.url + '/' + id + param);
}
else {
- return this.makeURL(this.url + '?' + param);
+ return this.makeURL(this.url + param)
}
}
case 'remove/update':
@@ -76,7 +76,7 @@ class RestDataManager {
return this.makeURL(this.url + '/' + object.id);
}
else{
- return this.makeURL(this.url + '/' + object.id + '?' + param);
+ return this.makeURL(this.url + '/' + object.id + param);
}
default:
console.log("something went wrong");
diff --git a/src/common/editable-header.js b/src/common/editable-header.js
index ff15d11..90b5f59 100644
--- a/src/common/editable-header.js
+++ b/src/common/editable-header.js
@@ -36,8 +36,10 @@ class EditableHeader extends React.Component {
};
}
- componentWillReceiveProps(nextProps) {
- this.setState({ title: nextProps.title });
+ static getDerivedStateFromProps(props, state){
+ return {
+ title: props.title
+ };
}
edit = () => {
diff --git a/src/common/home.js b/src/common/home.js
index e103918..2ce515c 100644
--- a/src/common/home.js
+++ b/src/common/home.js
@@ -26,18 +26,15 @@ import React from 'react';
//import RestAPI from '../api/rest-api';
import config from '../config';
-import UserStore from "../user/user-store";
+import LoginStore from "../user/login-store";
class Home extends React.Component {
constructor(props) {
super(props);
- let currentUser = UserStore.getState().currentUser;
this.state = {
- currentRole: currentUser ? currentUser.role : '',
- currentUsername: currentUser ? currentUser.username: '',
- currentUserID: currentUser ? currentUser.id: 0,
- token: UserStore.getState().token
+ currentUser: LoginStore.getState().currentUser,
+ token: LoginStore.getState().token
};
}
@@ -48,12 +45,6 @@ class Home extends React.Component {
return '?';
}
- componentDidMount() {
- //RestAPI.get('/api/v1/counts').then(response => {
- // this.setState({ counts: response });
- //});
- }
-
render() {
return (
@@ -64,7 +55,7 @@ class Home extends React.Component {
VILLASweb is a frontend for distributed real-time simulation hosted by
{config.admin.name} .
- You are logged in as user {this.state.currentUsername} with ID {this.state.currentUserID} and role {this.state.currentRole} .
+ You are logged in as user {this.state.currentUser.username} with ID {this.state.currentUser.id} and role {this.state.currentUser.role} .
{/*
diff --git a/src/common/table.js b/src/common/table.js
index 8d2d33d..6ec492f 100644
--- a/src/common/table.js
+++ b/src/common/table.js
@@ -32,7 +32,7 @@ class CustomTable extends Component {
this.activeInput = null;
this.state = {
- rows: this.getRows(props),
+ rows: CustomTable.getRows(props),
editCell: [ -1, -1 ]
};
}
@@ -45,7 +45,7 @@ class CustomTable extends Component {
this.setState({ editCell: [ column, row ]}); // x, y
}
- addCell(data, index, child) {
+ static addCell(data, index, child) {
// add data to cell
let content = null;
@@ -112,7 +112,7 @@ class CustomTable extends Component {
}
if (child.props.checkbox) {
- const checkboxKey = this.props.checkboxKey;
+ const checkboxKey = child.props.checkboxKey;
cell.push( child.props.onChecked(index, e)} />);
}
@@ -122,12 +122,12 @@ class CustomTable extends Component {
}
return cell;
- }
+ } // addCell
- componentWillReceiveProps(nextProps) {
- const rows = this.getRows(nextProps);
+ static getDerivedStateFromProps(props, state){
+ const rows = CustomTable.getRows(props);
- this.setState({ rows });
+ return { rows };
}
componentDidUpdate() {
@@ -147,7 +147,7 @@ class CustomTable extends Component {
this.setState({ editCell: [ -1, -1 ] });
}
- getRows(props) {
+ static getRows(props) {
if (props.data == null) {
return [];
}
@@ -156,13 +156,13 @@ class CustomTable extends Component {
// check if multiple columns
if (Array.isArray(props.children) === false) {
// table only has a single column
- return [ this.addCell(data, index, props.children) ];
+ return [ CustomTable.addCell(data, index, props.children) ];
}
const row = [];
for (let child of props.children) {
- row.push(this.addCell(data, index, child));
+ row.push(CustomTable.addCell(data, index, child));
}
return row;
diff --git a/src/dashboard/dashboard-button-group.js b/src/dashboard/dashboard-button-group.js
index 785ac48..35da165 100644
--- a/src/dashboard/dashboard-button-group.js
+++ b/src/dashboard/dashboard-button-group.js
@@ -22,6 +22,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button } from 'react-bootstrap';
+import Icon from "../common/icon";
class DashboardButtonGroup extends React.Component {
render() {
@@ -38,39 +39,39 @@ class DashboardButtonGroup extends React.Component {
if (this.props.editing) {
buttons.push(
-
-
+ ,
-
-
+
);
} else {
if (this.props.fullscreen !== true) {
buttons.push(
-
-
+
);
}
if (this.props.paused) {
buttons.push(
-
-
+
);
} else {
buttons.push(
-
-
+
);
}
buttons.push(
-
-
+
);
}
diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js
index 75683b4..aa43076 100644
--- a/src/dashboard/dashboard.js
+++ b/src/dashboard/dashboard.js
@@ -19,7 +19,7 @@
* along with VILLASweb. If not, see
@@ -378,47 +474,86 @@ class Dashboard extends React.Component {
e.preventDefault() }>
{this.state.editing &&
-
+ {widgets != null && Object.keys(widgets).map(widgetKey => (
+
+ simulation={this.state.simulation}
+ onWidgetChange={this.widgetChange.bind(this)}
+ onWidgetStatusChange={this.widgetStatusChange.bind(this)}
+ editing={this.state.editing}
+ grid={grid}
+ paused={this.state.paused}
+ />
+
+
+ ))}
+
+ ) : (
+
{widgets != null && Object.keys(widgets).map(widgetKey => (
this.widgetChange(w, k)}
- onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)}
+ onWidgetChange={this.widgetChange.bind(this)}
+ onWidgetStatusChange={this.widgetStatusChange.bind(this)}
editing={this.state.editing}
- index={widgetKey}
+ index={parseInt(widgetKey,10)}
grid={grid}
paused={this.state.paused}
/>
+
))}
- {/* TODO: Create only one context menu for all widgets */}
- {widgets != null && Object.keys(widgets).map(widgetKey => (
-
;
}
}
+/*
+onWidgetChange={(w, k) => this.widgetChange(w, k)}
+onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)}
-export default Fullscreenable()(Container.create(FluxContainerConverter.convert(Dashboard), { withProps: true }));
+const widgets = this.state.dashboard.get('widgets');
+ widgets[index] = widget;
+
+ const dashboard = this.state.dashboard.set('widgets');
+
+ // Check if the height needs to be increased, the section may have shrunk if not
+ if (!this.increaseHeightWithWidget(widget)) {
+ this.computeHeightWithWidgets(dashboard.widgets);
+ }
+
+ this.setState({ dashboard }, callback);
+*/
+
+let fluxContainerConverter = require('../common/FluxContainerConverter');
+export default Fullscreenable()(Container.create(fluxContainerConverter.convert(Dashboard), { withProps: true }));
diff --git a/src/dashboard/dropzone.js b/src/dashboard/dropzone.js
index 7a9af88..979a692 100644
--- a/src/dashboard/dropzone.js
+++ b/src/dashboard/dropzone.js
@@ -52,6 +52,7 @@ const dropzoneTarget = {
};
function collect(connect, monitor) {
+
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
@@ -61,6 +62,7 @@ function collect(connect, monitor) {
class Dropzone extends React.Component {
render() {
+
var toolboxClass = classNames({
'box-content': true,
'toolbox-dropzone': true,
diff --git a/src/dashboard/new-dashboard.js b/src/dashboard/new-dashboard.js
index cbac2cb..b05fbad 100644
--- a/src/dashboard/new-dashboard.js
+++ b/src/dashboard/new-dashboard.js
@@ -24,7 +24,7 @@ import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
import Dialog from '../common/dialogs/dialog';
-class NewVisualzationDialog extends React.Component {
+class NewDashboardDialog extends React.Component {
valid: false;
constructor(props) {
@@ -84,4 +84,4 @@ class NewVisualzationDialog extends React.Component {
}
}
-export default NewVisualzationDialog;
+export default NewDashboardDialog;
diff --git a/src/dashboard/widget-area.js b/src/dashboard/widget-area.js
index cc08afc..8a06382 100644
--- a/src/dashboard/widget-area.js
+++ b/src/dashboard/widget-area.js
@@ -48,7 +48,7 @@ class WidgetArea extends React.Component {
}
render() {
- const maxHeight = Object.values(this.props.widgets).reduce((currentHeight, widget) => {
+ const maxHeight = Object.values(this.props.widgets).reduce((currentHeight, widget) => {
const absolutHeight = widget.y + widget.height;
return absolutHeight > currentHeight ? absolutHeight : currentHeight;
@@ -67,7 +67,7 @@ WidgetArea.propTypes = {
editing: PropTypes.bool,
grid: PropTypes.number,
defaultSimulationModel: PropTypes.string,
- widgets: PropTypes.object,
+ //widgets: PropTypes.array,
onWidgetAdded: PropTypes.func
};
diff --git a/src/dashboard/widget-context-menu.js b/src/dashboard/widget-context-menu.js
index 69e0683..ae8c40f 100644
--- a/src/dashboard/widget-context-menu.js
+++ b/src/dashboard/widget-context-menu.js
@@ -21,7 +21,8 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { contextMenu, Item, Separator } from 'react-contexify';
+import { Menu, Item, Separator, MenuProvider } from 'react-contexify';
+import Widget from '../widget/widget';
class WidgetContextMenu extends React.Component {
editWidget = event => {
@@ -92,8 +93,8 @@ class WidgetContextMenu extends React.Component {
render() {
const isLocked = this.props.widget.locked;
-
- return ;
+
+ );
+
+ return
+
+
}
}
WidgetContextMenu.propTypes = {
index: PropTypes.number.isRequired,
widget: PropTypes.object.isRequired,
- onEdit: PropTypes.func,
+ onEdit: PropTypes.func.isRequired,
onDelete: PropTypes.func,
onChange: PropTypes.func
};
diff --git a/src/file/select-file.js b/src/file/select-file.js
index 9d6122f..a37912b 100644
--- a/src/file/select-file.js
+++ b/src/file/select-file.js
@@ -24,130 +24,130 @@ import { Container } from 'flux/utils';
import { FormGroup, FormControl, FormLabel, Button, ProgressBar, Col } from 'react-bootstrap';
import FileStore from './file-store';
-import UserStore from '../user/user-store';
+import LoginStore from '../user/login-store';
import AppDispatcher from '../common/app-dispatcher';
import FluxContainerConverter from "../common/FluxContainerConverter";
class SelectFile extends React.Component {
- static getStores() {
- return [ FileStore, UserStore ];
+ static getStores() {
+ return [ FileStore, LoginStore ];
+ }
+
+ static calculateState() {
+ return {
+ files: FileStore.getState(),
+ sessionToken: LoginStore.getState().token,
+ selectedFile: '',
+ uploadFile: null,
+ uploadProgress: 0
+ };
+ }
+
+ componentDidMount() {
+ AppDispatcher.dispatch({
+ type: 'files/start-load',
+ token: this.state.sessionToken
+ });
+ }
+
+ static getDerivedStateFromProps(props, state){
+ if (props.value === state.selectedSimulator) {
+ return null;
}
- static calculateState() {
- return {
- files: FileStore.getState(),
- sessionToken: UserStore.getState().token,
- selectedFile: '',
- uploadFile: null,
- uploadProgress: 0
- };
+ let selectedSimulator = props.value;
+ if (selectedSimulator == null) {
+ if (state.simulators.length > 0) {
+ selectedSimulator = state.simulators[0]._id;
+ } else {
+ selectedSimulator = '';
+ }
}
- componentDidMount() {
- AppDispatcher.dispatch({
- type: 'files/start-load',
- token: this.state.sessionToken
- });
- }
+ return {selectedSimulator};
+ }
- componentWillReceiveProps(nextProps) {
- if (nextProps.value === this.state.selectedSimulator) {
- return;
- }
+ handleChange = event => {
+ this.setState({ selectedFile: event.target.value });
- let selectedSimulator = nextProps.value;
- if (selectedSimulator == null) {
- if (this.state.simulators.length > 0) {
- selectedSimulator = this.state.simulators[0]._id;
- } else {
- selectedSimulator = '';
- }
- }
+ // send file to callback
+ if (this.props.onChange != null) {
+ const file = this.state.files.find(f => f._id === event.target.value);
- this.setState({ selectedSimulator });
- }
+ this.props.onChange(file);
+ }
+ };
- handleChange = event => {
- this.setState({ selectedFile: event.target.value });
+ selectUploadFile = event => {
+ this.setState({ uploadFile: event.target.files[0] });
+ };
- // send file to callback
- if (this.props.onChange != null) {
- const file = this.state.files.find(f => f._id === event.target.value);
+ startFileUpload = () => {
+ // upload file
+ const formData = new FormData();
+ formData.append(0, this.state.uploadFile);
- this.props.onChange(file);
- }
- }
+ AppDispatcher.dispatch({
+ type: 'files/start-upload',
+ data: formData,
+ token: this.state.sessionToken,
+ progressCallback: this.updateUploadProgress,
+ finishedCallback: this.clearProgress
+ });
+ };
- selectUploadFile = event => {
- this.setState({ uploadFile: event.target.files[0] });
- }
+ updateUploadProgress = event => {
+ this.setState({ uploadProgress: parseInt(event.percent.toFixed(), 10) });
+ };
- startFileUpload = () => {
- // upload file
- const formData = new FormData();
- formData.append(0, this.state.uploadFile);
+ clearProgress = () => {
+ // select uploaded file
+ const selectedFile = this.state.files[this.state.files.length - 1]._id;
+ this.setState({ selectedFile, uploadProgress: 0 });
+ };
- AppDispatcher.dispatch({
- type: 'files/start-upload',
- data: formData,
- token: this.state.sessionToken,
- progressCallback: this.updateUploadProgress,
- finishedCallback: this.clearProgress
- });
- }
+ render() {
+ const fileOptions = this.state.files.map(f =>
+
{f.name}
+ );
- updateUploadProgress = event => {
- this.setState({ uploadProgress: parseInt(event.percent.toFixed(), 10) });
- }
+ const progressBarStyle = {
+ marginLeft: '100px',
+ marginTop: '-25px'
+ };
- clearProgress = () => {
- // select uploaded file
- const selectedFile = this.state.files[this.state.files.length - 1]._id;
- this.setState({ selectedFile, uploadProgress: 0 });
- }
+ return
+
+ {f.name}
- );
+
+ {fileOptions}
+
+
+
- const progressBarStyle = {
- marginLeft: '100px',
- marginTop: '-25px'
- };
+
+
- return
-
-
+
+ Upload file
+
-
- {fileOptions}
-
-
-
-
-
-
-
-
-
- Upload file
-
-
-
- ;
- }
+
+
+
+
;
+ }
}
export default Container.create(FluxContainerConverter.convert(SelectFile));
diff --git a/src/project/project.js b/src/project/project.js
index f6c9530..61bb390 100644
--- a/src/project/project.js
+++ b/src/project/project.js
@@ -26,7 +26,7 @@ import FileSaver from 'file-saver';
import AppDispatcher from '../common/app-dispatcher';
import ProjectStore from './project-store';
-import UserStore from '../user/user-store';
+import LoginStore from '../user/login-store';
import DashboardStore from '../dashboard/dashboard-store';
import SimulationStore from '../simulation/simulation-store';
@@ -41,14 +41,14 @@ import DeleteDialog from '../common/dialogs/delete-dialog';
class Dashboards extends Component {
static getStores() {
- return [ ProjectStore, DashboardStore, UserStore, SimulationStore ];
+ return [ ProjectStore, DashboardStore, LoginStore, SimulationStore ];
}
static calculateState(prevState, props) {
prevState = prevState || {};
// load project
- const sessionToken = UserStore.getState().token;
+ const sessionToken = LoginStore.getState().token;
let project = ProjectStore.getState().find(project => project._id === props.match.params.project);
if (project == null) {
diff --git a/src/project/projects.js b/src/project/projects.js
index c5d11e8..0b50ecd 100644
--- a/src/project/projects.js
+++ b/src/project/projects.js
@@ -25,7 +25,7 @@ import { Button } from 'react-bootstrap';
import AppDispatcher from '../common/app-dispatcher';
import ProjectStore from './project-store';
-import UserStore from '../user/user-store';
+import LoginStore from '../user/login-store';
import SimulationStore from '../simulation/simulation-store';
import Icon from '../common/icon';
@@ -38,14 +38,14 @@ import DeleteDialog from '../common/dialogs/delete-dialog';
class Projects extends React.Component {
static getStores() {
- return [ ProjectStore, SimulationStore, UserStore ];
+ return [ ProjectStore, SimulationStore, LoginStore ];
}
static calculateState() {
return {
projects: ProjectStore.getState(),
simulations: SimulationStore.getState(),
- sessionToken: UserStore.getState().token,
+ sessionToken: LoginStore.getState().token,
newModal: false,
editModal: false,
diff --git a/src/scenario/scenario-store.js b/src/scenario/scenario-store.js
index cd45335..4ab7ae4 100644
--- a/src/scenario/scenario-store.js
+++ b/src/scenario/scenario-store.js
@@ -22,42 +22,5 @@
import ScenariosDataManager from './scenarios-data-manager';
import ArrayStore from '../common/array-store';
-//import UsersDataManager from "../user/users-data-manager";
-//import SimulatorDataDataManager from "../simulator/simulator-data-data-manager";
-//import AppDispatcher from "../common/app-dispatcher";
export default new ArrayStore('scenarios', ScenariosDataManager);
-
-
-// class ScenariosStore extends ReduceStore {
-// constructor() {
-// super('scenarios', ScenariosDataManager);
-// }
-//
-// getInitialState() {
-// return {
-// scenarios: [],
-//
-// };
-// }
-//
-// reduce(state, action) {
-// switch (action.type) {
-// case 'scenarios/load-models':
-// // request simulation model data of scenario
-// ScenariosDataManager.getSimulationModels(action.token, action.scenarioID);
-//
-// return Object.assign({}, state, { token: action.token, simulationmodels: action.simulationmodels});
-//
-// case 'scenarios/load-dashboards':
-// // request dashboard data of scenario
-// ScenariosDataManager.getDashboards(action.token, action.scenarioID);
-//
-// return Object.assign({}, state, { token: action.token, dashboards: action.dashboards});
-// default:
-// return state;
-// }
-// }
-// }
-//
-// export default new ScenariosStore();
diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js
index ca3eb3d..1ca36eb 100644
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@@ -27,84 +27,92 @@ import _ from 'lodash';
import ScenarioStore from './scenario-store';
import SimulatorStore from '../simulator/simulator-store';
+import DashboardStore from '../dashboard/dashboard-store';
import SimulationModelStore from '../simulationmodel/simulation-model-store';
-import UserStore from '../user/user-store';
+import LoginStore from '../user/login-store';
import AppDispatcher from '../common/app-dispatcher';
import Icon from '../common/icon';
import Table from '../common/table';
import TableColumn from '../common/table-column';
import ImportSimulationModelDialog from '../simulationmodel/import-simulation-model';
+import ImportDashboardDialog from "../dashboard/import-dashboard";
+import NewDashboardDialog from "../dashboard/new-dashboard";
import SimulatorAction from '../simulator/simulator-action';
import DeleteDialog from '../common/dialogs/delete-dialog';
-import FluxContainerConverter from "../common/FluxContainerConverter";
-
class Scenario extends React.Component {
static getStores() {
- return [ ScenarioStore, SimulatorStore, SimulationModelStore, UserStore ];
+ return [ ScenarioStore, SimulationModelStore, DashboardStore, SimulatorStore, LoginStore];
}
static calculateState(prevState, props) {
// get selected scenario
- const sessionToken = UserStore.getState().token;
+ const sessionToken = LoginStore.getState().token;
- let scenario = ScenarioStore.getState().find(s => s.id === props.match.params.scenario);
+ const scenario = ScenarioStore.getState().find(s => s.id === parseInt(props.match.params.scenario, 10));
if (scenario == null) {
AppDispatcher.dispatch({
type: 'scenarios/start-load',
data: props.match.params.scenario,
token: sessionToken
});
-
- scenario = {};
}
- // load models
- let simulationModels = [];
- if (scenario.simulationModels != null) {
- simulationModels = SimulationModelStore.getState().filter(m => m != null && scenario.simulationModels.includes(m.id));
- }
+ // obtain all dashboards of a scenario
+ let dashboards = DashboardStore.getState().filter(dashb => dashb.scenarioID === parseInt(props.match.params.scenario, 10));
+
+ // obtain all simulation models of a scenario
+ let simulationmodels = SimulationModelStore.getState().filter(simmodel => simmodel.scenarioID === parseInt(props.match.params.scenario, 10));
return {
- simulationModels,
scenario,
-
- //simulators: SimulatorStore.getState(),
sessionToken,
+ simulationModels: simulationmodels,
+ dashboards: dashboards,
+ simulators: SimulatorStore.getState(),
- deleteModal: false,
- importModal: false,
- modalData: {},
+ deleteSimulationModelModal: false,
+ importSimulationModelModal: false,
+ modalSimulationModelData: {},
+ selectedSimulationModels: [],
- selectedSimulationModels: []
+ newDashboardModal: false,
+ deleteDashboardModal: false,
+ importDashboardModal: false,
+ modalDashboardData: {},
}
}
componentDidMount() {
+
+ //load selected scenario
AppDispatcher.dispatch({
type: 'scenarios/start-load',
+ data: this.state.scenario.id,
token: this.state.sessionToken
});
+ // load simulation models for selected scenario
AppDispatcher.dispatch({
type: 'simulationModels/start-load',
- token: this.state.sessionToken
+ token: this.state.sessionToken,
+ param: '?scenarioID='+this.state.scenario.id,
});
+ // load dashboards of selected scenario
+ AppDispatcher.dispatch({
+ type: 'dashboards/start-load',
+ token: this.state.sessionToken,
+ param: '?scenarioID='+this.state.scenario.id,
+ });
+
+ // load simulators to enable that simulation models work with them
AppDispatcher.dispatch({
type: 'simulators/start-load',
- token: this.state.sessionToken
+ token: this.state.sessionToken,
});
-
- //TODO users
-
- //TODO dashboards
-
-
-
-
}
addSimulationModel = () => {
@@ -133,8 +141,8 @@ class Scenario extends React.Component {
});
}
- closeDeleteModal = confirmDelete => {
- this.setState({ deleteModal: false });
+ closeDeleteSimulationModelModal = confirmDelete => {
+ this.setState({ deleteSimulationModelModal: false });
if (confirmDelete === false) {
return;
@@ -142,13 +150,13 @@ class Scenario extends React.Component {
AppDispatcher.dispatch({
type: 'simulationModels/start-remove',
- data: this.state.modalData,
+ data: this.state.modalSimulationModelData,
token: this.state.sessionToken
});
}
importSimulationModel = simulationModel => {
- this.setState({ importModal: false });
+ this.setState({ importSimulationModelModal: false });
if (simulationModel == null) {
return;
@@ -156,8 +164,6 @@ class Scenario extends React.Component {
simulationModel.scenario = this.state.scenario.id;
- console.log(simulationModel);
-
AppDispatcher.dispatch({
type: 'simulationModels/start-add',
data: simulationModel,
@@ -173,6 +179,44 @@ class Scenario extends React.Component {
});
}
+ closeNewDashboardModal(data) {
+ this.setState({ newDashboardModal : false });
+
+ if (data) {
+ AppDispatcher.dispatch({
+ type: 'dashboards/start-add',
+ data,
+ token: this.state.sessionToken,
+ });
+ }
+ }
+
+ closeDeleteDashboardModal(confirmDelete){
+ this.setState({ deleteDashboardModal: false });
+
+ if (confirmDelete === false) {
+ return;
+ }
+
+ AppDispatcher.dispatch({
+ type: 'dashboards/start-remove',
+ data: this.state.modalDashboardData,
+ token: this.state.sessionToken,
+ });
+ }
+
+ closeImportDashboardModal(data) {
+ this.setState({ importDashboardModal: false });
+
+ if (data) {
+ AppDispatcher.dispatch({
+ type: 'dashboards/start-add',
+ data,
+ token: this.state.sessionToken,
+ });
+ }
+ }
+
getSimulatorName(simulatorId) {
for (let simulator of this.state.simulators) {
if (simulator.id === simulatorId) {
@@ -185,14 +229,26 @@ class Scenario extends React.Component {
// filter properties
const model = Object.assign({}, this.state.simulationModels[index]);
- delete model.simulator;
- delete model.scenario;
+ //delete model.simulator;
+ //delete model.scenario;
+ // TODO get elements recursively
// show save dialog
const blob = new Blob([JSON.stringify(model, null, 2)], { type: 'application/json' });
FileSaver.saveAs(blob, 'simulation model - ' + model.name + '.json');
}
+ exportDashboard(index) {
+ // filter properties
+ const dashboard = Object.assign({}, this.state.dashboards[index]);
+
+ // TODO get elements recursively
+
+ // show save dialog
+ const blob = new Blob([JSON.stringify(dashboard, null, 2)], { type: 'application/json' });
+ FileSaver.saveAs(blob, 'dashboard - ' + dashboard.name + '.json');
+ }
+
onSimulationModelChecked(index, event) {
const selectedSimulationModels = Object.assign([], this.state.selectedSimulationModels);
for (let key in selectedSimulationModels) {
@@ -251,20 +307,22 @@ class Scenario extends React.Component {
};
return
-
{this.state.simulation.name}
+
{this.state.scenario.name}
+ {/*Simulation Model table*/}
+
Simulation Models
this.onSimulationModelChecked(index, event)} width='30' />
- this.getSimulatorName(simulator)} />
- this.getSimulatorName(simulatorID)} />
+ this.setState({ deleteModal: true, modalData: this.state.simulationModels[index], modalIndex: index })}
+ onDelete={(index) => this.setState({ deleteSimulationModelModal: true, modalSimulationModelData: this.state.simulationModels[index], modalSimulationModelIndex: index })}
onExport={index => this.exportModel(index)}
/>
@@ -283,16 +341,46 @@ class Scenario extends React.Component {
this.setState({ importModal: true })} style={buttonStyle}>
+ this.setState({ importSimulationModelModal: true })} style={buttonStyle}>
-
+
+
+
+
+ {/*Dashboard table*/}
+
Dashboards
+
+ this.setState({ deleteDashboardModal: true, modalDashboardData: this.state.dashboards[index], modalDashboardIndex: index })}
+ onExport={index => this.exportDashboard(index)}
+ />
+
+
+
+ this.setState({ newDashboardModal: true })} style={buttonStyle}>
+ this.setState({ importDashboardModal: true })} style={buttonStyle}>
+
+
+
+
+
this.closeNewDashboardModal(data)}/>
+ this.closeImportDashboardModal(data)} />
+
+ this.closeDeleteDashboardModal(e)}/>
+
- ;
}
}
-export default Container.create(FluxContainerConverter.convert(Scenario), { withProps: true });
+let fluxContainerConverter = require('../common/FluxContainerConverter');
+export default Container.create(fluxContainerConverter.convert(Scenario), { withProps: true });
diff --git a/src/scenario/scenarios.js b/src/scenario/scenarios.js
index 5cdc7eb..5873d6e 100644
--- a/src/scenario/scenarios.js
+++ b/src/scenario/scenarios.js
@@ -26,7 +26,7 @@ import FileSaver from 'file-saver';
import AppDispatcher from '../common/app-dispatcher';
import ScenarioStore from './scenario-store';
-import UserStore from '../user/user-store';
+import LoginStore from '../user/login-store';
import Icon from '../common/icon';
import Table from '../common/table';
@@ -41,13 +41,12 @@ import FluxContainerConverter from "../common/FluxContainerConverter";
class Scenarios extends Component {
static getStores() {
- return [ ScenarioStore, UserStore ];
+ return [ ScenarioStore, LoginStore ];
}
static calculateState() {
const scenarios = ScenarioStore.getState();
- const sessionToken = UserStore.getState().token;
- console.log(scenarios);
+ const sessionToken = LoginStore.getState().token;
return {
scenarios,
@@ -180,8 +179,8 @@ class Scenarios extends Component {
s._id === props.match.params.simulation);
if (simulation == null) {
diff --git a/src/simulation/simulations.js b/src/simulation/simulations.js
index c74801c..6a8879d 100644
--- a/src/simulation/simulations.js
+++ b/src/simulation/simulations.js
@@ -26,7 +26,7 @@ import FileSaver from 'file-saver';
import AppDispatcher from '../common/app-dispatcher';
import SimulationStore from './simulation-store';
-import UserStore from '../user/user-store';
+import LoginStore from '../user/login-store';
import SimulatorStore from '../simulator/simulator-store';
import SimulationModelStore from '../simulationmodel/simulation-model-store';
@@ -42,7 +42,7 @@ import DeleteDialog from '../common/dialogs/delete-dialog';
class Simulations extends Component {
static getStores() {
- return [ SimulationStore, UserStore, SimulatorStore, SimulationModelStore ];
+ return [ SimulationStore, LoginStore, SimulatorStore, SimulationModelStore ];
}
static calculateState() {
@@ -50,7 +50,7 @@ class Simulations extends Component {
const simulationModels = SimulationModelStore.getState();
const simulators = SimulatorStore.getState();
- const sessionToken = UserStore.getState().token;
+ const sessionToken = LoginStore.getState().token;
return {
simulations,
diff --git a/src/simulationmodel/signal-mapping.js b/src/simulationmodel/signal-mapping.js
index ca65eac..1cf170b 100644
--- a/src/simulationmodel/signal-mapping.js
+++ b/src/simulationmodel/signal-mapping.js
@@ -41,12 +41,15 @@ class SignalMapping extends React.Component {
};
}
- componentWillReceiveProps(nextProps) {
- if (nextProps.length === this.state.length && nextProps.signals === this.state.signals) {
- return;
- }
+ static getDerivedStateFromProps(props, state){
+ if (props.length === state.length && props.signals === state.signals) {
+ return null
+ }
- this.setState({ length: nextProps.length, signals: nextProps.signals });
+ return{
+ length: props.length,
+ signals: props.signals
+ };
}
validateLength(){
diff --git a/src/simulationmodel/simulation-model.js b/src/simulationmodel/simulation-model.js
index 12ed881..6430ddb 100644
--- a/src/simulationmodel/simulation-model.js
+++ b/src/simulationmodel/simulation-model.js
@@ -24,7 +24,7 @@ import { Container } from 'flux/utils';
import { Button, Col, Form, FormLabel } from 'react-bootstrap';
import SimulationModelStore from './simulation-model-store';
-import UserStore from '../user/user-store';
+import LoginStore from '../user/login-store';
import AppDispatcher from '../common/app-dispatcher';
import SelectSimulator from '../simulator/select-simulator';
@@ -37,7 +37,7 @@ import FluxContainerConverter from "../common/FluxContainerConverter";
class SimulationModel extends React.Component {
static getStores() {
- return [ SimulationModelStore, UserStore ];
+ return [ SimulationModelStore, LoginStore ];
}
static calculateState(prevState, props) {
@@ -45,7 +45,7 @@ class SimulationModel extends React.Component {
return {
simulationModel: simulationModel || {},
- sessionToken: UserStore.getState().token
+ sessionToken: LoginStore.getState().token
};
}
diff --git a/src/simulator/select-simulator.js b/src/simulator/select-simulator.js
index b9c69c8..823750d 100644
--- a/src/simulator/select-simulator.js
+++ b/src/simulator/select-simulator.js
@@ -40,21 +40,23 @@ class SelectSimulator extends React.Component {
};
}
- componentWillReceiveProps(nextProps) {
- if (nextProps.value === this.state.selectedSimulator) {
- return;
- }
+ static getDerivedStateFromProps(props, state){
+ if (props.value === state.selectedSimulator) {
+ return null; // no change
+ }
- let selectedSimulator = nextProps.value;
- if (selectedSimulator == null) {
- if (this.state.simulators.length > 0) {
- selectedSimulator = this.state.simulators[0].id;
- } else {
- selectedSimulator = '';
- }
+ let selectedSimulator = props.value;
+ if (selectedSimulator == null) {
+ if (state.simulators.length > 0) {
+ selectedSimulator = state.simulators[0].id;
+ } else {
+ selectedSimulator = '';
}
+ }
- this.setState({ selectedSimulator });
+ return {
+ selectedSimulator
+ };
}
handleChange = event => {
@@ -66,7 +68,7 @@ class SelectSimulator extends React.Component {
this.props.onChange(simulator);
}
- }
+ };
render() {
const simulatorOptions = this.state.simulators.map(s =>
diff --git a/src/simulator/simulator-action.js b/src/simulator/simulator-action.js
index 765856f..9e29deb 100644
--- a/src/simulator/simulator-action.js
+++ b/src/simulator/simulator-action.js
@@ -20,7 +20,7 @@
******************************************************************************/
import React from 'react';
-import { Button, DropdownButton, DropdownItem } from 'react-bootstrap';
+import { Button, ButtonToolbar, DropdownButton, DropdownItem } from 'react-bootstrap';
class SimulatorAction extends React.Component {
constructor(props) {
@@ -31,14 +31,17 @@ class SimulatorAction extends React.Component {
};
}
- componentWillReceiveProps(nextProps) {
- if (this.state.selectedAction == null) {
- if (nextProps.actions != null && nextProps.actions.length > 0) {
- this.setState({ selectedAction: nextProps.actions[0] });
- }
+ static getDerivedStateFromProps(props, state){
+ if (state.selectedAction == null) {
+ if (props.actions != null && props.actions.length > 0) {
+ return{
+ selectedAction: props.actions[0]
+ };
}
+ }
+ return null
}
-
+
setAction = id => {
// search action
for (let action of this.props.actions) {
@@ -46,7 +49,7 @@ class SimulatorAction extends React.Component {
this.setState({ selectedAction: action });
}
}
- }
+ };
render() {
const actionList = this.props.actions.map(action => (
@@ -56,11 +59,13 @@ class SimulatorAction extends React.Component {
));
return
+
- {actionList}
+ {actionList}
-
this.props.runAction(this.state.selectedAction)}>Run
+
+
;
}
}
diff --git a/src/simulator/simulators.js b/src/simulator/simulators.js
index b1138ac..aa8fa25 100644
--- a/src/simulator/simulators.js
+++ b/src/simulator/simulators.js
@@ -27,7 +27,7 @@ import _ from 'lodash';
import AppDispatcher from '../common/app-dispatcher';
import SimulatorStore from './simulator-store';
-import UserStore from '../user/user-store';
+import LoginStore from '../user/login-store';
import Icon from '../common/icon';
import Table from '../common/table';
@@ -43,7 +43,7 @@ import FluxContainerConverter from "../common/FluxContainerConverter";
class Simulators extends Component {
static getStores() {
- return [ UserStore, SimulatorStore ];
+ return [ LoginStore, SimulatorStore ];
}
static statePrio(state) {
@@ -80,8 +80,7 @@ class Simulators extends Component {
});
return {
- sessionToken: UserStore.getState().token,
- sessionUserID: UserStore.getState().userid,
+ sessionToken: LoginStore.getState().token,
simulators,
modalSimulator: {},
deleteModal: false,
@@ -94,7 +93,6 @@ class Simulators extends Component {
AppDispatcher.dispatch({
type: 'simulators/start-load',
token: this.state.sessionToken,
- userid: this.state.sessionUserID
});
// Start timer for periodic refresh
@@ -114,7 +112,6 @@ class Simulators extends Component {
AppDispatcher.dispatch({
type: 'simulators/start-load',
token: this.state.sessionToken,
- userid: this.state.sessionUserID
});
}
}
@@ -128,7 +125,6 @@ class Simulators extends Component {
type: 'simulators/start-add',
data,
token: this.state.sessionToken,
- userid: this.state.sessionUserID
});
}
}
@@ -148,7 +144,6 @@ class Simulators extends Component {
type: 'simulators/start-edit',
data: simulator,
token: this.state.sessionToken,
- userid: this.state.sessionUserID
});
}
}
@@ -164,7 +159,6 @@ class Simulators extends Component {
type: 'simulators/start-remove',
data: this.state.modalSimulator,
token: this.state.sessionToken,
- userid: this.state.sessionUserID
});
}
@@ -186,7 +180,6 @@ class Simulators extends Component {
type: 'simulators/start-add',
data,
token: this.state.sessionToken,
- userid: this.state.sessionUserID
});
}
}
@@ -223,7 +216,6 @@ class Simulators extends Component {
simulator: this.state.simulators[index],
data: action.data,
token: this.state.sessionToken,
- userid: this.state.sessionUserID
});
}
}
diff --git a/src/user/edit-own-user.js b/src/user/edit-own-user.js
index bb37f50..fc63914 100644
--- a/src/user/edit-own-user.js
+++ b/src/user/edit-own-user.js
@@ -23,7 +23,7 @@ import React from 'react';
import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap';
import Dialog from '../common/dialogs/dialog';
-import UserStore from './user-store';
+//import LoginStore from './login-store';
class EditOwnUserDialog extends React.Component {
@@ -34,17 +34,15 @@ class EditOwnUserDialog extends React.Component {
this.state = {
username: '',
- mail: '',
- role: '',
id: '',
+ mail: '',
password: '',
oldPassword: '',
- active: '',
confirmpassword: ''
}
}
-
+
onClose(canceled) {
if (canceled === false) {
@@ -56,26 +54,22 @@ class EditOwnUserDialog extends React.Component {
}
}
-
+
handleChange(e) {
- let user = UserStore.getState().currentUser;
this.setState({ [e.target.id]: e.target.value });
// check all controls
- var username = true;
- var role = true;
- var mail = true;
- var pw = true;
- var active = true;
- var oldPassword = true;
- var confirmpassword = true;
+ let username = true;
+ let mail = true;
+ let pw = true;
+ let oldPassword = true;
+ let confirmpassword = true;
if (this.state.username === '') {
username = false;
}
-
if(this.state.mail === ''){
mail = false;
}
@@ -84,10 +78,6 @@ class EditOwnUserDialog extends React.Component {
pw = false;
}
- if(this.state.active === ''){
- active = false;
- }
-
if(this.state.oldPassword === ''){
oldPassword = false;
}
@@ -96,23 +86,26 @@ class EditOwnUserDialog extends React.Component {
confirmpassword = false;
}
-
- this.setState({
- role: user.role,
- id: user.id
- });
- // form is valid if any of the fields contain somethig
- this.valid = username || role || active || oldPassword || mail || pw || confirmpassword;
+ /*this.setState({
+ role: user.role,
+ id: user.id,
+ active: user.active
+ });*/
+
+ // form is valid if the following condition is met
+ this.valid = username || mail || (oldPassword && pw && confirmpassword);
}
resetState() {
this.setState({
- //username: this.props.user.username,
- //mail: this.props.user.mail,
- role: this.props.user.role,
- id: this.props.user.id
+ username: '',
+ mail: '',
+ oldPassword: '',
+ confirmpassword: '',
+ password: '',
+ id: this.props.user.id,
});
}
@@ -122,12 +115,12 @@ class EditOwnUserDialog extends React.Component {