mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
wip: restore editability
This commit is contained in:
parent
7fcbe73796
commit
60e82fbbff
10 changed files with 53 additions and 27 deletions
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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}})} />)
|
||||
|
|
|
@ -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>;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
) : (
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>)
|
||||
})
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
)*/
|
Loading…
Add table
Reference in a new issue