mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
WIP: update to React 17, Flux 4.0.0
This commit is contained in:
Sonja Happ
parent
c173048d6d
commit
98f1d5c3a7
7 changed files with 568 additions and 407 deletions
711
package-lock.json
generated
711
package-lock.json
generated
File diff suppressed because it is too large
Load diff
43
package.json
43
package.json
|
|
@ -5,13 +5,13 @@
|
|||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.32",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.1",
|
||||
"@fortawesome/react-fontawesome": "^0.1.13",
|
||||
"@fortawesome/react-fontawesome": "^0.1.14",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"bootstrap": "^4.5.3",
|
||||
"bufferutil": "^4.0.2",
|
||||
"bufferutil": "^4.0.3",
|
||||
"canvas": "^2.6.1",
|
||||
"classnames": "^2.2.6",
|
||||
"d3-array": "^2.8.0",
|
||||
"d3-array": "^2.9.1",
|
||||
"d3-axis": "^2.0.0",
|
||||
"d3-scale": "^3.2.3",
|
||||
"d3-scale-chromatic": "^2.0.0",
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
"es6-promise": "^4.2.8",
|
||||
"fibers": "^5.0.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"flux": "^3.1.3",
|
||||
"flux": "^4.0.0",
|
||||
"gaugeJS": "^1.3.7",
|
||||
"handlebars": "^4.7.6",
|
||||
"jquery": "^3.5.1",
|
||||
|
|
@ -29,38 +29,39 @@
|
|||
"libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git",
|
||||
"lodash": "^4.17.20",
|
||||
"moment": "^2.29.1",
|
||||
"multiselect-react-dropdown": "^1.6.2",
|
||||
"node-sass": "^4.14.1",
|
||||
"multiselect-react-dropdown": "^1.6.3",
|
||||
"node-sass": "^5.0.0",
|
||||
"popper.js": "^1.16.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"rc-slider": "^9.6.4",
|
||||
"react": "^16.14.0",
|
||||
"react-bootstrap": "^1.4.0",
|
||||
"rc-slider": "^9.7.1",
|
||||
"react": "^17.0.1",
|
||||
"react-bootstrap": "^1.4.3",
|
||||
"react-bootstrap-time-picker": "^2.0.1",
|
||||
"react-collapse": "^5.1.0",
|
||||
"react-color": "^2.19.3",
|
||||
"react-contexify": "^4.1.1",
|
||||
"react-contexify": "^5.0.0",
|
||||
"react-d3": "^0.4.0",
|
||||
"react-dnd": "^10.0.2",
|
||||
"react-dnd-html5-backend": "^10.0.2",
|
||||
"react-dom": "^16.14.0",
|
||||
"react-dnd": "^11.1.3",
|
||||
"react-dnd-html5-backend": "^11.1.3",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-full-screen": "^0.3.2-0",
|
||||
"react-fullscreenable": "^2.5.1-0",
|
||||
"react-grid-system": "^7.1.1",
|
||||
"react-json-view": "^1.19.1",
|
||||
"react-notification-system": "^0.4.0",
|
||||
"react-rnd": "^10.2.3",
|
||||
"react-rnd": "^10.2.4",
|
||||
"react-router": "^5.2.0",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "^4.0.1",
|
||||
"react-svg-pan-zoom": "^3.8.1",
|
||||
"react-svg-pan-zoom": "^3.10.0",
|
||||
"react-trafficlight": "^5.2.1",
|
||||
"sass": "^1.29.0",
|
||||
"sass": "^1.32.2",
|
||||
"superagent": "^6.1.0",
|
||||
"ts-node": "^9.0.0",
|
||||
"type-fest": "^0.13.1",
|
||||
"typescript": "^4.1.2",
|
||||
"utf-8-validate": "^5.0.3",
|
||||
"validator": "^13.1.17",
|
||||
"ts-node": "^9.1.1",
|
||||
"type-fest": "^0.20.2",
|
||||
"typescript": "^4.1.3",
|
||||
"utf-8-validate": "^5.0.4",
|
||||
"validator": "^13.5.2",
|
||||
"webpack-hot-middleware": "^2.25.0",
|
||||
"webpack-plugin-serve": "^1.2.1"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" type=image/x-icon href="favicon.ico">
|
||||
<link rel="shortcut icon" type=image/x-icon href="%PUBLIC_URL%/favicon.ico">
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tag above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import { DndProvider } from 'react-dnd';
|
||||
import HTML5Backend from 'react-dnd-html5-backend';
|
||||
import { HTML5Backend }from 'react-dnd-html5-backend';
|
||||
import NotificationSystem from 'react-notification-system';
|
||||
import { Redirect, Route } from 'react-router-dom';
|
||||
import { Col } from 'react-bootstrap';
|
||||
|
|
|
|||
|
|
@ -24,13 +24,13 @@ class DashboardButtonGroup extends React.Component {
|
|||
render() {
|
||||
const buttonStyle = {
|
||||
marginLeft: '12px',
|
||||
height: '44px',
|
||||
height: '44px',
|
||||
width : '35px'
|
||||
};
|
||||
|
||||
const iconStyle = {
|
||||
color: '#007bff',
|
||||
height: '25px',
|
||||
height: '25px',
|
||||
width : '25px'
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ class DashboardButtonGroup extends React.Component {
|
|||
buttons.push(
|
||||
<OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"save"}`}> Save changes </Tooltip>} >
|
||||
<Button variant= 'light' size="lg" key={key} onClick={this.props.onSave} style={buttonStyle}>
|
||||
<Icon icon="save" style={iconStyle} />
|
||||
<Icon icon="save" style={iconStyle} />
|
||||
</Button>
|
||||
</OverlayTrigger>,
|
||||
<OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"cancel"}`}> Discard changes </Tooltip>} >
|
||||
|
|
@ -59,7 +59,7 @@ class DashboardButtonGroup extends React.Component {
|
|||
buttons.push(
|
||||
<OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"expand"}`}> Change to fullscreen view </Tooltip>} >
|
||||
<Button key={key} variant= 'light' size="lg" onClick={this.props.onFullscreen} style={buttonStyle}>
|
||||
<Icon icon="expand" style={iconStyle}/>
|
||||
<Icon icon="expand" style={iconStyle}/>
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
|
|
@ -69,7 +69,7 @@ class DashboardButtonGroup extends React.Component {
|
|||
buttons.push(
|
||||
<OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"play"}`}> Continue simulation </Tooltip>} >
|
||||
<Button key={key} variant= 'light' size="lg" onClick={this.props.onUnpause} style={buttonStyle}>
|
||||
<Icon icon="play" style={iconStyle}/>
|
||||
<Icon icon="play" style={iconStyle}/>
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
|
|
@ -77,7 +77,7 @@ class DashboardButtonGroup extends React.Component {
|
|||
buttons.push(
|
||||
<OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"pause"}`}> Pause simulation </Tooltip>} >
|
||||
<Button key={key} variant= 'light' size="lg" onClick={this.props.onPause} style={buttonStyle}>
|
||||
<Icon icon="pause" style={iconStyle}/>
|
||||
<Icon icon="pause" style={iconStyle}/>
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
|
|
@ -110,7 +110,7 @@ class DashboardButtonGroup extends React.Component {
|
|||
buttons.push(
|
||||
<OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"layout"}`}> Add widgets and edit layout </Tooltip>} >
|
||||
<Button key={key} variant= 'light' size="lg" onClick={this.props.onEdit} style={buttonStyle}>
|
||||
<Icon icon="pen" style={iconStyle} />
|
||||
<Icon icon="pen" style={iconStyle} />
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -475,62 +475,39 @@ class Dashboard extends Component {
|
|||
const boxClasses = classNames('section', 'box', { 'fullscreen-padding': this.props.isFullscreen });
|
||||
let draggable = this.state.editing;
|
||||
let dropZoneHeight = this.state.dashboard.height;
|
||||
return <div className={boxClasses} >
|
||||
<div className='section-header box-header'>
|
||||
<div className="section-title">
|
||||
|
||||
|
||||
return (
|
||||
<div className={boxClasses} >
|
||||
<div className='section-header box-header'>
|
||||
<div className="section-title">
|
||||
<span>{this.state.dashboard.name}</span>
|
||||
</div>
|
||||
|
||||
<DashboardButtonGroup
|
||||
editing={this.state.editing}
|
||||
onEdit={this.startEditing.bind(this)}
|
||||
fullscreen={this.props.isFullscreen}
|
||||
paused={this.state.paused}
|
||||
onSave={this.saveEditing.bind(this)}
|
||||
onCancel={this.cancelEditing.bind(this)}
|
||||
onFullscreen={this.props.toggleFullscreen}
|
||||
onPause={this.pauseData.bind(this)}
|
||||
onUnpause={this.unpauseData.bind(this)}
|
||||
onEditFiles={this.startEditFiles.bind(this)}
|
||||
onEditOutputSignals={this.editOutputSignals.bind(this)}
|
||||
onEditInputSignals={this.editInputSignals.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DashboardButtonGroup
|
||||
editing={this.state.editing}
|
||||
onEdit={this.startEditing.bind(this)}
|
||||
fullscreen={this.props.isFullscreen}
|
||||
paused={this.state.paused}
|
||||
onSave={this.saveEditing.bind(this)}
|
||||
onCancel={this.cancelEditing.bind(this)}
|
||||
onFullscreen={this.props.toggleFullscreen}
|
||||
onPause={this.pauseData.bind(this)}
|
||||
onUnpause={this.unpauseData.bind(this)}
|
||||
onEditFiles={this.startEditFiles.bind(this)}
|
||||
onEditOutputSignals={this.editOutputSignals.bind(this)}
|
||||
onEditInputSignals={this.editInputSignals.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="box box-content" onContextMenu={(e) => e.preventDefault()}>
|
||||
{this.state.editing &&
|
||||
<WidgetToolbox grid={grid} onGridChange={this.setGrid.bind(this)} dashboard={this.state.dashboard} onDashboardSizeChange={this.setDashboardSize.bind(this)} widgets={this.state.widgets} />
|
||||
}
|
||||
{!draggable ? (
|
||||
<WidgetArea widgets={this.state.widgets} dropZoneHeight={dropZoneHeight} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
|
||||
{this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => (
|
||||
<WidgetContainer widget={this.state.widgets[widgetKey]} key={widgetKey}>
|
||||
<WidgetContextMenu
|
||||
key={widgetKey}
|
||||
index={parseInt(widgetKey, 10)}
|
||||
widget={this.state.widgets[widgetKey]}
|
||||
onEdit={this.editWidget.bind(this)}
|
||||
onDuplicate={this.duplicateWidget.bind(this)}
|
||||
onDelete={this.deleteWidget.bind(this)}
|
||||
onChange={this.widgetChange.bind(this)}
|
||||
|
||||
onWidgetChange={this.widgetChange.bind(this)}
|
||||
editing={this.state.editing}
|
||||
grid={grid}
|
||||
paused={this.state.paused}
|
||||
/>
|
||||
</WidgetContainer>
|
||||
))}
|
||||
</WidgetArea>
|
||||
) : (
|
||||
<WidgetArea widgets={this.state.widgets} editing={this.state.editing} dropZoneHeight={dropZoneHeight} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
|
||||
<div className="box box-content" onContextMenu={(e) => e.preventDefault()}>
|
||||
{this.state.editing &&
|
||||
<WidgetToolbox grid={grid} onGridChange={this.setGrid.bind(this)} dashboard={this.state.dashboard} onDashboardSizeChange={this.setDashboardSize.bind(this)} widgets={this.state.widgets} />
|
||||
}
|
||||
{!draggable ? (
|
||||
<WidgetArea widgets={this.state.widgets} dropZoneHeight={dropZoneHeight} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
|
||||
{this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => (
|
||||
<EditableWidgetContainer
|
||||
widget={this.state.widgets[widgetKey]}
|
||||
key={widgetKey}
|
||||
grid={grid}
|
||||
index={parseInt(widgetKey, 10)}
|
||||
onWidgetChange={this.widgetChange.bind(this)}>
|
||||
<WidgetContainer widget={this.state.widgets[widgetKey]} key={widgetKey}>
|
||||
<WidgetContextMenu
|
||||
key={widgetKey}
|
||||
index={parseInt(widgetKey, 10)}
|
||||
|
|
@ -542,55 +519,82 @@ class Dashboard extends Component {
|
|||
|
||||
onWidgetChange={this.widgetChange.bind(this)}
|
||||
editing={this.state.editing}
|
||||
grid={grid}
|
||||
paused={this.state.paused}
|
||||
/>
|
||||
</EditableWidgetContainer>
|
||||
</WidgetContainer>
|
||||
))}
|
||||
</WidgetArea>
|
||||
) : (
|
||||
<WidgetArea widgets={this.state.widgets} editing={this.state.editing} dropZoneHeight={dropZoneHeight} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
|
||||
{this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => (
|
||||
<EditableWidgetContainer
|
||||
widget={this.state.widgets[widgetKey]}
|
||||
key={widgetKey}
|
||||
grid={grid}
|
||||
index={parseInt(widgetKey, 10)}
|
||||
onWidgetChange={this.widgetChange.bind(this)}>
|
||||
<WidgetContextMenu
|
||||
key={widgetKey}
|
||||
index={parseInt(widgetKey, 10)}
|
||||
widget={this.state.widgets[widgetKey]}
|
||||
onEdit={this.editWidget.bind(this)}
|
||||
onDuplicate={this.duplicateWidget.bind(this)}
|
||||
onDelete={this.deleteWidget.bind(this)}
|
||||
onChange={this.widgetChange.bind(this)}
|
||||
|
||||
)}
|
||||
onWidgetChange={this.widgetChange.bind(this)}
|
||||
editing={this.state.editing}
|
||||
paused={this.state.paused}
|
||||
/>
|
||||
</EditableWidgetContainer>
|
||||
))}
|
||||
</WidgetArea>
|
||||
|
||||
<EditWidget
|
||||
sessionToken={this.state.sessionToken}
|
||||
show={this.state.editModal}
|
||||
onClose={this.closeEdit.bind(this)}
|
||||
widget={this.state.modalData}
|
||||
signals={this.state.signals}
|
||||
files={this.state.files}
|
||||
ics={this.state.ics}
|
||||
/>
|
||||
)}
|
||||
|
||||
<EditFiles
|
||||
sessionToken={this.state.sessionToken}
|
||||
show={this.state.filesEditModal}
|
||||
onClose={this.closeEditFiles.bind(this)}
|
||||
signals={this.state.signals}
|
||||
files={this.state.files}
|
||||
scenarioID={this.state.dashboard.scenarioID}
|
||||
/>
|
||||
<EditWidget
|
||||
sessionToken={this.state.sessionToken}
|
||||
show={this.state.editModal}
|
||||
onClose={this.closeEdit.bind(this)}
|
||||
widget={this.state.modalData}
|
||||
signals={this.state.signals}
|
||||
files={this.state.files}
|
||||
ics={this.state.ics}
|
||||
/>
|
||||
|
||||
<EditSignalMapping
|
||||
show={this.state.editOutputSignalsModal}
|
||||
onCloseEdit={(direction) => this.closeEditSignalsModal(direction)}
|
||||
direction="Output"
|
||||
signals={this.state.signals}
|
||||
configID={null}
|
||||
configs={this.state.configs}
|
||||
sessionToken={this.state.sessionToken}
|
||||
/>
|
||||
<EditSignalMapping
|
||||
show={this.state.editInputSignalsModal}
|
||||
onCloseEdit={(direction) => this.closeEditSignalsModal(direction)}
|
||||
direction="Input"
|
||||
signals={this.state.signals}
|
||||
configID={null}
|
||||
configs={this.state.configs}
|
||||
sessionToken={this.state.sessionToken}
|
||||
/>
|
||||
<EditFiles
|
||||
sessionToken={this.state.sessionToken}
|
||||
show={this.state.filesEditModal}
|
||||
onClose={this.closeEditFiles.bind(this)}
|
||||
signals={this.state.signals}
|
||||
files={this.state.files}
|
||||
scenarioID={this.state.dashboard.scenarioID}
|
||||
/>
|
||||
|
||||
<EditSignalMapping
|
||||
show={this.state.editOutputSignalsModal}
|
||||
onCloseEdit={(direction) => this.closeEditSignalsModal(direction)}
|
||||
direction="Output"
|
||||
signals={this.state.signals}
|
||||
configID={null}
|
||||
configs={this.state.configs}
|
||||
sessionToken={this.state.sessionToken}
|
||||
/>
|
||||
<EditSignalMapping
|
||||
show={this.state.editInputSignalsModal}
|
||||
onCloseEdit={(direction) => this.closeEditSignalsModal(direction)}
|
||||
direction="Input"
|
||||
signals={this.state.signals}
|
||||
configID={null}
|
||||
configs={this.state.configs}
|
||||
sessionToken={this.state.sessionToken}
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Menu, Item, Separator, MenuProvider } from 'react-contexify';
|
||||
import { Menu, Item, Separator, useContextMenu } from 'react-contexify';
|
||||
import Widget from './widget';
|
||||
|
||||
class WidgetContextMenu extends React.Component {
|
||||
|
|
@ -115,13 +115,18 @@ class WidgetContextMenu extends React.Component {
|
|||
</Menu>
|
||||
);
|
||||
|
||||
let dim = {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
};
|
||||
let dim = {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
};
|
||||
|
||||
const { show } = useContextMenu({id:'widgetMenu'+ this.props.index, style:dim} )
|
||||
function showMenu(e) {
|
||||
show(e)
|
||||
}
|
||||
|
||||
return <div style={dim}>
|
||||
<MenuProvider id={'widgetMenu'+ this.props.index} style={dim}>
|
||||
<div onContextMenu={showMenu}>
|
||||
<Widget
|
||||
data={this.props.widget}
|
||||
onWidgetChange={this.props.onWidgetChange}
|
||||
|
|
@ -129,7 +134,7 @@ class WidgetContextMenu extends React.Component {
|
|||
index={this.props.index}
|
||||
paused={this.props.paused}
|
||||
/>
|
||||
</MenuProvider>
|
||||
</div>
|
||||
<ContextMenu />
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue