diff --git a/src/widget/edit-widget/edit-widget-control-creator.js b/src/widget/edit-widget/edit-widget-control-creator.js index 36c70a8..57be214 100644 --- a/src/widget/edit-widget/edit-widget-control-creator.js +++ b/src/widget/edit-widget/edit-widget-control-creator.js @@ -1,8 +1,4 @@ /** - * File: edit-widget-control-creator.js - * Author: Ricardo Hernandez-Montoya - * 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( - validateForm(id)} handleChange={e => handleChange(e)} />, - validateForm(id)} handleChange={e => handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, handleChange(e)} /> ); break; case 'Action': DialogControls.push( - validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />, + handleChange(e)} />, ); break; case 'Value': DialogControls.push( - validateForm(id)} handleChange={e => handleChange(e)} />, - validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, handleChange(e)} />, handleChange(e)} /> ); break; case 'Lamp': DialogControls.push( - validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />, - validateForm(id)} handleChange={e => handleChange(e)} />, - validateForm(id)} handleChange={(e) => handleChange(e)} />, - validateForm(id)} handleChange={(e) => handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, ); break; case 'Plot': DialogControls.push( - validateForm(id)} handleChange={(e) => handleChange(e)} />, - validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />, - handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, handleChange(e)} /> ); break; case 'Table': DialogControls.push( - validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />, + 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( - validateForm(id)} handleChange={(e) => handleChange(e)} />, + handleChange(e)} />, handleChange(e)} /> ); break; case 'Gauge': DialogControls.push( - validateForm(id)} handleChange={e => handleChange(e)} />, - validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, handleChange(e)} />, handleChange(e)} />, handleChange(e)} /> @@ -103,17 +99,17 @@ export default function CreateControls(widgetType = null, widget = null, session break; case 'PlotTable': DialogControls.push( - validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />, + handleChange(e)} />, handleChange(e)} />, - validateForm(id)} handleChange={(e) => handleChange(e)} />, + handleChange(e)} />, handleChange(e)} /> ); break; case 'Slider': DialogControls.push( - handleChange(e)} validate={id => validateForm(id)} />, - validateForm(id)} handleChange={(e) => handleChange(e)} />, - validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, handleChange(e)} />, handleChange(e)} />, handleChange(e)} />, @@ -123,8 +119,8 @@ export default function CreateControls(widgetType = null, widget = null, session break; case 'Button': DialogControls.push( - handleChange(e)} validate={id => validateForm(id)} />, - validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} />, + handleChange(e)} />, + handleChange(e)} />, handleChange(e)} />, handleChange(e)} />, handleChange(e)} /> @@ -132,13 +128,13 @@ export default function CreateControls(widgetType = null, widget = null, session break; case 'Box': DialogControls.push( - validateForm(id)} handleChange={(e) => handleChange(e)} />, + handleChange(e)} />, handleChange(e)} /> ); break; case 'Label': DialogControls.push( - handleChange(e)} validate={id => validateForm(id)} />, + handleChange(e)} />, 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( - validateForm(id)} handleChange={(e) => handleChange(e)} /> + handleChange(e)} /> ); break; case 'Input': DialogControls.push( - validateForm(id)} handleChange={e => handleChange(e)} />, - validateForm(id)} signals={signals} handleChange={(e) => handleChange(e)} /> + handleChange(e)} />, + handleChange(e)} /> ); break; diff --git a/src/widget/edit-widget/edit-widget-parameters-control.js b/src/widget/edit-widget/edit-widget-parameters-control.js index 3a817e3..d1cf65c 100644 --- a/src/widget/edit-widget/edit-widget-parameters-control.js +++ b/src/widget/edit-widget/edit-widget-parameters-control.js @@ -49,7 +49,7 @@ class EditWidgetParametersControl extends Component { render() { return ( - + {this.props.label} this.handleChange(v)} /> diff --git a/src/widget/edit-widget/edit-widget-text-control.js b/src/widget/edit-widget/edit-widget-text-control.js index c0fc069..a8624c6 100644 --- a/src/widget/edit-widget/edit-widget-text-control.js +++ b/src/widget/edit-widget/edit-widget-text-control.js @@ -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 ( - + {this.props.label} - this.props.handleChange(e)} /> + this.props.handleChange(e)} /> ); diff --git a/src/widget/edit-widget/edit-widget.js b/src/widget/edit-widget/edit-widget.js index e110db3..de0bef1 100644 --- a/src/widget/edit-widget/edit-widget.js +++ b/src/widget/edit-widget/edit-widget.js @@ -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)); }