Added auto-refresh on all tests table

This commit is contained in:
Henry Whitaker
2020-06-20 19:57:53 +01:00
parent 0027de2f4b
commit b8210e871f
6 changed files with 32 additions and 8 deletions

View File

@@ -1,6 +1,6 @@
# Speedtest Tracker
[![Docker pulls](https://img.shields.io/docker/pulls/henrywhitaker3/speedtest-tracker)](https://hub.docker.com/r/henrywhitaker3/speedtest-tracker) [![last_commit](https://img.shields.io/github/last-commit/henrywhitaker3/Speedtest-Tracker)](https://github.com/henrywhitaker3/Speedtest-Tracker/commits) [![issues](https://img.shields.io/github/issues/henrywhitaker3/Speedtest-Tracker)](https://github.com/henrywhitaker3/Speedtest-Tracker/issues) ![version](https://img.shields.io/badge/version-v1.5.4-success) [![license](https://img.shields.io/github/license/henrywhitaker3/Speedtest-Tracker)](https://github.com/henrywhitaker3/Speedtest-Tracker/blob/master/LICENSE)
[![Docker pulls](https://img.shields.io/docker/pulls/henrywhitaker3/speedtest-tracker)](https://hub.docker.com/r/henrywhitaker3/speedtest-tracker) [![last_commit](https://img.shields.io/github/last-commit/henrywhitaker3/Speedtest-Tracker)](https://github.com/henrywhitaker3/Speedtest-Tracker/commits) [![issues](https://img.shields.io/github/issues/henrywhitaker3/Speedtest-Tracker)](https://github.com/henrywhitaker3/Speedtest-Tracker/issues) ![version](https://img.shields.io/badge/version-v1.5.6-success) [![license](https://img.shields.io/github/license/henrywhitaker3/Speedtest-Tracker)](https://github.com/henrywhitaker3/Speedtest-Tracker/blob/master/LICENSE)
This program runs a speedtest check every hour and graphs the results. The back-end is written in [Laravel](https://laravel.com/) and the front-end uses [React](https://reactjs.org/). It uses the [speedtest-cli](https://www.speedtest.net/apps/cli) package to get the data and uses [Chart.js](https://www.chartjs.org/) to plot the results.

View File

@@ -1,7 +1,13 @@
{
"1.5.6": [
{
"description": "Auto-update all tests table",
"link": ""
}
],
"1.5.5": [
{
"description": "Store host/id of speedtes.net server",
"description": "Store host/id of speedtest.net server",
"link": ""
}
],

View File

@@ -7,7 +7,7 @@ return [
|--------------------------------------------------------------------------
*/
'version' => '1.5.5',
'version' => '1.5.6',
/*
|--------------------------------------------------------------------------

2
public/js/app.js vendored

File diff suppressed because one or more lines are too long

View File

@@ -28,7 +28,6 @@ export default class TableRow extends Component {
render() {
var e = this.state.data;
var show = this.state.show;
console.log(e.server_host == null);
return (
<tr>

View File

@@ -13,26 +13,35 @@ export default class TestsTable extends Component {
lastPage: 1,
data: [],
showTable: false,
refresh: true,
interval: null
}
}
componentDidMount() {
this.getData();
var int = setInterval(this.getData, 10000);
this.setState({
interval: int
});
}
getData = (page = this.state.page) => {
getData = (page = this.state.page, refresh = true) => {
var url = 'api/speedtest/?page=' + page;
Axios.get(url)
.then((resp) => {
var data = resp.data.data.data;
if(!refresh) {
data = this.state.data.concat(data);
}
var page = resp.data.data.current_page;
var lastPage = resp.data.data.last_page;
this.setState({
data: data,
page: page,
lastPage: lastPage,
refresh: refresh
});
})
.catch((err) => {
@@ -44,7 +53,11 @@ export default class TestsTable extends Component {
var page = this.state.page;
page = page + 1;
this.getData(page);
if(this.state.refresh) {
clearInterval(this.state.interval);
}
this.getData(page, false);
}
toggleCollapse = () => {
@@ -66,6 +79,7 @@ export default class TestsTable extends Component {
var lastPage = this.state.lastPage;
var data = this.state.data;
var show = this.state.showTable;
var refresh = this.state.refresh;
if(data.length > 0) {
return (
@@ -80,6 +94,11 @@ export default class TestsTable extends Component {
<span className="ti-angle-down"></span>
}
</div>
{(show) &&
<div className="my-1">
<span className="text-muted">Auto refresh: {(refresh) ? 'On' : 'Off'}</span>
</div>
}
</Col>
</Row>
<Collapse in={show}>