mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
refactor FormControl et al. to Form.Control
This commit is contained in:
parent
96c346e0e1
commit
c95cb5beab
42 changed files with 820 additions and 654 deletions
|
|
@ -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 {
|
|||
<Modal.Body>
|
||||
Are you sure you want to delete the {this.props.title} <strong>'{this.props.name}'</strong>?
|
||||
<Collapse isOpened={this.props.managedexternally} >
|
||||
<FormLabel size="sm">The IC will be deleted if the respective manager sends "gone" state and no component config is using the IC anymore</FormLabel>
|
||||
<Form.Label size="sm">The IC will be deleted if the respective manager sends "gone" state and no component config is using the IC anymore</Form.Label>
|
||||
</Collapse>
|
||||
</Modal.Body>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 <div>
|
||||
<form style={wrapperStyle}>
|
||||
<FormControl type='text' size='large' value={this.state.title} onChange={this.onChange} style={editStyle} autoFocus />
|
||||
</form>
|
||||
<Form style={wrapperStyle}>
|
||||
<Form.Control
|
||||
type='text'
|
||||
size='large'
|
||||
value={this.state.title}
|
||||
onChange={this.onChange}
|
||||
style={editStyle}
|
||||
autoFocus
|
||||
/>
|
||||
</Form>
|
||||
|
||||
<Button onClick={this.save}><Icon icon='check' style={iconStyle} /></Button>
|
||||
<Button onClick={this.cancel}><Icon icon='times' style={iconStyle} /></Button>
|
||||
<Button
|
||||
onClick={this.save}>
|
||||
<Icon icon='check' style={iconStyle} />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={this.cancel}>
|
||||
<Icon icon='times' style={iconStyle} />
|
||||
</Button>
|
||||
</div>;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
>
|
||||
<form>
|
||||
<FormGroup controlId="name">
|
||||
<FormLabel column={false}>Name</FormLabel>
|
||||
<FormControl
|
||||
<Form>
|
||||
<Form.Group controlId="name">
|
||||
<Form.Label column={false}>Name</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
placeholder={this.props.config.name}
|
||||
value={this.state.name}
|
||||
onChange={(e) => this.handleChange(e)}
|
||||
/>
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
|
||||
<FormGroup controlId="icID">
|
||||
<FormLabel column={false}> Infrastructure Component </FormLabel>
|
||||
<FormControl
|
||||
<Form.Group controlId="icID">
|
||||
<Form.Label column={false}> Infrastructure Component </Form.Label>
|
||||
<Form.Control
|
||||
as="select"
|
||||
placeholder='Select infrastructure component'
|
||||
value={this.state.icID}
|
||||
onChange={(e) => this.handleChange(e)}
|
||||
>
|
||||
{ICOptions}
|
||||
</FormControl>
|
||||
</FormGroup>
|
||||
</Form.Control>
|
||||
</Form.Group>
|
||||
|
||||
<Multiselect
|
||||
options={configFileOptions}
|
||||
|
|
@ -175,14 +174,14 @@ class EditConfigDialog extends React.Component {
|
|||
placeholder={'Select file(s)...'}
|
||||
/>
|
||||
|
||||
<FormGroup controlId='startParameters'>
|
||||
<FormLabel> Start Parameters </FormLabel>
|
||||
<Form.Group controlId='startParameters'>
|
||||
<Form.Label> Start Parameters </Form.Label>
|
||||
<ParametersEditor
|
||||
content={this.state.startParameters}
|
||||
onChange={(data) => this.handleParameterChange(data)}
|
||||
/>
|
||||
</FormGroup>
|
||||
</form>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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} >
|
||||
<form>
|
||||
<FormGroup controlId='file'>
|
||||
<FormLabel>Component Configuration File</FormLabel>
|
||||
<FormControl type='file' onChange={this.loadFile} />
|
||||
</FormGroup>
|
||||
<Form>
|
||||
<Form.Group controlId='file'>
|
||||
<Form.Label>Component Configuration File</Form.Label>
|
||||
<Form.Control type='file' onChange={this.loadFile} />
|
||||
</Form.Group>
|
||||
|
||||
<FormGroup controlId="name" >
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl
|
||||
<Form.Group controlId="name" >
|
||||
<Form.Label>Name</Form.Label>
|
||||
<Form.Control
|
||||
readOnly={!this.imported}
|
||||
isValid={this.validateForm('name')}
|
||||
type="text"
|
||||
|
|
@ -118,9 +118,9 @@ class ImportConfigDialog extends React.Component {
|
|||
value={this.state.name}
|
||||
onChange={(e) => this.handleChange(e)}
|
||||
/>
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
</form>
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Dialog show={this.props.show} title="Edit Dashboard" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup controlId="name" valid={this.validateForm('name')}>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
</form>
|
||||
<Dialog
|
||||
show={this.props.show}
|
||||
title="Edit Dashboard"
|
||||
buttonTitle="Save"
|
||||
onClose={(c) => this.onClose(c)}
|
||||
onReset={() => this.resetState()}
|
||||
valid={this.valid}
|
||||
>
|
||||
<Form>
|
||||
<Form.Group controlId="name" valid={this.validateForm('name')}>
|
||||
<Form.Label>Name</Form.Label>
|
||||
<Form.Control type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
<form>
|
||||
<FormGroup controlId="file">
|
||||
<FormLabel>Dashboard File</FormLabel>
|
||||
<FormControl type="file" onChange={(e) => this.loadFile(e.target.files)} />
|
||||
</FormGroup>
|
||||
<Form>
|
||||
<Form.Group controlId="file">
|
||||
<Form.Label>Dashboard File</Form.Label>
|
||||
<Form.Control type="file" onChange={(e) => this.loadFile(e.target.files)} />
|
||||
</Form.Group>
|
||||
|
||||
<FormGroup controlId="name" >
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl
|
||||
<Form.Group controlId="name" >
|
||||
<Form.Label>Name</Form.Label>
|
||||
<Form.Control
|
||||
readOnly={!this.imported}
|
||||
isValid={this.validateForm('name')}
|
||||
type="text"
|
||||
|
|
@ -116,9 +116,9 @@ class ImportDashboardDialog extends React.Component {
|
|||
value={this.state.name}
|
||||
onChange={(e) => this.handleChange(e)}
|
||||
/>
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
</form>
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Dialog show={this.props.show} title="New Dashboard" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup controlId="name" valid={this.validateForm('name')}>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
</form>
|
||||
<Dialog
|
||||
show={this.props.show}
|
||||
title="New Dashboard"
|
||||
buttonTitle="Add"
|
||||
onClose={(c) => this.onClose(c)}
|
||||
onReset={() => this.resetState()}
|
||||
valid={this.valid}
|
||||
>
|
||||
<Form>
|
||||
<Form.Group controlId="name" valid={this.validateForm('name')}>
|
||||
<Form.Label>Name</Form.Label>
|
||||
<Form.Control type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <Dialog show={this.props.show} title='Edit File Content' buttonTitle='Close' onClose={() => this.onClose()} blendOutCancel = {true} valid={true}>
|
||||
<FormGroup as={Col} >
|
||||
<FormControl
|
||||
return <Dialog
|
||||
show={this.props.show}
|
||||
title='Edit File Content'
|
||||
buttonTitle='Close'
|
||||
onClose={() => this.onClose()}
|
||||
blendOutCancel = {true}
|
||||
valid={true}
|
||||
>
|
||||
<Form.Group as={Col} >
|
||||
<Form.Control
|
||||
disabled={false}
|
||||
type='file'
|
||||
onChange={(event) => this.selectUploadFile(event)} />
|
||||
</FormGroup>
|
||||
</Form.Group>
|
||||
|
||||
<FormGroup as={Col} >
|
||||
<Form.Group as={Col} >
|
||||
<Button
|
||||
disabled={this.state.uploadFile === null}
|
||||
onClick={() => this.startEditContent()}>
|
||||
Upload
|
||||
</Button>
|
||||
</FormGroup>
|
||||
|
||||
</Form.Group>
|
||||
</Dialog>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Dialog show={this.props.show} title="Edit Files of scenario" buttonTitle="Close" onClose={() => this.onClose()} blendOutCancel = {true} valid={true} size = 'lg'>
|
||||
<div>
|
||||
|
||||
<Table data={this.props.files}>
|
||||
{this.state.currentUser.role === "Admin" ?
|
||||
<TableColumn
|
||||
title='ID'
|
||||
dataKey='id'
|
||||
/>
|
||||
: <></>
|
||||
}
|
||||
<Dialog
|
||||
show={this.props.show}
|
||||
title="Edit Files of Scenario"
|
||||
buttonTitle="Close"
|
||||
onClose={() => this.onClose()}
|
||||
blendOutCancel = {true}
|
||||
valid={true}
|
||||
>
|
||||
<Table data={this.props.files}>
|
||||
{this.state.currentUser.role === "Admin" ?
|
||||
<TableColumn
|
||||
title='Name'
|
||||
dataKey='name'
|
||||
title='ID'
|
||||
dataKey='id'
|
||||
/>
|
||||
<TableColumn
|
||||
title='Size (bytes)'
|
||||
dataKey='size'
|
||||
/>
|
||||
<TableColumn
|
||||
title='Type'
|
||||
dataKey='type'
|
||||
/>
|
||||
<TableColumn
|
||||
title=''
|
||||
align='right'
|
||||
deleteButton
|
||||
onDelete={(index) => this.deleteFile(index)}
|
||||
editButton
|
||||
onEdit={index => this.setState({ editModal: true, modalFile: this.props.files[index] })}
|
||||
/>
|
||||
</Table>
|
||||
|
||||
<FormGroup as={Col} >
|
||||
<FormControl
|
||||
disabled={this.props.disabled}
|
||||
type='file'
|
||||
onChange={(event) => this.selectUploadFile(event)}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup as={Col} >
|
||||
<span className='solid-button'>
|
||||
<Button
|
||||
variant='secondary'
|
||||
disabled={this.state.uploadFile === null}
|
||||
onClick={() => this.startFileUpload()}>
|
||||
Upload
|
||||
</Button>
|
||||
</span>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup as={Col} >
|
||||
<ProgressBar
|
||||
striped={true}
|
||||
animated={true}
|
||||
now={this.state.uploadProgress}
|
||||
label={this.state.uploadProgress + '%'}
|
||||
style={progressBarStyle}
|
||||
/>
|
||||
</FormGroup>
|
||||
<div style={{ clear: 'both' }} />
|
||||
|
||||
<EditFileContent
|
||||
show={this.state.editModal}
|
||||
onClose={(data) => this.closeEditModal(data)}
|
||||
sessionToken={this.props.sessionToken}
|
||||
file={this.state.modalFile}
|
||||
: <></>
|
||||
}
|
||||
<TableColumn
|
||||
title='Name'
|
||||
dataKey='name'
|
||||
/>
|
||||
</div>
|
||||
<TableColumn
|
||||
title='Size (bytes)'
|
||||
dataKey='size'
|
||||
/>
|
||||
<TableColumn
|
||||
title='Type'
|
||||
dataKey='type'
|
||||
/>
|
||||
<TableColumn
|
||||
title=''
|
||||
align='right'
|
||||
deleteButton
|
||||
onDelete={(index) => this.deleteFile(index)}
|
||||
editButton
|
||||
onEdit={index => this.setState({ editModal: true, modalFile: this.props.files[index] })}
|
||||
/>
|
||||
</Table>
|
||||
|
||||
<Form.Group as={Col} >
|
||||
<Form.Control
|
||||
disabled={this.props.disabled}
|
||||
type='file'
|
||||
onChange={(event) => this.selectUploadFile(event)}
|
||||
/>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group as={Col} >
|
||||
<span className='solid-button'>
|
||||
<Button
|
||||
variant='secondary'
|
||||
disabled={this.state.uploadFile === null}
|
||||
onClick={() => this.startFileUpload()}>
|
||||
Upload
|
||||
</Button>
|
||||
</span>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group as={Col} >
|
||||
<ProgressBar
|
||||
striped={true}
|
||||
animated={true}
|
||||
now={this.state.uploadProgress}
|
||||
label={this.state.uploadProgress + '%'}
|
||||
style={progressBarStyle}
|
||||
/>
|
||||
</Form.Group>
|
||||
|
||||
<div style={{ clear: 'both' }} />
|
||||
|
||||
<EditFileContent
|
||||
show={this.state.editModal}
|
||||
onClose={(data) => this.closeEditModal(data)}
|
||||
sessionToken={this.props.sessionToken}
|
||||
file={this.state.modalFile}
|
||||
/>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <div>
|
||||
<FormGroup>
|
||||
<FormLabel sm={3} md={2}>
|
||||
<Form.Group>
|
||||
<Form.Label sm={3} md={2}>
|
||||
{this.props.name}
|
||||
</FormLabel>
|
||||
</For.m.Label>
|
||||
|
||||
<FormGroup as={Col} sm={9} md={10}>
|
||||
<FormControl
|
||||
<Form.Group as={Col} sm={9} md={10}>
|
||||
<Form.Control
|
||||
as="select"
|
||||
value={this.props.value}
|
||||
disabled={this.props.disabled}
|
||||
placeholder='Select file'
|
||||
onChange={(event) => this.props.onChange(event)}>
|
||||
{fileOptions}
|
||||
</FormControl>
|
||||
</FormGroup>
|
||||
</FormGroup>
|
||||
</Form.Control>
|
||||
</Form.Group>
|
||||
</Form.Group>
|
||||
|
||||
<FormGroup as={Col} >
|
||||
<FormControl
|
||||
<Form.Group as={Col} >
|
||||
<Form.Control
|
||||
disabled={this.props.disabled}
|
||||
type='file'
|
||||
onChange={(event) => this.selectUploadFile(event)} />
|
||||
</FormGroup>
|
||||
</Form.Group>
|
||||
|
||||
<FormGroup as={Col} >
|
||||
<Form.Group as={Col} >
|
||||
<Button
|
||||
disabled={this.state.uploadFile === null}
|
||||
onClick={() => this.startFileUpload()}>
|
||||
Upload
|
||||
</Button>
|
||||
</FormGroup>
|
||||
</Form.Group>
|
||||
|
||||
<FormGroup as={Col} >
|
||||
<Form.Group as={Col} >
|
||||
<ProgressBar
|
||||
striped={true}
|
||||
animated={true}
|
||||
|
|
@ -128,7 +128,7 @@ class SelectFile extends React.Component {
|
|||
label={this.state.uploadProgress + '%'}
|
||||
style={progressBarStyle}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Form.Group>
|
||||
|
||||
</div>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
>
|
||||
<form>
|
||||
<FormLabel column={false}>UUID: {this.props.ic.uuid}</FormLabel>
|
||||
<FormGroup controlId="name">
|
||||
<FormLabel column={false}>Name</FormLabel>
|
||||
<FormControl type="text" placeholder={this.props.ic.name} value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="category">
|
||||
<FormLabel column={false}>Category</FormLabel>
|
||||
<FormControl as="select" value={this.state.category} onChange={(e) => this.handleChange(e)}>
|
||||
<Form>
|
||||
<Form.Label column={false}>UUID: {this.props.ic.uuid}</Form.Label>
|
||||
<Form.Group controlId="name">
|
||||
<Form.Label column={false}>Name</Form.Label>
|
||||
<Form.Control type="text" placeholder={this.props.ic.name} value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Form.Group controlId="category">
|
||||
<Form.Label column={false}>Category</Form.Label>
|
||||
<Form.Control as="select" value={this.state.category} onChange={(e) => this.handleChange(e)}>
|
||||
<option>simulator</option>
|
||||
<option>service</option>
|
||||
<option>gateway</option>
|
||||
<option>equipment</option>
|
||||
<option>manager</option>
|
||||
</FormControl>
|
||||
</FormGroup>
|
||||
<FormGroup controlId="type">
|
||||
<FormLabel column={false}>Type</FormLabel>
|
||||
<FormControl as="select" value={this.state.type} onChange={(e) => this.handleChange(e)}>
|
||||
</Form.Control>
|
||||
</Form.Group>
|
||||
<Form.Group controlId="type">
|
||||
<Form.Label column={false}>Type</Form.Label>
|
||||
<Form.Control as="select" value={this.state.type} onChange={(e) => this.handleChange(e)}>
|
||||
<option default>Select type</option>
|
||||
{typeOptions.map((name,index) => (
|
||||
<option key={index}>{name}</option>
|
||||
))}
|
||||
</FormControl>
|
||||
</FormGroup>
|
||||
<FormGroup controlId="websocketurl">
|
||||
<FormLabel column={false}>Websocket URL</FormLabel>
|
||||
<FormControl type="text" placeholder={this.props.ic.websocketurl} value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="apiurl">
|
||||
<FormLabel column={false}>API URL</FormLabel>
|
||||
<FormControl type="text" placeholder={this.props.ic.apiurl} value={this.state.apiurl} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="location">
|
||||
<FormLabel column={false}>Location</FormLabel>
|
||||
<FormControl type="text" placeholder={this.props.ic.location} value={this.state.location || '' } onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="description">
|
||||
<FormLabel column={false}>Description</FormLabel>
|
||||
<FormControl type="text" placeholder={this.props.ic.description} value={this.state.description || '' } onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId='startParameterSchema'>
|
||||
<FormLabel column={false}>Start parameter schema of IC</FormLabel>
|
||||
</Form.Control>
|
||||
</Form.Group>
|
||||
<Form.Group controlId="websocketurl">
|
||||
<Form.Label column={false}>Websocket URL</Form.Label>
|
||||
<Form.Control type="text" placeholder={this.props.ic.websocketurl} value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Form.Group controlId="apiurl">
|
||||
<Form.Label column={false}>API URL</Form.Label>
|
||||
<Form.Control type="text" placeholder={this.props.ic.apiurl} value={this.state.apiurl} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Form.Group controlId="location">
|
||||
<Form.Label column={false}>Location</Form.Label>
|
||||
<Form.Control type="text" placeholder={this.props.ic.location} value={this.state.location || '' } onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Form.Group controlId="description">
|
||||
<Form.Label column={false}>Description</Form.Label>
|
||||
<Form.Control type="text" placeholder={this.props.ic.description} value={this.state.description || '' } onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Form.Group controlId='startParameterSchema'>
|
||||
<Form.Label column={false}>Start parameter schema of IC</Form.Label>
|
||||
<ParametersEditor
|
||||
content={this.state.startParameterSchema}
|
||||
disabled={false}
|
||||
onChange={(data) => this.handleStartParameterSchemaChange(data)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup controlId='properties'>
|
||||
<FormLabel column={false}>Properties</FormLabel>
|
||||
</Form.Group>
|
||||
<Form.Group controlId='properties'>
|
||||
<Form.Label column={false}>Properties</Form.Label>
|
||||
<ParametersEditor
|
||||
content={this.state.properties}
|
||||
disabled={true}
|
||||
onChange={(data) => this.handlePropertiesChange(data)}
|
||||
/>
|
||||
</FormGroup>
|
||||
</form>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <div>
|
||||
<Form inline>
|
||||
<FormControl
|
||||
<Form.Control
|
||||
type="datetime-local"
|
||||
value={time}
|
||||
onChange={this.setTimeForAction} />
|
||||
onChange={this.setTimeForAction}
|
||||
/>
|
||||
<SplitButton
|
||||
style={splitButtonStyle}
|
||||
title={this.state.selectedAction != null ? this.state.selectedAction.title : ''}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
|
||||
import { Form } from 'react-bootstrap';
|
||||
import _ from 'lodash';
|
||||
|
||||
import Dialog from '../common/dialogs/dialog';
|
||||
|
|
@ -111,29 +111,36 @@ class ImportICDialog extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Dialog show={this.props.show} title="Import Infrastructure Component" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup controlId="file">
|
||||
<FormLabel>Infrastructure Component File</FormLabel>
|
||||
<FormControl type="file" onChange={(e) => this.loadFile(e.target.files)} />
|
||||
</FormGroup>
|
||||
<Dialog
|
||||
show={this.props.show}
|
||||
title="Import Infrastructure Component"
|
||||
buttonTitle="Add"
|
||||
onClose={(c) => this.onClose(c)}
|
||||
onReset={() => this.resetState()}
|
||||
valid={this.valid}
|
||||
>
|
||||
<Form>
|
||||
<Form.Group controlId="file">
|
||||
<Form.Label>Infrastructure Component File</Form.Label>
|
||||
<Form.Control type="file" onChange={(e) => this.loadFile(e.target.files)} />
|
||||
</Form.Group>
|
||||
|
||||
<FormGroup controlId="name" valid={this.validateForm('name')}>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="websocketurl">
|
||||
<FormLabel>Websocket URL</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter websocketurl" value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="uuid" valid={this.validateForm('uuid')}>
|
||||
<FormLabel>UUID</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter uuid" value={this.state.uuid} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
</form>
|
||||
<Form.Group controlId="name" valid={this.validateForm('name')}>
|
||||
<Form.Label>Name</Form.Label>
|
||||
<Form.Control type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Form.Group controlId="websocketurl">
|
||||
<Form.Label>Websocket URL</Form.Label>
|
||||
<Form.Control type="text" placeholder="Enter websocketurl" value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Form.Group controlId="uuid" valid={this.validateForm('uuid')}>
|
||||
<Form.Label>UUID</Form.Label>
|
||||
<Form.Control type="text" placeholder="Enter uuid" value={this.state.uuid} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
119
src/ic/new-ic.js
119
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 (
|
||||
<Dialog show={this.props.show} title="New Infrastructure Component" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.validateForm()}>
|
||||
<form>
|
||||
<Dialog
|
||||
show={this.props.show}
|
||||
title="New Infrastructure Component"
|
||||
buttonTitle="Add"
|
||||
onClose={(c) => this.onClose(c)}
|
||||
onReset={() => this.resetState()}
|
||||
valid={this.validateForm()}
|
||||
>
|
||||
<Form>
|
||||
{this.props.managers.length > 0 ?
|
||||
<>
|
||||
<FormGroup controlId="managedexternally">
|
||||
<Form.Group controlId="managedexternally">
|
||||
<OverlayTrigger key="-1" placement={'left'} overlay={<Tooltip id={`tooltip-${"me"}`}>An externally managed component is created and managed by an IC manager via AMQP</Tooltip>} >
|
||||
<FormCheck type={"checkbox"} label={"Managed externally"} defaultChecked={this.state.managedexternally} onChange={e => this.handleChange(e)}>
|
||||
</FormCheck>
|
||||
<Form.Check type={"checkbox"} label={"Managed externally"} defaultChecked={this.state.managedexternally} onChange={e => this.handleChange(e)}>
|
||||
</Form.Check>
|
||||
</OverlayTrigger>
|
||||
</FormGroup>
|
||||
</Form.Group>
|
||||
{this.state.managedexternally === true ?
|
||||
<FormGroup controlId="manager" valid={this.validateForm('manager')}>
|
||||
<Form.Group controlId="manager" valid={this.validateForm('manager')}>
|
||||
<OverlayTrigger key="0" placement={'right'} overlay={<Tooltip id={`tooltip-${"required"}`}> Required field </Tooltip>} >
|
||||
<FormLabel>Manager to create new IC *</FormLabel>
|
||||
<Form.Label>Manager to create new IC *</Form.Label>
|
||||
</OverlayTrigger>
|
||||
<FormControl as="select" value={this.state.manager} onChange={(e) => this.handleChange(e)}>
|
||||
<Form.Control as="select" value={this.state.manager} onChange={(e) => this.handleChange(e)}>
|
||||
{managerOptions}
|
||||
</FormControl>
|
||||
</FormGroup>
|
||||
</Form.Control>
|
||||
</Form.Group>
|
||||
: <div/>
|
||||
}
|
||||
</>
|
||||
: <div/>
|
||||
}
|
||||
<FormGroup controlId="name" valid={this.validateForm('name')}>
|
||||
<Form.Group controlId="name" valid={this.validateForm('name')}>
|
||||
<OverlayTrigger key="1" placement={'right'} overlay={<Tooltip id={`tooltip-${"required"}`}> Required field </Tooltip>} >
|
||||
<FormLabel>Name *</FormLabel>
|
||||
<Form.Label>Name *</Form.Label>
|
||||
</OverlayTrigger>
|
||||
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<Form.Control type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
{this.state.managedexternally === false ?
|
||||
<FormGroup controlId="uuid" valid={this.validateForm('uuid')}>
|
||||
<FormLabel>UUID</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter uuid" value={this.state.uuid}
|
||||
<Form.Group controlId="uuid" valid={this.validateForm('uuid')}>
|
||||
<Form.Label>UUID</Form.Label>
|
||||
<Form.Control type="text" placeholder="Enter uuid" value={this.state.uuid}
|
||||
onChange={(e) => this.handleChange(e)}/>
|
||||
<FormControl.Feedback/>
|
||||
</FormGroup>
|
||||
<Form.Control.Feedback/>
|
||||
</Form.Group>
|
||||
: <div/>
|
||||
}
|
||||
<FormGroup controlId="location">
|
||||
<FormLabel>Location</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter Location" value={this.state.location} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="description">
|
||||
<FormLabel>Description</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter Description" value={this.state.description} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="category" valid={this.validateForm('category')}>
|
||||
<Form.Group controlId="location">
|
||||
<Form.Label>Location</Form.Label>
|
||||
<Form.Control type="text" placeholder="Enter Location" value={this.state.location} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Form.Group controlId="description">
|
||||
<Form.Label>Description</Form.Label>
|
||||
<Form.Control type="text" placeholder="Enter Description" value={this.state.description} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Form.Group controlId="category" valid={this.validateForm('category')}>
|
||||
<OverlayTrigger key="2" placement={'right'} overlay={<Tooltip id={`tooltip-${"required"}`}> Required field </Tooltip>} >
|
||||
<FormLabel>Category of component *</FormLabel>
|
||||
<Form.Label>Category of component *</Form.Label>
|
||||
</OverlayTrigger>
|
||||
<FormControl as="select" value={this.state.category} onChange={(e) => this.handleChange(e)}>
|
||||
<Form.Control as="select" value={this.state.category} onChange={(e) => this.handleChange(e)}>
|
||||
<option default>Select category</option>
|
||||
<option value="simulator">Simulator</option>
|
||||
<option value="service">Service</option>
|
||||
<option value="gateway">Gateway</option>
|
||||
<option value="equipment">Equipment</option>
|
||||
<option value="manager">Manager</option>
|
||||
</FormControl>
|
||||
</FormGroup>
|
||||
<FormGroup controlId="type" valid={this.validateForm('type')}>
|
||||
</Form.Control>
|
||||
</Form.Group>
|
||||
<Form.Group controlId="type" valid={this.validateForm('type')}>
|
||||
<OverlayTrigger key="3" placement={'right'} overlay={<Tooltip id={`tooltip-${"required"}`}> Required field </Tooltip>} >
|
||||
<FormLabel>Type of component *</FormLabel>
|
||||
<Form.Label>Type of component *</Form.Label>
|
||||
</OverlayTrigger>
|
||||
<FormControl as="select" value={this.state.type} onChange={(e) => this.handleChange(e)}>
|
||||
<Form.Control as="select" value={this.state.type} onChange={(e) => this.handleChange(e)}>
|
||||
<option default>Select type</option>
|
||||
{typeOptions.map((name,index) => (
|
||||
<option key={index}>{name}</option>
|
||||
))}
|
||||
</FormControl>
|
||||
</FormGroup>
|
||||
<FormGroup controlId="websocketurl">
|
||||
<FormLabel>Websocket URL</FormLabel>
|
||||
<FormControl type="text" placeholder="https://" value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="apiurl">
|
||||
<FormLabel>API URL</FormLabel>
|
||||
<FormControl type="text" placeholder="https://" value={this.state.apiurl} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
</Form.Control>
|
||||
</Form.Group>
|
||||
<Form.Group controlId="websocketurl">
|
||||
<Form.Label>Websocket URL</Form.Label>
|
||||
<Form.Control type="text" placeholder="https://" value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Form.Group controlId="apiurl">
|
||||
<Form.Label>API URL</Form.Label>
|
||||
<Form.Control type="text" placeholder="https://" value={this.state.apiurl} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
{this.state.managedexternally === true ?
|
||||
<FormGroup controlId='properties'>
|
||||
<FormLabel> Properties </FormLabel>
|
||||
<Form.Group controlId='properties'>
|
||||
<Form.Label> Properties </Form.Label>
|
||||
<ParametersEditor
|
||||
content={this.state.properties}
|
||||
onChange={(data) => this.handlePropertiesChange(data)}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Form.Group>
|
||||
: <div/>
|
||||
}
|
||||
</form>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <Dialog show={this.props.show}
|
||||
return <Dialog
|
||||
show={this.props.show}
|
||||
title={'Edit Result No. ' + this.state.id}
|
||||
buttonTitle='Close'
|
||||
onClose={() => this.onClose()}
|
||||
blendOutCancel={true}
|
||||
valid={true}
|
||||
size='lg'>
|
||||
>
|
||||
<Form.Group as={Col} controlId='description'>
|
||||
<Row style={{ float: 'center' }} >
|
||||
<Col xs lg="2">
|
||||
<Form.Label>Description</Form.Label>
|
||||
</Col>
|
||||
<Col xs lg="4">
|
||||
<Form.Control
|
||||
type='text'
|
||||
placeholder={this.state.description}
|
||||
value={this.state.description}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
<Form.Control.Feedback />
|
||||
</Col>
|
||||
<Col xs lg="2">
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={() => this.submitDescription()}>
|
||||
Save
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Group>
|
||||
|
||||
<Table data={this.state.files}>
|
||||
<TableColumn
|
||||
title='ID'
|
||||
dataKey='id'
|
||||
/>
|
||||
<TableColumn
|
||||
title='Name'
|
||||
dataKey='name'
|
||||
/>
|
||||
<TableColumn
|
||||
title='Size (bytes)'
|
||||
dataKey='size'
|
||||
/>
|
||||
<TableColumn
|
||||
title='Type'
|
||||
dataKey='type'
|
||||
/>
|
||||
<TableColumn
|
||||
title=''
|
||||
deleteButton
|
||||
onDelete={(index) => this.deleteFile(index)}
|
||||
/>
|
||||
</Table>
|
||||
|
||||
<div>
|
||||
<FormGroup as={Col} controlId='description'>
|
||||
<Row style={{ float: 'center' }} >
|
||||
<Col xs lg="2">
|
||||
<FormLabel>Description</FormLabel>
|
||||
</Col>
|
||||
<Col xs lg="4">
|
||||
<FormControl type='text' placeholder={this.state.description} value={this.state.description} onChange={this.handleChange} />
|
||||
<FormControl.Feedback />
|
||||
</Col>
|
||||
<Col xs lg="2">
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={() => this.submitDescription()}>
|
||||
Save
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormGroup>
|
||||
|
||||
<Table data={this.state.files}>
|
||||
<TableColumn title='ID' dataKey='id' />
|
||||
<TableColumn title='Name' dataKey='name' />
|
||||
<TableColumn title='Size (bytes)' dataKey='size' />
|
||||
<TableColumn title='Type' dataKey='type' />
|
||||
<TableColumn
|
||||
title=''
|
||||
deleteButton
|
||||
onDelete={(index) => this.deleteFile(index)}
|
||||
/>
|
||||
</Table>
|
||||
|
||||
<div style={{ float: 'center' }}>
|
||||
<h5>Add result file</h5>
|
||||
<Row>
|
||||
<Col xs lg="4">
|
||||
<FormControl type='file' onChange={(event) => this.selectUploadFile(event)} />
|
||||
</Col>
|
||||
<Col xs lg="2">
|
||||
<Button
|
||||
disabled={this.state.uploadFile === null}
|
||||
onClick={() => this.startFileUpload()}>
|
||||
Upload
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<br></br>
|
||||
|
||||
<FormGroup as={Col} >
|
||||
<ProgressBar
|
||||
striped={true}
|
||||
animated={true}
|
||||
now={this.state.uploadProgress}
|
||||
label={this.state.uploadProgress + '%'}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<div style={{ float: 'center' }}>
|
||||
<h5>Add result file</h5>
|
||||
<Row>
|
||||
<Col xs lg="4">
|
||||
<Form.Control type='file' onChange={(event) => this.selectUploadFile(event)} />
|
||||
</Col>
|
||||
<Col xs lg="2">
|
||||
<Button
|
||||
disabled={this.state.uploadFile === null}
|
||||
onClick={() => this.startFileUpload()}>
|
||||
Upload
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<Form.Group as={Col} >
|
||||
<ProgressBar
|
||||
striped={true}
|
||||
animated={true}
|
||||
now={this.state.uploadProgress}
|
||||
label={this.state.uploadProgress + '%'}
|
||||
/>
|
||||
</Form.Group>
|
||||
</Dialog>;
|
||||
}
|
||||
}
|
||||
|
||||
export default EditResultDialog;
|
||||
export default EditResultDialog;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Dialog show={this.props.show} title="New Result" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={true}>
|
||||
<form>
|
||||
<FormGroup controlId="Description">
|
||||
<FormLabel>Description</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter description" value={this.state.Description} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
</form>
|
||||
<Dialog
|
||||
show={this.props.show}
|
||||
title="New Result"
|
||||
buttonTitle="Add"
|
||||
onClose={(c) => this.onClose(c)}
|
||||
onReset={() => this.resetState()}
|
||||
valid={true}
|
||||
>
|
||||
<Form>
|
||||
<Form.Group controlId="Description">
|
||||
<Form.Label>Description</Form.Label>
|
||||
<Form.Control type="text" placeholder="Enter description" value={this.state.Description} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
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}
|
||||
>
|
||||
<form>
|
||||
<ReactJson
|
||||
src={this.props.configs}
|
||||
name={false}
|
||||
displayDataTypes={false}
|
||||
displayObjectSize={false}
|
||||
enableClipboard={false}
|
||||
collapsed={false}
|
||||
/>
|
||||
</form>
|
||||
<Form>
|
||||
<ReactJson
|
||||
src={this.props.configs}
|
||||
name={false}
|
||||
displayDataTypes={false}
|
||||
displayObjectSize={false}
|
||||
enableClipboard={false}
|
||||
collapsed={false}
|
||||
/>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <Dialog show={this.props.show} title='Edit Scenario' buttonTitle='Save' onClose={this.onClose} onReset={this.resetState} valid={true}>
|
||||
<form>
|
||||
<FormGroup as={Col} controlId='name'>
|
||||
<FormLabel column={false}>Name</FormLabel>
|
||||
<FormControl type='text' placeholder='Enter name' value={this.state.name} onChange={this.handleChange} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup as={Col} controlId='startParameters'>
|
||||
<FormLabel column={false}>Start Parameters</FormLabel>
|
||||
return <Dialog
|
||||
show={this.props.show}
|
||||
title='Edit Scenario'
|
||||
buttonTitle='Save'
|
||||
onClose={this.onClose}
|
||||
onReset={this.resetState}
|
||||
valid={true}
|
||||
>
|
||||
<Form>
|
||||
<Form.Group as={Col} controlId='name'>
|
||||
<Form.Label column={false}>Name</Form.Label>
|
||||
<Form.Control type='text' placeholder='Enter name' value={this.state.name} onChange={this.handleChange} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group as={Col} controlId='startParameters'>
|
||||
<Form.Label column={false}>Start Parameters</Form.Label>
|
||||
<ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} />
|
||||
</FormGroup>
|
||||
</form>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Dialog>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <Dialog show={this.props.show} title="Import Scenario" buttonTitle="Import" onClose={this.onClose} onReset={this.resetState} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup as={Col} controlId="file">
|
||||
<FormLabel>Scenario File</FormLabel>
|
||||
<FormControl type="file" onChange={this.loadFile} />
|
||||
</FormGroup>
|
||||
return <Dialog
|
||||
show={this.props.show}
|
||||
title="Import Scenario"
|
||||
buttonTitle="Import"
|
||||
onClose={this.onClose}
|
||||
onReset={this.resetState}
|
||||
valid={this.valid}
|
||||
>
|
||||
<Form>
|
||||
<Form.Group as={Col} controlId="file">
|
||||
<Form.Label>Scenario File</Form.Label>
|
||||
<Form.Control type="file" onChange={this.loadFile} />
|
||||
</Form.Group>
|
||||
|
||||
<FormGroup as={Col} controlId="name">
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl readOnly={this.imported === false} type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<Form.Group as={Col} controlId="name">
|
||||
<Form.Label>Name</Form.Label>
|
||||
<Form.Control readOnly={this.imported === false} type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
|
||||
<FormGroup as={Col}>
|
||||
<FormLabel>Start Parameters</FormLabel>
|
||||
<Form.Group as={Col}>
|
||||
<Form.Label>Start Parameters</Form.Label>
|
||||
|
||||
<ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} disabled={this.imported === false} />
|
||||
</FormGroup>
|
||||
|
||||
</form>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Dialog>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <Dialog show={this.props.show} title="New Scenario" buttonTitle="Add" onClose={this.onClose} onReset={this.resetState} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup as={Col} controlId="name">
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={this.handleChange} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
return <Dialog
|
||||
show={this.props.show}
|
||||
title="New Scenario"
|
||||
buttonTitle="Add"
|
||||
onClose={this.onClose}
|
||||
onReset={this.resetState}
|
||||
valid={this.valid}>
|
||||
<Form>
|
||||
<Form.Group as={Col} controlId="name">
|
||||
<Form.Label>Name</Form.Label>
|
||||
<Form.Control type="text" placeholder="Enter name" value={this.state.name} onChange={this.handleChange} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
|
||||
<FormGroup as={Col}>
|
||||
<FormLabel>Start Parameters</FormLabel>
|
||||
<Form.Group as={Col}>
|
||||
<Form.Label>Start Parameters</Form.Label>
|
||||
|
||||
<ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} />
|
||||
</FormGroup>
|
||||
</form>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Dialog>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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 <Dialog
|
||||
show={this.props.show}
|
||||
title="Edit Signal Mapping"
|
||||
buttonTitle="Save"
|
||||
blendOutCancel = {false}
|
||||
onClose={(c) => this.onClose(c)}
|
||||
onReset={() => this.resetState()}
|
||||
valid={true}
|
||||
>
|
||||
<Form.Group>
|
||||
<Form.Label>{this.props.direction} Mapping</Form.Label>
|
||||
<Form.Text>Click <i>Index</i>, <i>Name</i> or <i>Unit</i> cell to edit</Form.Text>
|
||||
<Table checkbox onChecked={(signal) => this.onSignalChecked(signal)} data={this.state.signals}>
|
||||
<TableColumn
|
||||
checkbox
|
||||
onChecked={(index, event) => this.onSignalChecked(index, event)}
|
||||
checkboxKey='checked'
|
||||
width='30'
|
||||
/>
|
||||
<TableColumn
|
||||
title='Index'
|
||||
dataKey='index'
|
||||
inlineEditable
|
||||
inputType='number'
|
||||
onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)}
|
||||
/>
|
||||
<TableColumn
|
||||
title='Name'
|
||||
dataKey='name'
|
||||
inlineEditable
|
||||
inputType='text'
|
||||
onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)}
|
||||
/>
|
||||
<TableColumn
|
||||
title='Unit'
|
||||
dataKey='unit'
|
||||
inlineEditable
|
||||
inputType='text'
|
||||
onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)}
|
||||
/>
|
||||
<TableColumn
|
||||
title='Scaling Factor'
|
||||
dataKey='scalingFactor'
|
||||
inlineEditable
|
||||
inputType='number'
|
||||
onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)}
|
||||
/>
|
||||
<TableColumn
|
||||
title='Remove'
|
||||
deleteButton
|
||||
onDelete={(index) => this.handleDelete(index)}
|
||||
/>
|
||||
</Table>
|
||||
|
||||
<Dialog
|
||||
show={this.props.show}
|
||||
title="Edit Signal Mapping"
|
||||
buttonTitle="Save"
|
||||
blendOutCancel = {false}
|
||||
onClose={(c) => this.onClose(c)}
|
||||
onReset={() => this.resetState()}
|
||||
valid={true}
|
||||
size='lg'>
|
||||
|
||||
<FormGroup>
|
||||
<FormLabel>{this.props.direction} Mapping</FormLabel>
|
||||
<FormText>Click <i>Index</i>, <i>Name</i> or <i>Unit</i> cell to edit</FormText>
|
||||
<Table checkbox onChecked={(signal) => this.onSignalChecked(signal)} data={this.state.signals}>
|
||||
<TableColumn checkbox onChecked={(index, event) => this.onSignalChecked(index, event)} checkboxKey='checked' width='30' />
|
||||
<TableColumn title='Index' dataKey='index' inlineEditable inputType='number' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
|
||||
<TableColumn title='Name' dataKey='name' inlineEditable inputType='text' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
|
||||
<TableColumn title='Unit' dataKey='unit' inlineEditable inputType='text' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
|
||||
<TableColumn title='Scaling Factor' dataKey='scalingFactor' inlineEditable inputType='number' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
|
||||
<TableColumn title='Remove' deleteButton onDelete={(index) => this.handleDelete(index)} />
|
||||
</Table>
|
||||
|
||||
<div className='solid-button' style={{ float: 'right' }}>
|
||||
<OverlayTrigger key={0} placement={'left'} overlay={<Tooltip id={`tooltip-${"check"}`}> Check/Uncheck All </Tooltip>} >
|
||||
<Button variant='secondary' key={50} onClick={() => this.checkAll()} style={buttonStyle}> <Icon icon="check" /> </Button>
|
||||
</OverlayTrigger>
|
||||
<Button variant='secondary' key={51} onClick={() => this.handleRemove()} style={buttonStyle}> Remove </Button>
|
||||
<Button variant='secondary' key={52} onClick={() => this.handleAdd()} style={buttonStyle}><Icon icon="plus" /> Signal </Button>
|
||||
<div className='solid-button' style={{ float: 'right' }}>
|
||||
<OverlayTrigger
|
||||
key={0}
|
||||
placement='left'
|
||||
overlay={<Tooltip id={`tooltip-${"check"}`}> Check/Uncheck All </Tooltip>}
|
||||
>
|
||||
<Button
|
||||
variant='secondary'
|
||||
key={50}
|
||||
onClick={() => this.checkAll()}
|
||||
style={buttonStyle}
|
||||
>
|
||||
<Icon icon="check" />
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
<Button
|
||||
variant='secondary'
|
||||
key={51}
|
||||
onClick={() => this.handleRemove()} style={buttonStyle}>
|
||||
<Icon icon="minus" />Remove
|
||||
</Button>
|
||||
<Button
|
||||
variant='secondary'
|
||||
key={52}
|
||||
onClick={() => this.handleAdd()} style={buttonStyle}>
|
||||
<Icon icon="plus" /> Signal
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Collapse isOpened={this.state.openCollapse}>
|
||||
<h6>Choose a Component Configuration to add the signal to: </h6>
|
||||
<div className='solid-button'>
|
||||
{typeof this.props.configs !== "undefined" && this.props.configs.map(config => (
|
||||
<Button
|
||||
variant='secondary'
|
||||
key={config.id}
|
||||
onClick={() => this.handleAdd(config.id)}
|
||||
style={buttonStyle}
|
||||
>
|
||||
{config.name}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<Collapse isOpened={this.state.openCollapse}>
|
||||
<h6>Choose a Component Configuration to add the signal to: </h6>
|
||||
<div className='solid-button'>
|
||||
{typeof this.props.configs !== "undefined" && this.props.configs.map(config => (
|
||||
|
||||
<Button variant='secondary' key ={config.id} onClick={() => this.handleAdd(config.id)} style={buttonStyle}>{config.name}</Button>
|
||||
|
||||
))}
|
||||
</div>
|
||||
</Collapse>
|
||||
</div>
|
||||
</FormGroup>
|
||||
</Dialog>
|
||||
);
|
||||
</Collapse>
|
||||
</div>
|
||||
</Form.Group>
|
||||
</Dialog>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Form key="login_a">
|
||||
<FormGroup controlId="username">
|
||||
<FormLabel column={true}>Username</FormLabel>
|
||||
<Form.Group controlId="username">
|
||||
<Form.Label column={true}>Username</Form.Label>
|
||||
<Col>
|
||||
<FormControl type="text" placeholder="Username" autoComplete="username" onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control type="text" placeholder="Username" autoComplete="username" onChange={(e) => this.handleChange(e)} />
|
||||
</Col>
|
||||
</FormGroup>
|
||||
</Form.Group>
|
||||
|
||||
<FormGroup controlId="password">
|
||||
<FormLabel column={true}>Password</FormLabel>
|
||||
<Form.Group controlId="password">
|
||||
<Form.Label column={true}>Password</Form.Label>
|
||||
<Col >
|
||||
<FormControl type="password" placeholder="Password" autoComplete="current-password" onChange={(e) => this.handleChange(e)} />
|
||||
<Form.Control type="password" placeholder="Password" autoComplete="current-password" onChange={(e) => this.handleChange(e)} />
|
||||
</Col>
|
||||
</FormGroup>
|
||||
</Form.Group>
|
||||
|
||||
{this.props.loginMessage &&
|
||||
<div style={{ marginBottom: '20px', color: 'red', fontSize: 'small' }}>
|
||||
|
|
@ -91,17 +91,16 @@ class LoginForm extends Component {
|
|||
</div>
|
||||
}
|
||||
|
||||
<FormGroup style={{ paddingTop: 15, paddingBottom: 5 }}>
|
||||
<Form.Group style={{ paddingTop: 15, paddingBottom: 5 }}>
|
||||
<Col>
|
||||
<span className='solid-button'>
|
||||
<Button variant='secondary' style={{width: 90}} type="submit" disabled={this.state.disableLogin} onClick={e => this.login(e)}>Login</Button>
|
||||
</span>
|
||||
<Button variant="link" size="sm" style={{marginLeft: 85}} onClick={() => this.openRecoverPassword()}>Forgot your password?</Button>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
</Form.Group>
|
||||
|
||||
<RecoverPassword show={this.state.forgottenPassword} onClose={() => this.closeRecoverPassword()} sessionToken={this.props.sessionToken} />
|
||||
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<FormGroup>
|
||||
<FormCheck
|
||||
<Form.Group>
|
||||
<Form.Check
|
||||
type='checkbox'
|
||||
id={this.props.controlId}
|
||||
checked={isCustomProperty ? this.state.widget[parts[0]][parts[1]] : this.state.widget[this.props.controlId]}
|
||||
label={"Lock Aspect Ratio"}
|
||||
onChange={e => this.props.handleChange(e)}>
|
||||
</FormCheck>
|
||||
</FormGroup>
|
||||
onChange={e => this.props.handleChange(e)}
|
||||
/>
|
||||
</Form.Group>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <FormGroup>
|
||||
<FormCheck
|
||||
return <Form.Group>
|
||||
<Form.Check
|
||||
type={"checkbox"}
|
||||
id={this.props.controlId}
|
||||
label={this.props.text}
|
||||
defaultChecked={this.state.isChecked}
|
||||
onChange={e => this.handleCheckboxChange(e)}>
|
||||
|
||||
</FormCheck>
|
||||
</FormGroup>;
|
||||
onChange={e => this.handleCheckboxChange(e)}
|
||||
/>
|
||||
</Form.Group>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<FormGroup>
|
||||
<FormLabel>{this.props.label}</FormLabel>
|
||||
|
||||
<div className='section-buttons-group-right'>
|
||||
return <Form.Group>
|
||||
<Form.Label>{this.props.label}</Form.Label>
|
||||
|
||||
<div className='section-buttons-group-right'>
|
||||
<OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}> {tooltipText} </Tooltip>} >
|
||||
<Button key={2} style={style} onClick={this.openColorPicker.bind(this)} >
|
||||
<Icon icon="paint-brush"/>
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} disableOpacity={this.props.disableOpacity}/>
|
||||
</FormGroup>
|
||||
|
||||
)
|
||||
<ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} disableOpacity={this.props.disableOpacity}/>
|
||||
</Form.Group>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 <FormGroup>
|
||||
<FormLabel>Color zones</FormLabel>
|
||||
|
||||
return <Form.Group>
|
||||
<Form.Label>Color Zones</Form.Label>
|
||||
<span className='icon-button'>
|
||||
<Button variant='light' onClick={this.addZone} style={buttonStyle} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="plus" className='icon-color' style={iconStyle} /></Button>
|
||||
<Button
|
||||
variant='light'
|
||||
onClick={this.addZone}
|
||||
style={buttonStyle}
|
||||
disabled={!this.props.widget.customProperties.colorZones}
|
||||
>
|
||||
<Icon icon="plus" className='icon-color' style={iconStyle} />
|
||||
</Button>
|
||||
</span>
|
||||
<div>
|
||||
{
|
||||
|
|
@ -222,44 +229,43 @@ class EditWidgetColorZonesControl extends React.Component {
|
|||
)
|
||||
|
||||
}
|
||||
</div>
|
||||
<Collapse isOpened={collapse} >
|
||||
<OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}>Change color</Tooltip>} >
|
||||
<Button key={0} style={pickerStyle} onClick={this.openColorPicker.bind(this)} >
|
||||
<Icon icon="paint-brush"/>
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
<Table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Min:
|
||||
<FormControl
|
||||
type="number"
|
||||
step="any"
|
||||
placeholder="Min"
|
||||
value={this.state.minValue}
|
||||
onChange={e => this.handleMinChange(e)} />
|
||||
</td>
|
||||
<td>
|
||||
Max:
|
||||
<FormControl
|
||||
type="number"
|
||||
step="any"
|
||||
placeholder="Max"
|
||||
value={ this.state.maxValue}
|
||||
onChange={e => this.handleMaxChange(e)} />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
<span className='icon-button'>
|
||||
<Button variant='light' onClick={this.removeZones} ><Icon style={iconStyle} classname='icon-color' icon="trash-alt" /></Button>
|
||||
</span>
|
||||
</div>
|
||||
<Collapse isOpened={collapse}>
|
||||
<OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}>Change color</Tooltip>} >
|
||||
<Button key={0} style={pickerStyle} onClick={this.openColorPicker.bind(this)} >
|
||||
<Icon icon="paint-brush"/>
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
<Table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Min:
|
||||
<Form.Control
|
||||
type="number"
|
||||
step="any"
|
||||
placeholder="Min"
|
||||
value={this.state.minValue}
|
||||
onChange={e => this.handleMinChange(e)} />
|
||||
</td>
|
||||
<td>
|
||||
Max:
|
||||
<Form.Control
|
||||
type="number"
|
||||
step="any"
|
||||
placeholder="Max"
|
||||
value={ this.state.maxValue}
|
||||
onChange={e => this.handleMaxChange(e)} />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
<span className='icon-button'>
|
||||
<Button variant='light' onClick={this.removeZones} ><Icon style={iconStyle} classname='icon-color' icon="trash-alt" /></Button>
|
||||
</span>
|
||||
</Collapse>
|
||||
|
||||
<ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} zoneIndex={this.state.selectedIndex} controlId={'strokeStyle'} />
|
||||
</FormGroup>;
|
||||
</Form.Group>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 <div>
|
||||
<FormGroup controlId="file">
|
||||
<FormLabel>File</FormLabel>
|
||||
<FormControl
|
||||
<Form.Group controlId="file">
|
||||
<Form.Label>File</Form.Label>
|
||||
<Form.Control
|
||||
as="select"
|
||||
value={isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]}
|
||||
onChange={(e) => this.handleFileChange(e)}>{fileOptions} </FormControl>
|
||||
</FormGroup>
|
||||
onChange={(e) => this.handleFileChange(e)}>{fileOptions} </Form.Control>
|
||||
</Form.Group>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<FormGroup controlId={this.props.controlId}>
|
||||
<FormLabel>HTML Content</FormLabel>
|
||||
<FormControl onKeyDown={this.handleKeyIgnore} componentclass="textarea" style={{ height: 200 }} placeholder={this.props.placeholder} value={this.state.value} onChange={e => this.props.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<Form.Group controlId={this.props.controlId}>
|
||||
<Form.Label>HTML Content</Form.Label>
|
||||
<Form.Control
|
||||
onKeyDown={this.handleKeyIgnore}
|
||||
componentclass="textarea"
|
||||
style={{ height: 200 }}
|
||||
placeholder={this.props.placeholder}
|
||||
value={this.state.value}
|
||||
onChange={e => this.props.handleChange(e)}
|
||||
/>
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default EditWidgetHTMLContent;
|
||||
|
|
|
|||
|
|
@ -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 <div>
|
||||
<FormGroup controlId="ic">
|
||||
<FormLabel>IC</FormLabel>
|
||||
<FormControl
|
||||
<Form.Group controlId="ic">
|
||||
<Form.Label>IC</Form.Label>
|
||||
<Form.Control
|
||||
as="select"
|
||||
value={isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]}
|
||||
onChange={(e) => this.handleICChange(e)}>{icOptions} </FormControl>
|
||||
</FormGroup>
|
||||
onChange={(e) => this.handleICChange(e)}>{icOptions} </Form.Control>
|
||||
</Form.Group>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <FormGroup>
|
||||
<FormLabel>{this.props.label}</FormLabel>
|
||||
<FormCheck
|
||||
return <Form.Group>
|
||||
<Form.Label>{this.props.label}</Form.Label>
|
||||
<Form.Check
|
||||
label= {"UseMinMax"}
|
||||
defaultChecked={this.state.useMinMax}
|
||||
onChange={e => this.handleCheckboxChange(e)}>
|
||||
</FormCheck>
|
||||
</Form.Check>
|
||||
|
||||
<Table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Min:
|
||||
<FormControl
|
||||
<Form.Control
|
||||
type="number"
|
||||
step="any"
|
||||
disabled={!this.state.useMinMax}
|
||||
|
|
@ -98,7 +98,7 @@ class EditWidgetMinMaxControl extends React.Component {
|
|||
</td>
|
||||
<td>
|
||||
Max:
|
||||
<FormControl
|
||||
<Form.Control
|
||||
type="number"
|
||||
step="any"
|
||||
disabled={!this.state.useMinMax}
|
||||
|
|
@ -109,7 +109,7 @@ class EditWidgetMinMaxControl extends React.Component {
|
|||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</FormGroup>;
|
||||
</Form.Group>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<FormGroup controlId={this.props.controlId}>
|
||||
<FormLabel>{this.props.label}</FormLabel>
|
||||
<FormControl
|
||||
<Form.Group controlId={this.props.controlId}>
|
||||
<Form.Label>{this.props.label}</Form.Label>
|
||||
<Form.Control
|
||||
type="number"
|
||||
step={step}
|
||||
value={isCustomProperty ? this.state.widget[parts[0]][parts[1]] : this.state.widget[this.props.controlId]}
|
||||
onChange={e => this.props.handleChange(e)} />
|
||||
</FormGroup>
|
||||
</Form.Group>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <Row> tag shouldn't be necessary, but it gives height to the row while combining horizontal and vertical forms
|
||||
return (
|
||||
<FormGroup controlId="orientation">
|
||||
<Form.Group controlId="orientation">
|
||||
<Row>
|
||||
<Col className={FormLabel} sm={3}>
|
||||
<Col className={Form.Label} sm={3}>
|
||||
Orientation
|
||||
</Col>
|
||||
<Col sm={10}>
|
||||
|
|
@ -64,14 +63,20 @@ class EditWidgetOrientation extends Component {
|
|||
let value = WidgetSlider.OrientationTypes[type].value;
|
||||
let name = WidgetSlider.OrientationTypes[type].name;
|
||||
|
||||
return (
|
||||
<FormCheck inline label={name} key={value} id={value} type='radio' title='orientation' checked={ value === this.state.widget.customProperties.orientation } onChange={(e) => this.handleOrientationChange(value)}>
|
||||
</FormCheck>)
|
||||
return <Form.Check
|
||||
inline label={name}
|
||||
key={value}
|
||||
id={value}
|
||||
type='radio'
|
||||
title='orientation'
|
||||
checked={ value === this.state.widget.customProperties.orientation }
|
||||
onChange={(e) => this.handleOrientationChange(value)}
|
||||
/>
|
||||
})
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
</FormGroup>
|
||||
</Form.Group>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<FormGroup controlId={this.props.controlId}>
|
||||
<FormLabel>{this.props.label}</FormLabel>
|
||||
<ParametersEditor content={this.state.widget[this.props.controlId] || {}} onChange={(v)=> this.handleChange(v)} />
|
||||
</FormGroup>
|
||||
<Form.Group controlId={this.props.controlId}>
|
||||
<Form.Label>{this.props.label}</Form.Label>
|
||||
<ParametersEditor
|
||||
content={this.state.widget[this.props.controlId] || {}}
|
||||
onChange={(v)=> this.handleChange(v)}
|
||||
/>
|
||||
</Form.Group>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<FormGroup>
|
||||
<FormLabel>Line Colors</FormLabel>
|
||||
<Form.Group>
|
||||
<Form.Label>Line Colors</Form.Label>
|
||||
<div>
|
||||
{
|
||||
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'
|
||||
}
|
||||
|
||||
<div>
|
||||
{
|
||||
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 (<OverlayTrigger key={idx} placement={'bottom'} overlay={<Tooltip id={'tooltip-${"signal name"}'}>{signal.name}</Tooltip>}>
|
||||
<Button
|
||||
style={style} key={idx} onClick={i => this.editLineColor(signalID)} ><Icon icon="pen" /></Button>
|
||||
</OverlayTrigger>
|
||||
)
|
||||
})
|
||||
}
|
||||
return <OverlayTrigger
|
||||
key={idx}
|
||||
placement={'bottom'}
|
||||
overlay={<Tooltip id={'tooltip-${"signal name"}'}>{signal.name}</Tooltip>}
|
||||
>
|
||||
<Button
|
||||
style={style}
|
||||
key={idx}
|
||||
onClick={i => this.editLineColor(signalID)}
|
||||
>
|
||||
<Icon icon="pen" />
|
||||
</Button>
|
||||
</OverlayTrigger>;
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
<ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} lineIndex={this.state.selectedIndex} controlId={'lineColor'} disableOpacity={true}/>
|
||||
</FormGroup>
|
||||
</Form.Group>
|
||||
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<FormGroup controlId="signal">
|
||||
<FormLabel>Select signal</FormLabel>
|
||||
<FormControl as="select" value={this.props.widget.signalIDs[0] || ""} onChange={(e) => this.handleSignalChange(e)}>
|
||||
<Form.Group controlId="signal">
|
||||
<Form.Label>Select signal</Form.Label>
|
||||
<Form.Control as="select" value={this.props.widget.signalIDs[0] || ""} onChange={(e) => this.handleSignalChange(e)}>
|
||||
<option default>Select signal</option>
|
||||
{
|
||||
this.state.signals.length === 0 ? (
|
||||
|
|
@ -61,8 +61,8 @@ class EditWidgetSignalControl extends Component {
|
|||
))
|
||||
)
|
||||
}
|
||||
</FormControl>
|
||||
</FormGroup>
|
||||
</Form.Control>
|
||||
</Form.Group>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<FormGroup>
|
||||
<FormLabel>Signals</FormLabel>
|
||||
<Form.Group>
|
||||
<Form.Label>Signals</Form.Label>
|
||||
{
|
||||
this.state.signals === 0 || !this.state.widget.hasOwnProperty(this.props.controlId)? (
|
||||
<FormLabel>No signals available</FormLabel>
|
||||
<Form.Label>No signals available</Form.Label>
|
||||
) : (
|
||||
this.state.signals.map((signal, index) => (
|
||||
<FormCheck
|
||||
<Form.Check
|
||||
type={'checkbox'}
|
||||
label={signal.name}
|
||||
id={signal.id}
|
||||
key={signal.id}
|
||||
checked={this.state.checkedSignals.find(id => id === signal.id) !== undefined}
|
||||
onChange={(e) => this.handleSignalChange(e.target.checked, signal.id)}>
|
||||
</FormCheck>
|
||||
</Form.Check>
|
||||
))
|
||||
)
|
||||
}
|
||||
</FormGroup>
|
||||
</Form.Group>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<FormGroup controlId={this.props.controlId}>
|
||||
<FormLabel>{this.props.label}</FormLabel>
|
||||
<FormControl type="text" placeholder={this.props.placeholder} value={this.state.value} onChange={e => this.props.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<Form.Group controlId={this.props.controlId}>
|
||||
<Form.Label>{this.props.label}</Form.Label>
|
||||
<Form.Control type="text" placeholder={this.props.placeholder} value={this.state.value} onChange={e => this.props.handleChange(e)} />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<FormGroup controlId="customProperties.textSize">
|
||||
<FormLabel>Text size</FormLabel>
|
||||
<FormControl as="select" value={this.props.widget.customProperties.textSize} onChange={e => this.props.handleChange(e)}>
|
||||
<Form.Group controlId="customProperties.textSize">
|
||||
<Form.Label>Text size</Form.Label>
|
||||
<Form.Control as="select" value={this.props.widget.customProperties.textSize} onChange={e => this.props.handleChange(e)}>
|
||||
{sizes.map((size, index) => (
|
||||
<option key={index} value={size}>{size}</option>
|
||||
))}
|
||||
</FormControl>
|
||||
</FormGroup>
|
||||
</Form.Control>
|
||||
</Form.Group>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<FormGroup controlId= {this.props.controlId}>
|
||||
<FormLabel>Time</FormLabel>
|
||||
<FormControl
|
||||
<Form.Group controlId= {this.props.controlId}>
|
||||
<Form.Label>Time</Form.Label>
|
||||
<Form.Control
|
||||
type="number"
|
||||
min="1"
|
||||
max="300"
|
||||
|
|
@ -53,8 +53,8 @@ class EditWidgetTimeControl extends Component {
|
|||
value={isCustomProperty ? this.state.widget[parts[0]][parts[1]] : this.state.widget[this.props.controlId]}
|
||||
onChange={(e) => this.props.handleChange(e)}
|
||||
/>
|
||||
<FormText>Time in seconds</FormText>
|
||||
</FormGroup>
|
||||
<Form.Text>Time in seconds</Form.Text>
|
||||
</Form.Group>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Dialog show={this.props.show} title="Edit Widget" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form encType='multipart/form-data'>
|
||||
<Dialog
|
||||
show={this.props.show}
|
||||
title="Edit Widget"
|
||||
buttonTitle="Save"
|
||||
onClose={(c) => this.onClose(c)}
|
||||
onReset={() => this.resetState()}
|
||||
valid={this.valid}
|
||||
>
|
||||
<Form encType='multipart/form-data'>
|
||||
{ controls || '' }
|
||||
</form>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className="number-input-widget full">
|
||||
<Form componentclass="fieldset" horizontal="true">
|
||||
<FormGroup>
|
||||
<Col as={FormLabel}>
|
||||
<Form.Group>
|
||||
<Col as={Form.Label}>
|
||||
{this.props.widget.name}
|
||||
</Col>
|
||||
<Col>
|
||||
<InputGroup>
|
||||
<FormControl
|
||||
<Form.Control
|
||||
type="number"
|
||||
step="any"
|
||||
disabled={ this.props.editing }
|
||||
|
|
@ -112,7 +112,7 @@ class WidgetInput extends Component {
|
|||
)}
|
||||
</InputGroup>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue