1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00

TimeOffset Widget now displays the time offset between server and local time #208

This commit is contained in:
Laura Fuentes Grau 2020-11-30 14:12:17 +01:00
parent 207449bf56
commit 62840e939d
3 changed files with 27 additions and 7 deletions

View file

@ -202,7 +202,7 @@ class WidgetFactory {
widget.height = 100;
widget.customProperties.threshold_yellow = 1;
widget.customProperties.threshold_red = 2;
widget.customProperties.ic = 1;
widget.customProperties.icID = 1;
default:
widget.width = 100;

View file

@ -227,6 +227,7 @@ class Widget extends React.Component {
} else if (widget.type === 'TimeOffset') {
return <WidgetTimeOffset
widget={widget}
data={this.state.icData}
/>
}

View file

@ -24,23 +24,42 @@ class WidgetTimeOffset extends Component {
super(props);
this.state = {
redOn: false,
yellowOn: false,
greenOn: true,
timeOffset: '',
icID: ''
};
}
static getDerivedStateFromProps(props, state){
if(typeof props.widget.customProperties.icID !== "undefined" && state.icID !== props.widget.customProperties.icID){
return {icID: props.widget.customProperties.icID};
}
if (props.data == null
|| props.data[state.icID] == null
|| props.data[state.icID].output == null
|| props.data[state.icID].output.timestamp == null) {
return {timeOffset: ''};
}
let serverTime = props.data[state.icID].output.timestamp;
let localTime = Date.now();
let absoluteOffset = Math.abs(serverTime - localTime);
return {timeOffset: Number.parseFloat(absoluteOffset/1000).toPrecision(5)};
}
render() {
return (
<div>
<TrafficLight
RedOn={this.state.redOn}
YellowOn={this.state.yellowOn}
GreenOn={this.state.greenOn}
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)}
GreenOn={this.state.timeOffset < this.props.widget.customProperties.threshold_yellow}
/>
<div>Time offset:</div>
<strong>{this.state.timeOffset}s</strong>
</div>
);
}
}