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 # 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. 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": [ "1.5.5": [
{ {
"description": "Store host/id of speedtes.net server", "description": "Store host/id of speedtest.net server",
"link": "" "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() { render() {
var e = this.state.data; var e = this.state.data;
var show = this.state.show; var show = this.state.show;
console.log(e.server_host == null);
return ( return (
<tr> <tr>

View File

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