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

WIP: make TimeOffset Widget editable #208

Browse source
This commit is contained in:
Laura Fuentes Grau 2020-11-30 19:25:50 +01:00
parent 62840e939d
commit cf402c7ca7
4 changed files with 39 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/styles/widgets.css
View file

@ -395,3 +395,19 @@ div[class*="-widget"] label {
border: 2px solid lightgray; border: 2px solid lightgray;
} }
/* End box widget */ /* End box widget */
/* Begin time offset widget */
.time-offset {
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
}
.time-offset span {
text-align: center;
font-size: 1.5em;
font-weight: 600;
padding-top: 10px;
}
/* End time offset widget */

9
src/widget/edit-widget/edit-widget-control-creator.js
View file

@ -158,6 +158,15 @@ export default function CreateControls(widgetType = null, widget = null, session
); );
break; break;
case 'TimeOffset':
DialogControls.push(
<EditWidgetNumberControl key={1} widget={widget} controlId={'customProperties.threshold_yellow'} label={'Threshold yellow'} defaultValue={0} handleChange={(e) => handleChange(e)} />,
<EditWidgetNumberControl key={2} widget={widget} controlId={'customProperties.threshold_red'} label={'Threshold red'} defaultValue={0} handleChange={(e) => handleChange(e)} />,
<EditWidgetCheckboxControl key={3} widget={widget} controlId={'customProperties.horizontal'} input text="Horizontal" handleChange={e => handleChange(e)} />,
<EditWidgetCheckboxControl key={4} widget={widget} controlId={'customProperties.showOffset'} input text="showOffset" handleChange={e => handleChange(e)} />,
);
break;
default: default:
console.log('Non-valid widget type: ' + widgetType); console.log('Non-valid widget type: ' + widgetType);
} }

7
src/widget/widget-factory.js
View file

@ -198,11 +198,14 @@ class WidgetFactory {
case 'TimeOffset': case 'TimeOffset':
widget.minWidth = 20; widget.minWidth = 20;
widget.minHeight = 20; widget.minHeight = 20;
widget.width = 100; widget.width = 60;
widget.height = 100; widget.height = 60;
widget.customProperties.threshold_yellow = 1; widget.customProperties.threshold_yellow = 1;
widget.customProperties.threshold_red = 2; widget.customProperties.threshold_red = 2;
widget.customProperties.icID = 1; widget.customProperties.icID = 1;
widget.customProperties.horizontal = false;
widget.customProperties.showOffset = true;
break;
default: default:
widget.width = 100; widget.width = 100;

12
src/widget/widgets/time-offset.js
View file

@ -51,14 +51,18 @@ class WidgetTimeOffset extends Component {
render() { render() {
return ( return (
<div> <div className="time-offset">
<TrafficLight <TrafficLight Horizontal={this.props.widget.customProperties.horizontal}
RedOn={this.props.widget.customProperties.threshold_red <= this.state.timeOffset} RedOn={this.props.widget.customProperties.threshold_red <= this.state.timeOffset}
YellowOn={(this.props.widget.customProperties.threshold_yellow <= this.state.timeOffset) && (this.state.timeOffset < this.props.widget.customProperties.threshold_red)} YellowOn={(this.props.widget.customProperties.threshold_yellow <= this.state.timeOffset) && (this.state.timeOffset < this.props.widget.customProperties.threshold_red)}
GreenOn={this.state.timeOffset < this.props.widget.customProperties.threshold_yellow} GreenOn={this.state.timeOffset < this.props.widget.customProperties.threshold_yellow}
/> />
<div>Time offset:</div> {this.props.widget.customProperties.showOffset ?
<strong>{this.state.timeOffset}s</strong> (
<span>{this.state.timeOffset}s</span>)
:
(<div></div>)
}
</div> </div>
); );
} }