Commit 8ace4275 authored by Sonja Happ's avatar Sonja Happ
Browse files

- update a lot of dependencies

- adaptions in code for compatibility with new package version (esp. react-bootstrap, react-dnd, and d3-scale)
- add (ugly) workaround for flux containers to work with ES6
- use node 12.2 in Dockerfile
parent bc963c26
This diff is collapsed.
......@@ -3,47 +3,51 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/free-solid-svg-icons": "^5.5.0",
"@fortawesome/react-fontawesome": "^0.1.3",
"@fortawesome/fontawesome-svg-core": "^1.2.19",
"@fortawesome/free-solid-svg-icons": "^5.9.0",
"@fortawesome/react-fontawesome": "^0.1.4",
"babel-runtime": "^6.26.0",
"bootstrap": "^3.3.7",
"bootstrap": "^4.3.1",
"classnames": "^2.2.6",
"d3-array": "^1.2.4",
"d3-array": "^2.2.0",
"d3-axis": "^1.0.12",
"d3-scale": "^1.0.6",
"d3-selection": "^1.3.2",
"d3-shape": "^1.2.2",
"d3-scale": "^3.0.0",
"d3-scale-chromatic": "^1.3.3",
"d3-selection": "^1.4.0",
"d3-shape": "^1.3.5",
"d3-time-format": "^2.1.3",
"es6-promise": "^4.2.5",
"file-saver": "^1.3.8",
"flux": "^3.1.2",
"gaugeJS": "^1.3.2",
"handlebars": "^4.1.1",
"immutable": "^3.8.1",
"jszip": "^3.2.0",
"es6-promise": "^4.2.8",
"file-saver": "^2.0.2",
"flux": "^3.1.3",
"frontend-collective-react-dnd-scrollzone": "^1.0.2",
"gaugeJS": "^1.3.7",
"handlebars": "^4.1.2",
"immutable": "^4.0.0-rc.12",
"jquery": "^3.4.1",
"jszip": "^3.2.2",
"libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git",
"lodash": "^4.17.11",
"prop-types": "^15.6.2",
"rc-slider": "^8.6.3",
"react": "^16.6.3",
"react-bootstrap": "^0.31.1",
"react-contexify": "^3.0.3",
"lodash": "^4.17.15",
"prop-types": "^15.7.2",
"rc-slider": "^8.6.13",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.9",
"react-contexify": "^4.1.1",
"react-d3": "^0.4.0",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dom": "^16.6.3",
"react-fullscreenable": "^2.5.0",
"react-dnd": "^9.3.2",
"react-dnd-html5-backend": "^9.3.2",
"react-dom": "^16.8.6",
"react-fullscreenable": "^2.5.1-0",
"react-json-view": "^1.19.1",
"react-notification-system": "^0.2.17",
"react-rnd": "^7.4.3",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-rnd": "^10.0.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.0.1",
"react-sortable-tree": "^0.1.19",
"react-svg-pan-zoom": "^2.18.0",
"superagent": "^3.8.3",
"validator": "^10.9.0"
"react-sortable-tree": "^2.6.2",
"react-svg-pan-zoom": "^3.1.0",
"superagent": "^5.1.0",
"typescript": "^3.5.3",
"validator": "^11.1.0"
},
"devDependencies": {
"chai": "^4.2.0"
......
FROM node:8.6 AS builder
FROM node:12.2 AS builder
RUN apt-get install -y \
git
......
......@@ -20,7 +20,7 @@
******************************************************************************/
import React from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
import Dialog from './dialog';
......@@ -80,12 +80,12 @@ class EditProjectDialog extends React.Component {
<Dialog show={this.props.show} title="Edit Simulation" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
<form>
<FormGroup controlId="name" validationState={this.validateForm('name')}>
<ControlLabel>Name</ControlLabel>
<FormLabel>Name</FormLabel>
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
<FormGroup controlId="simulation">
<ControlLabel>Simulation</ControlLabel>
<FormLabel>Simulation</FormLabel>
<FormControl componentClass="select" placeholder="Select simulation" value={this.state.simulation} onChange={(e) => this.handleChange(e)}>
{this.props.simulations.map(simulation => (
<option key={simulation._id} value={simulation._id}>{simulation.name}</option>
......
......@@ -20,7 +20,7 @@
******************************************************************************/
import React from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
import Dialog from './dialog';
import ParametersEditor from '../parameters-editor';
......@@ -85,13 +85,13 @@ class EditSimulationDialog extends React.Component {
return <Dialog show={this.props.show} title='Edit Simulation' buttonTitle='Save' onClose={this.onClose} onReset={this.resetState} valid={true}>
<form>
<FormGroup controlId='name' validationState={this.validateForm('name')}>
<ControlLabel>Name</ControlLabel>
<FormLabel>Name</FormLabel>
<FormControl type='text' placeholder='Enter name' value={this.state.name} onChange={this.handleChange} />
<FormControl.Feedback />
</FormGroup>
<FormGroup controlId='startParameters'>
<ControlLabel>Start Parameters</ControlLabel>
<FormLabel>Start Parameters</FormLabel>
<ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} />
</FormGroup>
......
......@@ -20,7 +20,7 @@
******************************************************************************/
import React from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
import _ from 'lodash';
import Dialog from './dialog';
......@@ -74,17 +74,17 @@ class EditSimulatorDialog extends React.Component {
<Dialog show={this.props.show} title="Edit Simulator" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
<form>
<FormGroup controlId="name">
<ControlLabel>Name</ControlLabel>
<FormLabel>Name</FormLabel>
<FormControl type="text" placeholder={_.get(this.props.simulator, 'rawProperties.name')} value={this.state.name} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
<FormGroup controlId="endpoint">
<ControlLabel>Endpoint</ControlLabel>
<FormLabel>Endpoint</FormLabel>
<FormControl type="text" placeholder={_.get(this.props.simulator, 'rawProperties.endpoint')} value={this.state.endpoint || 'http://' } onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
<FormGroup controlId='properties'>
<ControlLabel>Properties</ControlLabel>
<FormLabel>Properties</FormLabel>
<ParametersEditor content={_.merge({}, this.props.simulator.rawProperties, this.props.simulator.properties)} disabled={true} />
</FormGroup>
</form>
......
......@@ -20,7 +20,7 @@
******************************************************************************/
import React from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
import Dialog from './dialog';
......@@ -82,16 +82,16 @@ class EditUserDialog extends React.Component {
<Dialog show={this.props.show} title="Edit user" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
<form>
<FormGroup controlId="username" validationState={this.validateForm('username')}>
<ControlLabel>Username</ControlLabel>
<FormLabel>Username</FormLabel>
<FormControl type="text" placeholder="Enter username" value={this.state.username} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
<FormGroup controlId="mail">
<ControlLabel>E-mail</ControlLabel>
<FormLabel>E-mail</FormLabel>
<FormControl type="text" placeholder="Enter e-mail" value={this.state.mail} onChange={(e) => this.handleChange(e)} />
</FormGroup>
<FormGroup controlId="role" validationState={this.validateForm('role')}>
<ControlLabel>Role</ControlLabel>
<FormLabel>Role</FormLabel>
<FormControl componentClass="select" placeholder="Select role" value={this.state.role} onChange={(e) => this.handleChange(e)}>
<option key='1' value='admin'>Administrator</option>
<option key='2' value='user'>User</option>
......
......@@ -20,7 +20,7 @@
******************************************************************************/
import React from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
import Dialog from './dialog';
......@@ -78,7 +78,7 @@ class EditVisualizationDialog extends React.Component {
<Dialog show={this.props.show} title="Edit Visualization" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
<form>
<FormGroup controlId="name" validationState={this.validateForm('name')}>
<ControlLabel>Name</ControlLabel>
<FormLabel>Name</FormLabel>
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
......
......@@ -20,7 +20,7 @@
******************************************************************************/
import React from 'react';
import { FormGroup, Checkbox } from 'react-bootstrap';
import { FormGroup, FormCheck } from 'react-bootstrap';
class EditWidgetAspectControl extends React.Component {
constructor(props) {
......@@ -40,10 +40,10 @@ class EditWidgetAspectControl extends React.Component {
render() {
return (
<FormGroup>
<Checkbox id="lockAspect" checked={this.state.widget.lockAspect} onChange={e => this.props.handleChange(e)}>Lock Aspect</Checkbox>
<FormCheck id="lockAspect" checked={this.state.widget.lockAspect} onChange={e => this.props.handleChange(e)}>Lock Aspect</FormCheck>
</FormGroup>
);
}
}
export default EditWidgetAspectControl;
\ No newline at end of file
export default EditWidgetAspectControl;
......@@ -20,7 +20,7 @@
******************************************************************************/
import React from 'react';
import { FormGroup, Checkbox } from 'react-bootstrap';
import { FormGroup, FormCheck } from 'react-bootstrap';
class EditWidgetCheckboxControl extends React.Component {
constructor(props) {
......@@ -37,9 +37,9 @@ class EditWidgetCheckboxControl extends React.Component {
render() {
return <FormGroup>
<Checkbox id={this.props.controlId} checked={this.state.widget[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)}>{this.props.text}</Checkbox>
<FormCheck id={this.props.controlId} checked={this.state.widget[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)}>{this.props.text}</FormCheck>
</FormGroup>;
}
}
export default EditWidgetCheckboxControl;
\ No newline at end of file
export default EditWidgetCheckboxControl;
......@@ -21,16 +21,18 @@
******************************************************************************/
import React, { Component } from 'react';
import { FormGroup, Col, Row, Radio, ControlLabel } from 'react-bootstrap';
import { FormGroup, Col, Row, FormCheck, FormLabel } from 'react-bootstrap';
import classNames from 'classnames';
import { scaleOrdinal, schemeCategory20 } from 'd3-scale';
import { scaleOrdinal } from 'd3-scale';
import {schemeCategory10} from 'd3-scale-chromatic'
// schemeCategory20 no longer available in d3
class EditWidgetColorControl extends Component {
static get ColorPalette() {
let colorCount = 0;
const colors = [];
const colorScale = scaleOrdinal(schemeCategory20);
const colorScale = scaleOrdinal(schemeCategory10);
while (colorCount < 20) { colors.push(colorScale(colorCount)); colorCount++; }
colors.unshift('#000', '#FFF'); // include black and white
......@@ -55,7 +57,7 @@ class EditWidgetColorControl extends Component {
return (
<FormGroup bsClass="color-control">
<Row>
<Col componentClass={ControlLabel} style={{whiteSpace: 'nowrap' }} sm={2}>
<Col componentClass={FormLabel} style={{whiteSpace: 'nowrap' }} sm={2}>
{ this.props.label }
</Col>
<Col sm={10} bsClass='colors-column'>
......@@ -70,7 +72,7 @@ class EditWidgetColorControl extends Component {
'checked': idx === this.state.widget[this.props.controlId]
});
return (<Radio key={idx} name={this.props.controlId} style={colorStyle} className={checkedClass} value={idx} inline onChange={(e) => this.props.handleChange({target: { id: this.props.controlId, value: idx}})} />)
return (<FormCheck type='radio' key={idx} name={this.props.controlId} style={colorStyle} className={checkedClass} value={idx} inline onChange={(e) => this.props.handleChange({target: { id: this.props.controlId, value: idx}})} />)
}
)
}
......
......@@ -20,7 +20,7 @@
******************************************************************************/
import React from 'react';
import { FormGroup, ControlLabel, Button } from 'react-bootstrap';
import { FormGroup, FormLabel, Button } from 'react-bootstrap';
import Icon from '../icon';
......@@ -115,7 +115,7 @@ class EditWidgetColorZonesControl extends React.Component {
render() {
return <FormGroup>
<ControlLabel>Color zones</ControlLabel>
<FormLabel>Color zones</FormLabel>
<Table data={this.state.widget.zones}>
<TableColumn width="20" checkbox onChecked={this.checkedCell} />
......
......@@ -20,7 +20,7 @@
**********************************************************************************/
import React from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
class EditWidgetHTMLContent extends React.Component {
constructor(props) {
......@@ -43,7 +43,7 @@ class EditWidgetHTMLContent extends React.Component {
render() {
return <FormGroup controlId={this.props.controlId}>
<ControlLabel>HTML Content</ControlLabel>
<FormLabel>HTML Content</FormLabel>
<FormControl onKeyPress={this.handleKeyIgnore} componentClass="textarea" style={{ height: 200 }} placeholder={this.props.placeholder} value={this.state.widget[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)} />
</FormGroup>;
}
......
......@@ -20,7 +20,7 @@
******************************************************************************/
import React from 'react';
import { FormGroup, FormControl, ControlLabel, Button, ProgressBar } from 'react-bootstrap';
import { FormGroup, FormControl, FormLabel, Button, ProgressBar } from 'react-bootstrap';
import AppDispatcher from '../../app-dispatcher';
......@@ -72,7 +72,7 @@ class EditImageWidgetControl extends React.Component {
render() {
return <div>
<FormGroup controlId="file">
<ControlLabel>Image</ControlLabel>
<FormLabel>Image</FormLabel>
<FormControl componentClass="select" value={this.state.widget.file} onChange={(e) => this.props.handleChange(e)}>
{this.props.files.length === 0 ? (
<option disabled value style={{ display: 'none' }}>No images found, please upload one first.</option>
......@@ -88,7 +88,7 @@ class EditImageWidgetControl extends React.Component {
</FormGroup>
<FormGroup controlId="upload">
<ControlLabel>Upload</ControlLabel>
<FormLabel>Upload</FormLabel>
<FormControl type="file" onChange={(e) => this.setState({ fileList: e.target.files }) } />
</FormGroup>
......
......@@ -20,7 +20,7 @@
******************************************************************************/
import React from 'react';
import { FormGroup, FormControl, ControlLabel, Checkbox, Table } from 'react-bootstrap';
import { FormGroup, FormControl, FormLabel, FormCheck, Table } from 'react-bootstrap';
class EditWidgetMinMaxControl extends React.Component {
constructor(props) {
......@@ -42,8 +42,8 @@ class EditWidgetMinMaxControl extends React.Component {
render() {
return <FormGroup>
<ControlLabel>{this.props.label}</ControlLabel>
<Checkbox id={this.props.controlId + "UseMinMax"} checked={this.state.widget[this.props.controlId + "UseMinMax"] || ''} onChange={e => this.props.handleChange(e)}>Enable min-max</Checkbox>
<FormLabel>{this.props.label}</FormLabel>
<FormCheck id={this.props.controlId + "UseMinMax"} checked={this.state.widget[this.props.controlId + "UseMinMax"] || ''} onChange={e => this.props.handleChange(e)}>Enable min-max</FormCheck>
<Table>
<tbody>
......
......@@ -20,7 +20,7 @@
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
class EditWidgetNumberControl extends Component {
constructor(props) {
......@@ -39,7 +39,7 @@ class EditWidgetNumberControl extends Component {
render() {
return (
<FormGroup controlId={this.props.controlId}>
<ControlLabel>{this.props.label}</ControlLabel>
<FormLabel>{this.props.label}</FormLabel>
<FormControl type="number" step="any" defaultValue={this.props.defaultValue} value={this.state.widget[this.props.controlId] || 0} onChange={e => this.props.handleChange(e)} />
</FormGroup>
);
......
......@@ -20,7 +20,7 @@
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, Col, Row, Radio, ControlLabel } from 'react-bootstrap';
import { FormGroup, Col, Row, FormCheck, FormLabel } from 'react-bootstrap';
import WidgetSlider from '../widgets/slider';
......@@ -48,7 +48,7 @@ class EditWidgetOrientation extends Component {
return (
<FormGroup controlId="orientation">
<Row>
<Col componentClass={ControlLabel} sm={2}>
<Col componentClass={FormLabel} sm={2}>
Orientation
</Col>
<Col sm={10}>
......@@ -58,9 +58,9 @@ class EditWidgetOrientation extends Component {
let name = WidgetSlider.OrientationTypes[type].name;
return (
<Radio inline key={value} name='orientation' checked={ value === this.state.widget.orientation } onChange={(e) => this.handleOrientationChange(value)}>
<FormCheck inline key={value} type='radio' name='orientation' checked={ value === this.state.widget.orientation } onChange={(e) => this.handleOrientationChange(value)}>
{ name }
</Radio>)
</FormCheck>)
})
}
</Col>
......
......@@ -20,7 +20,7 @@
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, ControlLabel } from 'react-bootstrap';
import { FormGroup, FormLabel } from 'react-bootstrap';
import ParametersEditor from '../parameters-editor';
class EditWidgetParametersControl extends Component {
......@@ -49,7 +49,7 @@ class EditWidgetParametersControl extends Component {
render() {
return (
<FormGroup controlId={this.props.controlId} validationState={this.props.validate ? this.props.validate(this.props.controlId) : null}>
<ControlLabel>{this.props.label}</ControlLabel>
<FormLabel>{this.props.label}</FormLabel>
<ParametersEditor content={this.state.widget[this.props.controlId] || {}} onChange={(v)=> this.handleChange(v)} />
</FormGroup>
);
......
......@@ -20,7 +20,7 @@
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
class EditWidgetSignalControl extends Component {
constructor(props) {
......@@ -53,7 +53,7 @@ class EditWidgetSignalControl extends Component {
return (
<FormGroup controlId="signal">
<ControlLabel>Signal</ControlLabel>
<FormLabel>Signal</FormLabel>
<FormControl componentClass="select" placeholder="Select signal" value={this.state.widget.signal} onChange={(e) => this.props.handleChange(e)}>
{
signalsToRender.length === 0 ? (
......
......@@ -20,7 +20,7 @@
**********************************************************************************/
import React, { Component } from 'react';
import { FormGroup, Checkbox, ControlLabel, FormControl } from 'react-bootstrap';
import { FormGroup, FormCheck, FormLabel, FormControl } from 'react-bootstrap';
class EditWidgetSignalsControl extends Component {
constructor(props) {
......@@ -65,13 +65,13 @@ class EditWidgetSignalsControl extends Component {
return (
<FormGroup>
<ControlLabel>Signals</ControlLabel>
<FormLabel>Signals</FormLabel>
{
signalsToRender.length === 0 || !this.state.widget.hasOwnProperty(this.props.controlId)? (
<FormControl.Static>No signals available.</FormControl.Static>
) : (
signalsToRender.map((signal, index) => (
<Checkbox key={index} checked={this.state.widget[this.props.controlId].indexOf(index) !== -1} onChange={(e) => this.handleSignalChange(e.target.checked, index)}>{signal.name}</Checkbox>
<FormCheck key={index} checked={this.state.widget[this.props.controlId].indexOf(index) !== -1} onChange={(e) => this.handleSignalChange(e.target.checked, index)}>{signal.name}</FormCheck>
))
)
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment