mirror of
https://github.com/henrywhitaker3/Speedtest-Tracker.git
synced 2025-12-24 06:28:27 +01:00
Added General settings section & min value on widgets
This commit is contained in:
101
resources/js/components/Graphics/Widget.js
vendored
101
resources/js/components/Graphics/Widget.js
vendored
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user