Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

various code cleanups

Browse source
This commit is contained in:
Steffen Vogel 2021-03-08 23:55:43 +01:00
parent c95cb5beab
commit 58de859f0a
21 changed files with 220 additions and 238 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/common/dialogs/delete-dialog.js
View file

@ -17,6 +17,7 @@
import React from 'react';
import { Button, Modal, Form } from 'react-bootstrap';
import { Collapse } from 'react-collapse';
class DeleteDialog extends React.Component {
onModalKeyPress = (event) => {

1
src/common/icon.js
View file

@ -21,7 +21,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
//import '@fortawesome/free-regular-svg-icons';
library.add(fas);

1
src/componentconfig/edit-config.js
View file

@ -17,6 +17,7 @@
import React from 'react';
import { Form } from 'react-bootstrap';
import { Multiselect } from 'multiselect-react-dropdown'
import Dialog from '../common/dialogs/dialog';
import ParametersEditor from '../common/parameters-editor';

2
src/dashboard/dashboard.js
View file

@ -587,8 +587,6 @@ class Dashboard extends Component {
configs={this.state.configs}
sessionToken={this.state.sessionToken}
/>
</div>
</div>;
}

1
src/ic/edit-ic.js
View file

@ -18,7 +18,6 @@
import React from 'react';
import { Form } from 'react-bootstrap';
import _ from 'lodash';
import {Collapse} from 'react-collapse';
import Dialog from '../common/dialogs/dialog';
import ParametersEditor from '../common/parameters-editor';

2
src/ic/ic-dialog.js
View file

@ -1,5 +1,5 @@
import React from 'react';
import {Button, Row, Col} from 'react-bootstrap';
import { Button, Row, Col } from 'react-bootstrap';
import Dialog from '../common/dialogs/dialog';
import Icon from "../common/icon";
import ConfirmCommand from './confirm-command';

2
src/scenario/edit-scenario.js
View file

@ -53,13 +53,11 @@ class EditScenarioDialog extends React.Component {
this.setState({ [event.target.id]: event.target.value });
let name = true;
if (this.state.name === '') {
name = false;
}
this.valid = name;
};
resetState = () => {

100
src/scenario/scenario.js
View file

@ -790,12 +790,6 @@ class Scenario extends React.Component {
title='Name'
dataKey='name'
/>
<TableColumn
title='Files'
dataKey='fileIDs'
modifier={(fileIDs) => this.getListOfFiles(this.state.files, fileIDs)}
onEdit={(index) => this.startPintura(index)}
/>
<TableColumn
title='# Output Signals'
dataKey='outputLength'
@ -931,11 +925,25 @@ class Scenario extends React.Component {
/>
</Table>
<NewDashboardDialog show={this.state.newDashboardModal} onClose={data => this.closeNewDashboardModal(data)} />
<EditDashboardDialog show={this.state.dashboardEditModal} dashboard={this.state.modalDashboardData} onClose={data => this.closeEditDashboardModal(data)} />
<ImportDashboardDialog show={this.state.importDashboardModal} onClose={data => this.closeImportDashboardModal(data)} />
<DeleteDialog title="dashboard" name={this.state.modalDashboardData.name} show={this.state.deleteDashboardModal} onClose={(e) => this.closeDeleteDashboardModal(e)} />
<NewDashboardDialog
show={this.state.newDashboardModal}
onClose={data => this.closeNewDashboardModal(data)}
/>
<EditDashboardDialog
show={this.state.dashboardEditModal}
dashboard={this.state.modalDashboardData}
onClose={data => this.closeEditDashboardModal(data)}
/>
<ImportDashboardDialog
show={this.state.importDashboardModal}
onClose={data => this.closeImportDashboardModal(data)}
/>
<DeleteDialog
title="dashboard"
name={this.state.modalDashboardData.name}
show={this.state.deleteDashboardModal}
onClose={(e) => this.closeDeleteDashboardModal(e)}
/>
{/*Result table*/}
<h2 style={tableHeadingStyle}>Results
@ -972,7 +980,6 @@ class Scenario extends React.Component {
dataKey='resultFileIDs'
linkKey='filebuttons'
data={this.state.files}
width='300'
onDownload={(index) => this.downloadResultData(index)}
/>
<TableColumn
@ -1023,34 +1030,34 @@ class Scenario extends React.Component {
/>
: <></>
}
<TableColumn
title='Name'
dataKey='username'
/>
<TableColumn
title='Mail'
dataKey='mail'
/>
<TableColumn
title=''
width='200'
deleteButton
onDelete={(index) => this.setState({
deleteUserModal: true,
deleteUserName: this.state.scenario.users[index].username,
modalUserIndex: index
})}
/>
</Table>
<TableColumn
title='Name'
dataKey='username'
/>
<TableColumn
title='Role'
dataKey='role'
/>
<TableColumn
title=''
width='200'
deleteButton
onDelete={(index) => this.setState({
deleteUserModal: true,
deleteUserName: this.state.scenario.users[index].username,
modalUserIndex: index
})}
/>
</Table>
<InputGroup style={{ width: 400, float: 'right' }}>
<FormControl
placeholder="Username"
onChange={(e) => this.onUserInputChange(e)}
value={this.state.userToAdd}
type="text"
/>
<InputGroup.Append>
<InputGroup style={{ width: 400, float: 'right' }}>
<Form.Control
placeholder="Username"
onChange={(e) => this.onUserInputChange(e)}
value={this.state.userToAdd}
type="text"
/>
<InputGroup.Append>
<span className='icon-button'>
<Button
variant='light'
@ -1059,12 +1066,17 @@ class Scenario extends React.Component {
onClick={() => this.addUser()}>
<Icon icon="plus" classname={'icon-color'} style={iconStyle} />
</Button>
</span>
</InputGroup.Append>
</InputGroup><br /><br />
</div>
</span>
</InputGroup.Append>
</InputGroup>
<br />
<DeleteDialog title="user from scenario:" name={this.state.deleteUserName} show={this.state.deleteUserModal} onClose={(c) => this.closeDeleteUserModal(c)} />
<DeleteDialog
title="Delete user from scenario"
name={this.state.deleteUserName}
show={this.state.deleteUserModal}
onClose={(c) => this.closeDeleteUserModal(c)}
/>
</div>;
}
}

77
src/signal/edit-signal-mapping.js
View file

@ -18,6 +18,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Form, OverlayTrigger, Tooltip } from 'react-bootstrap';
import { Collapse } from 'react-collapse';
import Table from '../common/table';
import TableColumn from '../common/table-column';
import Dialog from "../common/dialogs/dialog";
@ -30,13 +31,12 @@ class EditSignalMapping extends React.Component {
super(props);
let dir = "";
if ( this.props.direction === "Output"){
if ( this.props.direction === "Output") {
dir = "out";
} else if ( this.props.direction === "Input" ){
} else if ( this.props.direction === "Input" ) {
dir = "in";
}
this.state = {
dir,
signals: [],
@ -45,38 +45,37 @@ class EditSignalMapping extends React.Component {
};
}
static getDerivedStateFromProps(props, state){
static getDerivedStateFromProps(props, state) {
// filter all signals by configID and direction
let signals = [];
if(props.signalID != null || typeof props.configs === "undefined"){
if (props.signalID != null || typeof props.configs === "undefined") {
signals = props.signals.filter((sig) => {
return (sig.configID === props.configID) && (sig.direction === state.dir);
});
}
else{
for(let i = 0; i < props.configs.length; i++){
else {
for (let i = 0; i < props.configs.length; i++) {
let temp = props.signals.filter((sig) => {
return (sig.configID === props.configs[i].id) && (sig.direction === state.dir);
})
signals = signals.concat(temp);
signals = signals.concat(temp);
}
}
}
signals.forEach(signal => {
if(signal.checked === undefined) signal.checked = false
});
signals.forEach(signal => {
if (signal.checked === undefined) {
signal.checked = false;
}
});
return {
signals: signals,
};
}
onClose(canceled) {
for (let signalID of this.state.modifiedSignalIDs){
for (let signalID of this.state.modifiedSignalIDs) {
let sig = this.state.signals.find(s => s.id === signalID);
@ -99,23 +98,23 @@ class EditSignalMapping extends React.Component {
console.log("HandleMappingChange", row, column)
if (column === 2) { // Name change
signals[row].name = event.target.value;
if (modifiedSignals.find(id => id === signals[row].id) === undefined){
if (modifiedSignals.find(id => id === signals[row].id) === undefined) {
modifiedSignals.push(signals[row].id);
}
} else if (column === 3) { // unit change
signals[row].unit = event.target.value;
if (modifiedSignals.find(id => id === signals[row].id) === undefined){
if (modifiedSignals.find(id => id === signals[row].id) === undefined) {
modifiedSignals.push(signals[row].id);
}
} else if (column === 4) { // scaling factor change
signals[row].scalingFactor = parseFloat(event.target.value);
if (modifiedSignals.find(id => id === signals[row].id) === undefined){
if (modifiedSignals.find(id => id === signals[row].id) === undefined) {
modifiedSignals.push(signals[row].id);
}
} else if (column === 1) { //index change
console.log("Index change")
signals[row].index =parseInt(event.target.value, 10);
if (modifiedSignals.find(id => id === signals[row].id) === undefined){
if (modifiedSignals.find(id => id === signals[row].id) === undefined) {
modifiedSignals.push(signals[row].id);
}
}
@ -124,11 +123,9 @@ class EditSignalMapping extends React.Component {
signals: signals,
modifiedSignalIDs: modifiedSignals
})
};
handleDelete = (index) => {
let data = this.state.signals[index]
AppDispatcher.dispatch({
@ -136,11 +133,9 @@ class EditSignalMapping extends React.Component {
data: data,
token: this.props.sessionToken
});
};
handleRemove = () => {
let checkedSignals = this.state.signals.filter(signal => signal.checked === true);
checkedSignals.forEach(signal => {
@ -149,23 +144,20 @@ class EditSignalMapping extends React.Component {
data: signal,
token: this.props.sessionToken
});
})
}
handleAdd = (configID = null) => {
if(typeof this.props.configs !== "undefined"){
if(configID === null){
if (typeof this.props.configs !== "undefined") {
if (configID === null) {
this.setState({openCollapse: true});
return
}
}
else{
configID = this.props.configID;
return;
}
}
else {
configID = this.props.configID;
}
let newSignal = {
configID: configID,
direction: this.state.dir,
@ -185,7 +177,6 @@ class EditSignalMapping extends React.Component {
};
resetState() {
let signals = this.props.signals.filter((sig) => {
return (sig.configID === this.props.configID) && (sig.direction === this.state.dir);
});
@ -200,29 +191,27 @@ class EditSignalMapping extends React.Component {
tempSignals[index].checked = !tempSignals[index].checked;
this.setState({signals: tempSignals});
}
checkAll(){
checkAll() {
let tempSignals = this.state.signals;
let allChecked = true;
tempSignals.forEach(signal =>
{
if(signal.checked === false){
tempSignals.forEach(signal => {
if (signal.checked === false) {
signal.checked = true;
allChecked = false;
}
});
});
if(allChecked){
if (allChecked) {
tempSignals.forEach(signal => signal.checked = false);
}
this.setState({signals: tempSignals});
}
render() {
const buttonStyle = {
marginLeft: '10px',
};

9
src/user/new-user.js
View file

@ -67,7 +67,14 @@ class NewUserDialog extends React.Component {
render() {
return (
<Dialog show={this.props.show} title="New user" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
<Dialog
show={this.props.show}
title="New User"
buttonTitle="Add"
onClose={(c) => this.onClose(c)}
onReset={() => this.resetState()}
valid={this.valid}
>
<Form>
<Form.Group as={Col} controlId="username">
<Form.Label>Username</Form.Label>

19
src/user/recover-password.js
View file

@ -35,13 +35,20 @@ class RecoverPassword extends React.Component {
render() {
return (
<Dialog show={this.props.show} title="Recover password" buttonTitle="Close" onClose={(c) => this.onClose(c)} blendOutCancel = {true} valid={true} size = 'lg'>
<Dialog
show={this.props.show}
title="Recover password"
buttonTitle="Close"
onClose={(c) => this.onClose(c)}
blendOutCancel={true}
valid={true}
>
<div>
<div>Please contact:</div>
<div>{this.state.admin.name}</div>
<div>E-Mail:</div>
<a href={`mailto:${this.state.admin.mail}`}>{this.state.admin.mail}</a>
</div>
<div>Please contact:</div>
<div>{this.state.admin.name}</div>
<div>E-Mail:</div>
<a href={`mailto:${this.state.admin.mail}`}>{this.state.admin.mail}</a>
</div>
</Dialog>
);
}

62
src/widget/edit-widget/color-picker.js
View file

@ -16,6 +16,7 @@
******************************************************************************/
import React from 'react';
import { Form } from 'react-bootstrap';
import { SketchPicker } from 'react-color';
import Dialog from '../../common/dialogs/dialog';
@ -31,8 +32,7 @@ class ColorPicker extends React.Component {
};
}
static getDerivedStateFromProps(props, state){
static getDerivedStateFromProps(props, state) {
return {
widget: props.widget
};
@ -49,25 +49,24 @@ class ColorPicker extends React.Component {
}
handleChangeComplete = (color) => {
let temp = this.state.widget;
if(this.props.controlId === 'strokeStyle'){
if (this.props.controlId === 'strokeStyle'){
temp.customProperties.zones[this.props.zoneIndex]['strokeStyle'] = color.hex;
}
else if(this.props.controlId === 'lineColor'){
else if (this.props.controlId === 'lineColor'){
temp.customProperties.lineColors[this.props.lineIndex] = color.hex;
}
else{
let parts = this.props.controlId.split('.');
let isCustomProperty = true;
else {
let parts = this.props.controlId.split('.');
let isCustomProperty = true;
if (parts.length === 1){
isCustomProperty = false;
}
if (parts.length === 1){
isCustomProperty = false;
}
isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex;
isCustomProperty ? temp[parts[0]][parts[1] + "_opacity"] = color.rgb.a : temp[this.props.controlId +"_opacity"] = color.rgb.a;
isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex;
isCustomProperty ? temp[parts[0]][parts[1] + "_opacity"] = color.rgb.a : temp[this.props.controlId +"_opacity"] = color.rgb.a;
}
this.setState({ widget: temp });
@ -88,46 +87,45 @@ class ColorPicker extends React.Component {
};
render() {
let hexColor;
let opacity = 1;
let parts = this.props.controlId.split('.');
let isCustomProperty = true;
if (parts.length === 1){
if (parts.length === 1) {
isCustomProperty = false;
}
if(this.props.controlId === 'strokeStyle'){
if(typeof this.state.widget.customProperties.zones[this.props.zoneIndex] !== 'undefined'){
if (this.props.controlId === 'strokeStyle') {
if (typeof this.state.widget.customProperties.zones[this.props.zoneIndex] !== 'undefined') {
hexColor = this.state.widget.customProperties.zones[this.props.zoneIndex]['strokeStyle'];
}
}
else if(this.props.controlId === 'lineColor'){
if(typeof this.state.widget.customProperties.lineColors[this.props.lineIndex] !== 'undefined'){
else if (this.props.controlId === 'lineColor') {
if (typeof this.state.widget.customProperties.lineColors[this.props.lineIndex] !== 'undefined') {
hexColor = this.state.widget.customProperties.lineColors[this.props.lineIndex];
}
}
else{
hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId];
opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"];
hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId];
opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"];
}
let rgbColor = this.hexToRgb(hexColor, opacity);
return <Dialog show={this.props.show} title='Color Picker' buttonTitle='Save' onClose={(c) => this.onClose(c)} valid={true}>
<form>
return <Dialog
show={this.props.show}
title='Color Picker'
buttonTitle='Save'
onClose={(c) => this.onClose(c)}
valid={true}
>
<Form>
<SketchPicker
color={rgbColor}
disableAlpha={this.props.disableOpacity}
disableAlpha={this.props.disableOpacity}
onChangeComplete={ this.handleChangeComplete }
width={"300"}
width={300}
/>
</form>
</Form>
</Dialog>;
}
}

51
src/widget/edit-widget/edit-widget-color-zones-control.js
View file

@ -20,7 +20,7 @@ import { Form, Table, Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
import ColorPicker from './color-picker'
import Icon from '../../common/icon';
import {Collapse} from 'react-collapse';
import { Collapse } from 'react-collapse';
class EditWidgetColorZonesControl extends React.Component {
constructor(props) {
@ -51,8 +51,8 @@ class EditWidgetColorZonesControl extends React.Component {
// add row
const widget = this.state.widget;
widget.customProperties.zones.push({ strokeStyle: '#d3cbcb', min: 0, max: 100 });
if(widget.customProperties.zones.length > 0){
if(widget.customProperties.zones.length > 0){
let length = widget.customProperties.zones.length
for(let i= 0 ; i < length; i++){
@ -67,14 +67,14 @@ class EditWidgetColorZonesControl extends React.Component {
}
removeZones = () => {
let temp = this.state.widget;
temp.customProperties.zones.splice(this.state.selectedIndex, 1);
if(temp.customProperties.zones.length > 0){
if(temp.customProperties.zones.length > 0){
let length = temp.customProperties.zones.length
for(let i= 0 ; i < length; i++){
temp.customProperties.zones[i].min = i* 100/length;
temp.customProperties.zones[i].max = (i+1)* 100/length;
@ -111,8 +111,8 @@ class EditWidgetColorZonesControl extends React.Component {
}
}
openColorPicker = () =>{
openColorPicker = () => {
let color = this.state.selectedZone.strokeStyle;
this.setState({showColorPicker: true, originalColor: color});
@ -124,7 +124,7 @@ class EditWidgetColorZonesControl extends React.Component {
let temp = this.state.selectedZone;
temp.strokeStyle = this.state.originalColor;
this.setState({ selectedZone : temp });
}
}
@ -155,7 +155,7 @@ class EditWidgetColorZonesControl extends React.Component {
if(this.state.selectedIndex !== this.state.widget.customProperties.zones.length -1){
temp.customProperties.zones[this.state.selectedIndex + 1]['min'] = e.target.value
}
this.setState({ widget: temp });
}
@ -171,17 +171,17 @@ class EditWidgetColorZonesControl extends React.Component {
this.props.handleChange(event);
}
render() {
const buttonStyle = {
marginBottom: '10px',
marginBottom: '10px',
marginLeft: '120px',
};
const iconStyle = {
height: '25px',
height: '25px',
width : '25px'
}
@ -194,7 +194,7 @@ class EditWidgetColorZonesControl extends React.Component {
let pickerStyle = {
backgroundColor: tempColor,
width: '260px',
width: '260px',
height: '40px',
marginTop: '20px'
}
@ -213,21 +213,18 @@ class EditWidgetColorZonesControl extends React.Component {
</span>
<div>
{
this.state.widget.customProperties.zones.map((zone, idx) => {
let color = zone.strokeStyle;
let width = (zone.max - zone.min)*(260/100);
let style = {
backgroundColor: color,
width: width,
height: '40px'
}
return (<Button
style={style} key={idx} onClick={i => this.editColorZone(idx)} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="pen" /></Button>
)
this.state.widget.customProperties.zones.map((zone, idx) => {
let color = zone.strokeStyle;
let width = (zone.max - zone.min)*(260/100);
let style = {
backgroundColor: color,
width: width,
height: '40px'
}
return (<Button
style={style} key={idx} onClick={i => this.editColorZone(idx)} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="pen" /></Button>
)
})
}
</div>
<Collapse isOpened={collapse}>

4
src/widget/edit-widget/edit-widget-plot-colors-control.js
View file

@ -19,8 +19,8 @@ import React, { Component } from 'react';
import { OverlayTrigger, Tooltip , Button } from 'react-bootstrap';
import ColorPicker from './color-picker'
import Icon from "../../common/icon";
import {scaleOrdinal} from "d3-scale";
import {schemeCategory10} from "d3-scale-chromatic";
import { scaleOrdinal } from "d3-scale";
import { schemeCategory10 } from "d3-scale-chromatic";
// schemeCategory20 no longer available in d3

26
src/widget/edit-widget/edit-widget.js
View file

@ -23,7 +23,6 @@ import CreateControls from './edit-widget-control-creator';
class EditWidgetDialog extends React.Component {
valid = true;
constructor(props) {
super(props);
@ -38,7 +37,6 @@ class EditWidgetDialog extends React.Component {
};
}
onClose(canceled) {
if (canceled === false) {
this.props.onClose(this.state.temporal);
@ -53,9 +51,9 @@ class EditWidgetDialog extends React.Component {
const file = this.props.files.find(element => element.id === fileId);
// scale width to match aspect
if(file.imageWidth && file.imageHeight){
const aspectRatio = file.imageWidth / file.imageHeight;
changeObject.width = parseInt(this.state.temporal.height * aspectRatio,10);
if (file.imageWidth && file.imageHeight) {
const aspectRatio = file.imageWidth / file.imageHeight;
changeObject.width = parseInt(this.state.temporal.height * aspectRatio,10);
}
return changeObject;
@ -70,26 +68,21 @@ class EditWidgetDialog extends React.Component {
return metrics.width;
}
setMaxWidth(changeObject){
if(changeObject.type === 'Label'){
setMaxWidth(changeObject) {
if (changeObject.type === 'Label') {
changeObject.customProperties.maxWidth = Math.ceil(this.getTextWidth(changeObject.name, changeObject.customProperties.textSize));
changeObject.width = changeObject.customProperties.maxWidth;
}
/*else if (changeObject.type === 'Value'){
changeObject.customProperties.maxWidth = Math.ceil(this.getTextWidth(changeObject.name, changeObject.customProperties.textSize));
}
if(this.state.temporal.width > changeObject.customProperties.maxWidth){
changeObject.width = changeObject.customProperties.maxWidth;
}*/
return changeObject;
}
setNewLockRestrictions(changeObject){
if(changeObject.customProperties.orientation === 0){
setNewLockRestrictions(changeObject) {
if (changeObject.customProperties.orientation === 0) {
changeObject.customProperties.resizeTopBottomLock = true;
changeObject.customProperties.resizeRightLeftLock = false;
}
else if(changeObject.customProperties.orientation === 1){
else if (changeObject.customProperties.orientation === 1) {
changeObject.customProperties.resizeTopBottomLock = false;
changeObject.customProperties.resizeRightLeftLock = true;
}
@ -97,7 +90,6 @@ class EditWidgetDialog extends React.Component {
}
handleChange(e) {
// TODO: check what we really need in this function. Can we reduce its complexity?
let parts = e.target.id.split('.');
let changeObject = this.state.temporal;

4
src/widget/widget-plot/plot-legend.js
View file

@ -17,7 +17,7 @@
import React from 'react';
import { scaleOrdinal} from 'd3-scale';
import {schemeCategory10} from 'd3-scale-chromatic'
import { schemeCategory10 } from 'd3-scale-chromatic'
function Legend(props){
@ -44,7 +44,6 @@ function Legend(props){
</li>
)
}
}
class PlotLegend extends React.Component {
@ -60,7 +59,6 @@ class PlotLegend extends React.Component {
<Legend key={signal.id} sig={signal} lineColor={"undefined"}/>
))
}
</ul>
</div>;
}

7
src/widget/widget-plot/plot.js
View file

@ -17,7 +17,7 @@
import React from 'react';
import { scaleLinear, scaleTime, scaleOrdinal} from 'd3-scale';
import {schemeCategory10} from 'd3-scale-chromatic'
import { schemeCategory10 } from 'd3-scale-chromatic'
import { extent } from 'd3-array';
import { line } from 'd3-shape';
import { axisBottom, axisLeft } from 'd3-axis';
@ -103,7 +103,6 @@ class Plot extends React.Component {
const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(timeFormat("%M:%S"));
const yAxis = axisLeft().scale(yScale).ticks(5).tickFormat(format(".3s"));
return{
stopTime: stopTime,
data: null,
@ -113,7 +112,6 @@ class Plot extends React.Component {
};
}
// only show data in requested time
let data = props.data;
let icDataset = data.find(function(element) {
@ -138,8 +136,6 @@ class Plot extends React.Component {
if (prevProps.time !== this.props.time) {
this.createInterval();
}
}
createInterval() {
@ -222,7 +218,6 @@ class Plot extends React.Component {
}
render() {
const yLabelPos = {
x: 12,
y: this.props.height / 2

7
src/widget/widget-toolbox.js
View file

@ -16,12 +16,11 @@
******************************************************************************/
import React from 'react';
import { Collapse } from 'react-collapse';
import PropTypes from 'prop-types';
import Slider from 'rc-slider';
import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
import Icon from "../common/icon";
import {Collapse} from 'react-collapse';
import ToolboxItem from './toolbox-item';
class WidgetToolbox extends React.Component {
@ -101,8 +100,8 @@ class WidgetToolbox extends React.Component {
}
const buttonStyle = {
marginRight: '3px',
height: '40px',
marginRight: '3px',
height: '40px',
}
const thereIsTopologyWidget = this.props.widgets != null && Object.values(this.props.widgets).filter(w => w.type === 'Topology').length > 0;

49
src/widget/widgets/gauge.js
View file

@ -17,7 +17,6 @@
import React, { Component } from 'react';
import { Gauge } from 'gaugeJS';
//import {update} from "immutable";
class WidgetGauge extends Component {
constructor(props) {
@ -70,7 +69,6 @@ class WidgetGauge extends Component {
this.gauge.set(this.state.value);
this.updateLabels(this.state.minValue, this.state.maxValue)
}
}
static getDerivedStateFromProps(props, state){
@ -79,12 +77,12 @@ class WidgetGauge extends Component {
return{ value: 0, minValue: 0, maxValue: 10};
}
// get the signal with the selected signal ID
// Get the signal with the selected signal ID
let signalID = props.widget.signalIDs[0];
let signal = props.signals.filter(s => s.id === signalID)
if(signal.length > 0) {
// determine ID of infrastructure component related to signal[0] (there is only one signal for a lamp widget)
// Determine ID of infrastructure component related to signal[0] (there is only one signal for a lamp widget)
let icID = props.icIDs[signal[0].id];
let returnState = {}
@ -100,9 +98,9 @@ class WidgetGauge extends Component {
returnState["scalingFactor"] = signal[0].scalingFactor;
}
// update value
// Update value
// check if data available
// Check if data available
if (props.data == null
|| props.data[icID] == null
|| props.data[icID].output == null
@ -114,12 +112,12 @@ class WidgetGauge extends Component {
return returnState;
}
// memorize if min or max value is updated
// Memorize if min or max value is updated
let updateValue = false;
let updateMinValue = false;
let updateMaxValue = false;
// check if value has changed
// Check if value has changed
const data = props.data[icID].output.values[signal[0].index - 1];
// Take just 3 decimal positions
// Note: Favor this method over Number.toFixed(n) in order to avoid a type conversion, since it returns a String
@ -129,10 +127,10 @@ class WidgetGauge extends Component {
let maxValue = null;
if ((state.value !== value && value != null) || props.widget.customProperties.valueUseMinMax || state.useMinMaxChange) {
//value has changed
// Value has changed
updateValue = true;
// update min-max if needed
// Update min-max if needed
let updateLabels = false;
minValue = state.minValue;
@ -157,7 +155,6 @@ class WidgetGauge extends Component {
maxValue = props.widget.customProperties.valueMax;
updateMaxValue = true;
updateLabels = true;
}
if (updateLabels === false && state.gauge) {
@ -178,7 +175,7 @@ class WidgetGauge extends Component {
returnState["useMinMax"] = props.widget.customProperties.valueUseMinMax;
}
// prepare returned state
// Prepare returned state
if (updateValue === true) {
returnState["value"] = value;
}
@ -190,7 +187,7 @@ class WidgetGauge extends Component {
}
} // if there is signal data
} // If there is signal data
if (JSON.stringify(returnState) !== JSON.stringify({})) {
return returnState;
@ -198,8 +195,8 @@ class WidgetGauge extends Component {
return null;
}
}
return null;
return null;
}
updateLabels(minValue, maxValue, force) {
@ -223,17 +220,17 @@ class WidgetGauge extends Component {
});
}
if(this.state.signalID !== ''){
this.gauge.setOptions({
staticLabels: {
font: '10px "Helvetica Neue"',
labels,
color: "#000000",
fractionDigits: 1
},
staticZones: zones
});
}
if (this.state.signalID !== '') {
this.gauge.setOptions({
staticLabels: {
font: '10px "Helvetica Neue"',
labels,
color: "#000000",
fractionDigits: 1
},
staticZones: zones
});
}
}
computeGaugeOptions(widget) {
@ -267,8 +264,6 @@ class WidgetGauge extends Component {
<canvas ref={node => this.gaugeCanvas = node} />
<div className="gauge-unit">{this.state.unit + scaleText}</div>
<div className="gauge-value">{this.state.value}</div>
</div>
);
}

21
src/widget/widgets/time-offset.js
View file

@ -17,8 +17,7 @@
import React, { Component } from 'react';
import TrafficLight from 'react-trafficlight';
import {OverlayTrigger, Tooltip } from 'react-bootstrap';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
class WidgetTimeOffset extends Component {
constructor(props) {
@ -51,7 +50,7 @@ class WidgetTimeOffset extends Component {
let serverTime = props.data[state.icID].output.timestamp;
let localTime = Date.now();
let absoluteOffset = Math.abs(serverTime - localTime);
if(typeof websocket === 'undefined'){
return {timeOffset: Number.parseFloat(absoluteOffset/1000).toPrecision(5)}
}
@ -68,25 +67,25 @@ class WidgetTimeOffset extends Component {
}
return (
<div className="time-offset">
{this.props.widget.customProperties.icID !== -1 ?
{this.props.widget.customProperties.icID !== -1 ?
(<span></span>) : (<span>no IC</span>)
}
{this.props.widget.customProperties.icID !== -1 && this.props.widget.customProperties.showName ?
{this.props.widget.customProperties.icID !== -1 && this.props.widget.customProperties.showName ?
(<span>{this.state.icName}</span>) : (<span></span>)
}
}
<OverlayTrigger key={0} placement={'left'} overlay={<Tooltip id={`tooltip-${"traffic-light"}`}>
{this.props.widget.customProperties.icID !== -1 ?
(<span>{this.state.icName}<br></br>Offset: {this.state.timeOffset + "s"}</span>)
:
{this.props.widget.customProperties.icID !== -1 ?
(<span>{this.state.icName}<br></br>Offset: {this.state.timeOffset + "s"}</span>)
:
(<span>Please select Infrastructure Component</span>)}
</Tooltip>}>
</Tooltip>}>
<TrafficLight Horizontal={this.props.widget.customProperties.horizontal} width={this.props.widget.width - 40} height={this.props.widget.height - 40}
RedOn={(this.props.widget.customProperties.threshold_red <= this.state.timeOffset) || !this.state.websocketOpen}
YellowOn={(this.props.widget.customProperties.threshold_yellow <= this.state.timeOffset) && (this.state.timeOffset < this.props.widget.customProperties.threshold_red) && this.state.websocketOpen}
GreenOn={(this.state.timeOffset < this.props.widget.customProperties.threshold_yellow) && this.state.websocketOpen}
/>
</OverlayTrigger>
{this.props.widget.customProperties.icID !== -1 ?
{this.props.widget.customProperties.icID !== -1 ?
(
<span>{icSelected}</span>)
:

12
src/widget/widgets/topology.js
View file

@ -16,7 +16,7 @@
******************************************************************************/
import React from 'react';
import {UncontrolledReactSVGPanZoom} from 'react-svg-pan-zoom';
import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
import '../../styles/simple-spinner.css';
import { cimsvg } from 'libcimsvg';
import AppDispatcher from "../../common/app-dispatcher";
@ -94,7 +94,7 @@ class WidgetTopology extends React.Component {
}
static getDerivedStateFromProps(props, state){
// find the selected file of the widget, is undefined if no file is selected
// Find the selected file of the widget, is undefined if no file is selected
let file = props.files.find(file => file.id === parseInt(props.widget.customProperties.file, 10));
let dashboardState = state.dashboardState;
@ -104,7 +104,7 @@ class WidgetTopology extends React.Component {
dashboardState = 'show_message';
message = 'Select a topology model.'
} else if (!file.hasOwnProperty('data') && dashboardState === 'show_message'){
// data of file is missing, start download
// Data of file is missing, start download
dashboardState = 'loading';
message = '';
AppDispatcher.dispatch({
@ -113,7 +113,7 @@ class WidgetTopology extends React.Component {
token: props.token
});
} else if (file.hasOwnProperty('data') && (dashboardState === 'loading'|| dashboardState === 'show_message')){
//file is available set state to ready
// File is available set state to ready
dashboardState = 'ready'
message = '';
}
@ -135,8 +135,6 @@ class WidgetTopology extends React.Component {
window.onMouseMove = function() {};
}
//this.Viewer.fitToViewer();
// Query the file referenced by the widget (if any)
if (this.state.file !== undefined) {
this.setState({dashboardState: 'loading'});
@ -155,7 +153,7 @@ class WidgetTopology extends React.Component {
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
if(this.state.dashboardState === 'ready'){
//Topology file incl data downloaded, init SVG (should happen only once!)
// Topology file incl data downloaded, init SVG (should happen only once!)
if (this.svgElem) {
let cimsvgInstance = new cimsvg(this.svgElem.current);
cimsvg.setCimsvg(cimsvgInstance);