From c95cb5beab7d2f162a7dfd280b908f441aa6c38c Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 23:53:08 +0100 Subject: [PATCH] refactor FormControl et al. to Form.Control --- src/common/dialogs/delete-dialog.js | 5 +- src/common/editable-header.js | 25 ++- src/componentconfig/edit-config.js | 33 ++-- src/componentconfig/import-config.js | 24 +-- src/dashboard/edit-dashboard.js | 25 +-- src/dashboard/import-dashboard.js | 24 +-- src/dashboard/new-dashboard.js | 25 +-- src/file/edit-file-content.js | 27 ++-- src/file/edit-files.js | 141 +++++++++-------- src/file/select-file.js | 32 ++-- src/ic/edit-ic.js | 91 ++++++----- src/ic/ic-action.js | 7 +- src/ic/import-ic.js | 53 ++++--- src/ic/new-ic.js | 119 +++++++------- src/result/edit-result.js | 140 +++++++++-------- src/result/new-result.js | 27 ++-- src/result/result-configs-dialog.js | 21 +-- src/scenario/edit-scenario.js | 32 ++-- src/scenario/import-scenario.js | 40 +++-- src/scenario/new-scenario.js | 30 ++-- src/scenario/scenario.js | 2 +- src/signal/edit-signal-mapping.js | 146 ++++++++++++------ src/user/login-form.js | 23 ++- .../edit-widget/edit-widget-aspect-control.js | 12 +- .../edit-widget-checkbox-control.js | 13 +- .../edit-widget/edit-widget-color-control.js | 21 ++- .../edit-widget-color-zones-control.js | 88 ++++++----- .../edit-widget/edit-widget-file-control.js | 12 +- .../edit-widget/edit-widget-html-content.js | 25 +-- .../edit-widget/edit-widget-ic-control.js | 12 +- .../edit-widget-min-max-control.js | 16 +- .../edit-widget/edit-widget-number-control.js | 10 +- .../edit-widget/edit-widget-orientation.js | 21 ++- .../edit-widget-parameters-control.js | 13 +- .../edit-widget-plot-colors-control.js | 53 ++++--- .../edit-widget/edit-widget-signal-control.js | 12 +- .../edit-widget-signals-control.js | 14 +- .../edit-widget/edit-widget-text-control.js | 12 +- .../edit-widget-text-size-control.js | 12 +- .../edit-widget/edit-widget-time-control.js | 12 +- src/widget/edit-widget/edit-widget.js | 14 +- src/widget/widgets/input.js | 10 +- 42 files changed, 820 insertions(+), 654 deletions(-) diff --git a/src/common/dialogs/delete-dialog.js b/src/common/dialogs/delete-dialog.js index a4499e5..8bc39a1 100644 --- a/src/common/dialogs/delete-dialog.js +++ b/src/common/dialogs/delete-dialog.js @@ -16,8 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { Button, Modal, FormLabel } from 'react-bootstrap'; -import {Collapse} from 'react-collapse'; +import { Button, Modal, Form } from 'react-bootstrap'; class DeleteDialog extends React.Component { onModalKeyPress = (event) => { @@ -37,7 +36,7 @@ class DeleteDialog extends React.Component { Are you sure you want to delete the {this.props.title} '{this.props.name}'? - The IC will be deleted if the respective manager sends "gone" state and no component config is using the IC anymore + The IC will be deleted if the respective manager sends "gone" state and no component config is using the IC anymore diff --git a/src/common/editable-header.js b/src/common/editable-header.js index a10b48d..03a666a 100644 --- a/src/common/editable-header.js +++ b/src/common/editable-header.js @@ -17,7 +17,7 @@ // TODO remove this file (not used!) import React from 'react'; import PropTypes from 'prop-types'; -import { FormControl, Button } from 'react-bootstrap'; +import { Form, Button } from 'react-bootstrap'; import Icon from './icon'; class EditableHeader extends React.Component { @@ -79,12 +79,25 @@ class EditableHeader extends React.Component { }; return
-
- - +
+ + - - + +
; } diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js index 2277331..37a2a3e 100644 --- a/src/componentconfig/edit-config.js +++ b/src/componentconfig/edit-config.js @@ -16,8 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, FormLabel} from 'react-bootstrap'; -import { Multiselect } from 'multiselect-react-dropdown' +import { Form } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; import ParametersEditor from '../common/parameters-editor'; @@ -141,29 +140,29 @@ class EditConfigDialog extends React.Component { onReset={() => this.resetState()} valid={this.valid} > -
- - Name - + + Name + this.handleChange(e)} /> - - + + - - Infrastructure Component - + Infrastructure Component + this.handleChange(e)} > {ICOptions} - - + + - - Start Parameters + + Start Parameters this.handleParameterChange(data)} /> - - + + ); } diff --git a/src/componentconfig/import-config.js b/src/componentconfig/import-config.js index b11a69e..2b69d9a 100644 --- a/src/componentconfig/import-config.js +++ b/src/componentconfig/import-config.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; @@ -102,15 +102,15 @@ class ImportConfigDialog extends React.Component { onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid} > -
- - Component Configuration File - - + + + Component Configuration File + + - - Name - + Name + this.handleChange(e)} /> - - -
+ + + ); } diff --git a/src/dashboard/edit-dashboard.js b/src/dashboard/edit-dashboard.js index 2df61bf..42b5230 100644 --- a/src/dashboard/edit-dashboard.js +++ b/src/dashboard/edit-dashboard.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; @@ -71,14 +71,21 @@ class EditDashboardDialog extends React.Component { render() { return ( - this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
- - Name - this.handleChange(e)} /> - - -
+ this.onClose(c)} + onReset={() => this.resetState()} + valid={this.valid} + > +
+ + Name + this.handleChange(e)} /> + + +
); } diff --git a/src/dashboard/import-dashboard.js b/src/dashboard/import-dashboard.js index 47e5216..519a552 100644 --- a/src/dashboard/import-dashboard.js +++ b/src/dashboard/import-dashboard.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; @@ -100,15 +100,15 @@ class ImportDashboardDialog extends React.Component { onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
- - Dashboard File - this.loadFile(e.target.files)} /> - + + + Dashboard File + this.loadFile(e.target.files)} /> + - - Name - + Name + this.handleChange(e)} /> - - -
+ + + ); } diff --git a/src/dashboard/new-dashboard.js b/src/dashboard/new-dashboard.js index a023ba4..5cc8a3e 100644 --- a/src/dashboard/new-dashboard.js +++ b/src/dashboard/new-dashboard.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; @@ -67,14 +67,21 @@ class NewDashboardDialog extends React.Component { render() { return ( - this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
- - Name - this.handleChange(e)} /> - - -
+ this.onClose(c)} + onReset={() => this.resetState()} + valid={this.valid} + > +
+ + Name + this.handleChange(e)} /> + + +
); } diff --git a/src/file/edit-file-content.js b/src/file/edit-file-content.js index 34a142e..7f9534d 100644 --- a/src/file/edit-file-content.js +++ b/src/file/edit-file-content.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, Button, Col} from 'react-bootstrap'; +import { Form, Button, Col } from 'react-bootstrap'; import AppDispatcher from "../common/app-dispatcher"; import Dialog from '../common/dialogs/dialog'; @@ -28,7 +28,6 @@ class EditFileContent extends React.Component { this.state = { uploadFile: null, - }; } @@ -50,31 +49,33 @@ class EditFileContent extends React.Component { this.setState({ uploadFile: null }); }; - onClose = () => { this.props.onClose(); }; - - - render() { - return this.onClose()} blendOutCancel = {true} valid={true}> - - this.onClose()} + blendOutCancel = {true} + valid={true} + > + + this.selectUploadFile(event)} /> - + - + - - + ; } } diff --git a/src/file/edit-files.js b/src/file/edit-files.js index 41d34cf..4058888 100644 --- a/src/file/edit-files.js +++ b/src/file/edit-files.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, Button, Col, ProgressBar} from 'react-bootstrap'; +import { Form, Button, Col, ProgressBar } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; import AppDispatcher from "../common/app-dispatcher"; import Table from "../common/table"; @@ -107,76 +107,81 @@ class EditFilesDialog extends React.Component { }; return ( - this.onClose()} blendOutCancel = {true} valid={true} size = 'lg'> -
- - - {this.state.currentUser.role === "Admin" ? - - : <> - } + this.onClose()} + blendOutCancel = {true} + valid={true} + > +
+ {this.state.currentUser.role === "Admin" ? - - - this.deleteFile(index)} - editButton - onEdit={index => this.setState({ editModal: true, modalFile: this.props.files[index] })} - /> -
- - - this.selectUploadFile(event)} - /> - - - - - - - - - - - -
- - this.closeEditModal(data)} - sessionToken={this.props.sessionToken} - file={this.state.modalFile} + : <> + } + -
+ + + this.deleteFile(index)} + editButton + onEdit={index => this.setState({ editModal: true, modalFile: this.props.files[index] })} + /> + + + + this.selectUploadFile(event)} + /> + + + + + + + + + + + + +
+ + this.closeEditModal(data)} + sessionToken={this.props.sessionToken} + file={this.state.modalFile} + />
); } diff --git a/src/file/select-file.js b/src/file/select-file.js index bf7469a..42c9c54 100644 --- a/src/file/select-file.js +++ b/src/file/select-file.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel, Button, Col, ProgressBar } from 'react-bootstrap'; +import { Form, Button, Col, ProgressBar } from 'react-bootstrap'; import AppDispatcher from '../common/app-dispatcher'; class SelectFile extends React.Component { @@ -88,39 +88,39 @@ class SelectFile extends React.Component { }; return
- - + + {this.props.name} - + - - + this.props.onChange(event)}> {fileOptions} - - - + + + - - + this.selectUploadFile(event)} /> - + - + - + - + - +
; } diff --git a/src/ic/edit-ic.js b/src/ic/edit-ic.js index 91b9de4..0782b5b 100644 --- a/src/ic/edit-ic.js +++ b/src/ic/edit-ic.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel, FormCheck } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; import _ from 'lodash'; import {Collapse} from 'react-collapse'; import Dialog from '../common/dialogs/dialog'; @@ -150,71 +150,70 @@ class EditICDialog extends React.Component { onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid} - size='lg' > -
- UUID: {this.props.ic.uuid} - - Name - this.handleChange(e)} /> - - - - Category - this.handleChange(e)}> + + UUID: {this.props.ic.uuid} + + Name + this.handleChange(e)} /> + + + + Category + this.handleChange(e)}> - - - - Type - this.handleChange(e)}> + + + + Type + this.handleChange(e)}> {typeOptions.map((name,index) => ( ))} - - - - Websocket URL - this.handleChange(e)} /> - - - - API URL - this.handleChange(e)} /> - - - - Location - this.handleChange(e)} /> - - - - Description - this.handleChange(e)} /> - - - - Start parameter schema of IC + + + + Websocket URL + this.handleChange(e)} /> + + + + API URL + this.handleChange(e)} /> + + + + Location + this.handleChange(e)} /> + + + + Description + this.handleChange(e)} /> + + + + Start parameter schema of IC this.handleStartParameterSchemaChange(data)} /> - - - Properties + + + Properties this.handlePropertiesChange(data)} /> - -
+ + ); } diff --git a/src/ic/ic-action.js b/src/ic/ic-action.js index c5358c5..df4c17f 100644 --- a/src/ic/ic-action.js +++ b/src/ic/ic-action.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { Form, SplitButton, Dropdown, FormControl } from 'react-bootstrap'; +import { Form, SplitButton, Dropdown } from 'react-bootstrap'; import AppDispatcher from "../common/app-dispatcher"; import NotificationsFactory from "../common/data-managers/notifications-factory"; import NotificationsDataManager from "../common/data-managers/notifications-data-manager"; @@ -228,10 +228,11 @@ class ICAction extends React.Component { return
- + onChange={this.setTimeForAction} + /> this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> - - - Infrastructure Component File - this.loadFile(e.target.files)} /> - + this.onClose(c)} + onReset={() => this.resetState()} + valid={this.valid} + > + + + Infrastructure Component File + this.loadFile(e.target.files)} /> + - - Name - this.handleChange(e)} /> - - - - Websocket URL - this.handleChange(e)} /> - - - - UUID - this.handleChange(e)} /> - - - + + Name + this.handleChange(e)} /> + + + + Websocket URL + this.handleChange(e)} /> + + + + UUID + this.handleChange(e)} /> + + + ); } diff --git a/src/ic/new-ic.js b/src/ic/new-ic.js index 73a28eb..3fe9fb8 100644 --- a/src/ic/new-ic.js +++ b/src/ic/new-ic.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel, FormCheck, OverlayTrigger, Tooltip} from 'react-bootstrap'; +import { Form, OverlayTrigger, Tooltip} from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; import ParametersEditor from '../common/parameters-editor'; @@ -191,101 +191,108 @@ class NewICDialog extends React.Component { } return ( - this.onClose(c)} onReset={() => this.resetState()} valid={this.validateForm()}> -
+ this.onClose(c)} + onReset={() => this.resetState()} + valid={this.validateForm()} + > + {this.props.managers.length > 0 ? <> - + An externally managed component is created and managed by an IC manager via AMQP} > - this.handleChange(e)}> - + this.handleChange(e)}> + - + {this.state.managedexternally === true ? - + Required field } > - Manager to create new IC * + Manager to create new IC * - this.handleChange(e)}> + this.handleChange(e)}> {managerOptions} - - + + :
} :
} - + Required field } > - Name * + Name * - this.handleChange(e)} /> - - + this.handleChange(e)} /> + + {this.state.managedexternally === false ? - - UUID - + UUID + this.handleChange(e)}/> - - + + :
} - - Location - this.handleChange(e)} /> - - - - Description - this.handleChange(e)} /> - - - + + Location + this.handleChange(e)} /> + + + + Description + this.handleChange(e)} /> + + + Required field } > - Category of component * + Category of component * - this.handleChange(e)}> + this.handleChange(e)}> - - - + + + Required field } > - Type of component * + Type of component * - this.handleChange(e)}> + this.handleChange(e)}> {typeOptions.map((name,index) => ( ))} - - - - Websocket URL - this.handleChange(e)} /> - - - - API URL - this.handleChange(e)} /> - - + + + + Websocket URL + this.handleChange(e)} /> + + + + API URL + this.handleChange(e)} /> + + {this.state.managedexternally === true ? - - Properties + + Properties this.handlePropertiesChange(data)} /> - + :
} - +
); } diff --git a/src/result/edit-result.js b/src/result/edit-result.js index 024a410..2b8b13f 100644 --- a/src/result/edit-result.js +++ b/src/result/edit-result.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel, Col, Row, Button, ProgressBar } from 'react-bootstrap'; +import { Form, Col, Row, Button, ProgressBar } from 'react-bootstrap'; import AppDispatcher from "../common/app-dispatcher"; import FileStore from "../file/file-store" @@ -131,78 +131,90 @@ class EditResultDialog extends React.Component { } render() { - - return this.onClose()} blendOutCancel={true} valid={true} - size='lg'> + > + + + + Description + + + + + + + + + + + + + + + + this.deleteFile(index)} + /> +
-
- - - - Description - - - - - - - - - - - - - - - - - this.deleteFile(index)} - /> -
- -
-
Add result file
- - - this.selectUploadFile(event)} /> - - - - - -
- -

- - - - - +
+
Add result file
+ + + this.selectUploadFile(event)} /> + + + + +
+ +
+ + + +
; } } -export default EditResultDialog; \ No newline at end of file +export default EditResultDialog; diff --git a/src/result/new-result.js b/src/result/new-result.js index 73d5e85..2529d02 100644 --- a/src/result/new-result.js +++ b/src/result/new-result.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; @@ -45,7 +45,7 @@ class NewResultDialog extends React.Component { } resetState() { - this.setState({ + this.setState({ ConfigSnapshots: '', Description: '', ResultFileIDs: [], @@ -54,14 +54,21 @@ class NewResultDialog extends React.Component { render() { return ( - this.onClose(c)} onReset={() => this.resetState()} valid={true}> -
- - Description - this.handleChange(e)} /> - - -
+ this.onClose(c)} + onReset={() => this.resetState()} + valid={true} + > +
+ + Description + this.handleChange(e)} /> + + +
); } diff --git a/src/result/result-configs-dialog.js b/src/result/result-configs-dialog.js index 8dfc220..b0fcea5 100644 --- a/src/result/result-configs-dialog.js +++ b/src/result/result-configs-dialog.js @@ -15,6 +15,7 @@ * along with VILLASweb. If not, see . ******************************************************************************/ import React from 'react'; +import { Form } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; import ReactJson from 'react-json-view'; @@ -46,16 +47,16 @@ class ResultConfigDialog extends React.Component { size="lg" blendOutCancel={true} > -
- - +
+ +
); } diff --git a/src/scenario/edit-scenario.js b/src/scenario/edit-scenario.js index d3f90c6..19a2fb9 100644 --- a/src/scenario/edit-scenario.js +++ b/src/scenario/edit-scenario.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap'; +import { Form, Col } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; import ParametersEditor from '../common/parameters-editor'; @@ -76,20 +76,26 @@ class EditScenarioDialog extends React.Component { }; render() { - return -
- - Name - - - - - - Start Parameters + return + + + Name + + + + + Start Parameters - -
+ + ; } } diff --git a/src/scenario/import-scenario.js b/src/scenario/import-scenario.js index a6b9a23..f0eff99 100644 --- a/src/scenario/import-scenario.js +++ b/src/scenario/import-scenario.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap'; +import { Form, Col } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; import ParametersEditor from '../common/parameters-editor'; @@ -93,26 +93,32 @@ class ImportScenarioDialog extends React.Component { } render() { - return -
- - Scenario File - - + return + + + Scenario File + + - - Name - this.handleChange(e)} /> - - + + Name + this.handleChange(e)} /> + + - - Start Parameters + + Start Parameters - - - + +
; } } diff --git a/src/scenario/new-scenario.js b/src/scenario/new-scenario.js index c582a3c..7535994 100644 --- a/src/scenario/new-scenario.js +++ b/src/scenario/new-scenario.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap'; +import { Form, Col} from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; import ParametersEditor from '../common/parameters-editor'; @@ -70,20 +70,26 @@ class NewScenarioDialog extends React.Component { } render() { - return -
- - Name - - - + return + + + Name + + + - - Start Parameters + + Start Parameters - - + +
; } } diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 90d0586..8436317 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -17,7 +17,7 @@ import React from 'react'; import { Container } from 'flux/utils'; -import { Button, InputGroup, FormControl } from 'react-bootstrap'; +import { Button, InputGroup, Form } from 'react-bootstrap'; import FileSaver from 'file-saver'; diff --git a/src/signal/edit-signal-mapping.js b/src/signal/edit-signal-mapping.js index 3b75386..e9ece22 100644 --- a/src/signal/edit-signal-mapping.js +++ b/src/signal/edit-signal-mapping.js @@ -17,8 +17,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {Button, FormGroup, FormLabel, FormText, OverlayTrigger, Tooltip} from 'react-bootstrap'; -import {Collapse} from 'react-collapse'; +import { Button, Form, OverlayTrigger, Tooltip } from 'react-bootstrap'; import Table from '../common/table'; import TableColumn from '../common/table-column'; import Dialog from "../common/dialogs/dialog"; @@ -228,52 +227,107 @@ class EditSignalMapping extends React.Component { marginLeft: '10px', }; - return( + return this.onClose(c)} + onReset={() => this.resetState()} + valid={true} + > + + {this.props.direction} Mapping + Click Index, Name or Unit cell to edit + this.onSignalChecked(signal)} data={this.state.signals}> + this.onSignalChecked(index, event)} + checkboxKey='checked' + width='30' + /> + this.handleMappingChange(e, row, column)} + /> + this.handleMappingChange(e, row, column)} + /> + this.handleMappingChange(e, row, column)} + /> + this.handleMappingChange(e, row, column)} + /> + this.handleDelete(index)} + /> +
- this.onClose(c)} - onReset={() => this.resetState()} - valid={true} - size='lg'> - - - {this.props.direction} Mapping - Click Index, Name or Unit cell to edit - this.onSignalChecked(signal)} data={this.state.signals}> - this.onSignalChecked(index, event)} checkboxKey='checked' width='30' /> - this.handleMappingChange(e, row, column)} /> - this.handleMappingChange(e, row, column)} /> - this.handleMappingChange(e, row, column)} /> - this.handleMappingChange(e, row, column)} /> - this.handleDelete(index)} /> -
- -
- Check/Uncheck All } > - - - - +
+ Check/Uncheck All } + > + + + + +
+
+ +
Choose a Component Configuration to add the signal to:
+
+ {typeof this.props.configs !== "undefined" && this.props.configs.map(config => ( + + ))}
-
- -
Choose a Component Configuration to add the signal to:
-
- {typeof this.props.configs !== "undefined" && this.props.configs.map(config => ( - - - - ))} -
- -
- -
- ); + +
+ + ; } } diff --git a/src/user/login-form.js b/src/user/login-form.js index fedfa26..ef38ee9 100644 --- a/src/user/login-form.js +++ b/src/user/login-form.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React, { Component } from 'react'; -import { Form, Button, FormGroup, FormControl, FormLabel, Col } from 'react-bootstrap'; +import { Form, Button, Col } from 'react-bootstrap'; import RecoverPassword from './recover-password' import AppDispatcher from '../common/app-dispatcher'; import _ from 'lodash'; @@ -69,19 +69,19 @@ class LoginForm extends Component { villaslogin() { return (
- - Username + + Username - this.handleChange(e)} /> + this.handleChange(e)} /> - + - - Password + + Password - this.handleChange(e)} /> + this.handleChange(e)} /> - + {this.props.loginMessage &&
@@ -91,17 +91,16 @@ class LoginForm extends Component {
} - + - + this.closeRecoverPassword()} sessionToken={this.props.sessionToken} /> - ); } diff --git a/src/widget/edit-widget/edit-widget-aspect-control.js b/src/widget/edit-widget/edit-widget-aspect-control.js index 3186584..a41d360 100644 --- a/src/widget/edit-widget/edit-widget-aspect-control.js +++ b/src/widget/edit-widget/edit-widget-aspect-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormCheck } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetAspectControl extends React.Component { constructor(props) { @@ -41,15 +41,15 @@ class EditWidgetAspectControl extends React.Component { } return ( - - + this.props.handleChange(e)}> - - + onChange={e => this.props.handleChange(e)} + /> + ); } } diff --git a/src/widget/edit-widget/edit-widget-checkbox-control.js b/src/widget/edit-widget/edit-widget-checkbox-control.js index 8a4113f..6dd8ce0 100644 --- a/src/widget/edit-widget/edit-widget-checkbox-control.js +++ b/src/widget/edit-widget/edit-widget-checkbox-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormCheck } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetCheckboxControl extends React.Component { constructor(props) { @@ -45,16 +45,15 @@ class EditWidgetCheckboxControl extends React.Component { } render() { - return - + this.handleCheckboxChange(e)}> - - - ; + onChange={e => this.handleCheckboxChange(e)} + /> + ; } } diff --git a/src/widget/edit-widget/edit-widget-color-control.js b/src/widget/edit-widget/edit-widget-color-control.js index aba342e..ada958f 100644 --- a/src/widget/edit-widget/edit-widget-color-control.js +++ b/src/widget/edit-widget/edit-widget-color-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, OverlayTrigger, Tooltip , FormLabel, Button } from 'react-bootstrap'; +import { Form, OverlayTrigger, Tooltip, Button } from 'react-bootstrap'; import ColorPicker from './color-picker' import Icon from "../../common/icon"; @@ -77,7 +77,7 @@ class EditWidgetColorControl extends Component { let style = { backgroundColor: color, opacity: opacity, - width: '260px', + width: '260px', height: '40px' } @@ -86,23 +86,20 @@ class EditWidgetColorControl extends Component { tooltipText = "Change border color"; } - - return ( - - {this.props.label} -
+ return + {this.props.label} + +
{tooltipText} } > -
+
- this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} disableOpacity={this.props.disableOpacity}/> - - - ) + this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} disableOpacity={this.props.disableOpacity}/> + ; } } diff --git a/src/widget/edit-widget/edit-widget-color-zones-control.js b/src/widget/edit-widget/edit-widget-color-zones-control.js index 6ef3fcd..aa337b6 100644 --- a/src/widget/edit-widget/edit-widget-color-zones-control.js +++ b/src/widget/edit-widget/edit-widget-color-zones-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, Table, FormLabel, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'; +import { Form, Table, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'; import ColorPicker from './color-picker' import Icon from '../../common/icon'; @@ -198,11 +198,18 @@ class EditWidgetColorZonesControl extends React.Component { height: '40px', marginTop: '20px' } - - return - Color zones + + return + Color Zones - +
{ @@ -222,44 +229,43 @@ class EditWidgetColorZonesControl extends React.Component { ) } -
- - Change color} > - - - - - - - - - -
- Min: - this.handleMinChange(e)} /> - - Max: - this.handleMaxChange(e)} /> -
- - - + + + Change color} > + + + + + + + + + +
+ Min: + this.handleMinChange(e)} /> + + Max: + this.handleMaxChange(e)} /> +
+ + + - this.closeEditModal(data)} widget={this.state.widget} zoneIndex={this.state.selectedIndex} controlId={'strokeStyle'} /> - ; + ; } } diff --git a/src/widget/edit-widget/edit-widget-file-control.js b/src/widget/edit-widget/edit-widget-file-control.js index 7185f16..8c2aa44 100644 --- a/src/widget/edit-widget/edit-widget-file-control.js +++ b/src/widget/edit-widget/edit-widget-file-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, FormLabel} from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditFileWidgetControl extends React.Component { @@ -59,13 +59,13 @@ class EditFileWidgetControl extends React.Component { } return
- - File - + File + this.handleFileChange(e)}>{fileOptions} - + onChange={(e) => this.handleFileChange(e)}>{fileOptions} +
; } } diff --git a/src/widget/edit-widget/edit-widget-html-content.js b/src/widget/edit-widget/edit-widget-html-content.js index 1df71d5..1bf2080 100644 --- a/src/widget/edit-widget/edit-widget-html-content.js +++ b/src/widget/edit-widget/edit-widget-html-content.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetHTMLContent extends React.Component { constructor(props) { @@ -60,20 +60,25 @@ class EditWidgetHTMLContent extends React.Component { handleKeyIgnore(event){ // This function prevents a keystroke from beeing handled by dialog.js - event.stopPropagation(); - } - + event.stopPropagation(); + } render() { return ( - - HTML Content - this.props.handleChange(e)} /> - - + + HTML Content + this.props.handleChange(e)} + /> + + ); } } - export default EditWidgetHTMLContent; diff --git a/src/widget/edit-widget/edit-widget-ic-control.js b/src/widget/edit-widget/edit-widget-ic-control.js index 7e90f81..acf2626 100644 --- a/src/widget/edit-widget/edit-widget-ic-control.js +++ b/src/widget/edit-widget/edit-widget-ic-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, FormLabel} from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetICControl extends React.Component { @@ -60,13 +60,13 @@ class EditWidgetICControl extends React.Component { } return
- - IC - + IC + this.handleICChange(e)}>{icOptions} - + onChange={(e) => this.handleICChange(e)}>{icOptions} +
; } } diff --git a/src/widget/edit-widget/edit-widget-min-max-control.js b/src/widget/edit-widget/edit-widget-min-max-control.js index f25f23a..88e7442 100644 --- a/src/widget/edit-widget/edit-widget-min-max-control.js +++ b/src/widget/edit-widget/edit-widget-min-max-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel, FormCheck, Table } from 'react-bootstrap'; +import { Form, Table } from 'react-bootstrap'; class EditWidgetMinMaxControl extends React.Component { constructor(props) { @@ -75,20 +75,20 @@ class EditWidgetMinMaxControl extends React.Component { render() { - return - {this.props.label} - + {this.props.label} + this.handleCheckboxChange(e)}> - +
Min: - Max: -
- ; + ; } } diff --git a/src/widget/edit-widget/edit-widget-number-control.js b/src/widget/edit-widget/edit-widget-number-control.js index 3b3101f..18e2d90 100644 --- a/src/widget/edit-widget/edit-widget-number-control.js +++ b/src/widget/edit-widget/edit-widget-number-control.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetNumberControl extends Component { constructor(props) { @@ -48,14 +48,14 @@ class EditWidgetNumberControl extends Component { } return ( - - {this.props.label} - + {this.props.label} + this.props.handleChange(e)} /> - + ); } } diff --git a/src/widget/edit-widget/edit-widget-orientation.js b/src/widget/edit-widget/edit-widget-orientation.js index 5ac835f..7ff5252 100644 --- a/src/widget/edit-widget/edit-widget-orientation.js +++ b/src/widget/edit-widget/edit-widget-orientation.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, Col, Row, FormCheck, FormLabel } from 'react-bootstrap'; +import { Col, Row, Form } from 'react-bootstrap'; import WidgetSlider from '../widgets/slider'; @@ -50,12 +50,11 @@ class EditWidgetOrientation extends Component { } render() { - // The tag shouldn't be necessary, but it gives height to the row while combining horizontal and vertical forms return ( - + - + Orientation @@ -64,14 +63,20 @@ class EditWidgetOrientation extends Component { let value = WidgetSlider.OrientationTypes[type].value; let name = WidgetSlider.OrientationTypes[type].name; - return ( - this.handleOrientationChange(value)}> - ) + return this.handleOrientationChange(value)} + /> }) } - + ); } } diff --git a/src/widget/edit-widget/edit-widget-parameters-control.js b/src/widget/edit-widget/edit-widget-parameters-control.js index 4117fd6..d589c2e 100644 --- a/src/widget/edit-widget/edit-widget-parameters-control.js +++ b/src/widget/edit-widget/edit-widget-parameters-control.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; import ParametersEditor from '../../common/parameters-editor'; class EditWidgetParametersControl extends Component { @@ -45,10 +45,13 @@ class EditWidgetParametersControl extends Component { render() { return ( - - {this.props.label} - this.handleChange(v)} /> - + + {this.props.label} + this.handleChange(v)} + /> + ); } } diff --git a/src/widget/edit-widget/edit-widget-plot-colors-control.js b/src/widget/edit-widget/edit-widget-plot-colors-control.js index a612277..f82d2ad 100644 --- a/src/widget/edit-widget/edit-widget-plot-colors-control.js +++ b/src/widget/edit-widget/edit-widget-plot-colors-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, OverlayTrigger, Tooltip , FormLabel, Button } from 'react-bootstrap'; +import { OverlayTrigger, Tooltip , Button } from 'react-bootstrap'; import ColorPicker from './color-picker' import Icon from "../../common/icon"; import {scaleOrdinal} from "d3-scale"; @@ -80,33 +80,40 @@ class EditWidgetPlotColorsControl extends Component { render() { return ( - - Line Colors + + Line Colors +
+ { + this.state.widget.signalIDs.map((signalID, idx) => { + let color = this.state.widget.customProperties.lineColors[signalID]; + let width = 260 / this.state.widget.signalIDs.length; + let style = { + backgroundColor: color, + width: width, + height: '40px' + } -
- { - this.state.widget.signalIDs.map((signalID, idx) => { - let color = this.state.widget.customProperties.lineColors[signalID]; - let width = 260 / this.state.widget.signalIDs.length; - let style = { - backgroundColor: color, - width: width, - height: '40px' - } + let signal = this.props.signals.find(signal => signal.id === signalID); - let signal = this.props.signals.find(signal => signal.id === signalID); - - return ({signal.name}}> - - - ) - }) - } + return {signal.name}} + > + + ; + }) + }
this.closeEditModal(data)} widget={this.state.widget} lineIndex={this.state.selectedIndex} controlId={'lineColor'} disableOpacity={true}/> - + ) } diff --git a/src/widget/edit-widget/edit-widget-signal-control.js b/src/widget/edit-widget/edit-widget-signal-control.js index cc9135d..d9667e3 100644 --- a/src/widget/edit-widget/edit-widget-signal-control.js +++ b/src/widget/edit-widget/edit-widget-signal-control.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetSignalControl extends Component { constructor(props) { @@ -48,9 +48,9 @@ class EditWidgetSignalControl extends Component { render() { return ( - - Select signal - this.handleSignalChange(e)}> + + Select signal + this.handleSignalChange(e)}> { this.state.signals.length === 0 ? ( @@ -61,8 +61,8 @@ class EditWidgetSignalControl extends Component { )) ) } - - + + ); } } diff --git a/src/widget/edit-widget/edit-widget-signals-control.js b/src/widget/edit-widget/edit-widget-signals-control.js index ad4658b..007b1fe 100644 --- a/src/widget/edit-widget/edit-widget-signals-control.js +++ b/src/widget/edit-widget/edit-widget-signals-control.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, FormCheck, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetSignalsControl extends Component { constructor(props) { @@ -55,25 +55,25 @@ class EditWidgetSignalsControl extends Component { render() { return ( - - Signals + + Signals { this.state.signals === 0 || !this.state.widget.hasOwnProperty(this.props.controlId)? ( - No signals available + No signals available ) : ( this.state.signals.map((signal, index) => ( - id === signal.id) !== undefined} onChange={(e) => this.handleSignalChange(e.target.checked, signal.id)}> - + )) ) } - + ); } } diff --git a/src/widget/edit-widget/edit-widget-text-control.js b/src/widget/edit-widget/edit-widget-text-control.js index 22aac97..5392ca1 100644 --- a/src/widget/edit-widget/edit-widget-text-control.js +++ b/src/widget/edit-widget/edit-widget-text-control.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetTextControl extends Component { constructor(props) { @@ -60,11 +60,11 @@ class EditWidgetTextControl extends Component { render() { return ( - - {this.props.label} - this.props.handleChange(e)} /> - - + + {this.props.label} + this.props.handleChange(e)} /> + + ); } } diff --git a/src/widget/edit-widget/edit-widget-text-size-control.js b/src/widget/edit-widget/edit-widget-text-size-control.js index 10e7922..ce3b131 100644 --- a/src/widget/edit-widget/edit-widget-text-size-control.js +++ b/src/widget/edit-widget/edit-widget-text-size-control.js @@ -16,21 +16,21 @@ **********************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetTextSizeControl extends React.Component { render() { const sizes = [11, 12, 14, 16, 18, 20, 22, 24, 28, 32, 36, 40, 46, 52, 60, 72]; return ( - - Text size - this.props.handleChange(e)}> + + Text size + this.props.handleChange(e)}> {sizes.map((size, index) => ( ))} - - + + ); } } diff --git a/src/widget/edit-widget/edit-widget-time-control.js b/src/widget/edit-widget/edit-widget-time-control.js index 23fb368..ea4eeff 100644 --- a/src/widget/edit-widget/edit-widget-time-control.js +++ b/src/widget/edit-widget/edit-widget-time-control.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, FormControl, FormLabel, FormText } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetTimeControl extends Component { constructor(props) { @@ -43,9 +43,9 @@ class EditWidgetTimeControl extends Component { } return ( - - Time - + Time + this.props.handleChange(e)} /> - Time in seconds - + Time in seconds + ); } } diff --git a/src/widget/edit-widget/edit-widget.js b/src/widget/edit-widget/edit-widget.js index 5d0d601..081cb08 100644 --- a/src/widget/edit-widget/edit-widget.js +++ b/src/widget/edit-widget/edit-widget.js @@ -16,6 +16,7 @@ ******************************************************************************/ import React from 'react'; +import { Form } from 'react-bootstrap'; import Dialog from '../../common/dialogs/dialog'; import CreateControls from './edit-widget-control-creator'; @@ -174,10 +175,17 @@ class EditWidgetDialog extends React.Component { } return ( - this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
+ this.onClose(c)} + onReset={() => this.resetState()} + valid={this.valid} + > + { controls || '' } - +
); } diff --git a/src/widget/widgets/input.js b/src/widget/widgets/input.js index 142f4e2..21c0421 100644 --- a/src/widget/widgets/input.js +++ b/src/widget/widgets/input.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React, { Component } from 'react'; -import { Form, FormGroup, Col, FormLabel, FormControl, InputGroup } from 'react-bootstrap'; +import { Form, Col, InputGroup } from 'react-bootstrap'; class WidgetInput extends Component { @@ -87,13 +87,13 @@ class WidgetInput extends Component { return (
- - + + {this.props.widget.name} - - +
);