mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
wip: edit widget panel now viewable
This commit is contained in:
Laura Fuentes Grau
parent
c662285037
commit
9190cd52e9
11 changed files with 82 additions and 58 deletions
|
|
@ -26,7 +26,6 @@ import Icon from "../common/icon";
|
|||
|
||||
class DashboardButtonGroup extends React.Component {
|
||||
render() {
|
||||
console.log("DashboardButtonGroup was called");
|
||||
const buttonStyle = {
|
||||
marginLeft: '8px'
|
||||
};
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import React, {Component} from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import Fullscreenable from 'react-fullscreenable';
|
||||
import classNames from 'classnames';
|
||||
|
|
@ -45,8 +45,8 @@ import AppDispatcher from '../common/app-dispatcher';
|
|||
|
||||
import 'react-contexify/dist/ReactContexify.min.css';
|
||||
|
||||
class Dashboard extends React.Component {
|
||||
|
||||
class Dashboard extends Component {
|
||||
|
||||
static lastWidgetKey = 0;
|
||||
static getStores() {
|
||||
return [ DashboardStore, ProjectStore, SimulationStore, SimulationModelStore, FileStore, LoginStore, WidgetStore ];
|
||||
|
|
@ -66,7 +66,6 @@ class Dashboard extends React.Component {
|
|||
|
||||
if (rawDashboard != null) {
|
||||
dashboard = Map(rawDashboard);
|
||||
console.log("dashboard: " + dashboard);
|
||||
|
||||
// convert widgets list to a dictionary to be able to reference widgets
|
||||
//let widgets = {};
|
||||
|
|
@ -159,9 +158,9 @@ class Dashboard extends React.Component {
|
|||
editing: prevState.editing || false,
|
||||
paused: prevState.paused || false,
|
||||
|
||||
editModal: prevState.editModal || false,
|
||||
modalData: prevState.modalData || null,
|
||||
modalIndex: prevState.modalIndex || null,
|
||||
editModal: false,
|
||||
modalData: null,
|
||||
modalIndex: null,
|
||||
|
||||
maxWidgetHeight: maxHeight,
|
||||
dropZoneHeight: maxHeight +80,
|
||||
|
|
@ -269,7 +268,6 @@ class Dashboard extends React.Component {
|
|||
}
|
||||
|
||||
reloadDashboard() {
|
||||
console.log("Error: reloadDashboard was called");
|
||||
// select dashboard by param id
|
||||
this.state.dashboards.forEach((tempDashboard) => {
|
||||
if (tempDashboard._id === this.props.match.params.dashboard) {
|
||||
|
|
@ -294,7 +292,7 @@ class Dashboard extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
handleDrop = widget => {
|
||||
handleDrop(widget) {
|
||||
const widgets = this.state.dashboard.get('widgets') || [];
|
||||
|
||||
const widgetKey = this.getNewWidgetKey();
|
||||
|
|
@ -347,12 +345,13 @@ class Dashboard extends React.Component {
|
|||
}
|
||||
|
||||
|
||||
editWidget = (widget, index) => {
|
||||
editWidget(widget, index){
|
||||
console.log("dashboard editWidget was called widget: " + widget +" index: " + index);
|
||||
this.setState({ editModal: true, modalData: widget, modalIndex: index });
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
closeEdit = data => {
|
||||
closeEdit(data){
|
||||
if (data == null) {
|
||||
this.setState({ editModal: false });
|
||||
|
||||
|
|
@ -368,21 +367,27 @@ class Dashboard extends React.Component {
|
|||
};
|
||||
|
||||
|
||||
deleteWidget = (widget, index) => {
|
||||
const widgets = this.state.dashboard.get('widgets');
|
||||
deleteWidget(widget, index) {
|
||||
/*const widgets = this.state.dashboard.get('widgets');
|
||||
delete widgets[index];
|
||||
|
||||
const dashboard = this.state.dashboard.set('widgets');
|
||||
|
||||
this.setState({ dashboard });
|
||||
this.setState({ dashboard });*/
|
||||
console.log("delete Widget in dashboard was called");
|
||||
AppDispatcher.dispatch({
|
||||
type: 'widgets/start-remove',
|
||||
data: widget,
|
||||
token: this.state.sessionToken
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
startEditing = () => {
|
||||
startEditing(){
|
||||
this.setState({ editing: true });
|
||||
};
|
||||
|
||||
saveEditing = () => {
|
||||
saveEditing() {
|
||||
// Provide the callback so it can be called when state change is applied
|
||||
// TODO: Check if callback is needed
|
||||
this.setState({ editing: false }, this.saveChanges );
|
||||
|
|
@ -401,23 +406,23 @@ class Dashboard extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
cancelEditing = () => {
|
||||
cancelEditing() {
|
||||
this.setState({ editing: false, dasboard: {} });
|
||||
|
||||
this.reloadDashboard();
|
||||
};
|
||||
|
||||
setGrid = value => {
|
||||
setGrid(value) {
|
||||
const dashboard = this.state.dashboard.set('grid', value);
|
||||
|
||||
this.setState({ dashboard });
|
||||
};
|
||||
|
||||
pauseData = () => {
|
||||
pauseData(){
|
||||
this.setState({ paused: true });
|
||||
};
|
||||
|
||||
unpauseData = () => {
|
||||
unpauseData() {
|
||||
this.setState({ paused: false });
|
||||
};
|
||||
|
||||
|
|
@ -463,13 +468,21 @@ class Dashboard extends React.Component {
|
|||
grid={grid}
|
||||
paused={this.state.paused}
|
||||
/>
|
||||
|
||||
))}
|
||||
</WidgetArea>
|
||||
|
||||
{/* TODO: Create only one context menu for all widgets */}
|
||||
{widgets != null && Object.keys(widgets).map(widgetKey => (
|
||||
<WidgetContextMenu key={widgetKey} index={parseInt(widgetKey,10)} widget={widgets[widgetKey]} onEdit={this.editWidget} onDelete={this.deleteWidget} onChange={this.widgetChange} />
|
||||
<WidgetContextMenu
|
||||
key={widgetKey}
|
||||
index={parseInt(widgetKey,10)}
|
||||
widget={widgets[widgetKey]}
|
||||
onEdit={this.editWidget.bind(this)}
|
||||
onDelete={this.deleteWidget.bind(this)}
|
||||
onChange={this.widgetChange} />
|
||||
))}
|
||||
|
||||
<EditWidget sessionToken={this.state.sessionToken} show={this.state.editModal} onClose={this.closeEdit} widget={this.state.modalData} simulationModels={this.state.simulationModels} files={this.state.files} />
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Menu, Item, Separator } from 'react-contexify';
|
||||
import { Menu, Item, Separator, MenuProvider } from 'react-contexify';
|
||||
|
||||
class WidgetContextMenu extends React.Component {
|
||||
editWidget = event => {
|
||||
|
|
@ -32,6 +32,7 @@ class WidgetContextMenu extends React.Component {
|
|||
|
||||
deleteWidget = event => {
|
||||
if (this.props.onDelete != null) {
|
||||
console.log("deleteWIget in wcm was called");
|
||||
this.props.onDelete(this.props.widget, this.props.index);
|
||||
}
|
||||
};
|
||||
|
|
@ -91,9 +92,10 @@ class WidgetContextMenu extends React.Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
|
||||
const isLocked = this.props.widget.locked;
|
||||
|
||||
return <Menu id={'widgetMenu'+ this.props.index}>
|
||||
const ContextMenu = () => (
|
||||
<Menu id={'widgetMenu'+ this.props.index}>
|
||||
<Item disabled={isLocked} onClick={this.editWidget}>Edit</Item>
|
||||
<Item disabled={isLocked} onClick={this.deleteWidget}>Delete</Item>
|
||||
|
||||
|
|
@ -108,14 +110,22 @@ class WidgetContextMenu extends React.Component {
|
|||
|
||||
<Item disabled={isLocked} onClick={this.lockWidget}>Lock</Item>
|
||||
<Item disabled={isLocked === false} onClick={this.unlockWidget}>Unlock</Item>
|
||||
</Menu>;
|
||||
</Menu>
|
||||
);
|
||||
|
||||
return <div>
|
||||
<MenuProvider id={'widgetMenu'+ this.props.index} style={{ border: '1px solid purple', display: 'inline-block' }}>
|
||||
{"Widget " + this.props.widget.name}
|
||||
</MenuProvider>
|
||||
<ContextMenu />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
WidgetContextMenu.propTypes = {
|
||||
index: PropTypes.number.isRequired,
|
||||
widget: PropTypes.object.isRequired,
|
||||
onEdit: PropTypes.func,
|
||||
onEdit: PropTypes.func.isRequired,
|
||||
onDelete: PropTypes.func,
|
||||
onChange: PropTypes.func
|
||||
};
|
||||
|
|
|
|||
|
|
@ -53,14 +53,14 @@ class EditWidgetColorControl extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
|
||||
console.log("edit widgetcolorcontrol was called");
|
||||
return (
|
||||
<FormGroup bsClass="color-control">
|
||||
<FormGroup bsclass="color-control">
|
||||
<Row>
|
||||
<Col componentClass={FormLabel} style={{whiteSpace: 'nowrap' }} sm={2}>
|
||||
<Col className={FormLabel} style={{whiteSpace: 'nowrap' }} sm={2}>
|
||||
{ this.props.label }
|
||||
</Col>
|
||||
<Col sm={10} bsClass='colors-column'>
|
||||
<Col sm={10} bsclass='colors-column'>
|
||||
{
|
||||
EditWidgetColorControl.ColorPalette.map( (color, idx ) => {
|
||||
let colorStyle = {
|
||||
|
|
|
|||
|
|
@ -38,13 +38,13 @@ import EditWidgetMinMaxControl from './edit-widget-min-max-control';
|
|||
import EditWidgetHTMLContent from './edit-widget-html-content';
|
||||
import EditWidgetParametersControl from './edit-widget-parameters-control';
|
||||
|
||||
export default function createControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulationModels, handleChange) {
|
||||
export default function CreateControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulationModels, handleChange) {
|
||||
// Use a list to concatenate the controls according to the widget type
|
||||
var dialogControls = [];
|
||||
var DialogControls = [];
|
||||
|
||||
switch(widgetType) {
|
||||
case 'CustomAction':
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={1} widget={widget} controlId={'icon'} label={'Icon'} placeholder={'Enter an awesome font icon name'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetSimulationControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
||||
|
|
@ -52,7 +52,7 @@ export default function createControls(widgetType = null, widget = null, session
|
|||
)
|
||||
break;
|
||||
case 'Action':
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />
|
||||
)
|
||||
break;
|
||||
|
|
@ -60,7 +60,7 @@ export default function createControls(widgetType = null, widget = null, session
|
|||
let valueBoundOnChange = (e) => {
|
||||
handleChange([e, {target: {id: 'signal', value: 0}}]);
|
||||
}
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => valueBoundOnChange(e)} />,
|
||||
<EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
||||
|
|
@ -72,7 +72,7 @@ export default function createControls(widgetType = null, widget = null, session
|
|||
let lampBoundOnChange = (e) => {
|
||||
handleChange([e, {target: {id: 'signal', value: 0}}]);
|
||||
}
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => lampBoundOnChange(e)} />,
|
||||
<EditWidgetSignalControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={2} widget={widget} controlId={'threshold'} label={'Threshold'} placeholder={'0.5'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
||||
|
|
@ -84,7 +84,7 @@ export default function createControls(widgetType = null, widget = null, session
|
|||
let plotBoundOnChange = (e) => {
|
||||
handleChange([e, {target: {id: 'signals', value: []}}]);
|
||||
}
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditWidgetTimeControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => plotBoundOnChange(e)} />,
|
||||
<EditWidgetSignalsControl key={2} controlId={'signals'} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
||||
|
|
@ -93,7 +93,7 @@ export default function createControls(widgetType = null, widget = null, session
|
|||
);
|
||||
break;
|
||||
case 'Table':
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetCheckboxControl key={1} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />
|
||||
);
|
||||
|
|
@ -101,7 +101,7 @@ export default function createControls(widgetType = null, widget = null, session
|
|||
case 'Image':
|
||||
// Restrict to only image file types (MIME)
|
||||
let imageControlFiles = files == null? [] : files.filter(file => file.type.includes('image'));
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={imageControlFiles} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetAspectControl key={1} widget={widget} handleChange={e => handleChange(e)} />
|
||||
);
|
||||
|
|
@ -110,7 +110,7 @@ export default function createControls(widgetType = null, widget = null, session
|
|||
let gaugeBoundOnChange = (e) => {
|
||||
handleChange([e, {target: {id: 'signal', value: ''}}]);
|
||||
}
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => gaugeBoundOnChange(e) } />,
|
||||
<EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
||||
|
|
@ -123,7 +123,7 @@ export default function createControls(widgetType = null, widget = null, session
|
|||
let plotTableBoundOnChange = (e) => {
|
||||
handleChange([e, {target: {id: 'preselectedSignals', value: []}}]);
|
||||
}
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => plotTableBoundOnChange(e)} />,
|
||||
<EditWidgetSignalsControl key={1} controlId={'preselectedSignals'} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={2} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
|
||||
|
|
@ -132,7 +132,7 @@ export default function createControls(widgetType = null, widget = null, session
|
|||
);
|
||||
break;
|
||||
case 'Slider':
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
|
||||
<EditWidgetOrientation key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetSimulationControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
||||
|
|
@ -148,7 +148,7 @@ export default function createControls(widgetType = null, widget = null, session
|
|||
let buttonBoundOnChange = (e) => {
|
||||
handleChange([e, {target: {id: 'signal', value: 0}}]);
|
||||
}
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
|
||||
<EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => buttonBoundOnChange(e)} />,
|
||||
<EditWidgetSignalControl key={2} widget={widget} controlId={'signal'} input validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
|
||||
|
|
@ -158,27 +158,27 @@ export default function createControls(widgetType = null, widget = null, session
|
|||
);
|
||||
break;
|
||||
case 'Box':
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditWidgetColorControl key={0} widget={widget} controlId={'border_color'} label={'Border color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetColorControl key={1} widget={widget} controlId={'background_color'} label={'Background color'} handleChange={e => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
case 'Label':
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
|
||||
<EditWidgetTextSizeControl key={1} widget={widget} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetColorControl key={2} widget={widget} controlId={'fontColor'} label={'Text color'} handleChange={e => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
case 'HTML':
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditWidgetHTMLContent key={0} widget={widget} placeholder='HTML Code' controlId='content' handleChange={e => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
case 'Topology':
|
||||
// Restrict to only xml files (MIME)
|
||||
let topologyControlFiles = files == null? [] : files.filter( file => file.type.includes('xml'));
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={topologyControlFiles} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
|
|
@ -187,7 +187,7 @@ export default function createControls(widgetType = null, widget = null, session
|
|||
let inputBoundOnChange = (e) => {
|
||||
handleChange([e, {target: {id: 'signal', value: 0}}]);
|
||||
}
|
||||
dialogControls.push(
|
||||
DialogControls.push(
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => inputBoundOnChange(e)} />,
|
||||
<EditWidgetSignalControl key={2} widget={widget} controlId={'signal'} input validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />
|
||||
|
|
@ -198,5 +198,5 @@ export default function createControls(widgetType = null, widget = null, session
|
|||
console.log('Non-valid widget type: ' + widgetType);
|
||||
}
|
||||
|
||||
return dialogControls;
|
||||
return DialogControls;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ class EditWidgetOrientation extends Component {
|
|||
return (
|
||||
<FormGroup controlId="orientation">
|
||||
<Row>
|
||||
<Col componentClass={FormLabel} sm={2}>
|
||||
<Col className={FormLabel} sm={2}>
|
||||
Orientation
|
||||
</Col>
|
||||
<Col sm={10}>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ class EditWidgetSignalControl extends Component {
|
|||
return (
|
||||
<FormGroup controlId="signal">
|
||||
<FormLabel>Signal</FormLabel>
|
||||
<FormControl componentClass="select" placeholder="Select signal" value={this.state.widget.signal} onChange={(e) => this.props.handleChange(e)}>
|
||||
<FormControl className="select" placeholder="Select signal" value={this.state.widget.signal} onChange={(e) => this.props.handleChange(e)}>
|
||||
{
|
||||
signalsToRender.length === 0 ? (
|
||||
<option disabled value style={{ display: 'none' }}>No signals available.</option>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ class EditWidgetSimulationControl extends Component {
|
|||
return (
|
||||
<FormGroup controlId="simulationModel">
|
||||
<FormLabel>Simulation Model</FormLabel>
|
||||
<FormControl componentClass="select" placeholder="Select simulation model" value={this.state.widget.simulationModel || '' } onChange={(e) => this.props.handleChange(e)}>
|
||||
<FormControl className="select" placeholder="Select simulation model" value={this.state.widget.simulationModel || '' } onChange={(e) => this.props.handleChange(e)}>
|
||||
{
|
||||
this.props.simulationModels.length === 0 ? (
|
||||
<option disabled value style={{ display: 'none' }}> No simulation models available. </option>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ class EditWidgetTextControl extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<FormGroup controlId={this.props.controlId} validationState={this.props.validate ? this.props.validate(this.props.controlId) : null}>
|
||||
<FormGroup controlId={this.props.controlId} valid={this.props.validate ? this.props.validate(this.props.controlId) : null}>
|
||||
<FormLabel>{this.props.label}</FormLabel>
|
||||
<FormControl type="text" placeholder={this.props.placeholder} value={this.state.widget[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ class EditWidgetTextSizeControl extends React.Component {
|
|||
return (
|
||||
<FormGroup controlId="textSize">
|
||||
<FormLabel>Text size</FormLabel>
|
||||
<FormControl componentClass="select" value={this.props.widget.textSize} onChange={e => this.props.handleChange(e)}>
|
||||
<FormControl as="select" value={this.props.widget.textSize} onChange={e => this.props.handleChange(e)}>
|
||||
{sizes.map((size, index) => (
|
||||
<option key={index} value={size}>{size}</option>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -24,10 +24,11 @@ import React from 'react';
|
|||
|
||||
import Dialog from '../common/dialogs/dialog';
|
||||
|
||||
import createControls from './edit-widget-control-creator';
|
||||
import CreateControls from './edit-widget-control-creator';
|
||||
|
||||
class EditWidgetDialog extends React.Component {
|
||||
valid = true;
|
||||
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -121,9 +122,10 @@ class EditWidgetDialog extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
console.log("####edit widget render was called");
|
||||
let controls = null;
|
||||
if (this.props.widget) {
|
||||
controls = createControls(
|
||||
controls = CreateControls(
|
||||
this.props.widget.type,
|
||||
this.state.temporal,
|
||||
this.props.sessionToken,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue