mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-16 00:00:03 +01:00
make widget text control work, move validation of form data to click of close button
This commit is contained in:
Sonja Happ
parent
3d59393a1d
commit
fe79f5e531
4 changed files with 74 additions and 56 deletions
|
|
@ -1,8 +1,4 @@
|
|||
/**
|
||||
* File: edit-widget-control-creator.js
|
||||
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
|
||||
* Date: 23.05.2017
|
||||
*
|
||||
* This file is part of VILLASweb.
|
||||
*
|
||||
* VILLASweb is free software: you can redistribute it and/or modify
|
||||
|
|
@ -37,50 +33,50 @@ 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, signals, handleChange) {
|
||||
export default function CreateControls(widgetType = null, widget = null, sessionToken = null, files = null, signals, handleChange) {
|
||||
// Use a list to concatenate the controls according to the widget type
|
||||
var DialogControls = [];
|
||||
|
||||
switch(widgetType) {
|
||||
case 'CustomAction':
|
||||
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)} />,
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={1} widget={widget} controlId={'icon'} label={'Icon'} placeholder={'Enter an awesome font icon name'} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetParametersControl key={2} widget={widget} controlId={'actions'} label={'Actions'} handleChange={(e) => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
case 'Action':
|
||||
DialogControls.push(
|
||||
<EditWidgetSignalControl key={0} widget={widget} validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetSignalControl key={0} widget={widget} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
);
|
||||
break;
|
||||
case 'Value':
|
||||
DialogControls.push(
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetSignalControl key={1} widget={widget} validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetSignalControl key={1} widget={widget} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextSizeControl key={2} widget={widget} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetCheckboxControl key={3} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
case 'Lamp':
|
||||
DialogControls.push(
|
||||
<EditWidgetSignalControl key={0} widget={widget} validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={1} widget={widget} controlId={'threshold'} label={'Threshold'} placeholder={'0.5'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetColorControl key={2} widget={widget} controlId={'on_color'} label={'Color On'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetColorControl key={3} widget={widget} controlId={'off_color'} label={'Color Off'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetSignalControl key={0} widget={widget} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={1} widget={widget} controlId={'customProperties.threshold'} label={'Threshold'} placeholder={'0.5'} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetColorControl key={2} widget={widget} controlId={'on_color'} label={'Color On'} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetColorControl key={3} widget={widget} controlId={'off_color'} label={'Color Off'} handleChange={(e) => handleChange(e)} />,
|
||||
);
|
||||
break;
|
||||
case 'Plot':
|
||||
DialogControls.push(
|
||||
<EditWidgetTimeControl key={0} widget={widget} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetSignalsControl key={1} controlId={'signalIDs'} widget={widget} validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={2} controlId={'ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTimeControl key={0} widget={widget} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetSignalsControl key={1} controlId={'signalIDs'} widget={widget} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={2} controlId={'customProperties.ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetMinMaxControl key={3} widget={widget} controlId="y" handleChange={e => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
case 'Table':
|
||||
DialogControls.push(
|
||||
<EditWidgetSignalsControl key={0} controlId={'signalIDs'} widget={widget} validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetSignalsControl key={0} controlId={'signalIDs'} widget={widget} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetCheckboxControl key={1} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
|
|
@ -88,14 +84,14 @@ export default function CreateControls(widgetType = null, widget = null, session
|
|||
// Restrict to only image file types (MIME)
|
||||
let imageControlFiles = files == null? [] : files.filter(file => file.type.includes('image'));
|
||||
DialogControls.push(
|
||||
<EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={imageControlFiles} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
|
||||
<EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={imageControlFiles} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetAspectControl key={1} widget={widget} handleChange={e => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
case 'Gauge':
|
||||
DialogControls.push(
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetSignalControl key={1} widget={widget} validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetSignalControl key={1} widget={widget} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetCheckboxControl key={2} widget={widget} controlId="colorZones" text="Show color zones" handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetColorZonesControl key={3} widget={widget} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetMinMaxControl key={4} widget={widget} controlId="value" handleChange={e => handleChange(e)} />
|
||||
|
|
@ -103,17 +99,17 @@ export default function CreateControls(widgetType = null, widget = null, session
|
|||
break;
|
||||
case 'PlotTable':
|
||||
DialogControls.push(
|
||||
<EditWidgetSignalsControl key={0} controlId={'signalIDs'} widget={widget} validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetSignalsControl key={0} controlId={'signalIDs'} widget={widget} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={1} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTimeControl key={2} widget={widget} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTimeControl key={2} widget={widget} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetMinMaxControl key={3} widget={widget} controlId="y" handleChange={e => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
case 'Slider':
|
||||
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)} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetSignalControl key={2} widget={widget} input validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetOrientation key={1} widget={widget} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetSignalControl key={2} widget={widget} input signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetCheckboxControl key={3} text={'Continous Update'} controlId={'continous_update'} widget={widget} input handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetCheckboxControl key={4} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetMinMaxControl key={5} widget={widget} controlId={'range'} handleChange={e => handleChange(e)} />,
|
||||
|
|
@ -123,8 +119,8 @@ export default function CreateControls(widgetType = null, widget = null, session
|
|||
break;
|
||||
case 'Button':
|
||||
DialogControls.push(
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
|
||||
<EditWidgetSignalControl key={1} widget={widget} input validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetSignalControl key={1} widget={widget} input signals={signals} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetCheckboxControl key={2} widget={widget} controlId={'toggle'} text="Toggle" handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetNumberControl key={3} widget={widget} controlId={'on_value'} label={'On Value'} defaultValue={1} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetNumberControl key={4} widget={widget} controlId={'off_value'} label={'Off Value'} defaultValue={0} handleChange={(e) => handleChange(e)} />
|
||||
|
|
@ -132,13 +128,13 @@ export default function CreateControls(widgetType = null, widget = null, session
|
|||
break;
|
||||
case 'Box':
|
||||
DialogControls.push(
|
||||
<EditWidgetColorControl key={0} widget={widget} controlId={'border_color'} label={'Border color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetColorControl key={0} widget={widget} controlId={'border_color'} label={'Border color'} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetColorControl key={1} widget={widget} controlId={'background_color'} label={'Background color'} handleChange={e => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
case 'Label':
|
||||
DialogControls.push(
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetTextSizeControl key={1} widget={widget} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetColorControl key={2} widget={widget} controlId={'fontColor'} label={'Text color'} handleChange={e => handleChange(e)} />
|
||||
);
|
||||
|
|
@ -152,14 +148,14 @@ export default function CreateControls(widgetType = null, widget = null, session
|
|||
// Restrict to only xml files (MIME)
|
||||
let topologyControlFiles = files == null? [] : files.filter( file => file.type.includes('xml'));
|
||||
DialogControls.push(
|
||||
<EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={topologyControlFiles} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />
|
||||
<EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={topologyControlFiles} handleChange={(e) => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
|
||||
case 'Input':
|
||||
DialogControls.push(
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetSignalControl key={2} widget={widget} input validate={(id) => validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />
|
||||
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetSignalControl key={2} widget={widget} input signals={signals} handleChange={(e) => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ class EditWidgetParametersControl 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}>
|
||||
<FormLabel>{this.props.label}</FormLabel>
|
||||
<ParametersEditor content={this.state.widget[this.props.controlId] || {}} onChange={(v)=> this.handleChange(v)} />
|
||||
</FormGroup>
|
||||
|
|
|
|||
|
|
@ -26,22 +26,47 @@ class EditWidgetTextControl extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
let value = "";
|
||||
let parts = props.controlId.split('.');
|
||||
if (parts.length === 1) {
|
||||
// not a customProperty
|
||||
value=props.widget[props.controlId]
|
||||
} else if(parts.length === 2){
|
||||
// a custom property
|
||||
value=props.widget[parts[0]][parts[1]]
|
||||
} else {
|
||||
value="controlID contains too many dots"
|
||||
}
|
||||
|
||||
this.state = {
|
||||
widget: {}
|
||||
value: value
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props, state){
|
||||
|
||||
let value = "";
|
||||
let parts = props.controlId.split('.');
|
||||
if (parts.length === 1) {
|
||||
// not a customProperty
|
||||
value=props.widget[props.controlId]
|
||||
} else if(parts.length === 2){
|
||||
// a custom property
|
||||
value=props.widget[parts[0]][parts[1]]
|
||||
} else {
|
||||
value="controlID contains too many dots"
|
||||
}
|
||||
|
||||
return {
|
||||
widget: props.widget
|
||||
};
|
||||
value: value
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<FormGroup controlId={this.props.controlId} valid={this.props.validate ? this.props.validate(this.props.controlId) : null}>
|
||||
<FormGroup controlId={this.props.controlId}>
|
||||
<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 type="text" placeholder={this.props.placeholder} value={this.state.value} onChange={e => this.props.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ class EditWidgetDialog extends React.Component {
|
|||
|
||||
onClose(canceled) {
|
||||
if (canceled === false) {
|
||||
if (this.valid) {
|
||||
if (this.validChanges()) {
|
||||
this.props.onClose(this.state.temporal);
|
||||
}
|
||||
} else {
|
||||
|
|
@ -104,17 +104,17 @@ class EditWidgetDialog extends React.Component {
|
|||
this.setState({ temporal: changeObject});
|
||||
|
||||
} else {
|
||||
console.log("edit-widget: type text");
|
||||
if(this.state.temporal[e.target.id]){
|
||||
|
||||
console.log("edit-widget: type: " , e.target.type, " target.id", e.target.id, "target.value", e.target.value)
|
||||
console.log("edit-widget: text type");
|
||||
let parts = e.target.id.split('.');
|
||||
let finalChange = this.state.temporal;
|
||||
|
||||
finalChange[e.target.id] = e.target.value;
|
||||
|
||||
console.log("edit-widget: finalChange", finalChange);
|
||||
this.setState({ temporal: finalChange});
|
||||
}
|
||||
if (parts.length === 1 && this.state.temporal[e.target.id]) {
|
||||
// not a customProperty
|
||||
finalChange[e.target.id] = e.target.value;
|
||||
} else if (parts.length === 2){
|
||||
// a customProperty is changed
|
||||
finalChange[parts[0]][parts[1]] = e.target.value;
|
||||
}
|
||||
this.setState({temporal: finalChange});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -123,18 +123,16 @@ class EditWidgetDialog extends React.Component {
|
|||
this.setState({ temporal: widget_data });
|
||||
}
|
||||
|
||||
validateForm(target) {
|
||||
// check all controls
|
||||
validChanges() {
|
||||
// check that widget has a name
|
||||
var name = true;
|
||||
|
||||
if (this.state.name === '') {
|
||||
name = false;
|
||||
}
|
||||
|
||||
//this.valid = name;
|
||||
this.valid = name;
|
||||
// return state to control
|
||||
if (target === 'name') return name ? "success" : "error";
|
||||
return name;
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -146,7 +144,6 @@ class EditWidgetDialog extends React.Component {
|
|||
this.state.temporal,
|
||||
this.props.sessionToken,
|
||||
this.props.files,
|
||||
(id) => this.validateForm(id),
|
||||
this.props.signals,
|
||||
(e) => this.handleChange(e));
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue