Added General settings section & min value on widgets

This commit is contained in:
Henry Whitaker
2020-09-11 00:51:27 +01:00
parent 9028ffb7cd
commit 334623454d
8 changed files with 244 additions and 85 deletions

View File

@@ -8,38 +8,88 @@ export default class Widget extends Component {
this.state = {
title: this.props.title,
value: this.props.value,
unit: this.props.unit,
icon: this.props.icon,
avg: this.props.avg,
max: this.props.max,
failed: this.props.failed,
data: this.props.data
}
}
parseData(title, data) {
var returnData = {};
if(title == 'Ping') {
returnData.value = parseFloat(data.data.ping).toFixed(1);
if(window.config.widgets.show_average) {
returnData.avg = parseFloat(data.average.ping).toFixed(1);
}
if(window.config.widgets.show_max) {
returnData.max = parseFloat(data.maximum.ping).toFixed(1);
}
if(window.config.widgets.show_max) {
returnData.min = parseFloat(data.minimum.ping).toFixed(1);
}
}
if(title == 'Upload') {
returnData.value = parseFloat(data.data.upload).toFixed(1);
if(window.config.widgets.show_average) {
returnData.avg = parseFloat(data.average.upload).toFixed(1);
}
if(window.config.widgets.show_max) {
returnData.max = parseFloat(data.maximum.upload).toFixed(1);
}
if(window.config.widgets.show_max) {
returnData.min = parseFloat(data.minimum.upload).toFixed(1);
}
}
if(title == 'Download') {
returnData.value = parseFloat(data.data.download).toFixed(1);
if(window.config.widgets.show_average) {
returnData.avg = parseFloat(data.average.download).toFixed(1);
}
if(window.config.widgets.show_max) {
returnData.max = parseFloat(data.maximum.download).toFixed(1);
}
if(window.config.widgets.show_max) {
returnData.min = parseFloat(data.minimum.download).toFixed(1);
}
}
return returnData;
}
componentDidUpdate = () => {
if(this.props.title != this.state.title || this.props.value != this.state.value || this.props.unit != this.state.unit || this.props.icon != this.state.icon || this.props.avg != this.state.avg || this.props.max != this.state.max || this.props.failed != this.state.failed) {
if(this.props.title != this.state.title || this.props.data != this.state.data || this.props.unit != this.state.unit || this.props.icon != this.state.icon || this.props.failed != this.state.failed) {
this.setState({
title: this.props.title,
value: this.props.value,
unit: this.props.unit,
icon: this.props.icon,
avg: this.props.avg,
max: this.props.max,
failed: this.props.failed,
data: this.props.data
});
}
}
render() {
var title = this.state.title;
var value = this.state.value;
var unit = this.state.unit;
var icon = this.state.icon;
var max = this.state.max;
var avg = this.state.avg;
var failed = Boolean(Number(this.state.failed));
var data = this.parseData(title, this.state.data);
switch(icon) {
case 'ping':
icon = <span className="ti-pulse icon text-success"></span>;
@@ -63,17 +113,30 @@ export default class Widget extends Component {
</div>
<div className="text-truncate">
<h3 className="d-inline">{(!failed) ? value : <span className="ti-close text-danger"></span> }</h3>
<h3 className="d-inline">{(!failed) ? data.value : <span className="ti-close text-danger"></span> }</h3>
<p className="d-inline ml-2">{unit} (current)</p>
</div>
<div className="text-muted text-truncate">
<h5 className="d-inline">{avg}</h5>
<p className="d-inline ml-2">{unit} (average)</p>
</div>
<div className="text-muted text-truncate">
<h5 className="d-inline">{max}</h5>
<p className="d-inline ml-2">{unit} (maximum)</p>
</div>
{window.config.widgets.show_average &&
<div className="text-muted text-truncate">
<h5 className="d-inline">{data.avg}</h5>
<p className="d-inline ml-2">{unit} (average)</p>
</div>
}
{window.config.widgets.show_max &&
<div className="text-muted text-truncate">
<h5 className="d-inline">{data.max}</h5>
<p className="d-inline ml-2">{unit} (maximum)</p>
</div>
}
{window.config.widgets.show_min &&
<div className="text-muted text-truncate">
<h5 className="d-inline">{data.min}</h5>
<p className="d-inline ml-2">{unit} (minimum)</p>
</div>
}
</div>
</div>
</Card.Body>