Skip to content

VILLASweb
VILLASweb

Aufgrund einer Wartung wird GitLab am 04.06. zwischen 8:00 und 10:00 Uhr kurzzeitig nicht zur Verfügung stehen. / Due to maintenance, GitLab will be temporarily unavailable on 04.06. between 8:00 and 10:00 am.

Commit e8806892 authored by Sonja Happ's avatar Sonja Happ
Browse files
Options

Merge branch 'fix-react-lifecycles' into example-dashboard

parents 0dc1365a 6f4604c7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 5082 additions and 3258 deletions
package-lock.json
View file @ e8806892
This diff is collapsed.
package.json
View file @ e8806892
...@@ -3,51 +3,54 @@ ...@@ -3,51 +3,54 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.19", "@fortawesome/fontawesome-svg-core": "^1.2.26",
"@fortawesome/free-solid-svg-icons": "^5.9.0", "@fortawesome/free-solid-svg-icons": "^5.12.0",
"@fortawesome/react-fontawesome": "^0.1.4", "@fortawesome/react-fontawesome": "^0.1.8",
"babel-runtime": "^6.26.0", "babel-runtime": "^6.26.0",
"bootstrap": "^4.3.1", "bootstrap": "^4.4.1",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"d3-array": "^2.2.0", "d3-array": "^2.4.0",
"d3-axis": "^1.0.12", "d3-axis": "^1.0.12",
"d3-scale": "^3.0.0", "d3-scale": "^3.2.1",
"d3-scale-chromatic": "^1.3.3", "d3-scale-chromatic": "^1.5.0",
"d3-selection": "^1.4.0", "d3-selection": "^1.4.1",
"d3-shape": "^1.3.5", "d3-shape": "^1.3.7",
"d3-time-format": "^2.1.3", "d3-time-format": "^2.2.3",
"es6-promise": "^4.2.8", "es6-promise": "^4.2.8",
"fibers": "^4.0.2",
"file-saver": "^2.0.2", "file-saver": "^2.0.2",
"flux": "^3.1.3", "flux": "^3.1.3",
"frontend-collective-react-dnd-scrollzone": "^1.0.2", "frontend-collective-react-dnd-scrollzone": "^1.0.2",
"gaugeJS": "^1.3.7", "gaugeJS": "^1.3.7",
"handlebars": "^4.5.1", "handlebars": "^4.7.1",
"immutable": "^4.0.0-rc.12", "immutable": "^4.0.0-rc.12",
"jquery": "^3.4.1", "jquery": "^3.4.1",
"jszip": "^3.2.2", "jszip": "^3.2.2",
"libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git", "libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"node-sass": "^4.13.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"rc-slider": "^8.6.13", "rc-slider": "^8.7.1",
"react": "^16.8.6", "react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.9", "react-bootstrap": "^1.0.0-beta.16",
"react-contexify": "^4.1.1", "react-contexify": "^4.1.1",
"react-d3": "^0.4.0", "react-d3": "^0.4.0",
"react-dnd": "^9.3.2", "react-dnd": "^9.5.1",
"react-dnd-html5-backend": "^9.3.2", "react-dnd-html5-backend": "^9.5.1",
"react-dom": "^16.8.6", "react-dom": "^16.12.0",
"react-fullscreenable": "^2.5.1-0", "react-fullscreenable": "^2.5.1-0",
"react-grid-system": "^4.4.10", "react-grid-system": "^4.4.11",
"react-json-view": "^1.19.1", "react-json-view": "^1.19.1",
"react-notification-system": "^0.2.17", "react-notification-system": "^0.2.17",
"react-rnd": "^10.0.0", "react-rnd": "^10.1.4",
"react-router": "^5.0.1", "react-router": "^5.1.2",
"react-router-dom": "^5.0.1", "react-router-dom": "^5.1.2",
"react-scripts": "^3.0.1", "react-scripts": "^3.3.0",
"react-sortable-tree": "^2.6.2", "react-sortable-tree": "^2.7.1",
"react-svg-pan-zoom": "^3.1.0", "react-svg-pan-zoom": "^3.8.0",
"superagent": "^5.1.0", "sass": "^1.24.4",
"typescript": "^3.5.3", "superagent": "^5.2.1",
"typescript": "^3.7.4",
"validator": "^11.1.0" "validator": "^11.1.0"
}, },
"devDependencies": { "devDependencies": {
......
src/app.js
View file @ e8806892
...@@ -68,7 +68,9 @@ class App extends React.Component { ...@@ -68,7 +68,9 @@ class App extends React.Component {
}; };
} }
componentWillMount() { componentDidMount() {
NotificationsDataManager.setSystem(this.refs.notificationSystem);
// if token stored locally, request user // if token stored locally, request user
let token = localStorage.getItem("token"); let token = localStorage.getItem("token");
let currentUser = JSON.parse(localStorage.getItem("currentUser")); let currentUser = JSON.parse(localStorage.getItem("currentUser"));
...@@ -79,9 +81,7 @@ class App extends React.Component { ...@@ -79,9 +81,7 @@ class App extends React.Component {
currentUser: currentUser currentUser: currentUser
}); });
} }
}
componentDidMount() {
// load all simulators and scenarios to fetch data // load all simulators and scenarios to fetch data
// AppDispatcher.dispatch({ // AppDispatcher.dispatch({
// type: 'simulators/start-load', // type: 'simulators/start-load',
...@@ -93,7 +93,7 @@ class App extends React.Component { ...@@ -93,7 +93,7 @@ class App extends React.Component {
// token: this.state.token // token: this.state.token
// }); // });
NotificationsDataManager.setSystem(this.refs.notificationSystem);
} }
showSidebarMenu = () => { showSidebarMenu = () => {
......
src/common/editable-header.js
View file @ e8806892
...@@ -36,8 +36,10 @@ class EditableHeader extends React.Component { ...@@ -36,8 +36,10 @@ class EditableHeader extends React.Component {
}; };
} }
componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(props, state){
this.setState({ title: nextProps.title }); return {
title: props.title
};
} }
edit = () => { edit = () => {
......
src/common/home.js
View file @ e8806892
...@@ -45,12 +45,6 @@ class Home extends React.Component { ...@@ -45,12 +45,6 @@ class Home extends React.Component {
return '?'; return '?';
} }
componentWillMount() {
//RestAPI.get('/api/v1/counts').then(response => {
// this.setState({ counts: response });
//});
}
render() { render() {
return ( return (
<div className="home-container"> <div className="home-container">
......
src/common/table.js
View file @ e8806892
...@@ -32,7 +32,7 @@ class CustomTable extends Component { ...@@ -32,7 +32,7 @@ class CustomTable extends Component {
this.activeInput = null; this.activeInput = null;
this.state = { this.state = {
rows: this.getRows(props), rows: CustomTable.getRows(props),
editCell: [ -1, -1 ] editCell: [ -1, -1 ]
}; };
} }
...@@ -45,7 +45,7 @@ class CustomTable extends Component { ...@@ -45,7 +45,7 @@ class CustomTable extends Component {
this.setState({ editCell: [ column, row ]}); // x, y this.setState({ editCell: [ column, row ]}); // x, y
} }
addCell(data, index, child) { static addCell(data, index, child) {
// add data to cell // add data to cell
let content = null; let content = null;
...@@ -112,7 +112,7 @@ class CustomTable extends Component { ...@@ -112,7 +112,7 @@ class CustomTable extends Component {
} }
if (child.props.checkbox) { if (child.props.checkbox) {
const checkboxKey = this.props.checkboxKey; const checkboxKey = child.props.checkboxKey;
cell.push(<FormCheck className="table-control-checkbox" inline checked={checkboxKey ? data[checkboxKey] : null} onChange={e => child.props.onChecked(index, e)} />); cell.push(<FormCheck className="table-control-checkbox" inline checked={checkboxKey ? data[checkboxKey] : null} onChange={e => child.props.onChecked(index, e)} />);
} }
...@@ -122,12 +122,12 @@ class CustomTable extends Component { ...@@ -122,12 +122,12 @@ class CustomTable extends Component {
} }
return cell; return cell;
} } // addCell
componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(props, state){
const rows = this.getRows(nextProps); const rows = CustomTable.getRows(props);
this.setState({ rows }); return { rows };
} }
componentDidUpdate() { componentDidUpdate() {
...@@ -147,7 +147,7 @@ class CustomTable extends Component { ...@@ -147,7 +147,7 @@ class CustomTable extends Component {
this.setState({ editCell: [ -1, -1 ] }); this.setState({ editCell: [ -1, -1 ] });
} }
getRows(props) { static getRows(props) {
if (props.data == null) { if (props.data == null) {
return []; return [];
} }
...@@ -156,13 +156,13 @@ class CustomTable extends Component { ...@@ -156,13 +156,13 @@ class CustomTable extends Component {
// check if multiple columns // check if multiple columns
if (Array.isArray(props.children) === false) { if (Array.isArray(props.children) === false) {
// table only has a single column // table only has a single column
return [ this.addCell(data, index, props.children) ]; return [ CustomTable.addCell(data, index, props.children) ];
} }
const row = []; const row = [];
for (let child of props.children) { for (let child of props.children) {
row.push(this.addCell(data, index, child)); row.push(CustomTable.addCell(data, index, child));
} }
return row; return row;
......
src/file/select-file.js
View file @ e8806892
...@@ -29,123 +29,123 @@ import LoginStore from '../user/login-store'; ...@@ -29,123 +29,123 @@ import LoginStore from '../user/login-store';
import AppDispatcher from '../common/app-dispatcher'; import AppDispatcher from '../common/app-dispatcher';
class SelectFile extends React.Component { class SelectFile extends React.Component {
static getStores() { static getStores() {
return [ FileStore, LoginStore ]; 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() { let selectedSimulator = props.value;
return { if (selectedSimulator == null) {
files: FileStore.getState(), if (state.simulators.length > 0) {
sessionToken: LoginStore.getState().token, selectedSimulator = state.simulators[0]._id;
selectedFile: '', } else {
uploadFile: null, selectedSimulator = '';
uploadProgress: 0 }
};
} }
componentDidMount() { return {selectedSimulator};
AppDispatcher.dispatch({ }
type: 'files/start-load',
token: this.state.sessionToken handleChange = event => {
}); this.setState({ selectedFile: event.target.value });
}
// send file to callback
componentWillReceiveProps(nextProps) { if (this.props.onChange != null) {
if (nextProps.value === this.state.selectedSimulator) { const file = this.state.files.find(f => f._id === event.target.value);
return;
} this.props.onChange(file);
}
let selectedSimulator = nextProps.value; };
if (selectedSimulator == null) {
if (this.state.simulators.length > 0) { selectUploadFile = event => {
selectedSimulator = this.state.simulators[0]._id; this.setState({ uploadFile: event.target.files[0] });
} else { };
selectedSimulator = '';
} startFileUpload = () => {
} // upload file
const formData = new FormData();
this.setState({ selectedSimulator }); formData.append(0, this.state.uploadFile);
}
AppDispatcher.dispatch({
handleChange = event => { type: 'files/start-upload',
this.setState({ selectedFile: event.target.value }); data: formData,
token: this.state.sessionToken,
// send file to callback progressCallback: this.updateUploadProgress,
if (this.props.onChange != null) { finishedCallback: this.clearProgress
const file = this.state.files.find(f => f._id === event.target.value); });
};
this.props.onChange(file);
} updateUploadProgress = event => {
} this.setState({ uploadProgress: parseInt(event.percent.toFixed(), 10) });
};
selectUploadFile = event => {
this.setState({ uploadFile: event.target.files[0] }); clearProgress = () => {
} // select uploaded file
const selectedFile = this.state.files[this.state.files.length - 1]._id;
startFileUpload = () => { this.setState({ selectedFile, uploadProgress: 0 });
// upload file };
const formData = new FormData();
formData.append(0, this.state.uploadFile); render() {
const fileOptions = this.state.files.map(f =>
AppDispatcher.dispatch({ <option key={f._id} value={f._id}>{f.name}</option>
type: 'files/start-upload', );
data: formData,
token: this.state.sessionToken, const progressBarStyle = {
progressCallback: this.updateUploadProgress, marginLeft: '100px',
finishedCallback: this.clearProgress marginTop: '-25px'
}); };
}
return <div>
updateUploadProgress = event => { <FormGroup>
this.setState({ uploadProgress: parseInt(event.percent.toFixed(), 10) }); <Col componentClass={FormLabel} sm={3} md={2}>
} {this.props.name}
</Col>
clearProgress = () => {
// select uploaded file <Col sm={9} md={10}>
const selectedFile = this.state.files[this.state.files.length - 1]._id; <FormControl disabled={this.props.disabled} componentClass='select' placeholder='Select file' onChange={this.handleChange}>
this.setState({ selectedFile, uploadProgress: 0 }); {fileOptions}
} </FormControl>
</Col>
render() { </FormGroup>
const fileOptions = this.state.files.map(f =>
<option key={f._id} value={f._id}>{f.name}</option> <FormGroup>
); <Col sm={9} md={10} smOffset={3} mdOffset={2}>
<FormControl disabled={this.props.disabled} type='file' onChange={this.selectUploadFile} />
const progressBarStyle = { </Col>
marginLeft: '100px', </FormGroup>
marginTop: '-25px'
}; <FormGroup>
<Col sm={9} md={10} smOffset={3} mdOffset={2}>
return <div> <Button disabled={this.props.disabled} bsSize='small' onClick={this.startFileUpload}>
<FormGroup> Upload file
<Col componentClass={FormLabel} sm={3} md={2}> </Button>
{this.props.name}
</Col> <ProgressBar striped active now={this.state.uploadProgress} label={this.state.uploadProgress + '%'} style={progressBarStyle} />
</Col>
<Col sm={9} md={10}> </FormGroup>
<FormControl disabled={this.props.disabled} componentClass='select' placeholder='Select file' onChange={this.handleChange}> </div>;
{fileOptions} }
</FormControl>
</Col>
</FormGroup>
<FormGroup>
<Col sm={9} md={10} smOffset={3} mdOffset={2}>
<FormControl disabled={this.props.disabled} type='file' onChange={this.selectUploadFile} />
</Col>
</FormGroup>
<FormGroup>
<Col sm={9} md={10} smOffset={3} mdOffset={2}>
<Button disabled={this.props.disabled} bsSize='small' onClick={this.startFileUpload}>
Upload file
</Button>
<ProgressBar striped active now={this.state.uploadProgress} label={this.state.uploadProgress + '%'} style={progressBarStyle} />
</Col>
</FormGroup>
</div>;
}
} }
let fluxContainerConverter = require('../common/FluxContainerConverter'); let fluxContainerConverter = require('../common/FluxContainerConverter');
......
src/simulationmodel/signal-mapping.js
View file @ e8806892
...@@ -41,12 +41,15 @@ class SignalMapping extends React.Component { ...@@ -41,12 +41,15 @@ class SignalMapping extends React.Component {
}; };
} }
componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(props, state){
if (nextProps.length === this.state.length && nextProps.signals === this.state.signals) { if (props.length === state.length && props.signals === state.signals) {
return; return null
} }
this.setState({ length: nextProps.length, signals: nextProps.signals }); return{
length: props.length,
signals: props.signals
};
} }
validateLength(){ validateLength(){
......
src/simulationmodel/simulation-model.js
View file @ e8806892
...@@ -47,7 +47,7 @@ class SimulationModel extends React.Component { ...@@ -47,7 +47,7 @@ class SimulationModel extends React.Component {
}; };
} }
componentWillMount() { componentDidMount() {
AppDispatcher.dispatch({ AppDispatcher.dispatch({
type: 'simulationModels/start-load', type: 'simulationModels/start-load',
data: this.props.match.params.simulationModel, data: this.props.match.params.simulationModel,
......
src/simulator/select-simulator.js
View file @ e8806892
...@@ -38,21 +38,23 @@ class SelectSimulator extends React.Component { ...@@ -38,21 +38,23 @@ class SelectSimulator extends React.Component {
}; };
} }
componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(props, state){
if (nextProps.value === this.state.selectedSimulator) { if (props.value === state.selectedSimulator) {
return; return null; // no change
} }
let selectedSimulator = nextProps.value; let selectedSimulator = props.value;
if (selectedSimulator == null) { if (selectedSimulator == null) {
if (this.state.simulators.length > 0) { if (state.simulators.length > 0) {
selectedSimulator = this.state.simulators[0].id; selectedSimulator = state.simulators[0].id;
} else { } else {
selectedSimulator = ''; selectedSimulator = '';
}
} }
}
this.setState({ selectedSimulator }); return {
selectedSimulator
};
} }
handleChange = event => { handleChange = event => {
...@@ -64,7 +66,7 @@ class SelectSimulator extends React.Component { ...@@ -64,7 +66,7 @@ class SelectSimulator extends React.Component {
this.props.onChange(simulator); this.props.onChange(simulator);
} }
} };
render() { render() {
const simulatorOptions = this.state.simulators.map(s => const simulatorOptions = this.state.simulators.map(s =>
......
src/simulator/simulator-action.js
View file @ e8806892
...@@ -31,12 +31,15 @@ class SimulatorAction extends React.Component { ...@@ -31,12 +31,15 @@ class SimulatorAction extends React.Component {
}; };
} }
componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(props, state){
if (this.state.selectedAction == null) { if (state.selectedAction == null) {
if (nextProps.actions != null && nextProps.actions.length > 0) { if (props.actions != null && props.actions.length > 0) {
this.setState({ selectedAction: nextProps.actions[0] }); return{
} selectedAction: props.actions[0]
};
} }
}
return null
} }
setAction = id => { setAction = id => {
...@@ -46,7 +49,7 @@ class SimulatorAction extends React.Component { ...@@ -46,7 +49,7 @@ class SimulatorAction extends React.Component {
this.setState({ selectedAction: action }); this.setState({ selectedAction: action });
} }
} }
} };
render() { render() {
const actionList = this.props.actions.map(action => ( const actionList = this.props.actions.map(action => (
......
src/simulator/simulators.js
View file @ e8806892
...@@ -87,7 +87,7 @@ class Simulators extends Component { ...@@ -87,7 +87,7 @@ class Simulators extends Component {
}; };
} }
componentWillMount() { componentDidMount() {
AppDispatcher.dispatch({ AppDispatcher.dispatch({
type: 'simulators/start-load', type: 'simulators/start-load',
token: this.state.sessionToken, token: this.state.sessionToken,
......
src/user/login.js
View file @ e8806892
...@@ -50,13 +50,14 @@ class Login extends Component { ...@@ -50,13 +50,14 @@ class Login extends Component {
NotificationsDataManager.setSystem(this.refs.notificationSystem); NotificationsDataManager.setSystem(this.refs.notificationSystem);
} }
componentWillUpdate(nextProps, nextState) { componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
// if token stored locally, request user // if token stored locally, request user
if (nextState.token == null) { if (this.state.token == null) {
const token = localStorage.getItem('token'); const token = localStorage.getItem('token');
const currentUser = localStorage.getItem('currentUser'); const currentUser = localStorage.getItem('currentUser');
if (token != null && token !== '' && nextState.currentUser == null) { if (token != null && token !== '' && this.state.currentUser == null) {
AppDispatcher.dispatch({ AppDispatcher.dispatch({
type: 'users/logged-in', type: 'users/logged-in',
token: token, token: token,
...@@ -65,12 +66,13 @@ class Login extends Component { ...@@ -65,12 +66,13 @@ class Login extends Component {