Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

wip: restore editability

Browse source
This commit is contained in:
Laura Fuentes Grau 2020-01-06 18:27:56 +01:00
parent 7fcbe73796
commit 60e82fbbff
10 changed files with 53 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/widget/edit-widget-aspect-control.js
View file

@ -28,7 +28,9 @@ class EditWidgetAspectControl extends React.Component {
this.state = {
widget: {
lockAspect: true
customProperties:{
isLocked: true
}
}
};
}
@ -40,7 +42,7 @@ class EditWidgetAspectControl extends React.Component {
render() {
return (
<FormGroup>
<FormCheck id="lockAspect" checked={this.state.widget.lockAspect} onChange={e => this.props.handleChange(e)}>Lock Aspect</FormCheck>
<FormCheck id="lockAspect" checked={this.state.widget.customProperties.isLocked} onChange={e => this.props.handleChange(e)}>Lock Aspect</FormCheck>
</FormGroup>
);
}

8
src/widget/edit-widget-checkbox-control.js
View file

@ -27,7 +27,11 @@ class EditWidgetCheckboxControl extends React.Component {
super(props);
this.state = {
widget: {}
widget: {
customProperties:{
}
}
};
}
@ -37,7 +41,7 @@ class EditWidgetCheckboxControl extends React.Component {
render() {
return <FormGroup>
<FormCheck id={this.props.controlId} checked={this.state.widget[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)}>{this.props.text}</FormCheck>
<FormCheck id={this.props.controlId} label={this.props.controlId} checked={this.state.widget[this.props.controlId] || this.state.widget.customProperties[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)}></FormCheck>
</FormGroup>;
}
}

8
src/widget/edit-widget-color-control.js
View file

@ -43,7 +43,9 @@ class EditWidgetColorControl extends Component {
super(props);
this.state = {
widget: {}
widget: {
customProperties:{}
}
};
}
@ -57,7 +59,7 @@ class EditWidgetColorControl extends Component {
return (
<FormGroup bsclass="color-control">
<Row>
<Col className={FormLabel} style={{whiteSpace: 'nowrap' }} sm={2}>
<Col className={FormLabel} style={{whiteSpace: 'nowrap' }} sm={3}>
{ this.props.label }
</Col>
<Col sm={10} bsclass='colors-column'>
@ -69,7 +71,7 @@ class EditWidgetColorControl extends Component {
};
let checkedClass = classNames({
'checked': idx === this.state.widget[this.props.controlId]
'checked': idx === this.state.widget[this.props.controlId] || this.state.widget.customProperties[this.props.controlId]
});
return (<FormCheck type='radio' key={idx} name={this.props.controlId} style={colorStyle} className={checkedClass} value={idx} inline onChange={(e) => this.props.handleChange({target: { id: this.props.controlId, value: idx}})} />)

20
src/widget/edit-widget-color-zones-control.js
View file

@ -33,7 +33,9 @@ class EditWidgetColorZonesControl extends React.Component {
this.state = {
widget: {
customProperties:{
zones: []
}
},
selectedZones: []
};
@ -46,7 +48,7 @@ class EditWidgetColorZonesControl extends React.Component {
addZone = () => {
// add row
const widget = this.state.widget;
widget.zones.push({ strokeStyle: 'ffffff', min: 0, max: 100 });
widget.customProperties.zones.push({ strokeStyle: 'ffffff', min: 0, max: 100 });
this.setState({ widget });
@ -58,7 +60,7 @@ class EditWidgetColorZonesControl extends React.Component {
const widget = this.state.widget;
this.state.selectedZones.forEach(row => {
widget.zones.splice(row, 1);
widget.customProperties.zones.splice(row, 1);
});
this.setState({ selectedZones: [], widget });
@ -71,11 +73,11 @@ class EditWidgetColorZonesControl extends React.Component {
const widget = this.state.widget;
if (column === 1) {
widget.zones[row].strokeStyle = event.target.value;
widget.customProperties.zones[row].strokeStyle = event.target.value;
} else if (column === 2) {
widget.zones[row].min = event.target.value;
widget.customProperties.zones[row].min = event.target.value;
} else if (column === 3) {
widget.zones[row].max = event.target.value;
widget.customProperties.zones[row].max = event.target.value;
}
this.setState({ widget });
@ -88,7 +90,7 @@ class EditWidgetColorZonesControl extends React.Component {
const event = {
target: {
id: 'zones',
value: widget.zones
value: widget.customProperties.zones
}
};
@ -117,15 +119,15 @@ class EditWidgetColorZonesControl extends React.Component {
return <FormGroup>
<FormLabel>Color zones</FormLabel>
<Table data={this.state.widget.zones}>
<Table data={this.state.widget.customProperties.zones}>
<TableColumn width="20" checkbox onChecked={this.checkedCell} />
<TableColumn title="Color" dataKey="strokeStyle" inlineEditable onInlineChange={this.changeCell} />
<TableColumn title="Minimum" dataKey="min" inlineEditable onInlineChange={this.changeCell} />
<TableColumn title="Maximum" dataKey="max" inlineEditable onInlineChange={this.changeCell} />
</Table>
<Button onClick={this.addZone} disabled={!this.props.widget.colorZones}><Icon icon="plus" /> Add</Button>
<Button onClick={this.removeZones} disabled={!this.props.widget.colorZones}><Icon icon="minus" /> Remove</Button>
<Button onClick={this.addZone} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="plus" /> Add</Button>
<Button onClick={this.removeZones} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="minus" /> Remove</Button>
</FormGroup>;
}
}

2
src/widget/edit-widget-html-content.js
View file

@ -44,7 +44,7 @@ class EditWidgetHTMLContent extends React.Component {
render() {
return <FormGroup controlId={this.props.controlId}>
<FormLabel>HTML Content</FormLabel>
<FormControl onKeyPress={this.handleKeyIgnore} componentClass="textarea" style={{ height: 200 }} placeholder={this.props.placeholder} value={this.state.widget[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)} />
<FormControl onKeyPress={this.handleKeyIgnore} componentClass="textarea" style={{ height: 200 }} placeholder={this.props.placeholder} value={this.state.widget[this.props.controlId] || this.state.widget.customProperties[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)} />
</FormGroup>;
}
}

4
src/widget/edit-widget-image-control.js
View file

@ -30,7 +30,9 @@ class EditImageWidgetControl extends React.Component {
this.state = {
widget: {
customProperties:{
file: ''
}
},
fileList: null,
progress: 0
@ -73,7 +75,7 @@ class EditImageWidgetControl extends React.Component {
return <div>
<FormGroup controlId="file">
<FormLabel>Image</FormLabel>
<FormControl componentClass="select" value={this.state.widget.file} onChange={(e) => this.props.handleChange(e)}>
<FormControl componentClass="select" value={this.state.widget.customProperties.file} onChange={(e) => this.props.handleChange(e)}>
{this.props.files.length === 0 ? (
<option disabled value style={{ display: 'none' }}>No images found, please upload one first.</option>
) : (

2
src/widget/edit-widget-min-max-control.js
View file

@ -45,7 +45,7 @@ class EditWidgetMinMaxControl extends React.Component {
console.log(this.state.widget);
return <FormGroup>
<FormLabel>{this.props.label}</FormLabel>
<FormCheck id={this.props.controlId + "UseMinMax"} checked={this.state.widget[this.props.controlId + "UseMinMax"] || ''} onChange={e => this.props.handleChange(e)}>Enable min-max</FormCheck>
<FormCheck id={this.props.controlId + "UseMinMax"} checked={this.state.widget[this.props.controlId + "UseMinMax"] || ''} onChange={e => this.props.handleChange(e)}></FormCheck>
<Table>
<tbody>

9
src/widget/edit-widget-orientation.js
View file

@ -29,7 +29,9 @@ class EditWidgetOrientation extends Component {
super(props);
this.state = {
widget: {}
widget: {
customProperties:{}
}
};
}
@ -48,7 +50,7 @@ class EditWidgetOrientation extends Component {
return (
<FormGroup controlId="orientation">
<Row>
<Col className={FormLabel} sm={2}>
<Col className={FormLabel} sm={3}>
Orientation
</Col>
<Col sm={10}>
@ -58,8 +60,7 @@ class EditWidgetOrientation extends Component {
let name = WidgetSlider.OrientationTypes[type].name;
return (
<FormCheck inline key={value} type='radio' name='orientation' checked={ value === this.state.widget.orientation } onChange={(e) => this.handleOrientationChange(value)}>
{ name }
<FormCheck inline label={name} id={value} type='radio' title='orientation' checked={ value === this.state.widget.customProperties.orientation } onChange={(e) => this.handleOrientationChange(value)}>
</FormCheck>)
})
}

2
src/widget/widgets/button.js
View file

@ -34,6 +34,7 @@ class WidgetButton extends Component {
}
onPress(e) {
console.log("button was pressed!");
if (!this.props.widget.customProperties.toggle) {
this.setState({ pressed: true });
this.valueChanged(this.props.widget.customProperties.on_value);
@ -41,6 +42,7 @@ class WidgetButton extends Component {
}
onRelease(e) {
console.log("button was released!");
let nextState = false;
if (this.props.widget.customProperties.toggle) {
nextState = !this.state.pressed;

19
src/widget/widgets/slider.js
View file

@ -119,10 +119,7 @@ class WidgetSlider extends Component {
</div>
) : (
<div className={widgetClasses}>
<label>{ fields.name }</label>
{ fields.control }
{ fields.value }
{ this.props.widget.customProperties.showUnit && fields.unit }
<Slider vertical min={ this.props.widget.customProperties.rangeMin } max={ this.props.widget.customProperties.rangeMax } step={ this.props.widget.customProperties.step } value={ this.state.value } disabled={ this.props.editing } onChange={ (v) => this.valueIsChanging(v) } onAfterChange={ (v) => this.valueChanged(v) }/>,
</div>
)
);
@ -130,3 +127,17 @@ class WidgetSlider extends Component {
}
export default WidgetSlider;
/*!isVertical? (
<div className={widgetClasses}>
<label>{ fields.name }</label>
<div className='slider'>{ fields.control }</div>
<span>{ fields.value }</span>
</div>
) : (
<div className={widgetClasses}>
<label>{ fields.name }</label>
{ fields.control }
{ fields.value }
{ this.props.widget.customProperties.showUnit && fields.unit }
</div>
)*/