mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-30 00:00:13 +01:00
100 lines
3.8 KiB
JavaScript
100 lines
3.8 KiB
JavaScript
/**
|
|
* This file is part of VILLASweb.
|
|
*
|
|
* VILLASweb is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* VILLASweb is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
|
******************************************************************************/
|
|
|
|
import React, { Component } from 'react';
|
|
import TrafficLight from 'react-trafficlight';
|
|
import {OverlayTrigger, Tooltip } from 'react-bootstrap';
|
|
|
|
|
|
class WidgetTimeOffset extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
timeOffset: '',
|
|
icID: '',
|
|
icName: '',
|
|
websocketOpen: false
|
|
};
|
|
}
|
|
|
|
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: -1};
|
|
}
|
|
|
|
let ic = props.ics.find(ic => ic.id === parseInt(state.icID, 10));
|
|
let websocket = props.websockets.find(ws => ws.url === ic.websocketurl);
|
|
|
|
let serverTime = props.data[state.icID].output.timestamp;
|
|
let localTime = Date.now();
|
|
let absoluteOffset = Math.abs(serverTime - localTime);
|
|
|
|
if(typeof websocket === 'undefined'){
|
|
return {timeOffset: Number.parseFloat(absoluteOffset/1000).toPrecision(5)}
|
|
}
|
|
return {timeOffset: Number.parseFloat(absoluteOffset/1000).toPrecision(5), websocketOpen: websocket.connected, icName: ic.name};
|
|
}
|
|
|
|
render() {
|
|
|
|
let icSelected = " ";
|
|
if(!this.state.websocketOpen){
|
|
icSelected = "no connection";
|
|
} else if (this.props.widget.customProperties.showOffset){
|
|
icSelected = this.state.timeOffset + 's';
|
|
}
|
|
return (
|
|
<div className="time-offset">
|
|
{this.props.widget.customProperties.icID !== -1 ?
|
|
(<span></span>) : (<span>no IC</span>)
|
|
}
|
|
{this.props.widget.customProperties.icID !== -1 && this.props.widget.customProperties.showName ?
|
|
(<span>{this.state.icName}</span>) : (<span></span>)
|
|
}
|
|
<OverlayTrigger key={0} placement={'left'} overlay={<Tooltip id={`tooltip-${"traffic-light"}`}>
|
|
{this.props.widget.customProperties.icID !== -1 ?
|
|
(<span>{this.state.icName}<br></br>Offset: {this.state.timeOffset + "s"}</span>)
|
|
:
|
|
(<span>Please select Infrastructure Component</span>)}
|
|
</Tooltip>}>
|
|
<TrafficLight Horizontal={this.props.widget.customProperties.horizontal} width={this.props.widget.width - 40} height={this.props.widget.height - 40}
|
|
RedOn={(this.props.widget.customProperties.threshold_red <= this.state.timeOffset) || !this.state.websocketOpen}
|
|
YellowOn={(this.props.widget.customProperties.threshold_yellow <= this.state.timeOffset) && (this.state.timeOffset < this.props.widget.customProperties.threshold_red) && this.state.websocketOpen}
|
|
GreenOn={(this.state.timeOffset < this.props.widget.customProperties.threshold_yellow) && this.state.websocketOpen}
|
|
/>
|
|
</OverlayTrigger>
|
|
{this.props.widget.customProperties.icID !== -1 ?
|
|
(
|
|
<span>{icSelected}</span>)
|
|
:
|
|
(<span>selected</span>)
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default WidgetTimeOffset;
|