mirrors/Speedtest-Tracker
1
0
Fork 0
mirror of https://github.com/henrywhitaker3/Speedtest-Tracker.git synced 2025-12-21 21:33:08 +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 { } else {
return ( return (
<Container fluid> <Container fluid>
<Row>
<Col sm={{ span: 12 }} className="text-center">
<h4>Latest test results:</h4>
</Col>
</Row>
<Row> <Row>
<Col <Col
lg={{ span: 2, offset: 3 }} lg={{ span: 4 }}
md={{ span: 4 }} md={{ span: 4 }}
sm={{ span: 4 }} sm={{ span: 12 }}
className="my-2" className="my-2"
> >
<Widget <Widget
title="Ping" title="Ping"
value={parseFloat(data.data.ping).toFixed(1)} value={parseFloat(data.data.ping).toFixed(1)}
avg={parseFloat(data.average.ping).toFixed(1)}
max={parseFloat(data.max.ping).toFixed(1)}
unit="ms" unit="ms"
icon="ping" icon="ping"
/> />
</Col> </Col>
<Col <Col
lg={{ span: 2 }} lg={{ span: 4 }}
md={{ span: 4 }} md={{ span: 4 }}
sm={{ span: 4 }} sm={{ span: 12 }}
className="my-2" className="my-2"
> >
<Widget <Widget
title="Download" title="Download"
value={parseFloat(data.data.download).toFixed(1)} value={parseFloat(data.data.download).toFixed(1)}
avg={parseFloat(data.average.download).toFixed(1)}
max={parseFloat(data.max.download).toFixed(1)}
unit="Mbit/s" unit="Mbit/s"
icon="dl" icon="dl"
/> />
</Col> </Col>
<Col <Col
lg={{ span: 2 }} lg={{ span: 4 }}
md={{ span: 4 }} md={{ span: 4 }}
sm={{ span: 4 }} sm={{ span: 12 }}
className="my-2" className="my-2"
> >
<Widget <Widget
title="Upload" title="Upload"
value={parseFloat(data.data.upload).toFixed(1)} value={parseFloat(data.data.upload).toFixed(1)}
avg={parseFloat(data.average.upload).toFixed(1)}
max={parseFloat(data.max.upload).toFixed(1)}
unit="Mbit/s" unit="Mbit/s"
icon="ul" icon="ul"
/> />

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

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