mirrors/Speedtest-Tracker
1
0
Fork 0
mirror of https://github.com/henrywhitaker3/Speedtest-Tracker.git synced 2025-12-24 06:28:27 +01:00
Code Issues Projects Releases Wiki Activity

Added front-end current/max/avg

Browse Source
This commit is contained in:
Henry Whitaker
2020-04-13 22:37:22 +01:00
parent 3ea2cb97e9
commit 2adb977cfb
2 changed files with 43 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
resources/js/components/Graphics/LatestResults.js vendored
View File

@@ -92,47 +92,48 @@ export default class LatestResults extends Component {
} else {
return (
<Container fluid>
<Row>
<Col sm={{ span: 12 }} className="text-center">
<h4>Latest test results:</h4>
</Col>
</Row>
<Row>
<Col
lg={{ span: 2, offset: 3 }}
lg={{ span: 4 }}
md={{ span: 4 }}
sm={{ span: 4 }}
sm={{ span: 12 }}
className="my-2"
>
<Widget
title="Ping"
value={parseFloat(data.data.ping).toFixed(1)}
avg={parseFloat(data.average.ping).toFixed(1)}
max={parseFloat(data.max.ping).toFixed(1)}
unit="ms"
icon="ping"
/>
</Col>
<Col
lg={{ span: 2 }}
lg={{ span: 4 }}
md={{ span: 4 }}
sm={{ span: 4 }}
sm={{ span: 12 }}
className="my-2"
>
<Widget
title="Download"
value={parseFloat(data.data.download).toFixed(1)}
avg={parseFloat(data.average.download).toFixed(1)}
max={parseFloat(data.max.download).toFixed(1)}
unit="Mbit/s"
icon="dl"
/>
</Col>
<Col
lg={{ span: 2 }}
lg={{ span: 4 }}
md={{ span: 4 }}
sm={{ span: 4 }}
sm={{ span: 12 }}
className="my-2"
>
<Widget
title="Upload"
value={parseFloat(data.data.upload).toFixed(1)}
avg={parseFloat(data.average.upload).toFixed(1)}
max={parseFloat(data.max.upload).toFixed(1)}
unit="Mbit/s"
icon="ul"
/>

43
resources/js/components/Graphics/Widget.js vendored
View File

@@ -10,26 +10,32 @@ export default class Widget extends Component {
title: this.props.title,
value: this.props.value,
unit: this.props.unit,
icon: this.props.icon
icon: this.props.icon,
avg: this.props.avg,
max: this.props.max
}
}
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) {
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.setState({
title: this.props.title,
value: this.props.value,
unit: this.props.unit,
icon: this.props.icon
icon: this.props.icon,
avg: this.props.avg,
max: this.props.max
});
}
}
render() {
var title = this.props.title;
var value = this.props.value;
var unit = this.props.unit;
var icon = this.props.icon;
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;
switch(icon) {
case 'ping':
@@ -46,15 +52,26 @@ export default class Widget extends Component {
return (
<Card className="widget-card shadow-sm">
<Card.Body>
<div>
<div>
<div className="d-flex align-items-center justify-content-between">
<div>
<p>{title}</p>
<h3 className="d-inline">{value}</h3>
<p className="d-inline ml-2">{unit}</p>
</div>
<div>
<h4>{title}</h4>
{icon}
</div>
<div className="text-truncate">
<h3 className="d-inline">{value}</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>
</div>
</div>
</Card.Body>
</Card>