mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
refactoring: extracted control creation
This commit is contained in:
Ricardo Hernandez-Montoya
parent
b076db8b7b
commit
72ffd6cd96
2 changed files with 112 additions and 61 deletions
90
src/components/dialog/edit-widget-control-creator.js
Normal file
90
src/components/dialog/edit-widget-control-creator.js
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import EditWidgetTextControl from './edit-widget-text-control';
|
||||
import EditWidgetColorControl from './edit-widget-color-control';
|
||||
import EditWidgetTimeControl from './edit-widget-time-control';
|
||||
import EditImageWidgetControl from './edit-widget-image-control';
|
||||
import EditWidgetSimulatorControl from './edit-widget-simulator-control';
|
||||
import EditWidgetSignalControl from './edit-widget-signal-control';
|
||||
import EditWidgetSignalsControl from './edit-widget-signals-control';
|
||||
import EditWidgetOrientation from './edit-widget-orientation';
|
||||
|
||||
export default function createControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulation, handleChange) {
|
||||
// Use a list to concatenate the controls according to the widget type
|
||||
var dialogControls = [];
|
||||
|
||||
switch(widgetType) {
|
||||
case 'Value': {
|
||||
let valueBoundOnChange = (e) => {
|
||||
handleChange([e, {target: {id: 'signal', value: 0}}]);
|
||||
}
|
||||
dialogControls.push(
|
||||
<EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => valueBoundOnChange(e)} />,
|
||||
<EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
|
||||
)
|
||||
}
|
||||
break;
|
||||
case 'Plot': {
|
||||
let plotBoundOnChange = (e) => {
|
||||
handleChange([e, {target: {id: 'signals', value: []}}]);
|
||||
}
|
||||
dialogControls.push(
|
||||
<EditWidgetTimeControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetSimulatorControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => plotBoundOnChange(e)} />,
|
||||
<EditWidgetSignalsControl key={3} controlId={'signals'} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={4} controlId={'ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />)
|
||||
}
|
||||
break;
|
||||
case 'Table': {
|
||||
dialogControls.push(
|
||||
<EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />)
|
||||
}
|
||||
break;
|
||||
case 'Image': {
|
||||
dialogControls.push(
|
||||
<EditImageWidgetControl key={1} sessionToken={sessionToken} widget={widget} files={files} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />)
|
||||
}
|
||||
break;
|
||||
case 'Gauge': {
|
||||
let gaugeBoundOnChange = (e) => {
|
||||
handleChange([e, {target: {id: 'signal', value: ''}}]);
|
||||
}
|
||||
dialogControls.push(
|
||||
<EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => gaugeBoundOnChange(e) } />,
|
||||
<EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />)
|
||||
}
|
||||
break;
|
||||
case 'PlotTable': {
|
||||
let plotTableBoundOnChange = (e) => {
|
||||
handleChange([e, {target: {id: 'preselectedSignals', value: []}}]);
|
||||
}
|
||||
dialogControls.push(
|
||||
<EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => plotTableBoundOnChange(e)} />,
|
||||
<EditWidgetSignalsControl key={2} controlId={'preselectedSignals'} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={3} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />)
|
||||
}
|
||||
break;
|
||||
case 'Slider': {
|
||||
dialogControls.push(
|
||||
<EditWidgetOrientation key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />)
|
||||
}
|
||||
break;
|
||||
case 'Button': {
|
||||
dialogControls.push(
|
||||
<EditWidgetColorControl key={1} widget={widget} controlId={'background_color'} label={'Background'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetColorControl key={2} widget={widget} controlId={'font_color'} label={'Font color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />)
|
||||
}
|
||||
break;
|
||||
case 'Box': {
|
||||
dialogControls.push(
|
||||
<EditWidgetColorControl key={1} widget={widget} controlId={'border_color'} label={'Border color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />)
|
||||
}
|
||||
break;
|
||||
default:
|
||||
console.log('Non-valid widget type');
|
||||
}
|
||||
|
||||
return dialogControls;
|
||||
}
|
||||
|
|
@ -24,14 +24,7 @@ import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
|
|||
|
||||
import Dialog from './dialog';
|
||||
|
||||
import EditWidgetTextControl from './edit-widget-text-control';
|
||||
import EditWidgetColorControl from './edit-widget-color-control';
|
||||
import EditWidgetTimeControl from './edit-widget-time-control';
|
||||
import EditImageWidgetControl from './edit-widget-image-control';
|
||||
import EditWidgetSimulatorControl from './edit-widget-simulator-control';
|
||||
import EditWidgetSignalControl from './edit-widget-signal-control';
|
||||
import EditWidgetSignalsControl from './edit-widget-signals-control';
|
||||
import EditWidgetOrientation from './edit-widget-orientation';
|
||||
import createControls from './edit-widget-control-creator';
|
||||
|
||||
class EditWidgetDialog extends Component {
|
||||
static propTypes = {
|
||||
|
|
@ -62,10 +55,16 @@ class EditWidgetDialog extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
handleChange(e, index) {
|
||||
var update = this.state.temporal;
|
||||
update[e.target.id] = e.target.value;
|
||||
this.setState({ temporal: update });
|
||||
handleChange(e) {
|
||||
if (e.constructor === Array) {
|
||||
// Every property in the array will be updated
|
||||
let changes = e.reduce( (changesObject, event) => { changesObject[event.target.id] = event.target.value; return changesObject }, {});
|
||||
this.setState({ temporal: Object.assign({}, this.state.temporal, changes ) });
|
||||
} else {
|
||||
let changeObject = {};
|
||||
changeObject[e.target.id] = e.target.value;
|
||||
this.setState({ temporal: Object.assign({}, this.state.temporal, changeObject ) });
|
||||
}
|
||||
}
|
||||
|
||||
resetState() {
|
||||
|
|
@ -88,55 +87,17 @@ class EditWidgetDialog extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
// Use a list to concatenate the controls according to the widget type
|
||||
var dialogControls = [];
|
||||
|
||||
|
||||
let controls = null;
|
||||
if (this.props.widget) {
|
||||
if (this.props.widget.type === 'Value') {
|
||||
dialogControls.push(
|
||||
<EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
|
||||
<EditWidgetSignalsControl key={2} controlId={'signals'} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />
|
||||
)
|
||||
} else if (this.props.widget.type === 'Plot') {
|
||||
dialogControls.push(
|
||||
<EditWidgetTimeControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />,
|
||||
<EditWidgetSimulatorControl key={2} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
|
||||
<EditWidgetSignalsControl key={3} controlId={'signals'} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
|
||||
<EditWidgetTextControl key={4} controlId={'ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={this.state.temporal} handleChange={(e) => this.handleChange(e)} />
|
||||
)
|
||||
} else if (this.props.widget.type === 'Table') {
|
||||
dialogControls.push(
|
||||
<EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />
|
||||
)
|
||||
} else if (this.props.widget.type === 'Image') {
|
||||
dialogControls.push(
|
||||
<EditImageWidgetControl key={1} sessionToken={this.props.sessionToken} widget={this.state.temporal} files={this.props.files} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />
|
||||
)
|
||||
} else if (this.props.widget.type === 'Gauge') {
|
||||
dialogControls.push(
|
||||
<EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
|
||||
<EditWidgetSignalControl key={2} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />
|
||||
)
|
||||
} else if (this.props.widget.type === 'PlotTable') {
|
||||
dialogControls.push(
|
||||
<EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
|
||||
<EditWidgetSignalsControl key={2} controlId={'preselectedSignals'} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
|
||||
<EditWidgetTextControl key={3} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={this.state.temporal} handleChange={(e) => this.handleChange(e)} />
|
||||
)
|
||||
} else if (this.props.widget.type === 'Slider') {
|
||||
dialogControls.push(
|
||||
<EditWidgetOrientation key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
|
||||
)
|
||||
} else if (this.props.widget.type === 'Button') {
|
||||
dialogControls.push(
|
||||
<EditWidgetColorControl key={1} widget={this.state.temporal} controlId={'background_color'} label={'Background'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />,
|
||||
<EditWidgetColorControl key={2} widget={this.state.temporal} controlId={'font_color'} label={'Font color'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />
|
||||
)
|
||||
} else if (this.props.widget.type === 'Box') {
|
||||
dialogControls.push(
|
||||
<EditWidgetColorControl key={1} widget={this.state.temporal} controlId={'border_color'} label={'Border color'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />
|
||||
)
|
||||
}
|
||||
controls = createControls(
|
||||
this.props.widget.type,
|
||||
this.state.temporal,
|
||||
this.props.sessionToken,
|
||||
this.props.files,
|
||||
(id) => this.validateForm(id),
|
||||
this.props.simulation,
|
||||
(e) => this.handleChange(e));
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -147,7 +108,7 @@ class EditWidgetDialog extends Component {
|
|||
<FormControl type="text" placeholder="Enter name" value={this.state.temporal.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
{ dialogControls }
|
||||
{ controls || '' }
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue