mirrors/Speedtest-Tracker
1
0
Fork 0
mirror of https://github.com/henrywhitaker3/Speedtest-Tracker.git synced 2025-12-21 13:23:04 +01:00
Code Issues Projects Releases Wiki Activity

Remove all react things

Browse Source
This commit is contained in:
Henry Whitaker
2021-11-15 22:00:35 +00:00
parent 3955a2dad0
commit c9748af04f
37 changed files with 11 additions and 5001 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1303
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
package.json
View File

@@ -10,16 +10,11 @@
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"@babel/preset-react": "^7.12.13",
"axios": "^0.21",
"bootstrap": "^4.6.0",
"cross-env": "^7.0",
"jquery": "^3.5",
"laravel-mix": "^5.0.9",
"lodash": "^4.17.21",
"popper.js": "^1.12",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.8",
"sass-loader": "^10.1.1"
@@ -28,12 +23,6 @@
"@babel/plugin-proposal-class-properties": "^7.13.0",
"chart.js": "^2.9.4",
"csv-file-validator": "^1.10.1",
"js-cookie": "^2.2.1",
"react-beautiful-dnd": "^13.1.0",
"react-bootstrap": "^1.5.1",
"react-chartjs-2": "^2.11.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-toastify": "^7.0.3"
"js-cookie": "^2.2.1"
}
}

15
resources/js/app.js vendored
View File

@@ -1,15 +0,0 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes React and other helpers. It's a great starting point while
* building robust, powerful web applications using React + Laravel.
*/
require('./bootstrap');
/**
* Next, we will create a fresh React component instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
require('./index');

41
resources/js/bootstrap.js vendored
View File

@@ -1,41 +0,0 @@
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo';
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });

70
resources/js/components/Authentication/Authentication.js vendored
View File

@@ -1,70 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Row, Col} from 'react-bootstrap';
import SessionsTable from './SessionsTable';
import ResetPassword from './ResetPassword';
export default class Authentication extends Component {
constructor(props) {
super(props)
this.state = {
showCollapse: false,
showModal: false
}
}
toggleCollapse = () => {
if(this.state.showCollapse) {
this.setState({
showCollapse: false
});
} else {
this.setState({
showCollapse: true
});
}
}
toggleModal = () => {
if(this.state.showModal) {
this.setState({
showModal: false
});
} else {
this.setState({
showModal: true
});
}
}
render() {
var showCollapse = this.state.showCollapse;
var showModal = this.state.showModal;
if( (window.config.auth == true && window.authenticated == true)) {
return (
<div>
<Row>
<Col sm={{ span: 12 }} className="text-center">
<ResetPassword />
</Col>
</Row>
<Row>
<Col sm={{ span: 12 }} className="text-center">
<SessionsTable />
</Col>
</Row>
</div>
);
} else {
return (
<></>
);
}
}
}
if (document.getElementById('Authentication')) {
ReactDOM.render(<Authentication />, document.getElementById('Authentication'));
}

111
resources/js/components/Authentication/ResetPassword.js vendored
View File

@@ -1,111 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Container, Row, Col, Collapse, Button, Modal, Form } from 'react-bootstrap';
import SessionsTable from './SessionsTable';
import Axios from 'axios';
import { toast } from 'react-toastify';
export default class ResetPassword extends Component {
constructor(props) {
super(props)
this.state = {
showModal: false,
currentPassword: '',
newPassword: '',
newPasswordConfirmation: '',
logoutDevices: false
}
}
toggleModal = () => {
if(this.state.showModal) {
this.setState({
showModal: false
});
} else {
this.setState({
showModal: true
});
}
}
updateTextField = (e) => {
this.setState({
[e.target.id]: e.target.value
})
}
updateCheckbox = (e) => {
this.setState({
[e.target.id]: e.target.checked
});
}
changePassword = (e) => {
e.preventDefault();
var data = {
currentPassword: this.state.currentPassword,
newPassword: this.state.newPassword,
newPassword_confirmation: this.state.newPasswordConfirmation,
logoutDevices: this.state.logoutDevices
}
var url = 'api/auth/change-password?token=' + window.token;
Axios.post(url, data)
.then((resp) => {
toast.success('Password updated');
this.toggleModal();
if(this.state.logoutDevices == true) {
location.reload(true);
}
})
.catch((err) => {
if(err.response) {
for(var key in err.response.data.error) {
toast.error(err.response.data.error[key][0]);
}
}
})
}
render() {
var showModal = this.state.showModal;
return (
<div>
<Button variant="primary" onClick={this.toggleModal} className="mb-3">Change password</Button>
<Modal show={showModal} onHide={this.toggleModal}>
<Modal.Header closeButton>
<Modal.Title>Change password</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form onSubmit={this.changePassword}>
<Form.Group controlId="currentPassword">
<Form.Label>Current password</Form.Label>
<Form.Control type="password" onInput={this.updateTextField} required />
</Form.Group>
<Form.Group controlId="newPassword">
<Form.Label>New Password</Form.Label>
<Form.Control type="password" onInput={this.updateTextField} required />
</Form.Group>
<Form.Group controlId="newPasswordConfirmation">
<Form.Label>Confirm New Password</Form.Label>
<Form.Control type="password" onInput={this.updateTextField} required />
</Form.Group>
<Button variant="primary" type="submit" className="d-inline-block">Change password</Button>
<Form.Group controlId="logoutDevices" className="d-inline-block ml-2">
<Form.Check type="checkbox" label="Log everywhere out" onInput={this.updateCheckbox} />
</Form.Group>
</Form>
</Modal.Body>
</Modal>
</div>
);
}
}
if (document.getElementById('ResetPassword')) {
ReactDOM.render(<ResetPassword />, document.getElementById('ResetPassword'));
}

67
resources/js/components/Authentication/SessionsTable.js vendored
View File

@@ -1,67 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Container, Row, Col, Table } from 'react-bootstrap';
import Axios from 'axios';
export default class SessionsTable extends Component {
constructor(props) {
super(props)
this.state = {
sessions: []
}
}
componentDidMount() {
this.getSessions();
}
getSessions = () => {
var url = 'api/auth/sessions?token=' + window.token;
Axios.get(url)
.then((resp) => {
this.setState({
sessions: resp.data.response
})
})
}
render() {
var sessions = this.state.sessions;
return (
<Container className="mb-4">
<Row>
<Col sm={{ span: 12 }} className="mb-3 text-center">
<h5>Login Sessions</h5>
<Table responsive>
<thead>
<tr>
<th>IP</th>
<th>Expires</th>
<th>Created at</th>
</tr>
</thead>
<tbody>
{sessions.map((e,i) => {
return(
<tr key={i}>
<td>{e.ip}</td>
<td>{new Date(e.expires * 1000).toLocaleDateString() + ' ' + new Date(e.expires * 1000).toLocaleTimeString()}</td>
<td>{e.created_at}</td>
</tr>
)
})}
</tbody>
</Table>
</Col>
</Row>
</Container>
);
}
}
if (document.getElementById('SessionsTable')) {
ReactDOM.render(<SessionsTable />, document.getElementById('SessionsTable'));
}

42
resources/js/components/Data/Backup.js vendored
View File

@@ -1,42 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button, Dropdown, DropdownButton } from 'react-bootstrap';
import { toast } from 'react-toastify';
import Axios from 'axios';
export default class Backup extends Component {
backup = (format) => {
var url = 'api/backup?format=' + format + '&token=' + window.token;
toast.info('Your backup has started downloading...');
Axios.get(url, {
responseType: 'blob'
})
.then((resp) => {
var a = document.createElement('a');
a.href = url;
a.download = "";
document.body.appendChild(a);
a.click();
a.remove();
toast.success('Backup downloaded');
})
.catch((err) => {
console.log(err);
})
}
render() {
return (
<DropdownButton title="Backup" variant="primary" className="m-2 d-inline-block">
<Dropdown.Item href="#" onClick={() => { this.backup('json') }}>JSON</Dropdown.Item>
<Dropdown.Item href="#" onClick={() => { this.backup('csv') }}>CSV</Dropdown.Item>
</DropdownButton>
);
}
}
if (document.getElementById('Backup')) {
ReactDOM.render(<Backup />, document.getElementById('Backup'));
}

140
resources/js/components/Data/Changelog.js vendored
View File

@@ -1,140 +0,0 @@
import React, { Component, version } from 'react';
import ReactDOM from 'react-dom';
import Axios from 'axios';
import { Modal, Collapse, Button } from 'react-bootstrap';
export default class Changelog extends Component {
constructor(props) {
super(props)
this.state = {
changelog: {},
modal: false,
loading: true,
hidden: false,
}
}
componentDidMount = () => {
if( (window.config.auth == true && window.authenticated == true) || window.config.auth == false) {
this.getChangelog();
}
}
getChangelog = () => {
Axios.get('api/update/changelog?token=' + window.token)
.then((resp) => {
this.setState({
changelog: resp.data.data,
loading: false
});
})
}
showModal = () => {
this.setState({
modal: true,
});
}
hideModal = () => {
this.setState({
modal: false,
});
}
toggleHidden = () => {
var hidden = this.state.hidden;
if(hidden) {
this.setState({
hidden: false
});
} else {
this.setState({
hidden: true
});
}
}
versionList = (key, data) => {
return (
<div key={key}>
<h5>Version: {key}</h5>
<ul>
{data.map((e,i) => {
if(e.link == '') {
return <li key={key.split('.').join() + i}>{e.description}</li>
} else {
return <li key={key + i}><a href={e.link} target="_blank" rel="noopener noreferer">{e.description}</a></li>
}
})}
</ul>
</div>
);
}
makeChangelog() {
var changelog = this.state.changelog;
var versionsVis = [];
var versionsHid = [];
var i = 0;
for(var key in changelog) {
if(i <= 5) {
versionsVis.push(this.versionList(key, changelog[key]));
} else {
versionsHid.push(this.versionList(key, changelog[key]));
}
i++;
}
return {
visible: versionsVis,
hidden: versionsHid
};
}
render() {
var show = this.state.modal;
var loading = this.state.loading;
var showHidden = this.state.hidden;
if(loading) {
return <></>
} else {
var changelog = this.makeChangelog();
return (
<div className="text-muted ml-1 d-inline-block">
<i className="ti-link mouse" onClick={this.showModal} />
<Modal show={show} onHide={this.hideModal} animation={true}>
<Modal.Body>
<h3>Changelog:</h3>
{changelog.visible}
{changelog.hidden.length > 5 &&
<>
<Collapse in={showHidden}>
<div>
{changelog.hidden}
</div>
</Collapse>
<div className="w-100 text-center">
{showHidden ?
<Button variant="primary" className="mx-auto mouse" onClick={this.toggleHidden}>Show less</Button>
:
<Button variant="primary" className="mx-auto mouse" onClick={this.toggleHidden}>Show more</Button>
}
</div>
</>
}
</Modal.Body>
</Modal>
</div>
);
}
}
}
if (document.getElementById('Changelog')) {
ReactDOM.render(<Changelog />, document.getElementById('Changelog'));
}

37
resources/js/components/Data/DataRow.js vendored
View File

@@ -1,37 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
import { Col } from 'react-bootstrap';
import Backup from './Backup';
import Restore from './Restore';
export default class DataRow extends Component {
render() {
if( (window.config.auth == true && window.authenticated == true) || window.config.auth == false) {
return (
<Container className="mb-4">
<Row>
<Col sm={{ span: 12 }} className="text-center">
<p>Use these buttons to backup/restore your data</p>
</Col>
</Row>
<Row>
<Col sm={{ span: 12 }} className="text-center">
<Backup />
<Restore />
</Col>
</Row>
</Container>
);
} else {
return (
<></>
)
}
}
}
if (document.getElementById('DataRow')) {
ReactDOM.render(<DataRow />, document.getElementById('DataRow'));
}

209
resources/js/components/Data/Restore.js vendored
View File

@@ -1,209 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button, Modal, Form, Tooltip, OverlayTrigger, Dropdown, DropdownButton } from 'react-bootstrap';
import { toast } from 'react-toastify';
import Axios from 'axios';
import CSVFileValidator from 'csv-file-validator';
export default class Restore extends Component {
constructor(props) {
super(props);
this.state = {
show: false,
data: null,
uploadReady: false,
filename: 'Upload your backup',
format: 'json'
};
}
showModal = (format) => {
this.setState({
show: true,
format: format
});
}
hideModal = () => {
this.setState({
show: false
});
}
readFile = (e, format) => {
var file = e.target.files[0];
var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
reader.onload = function(evt) {
var data = evt.target.result.trim();
if(format == 'csv') {
var csv = data.substr(45);
var config = {
headers: [
{
name: "id",
inputName: 'id',
required: false,
},
{
name: "ping",
inputName: 'ping',
required: true,
requiredError: function (headerName, rowNumber, columnNumber) {
return `${headerName} is required in the ${rowNumber} row / ${columnNumber} column`
}
},
{
name: "upload",
inputName: 'upload',
required: true,
requiredError: function (headerName, rowNumber, columnNumber) {
return `${headerName} is required in the ${rowNumber} row / ${columnNumber} column`
}
},
{
name: "download",
inputName: 'download',
required: true,
requiredError: function (headerName, rowNumber, columnNumber) {
return `${headerName} is required in the ${rowNumber} row / ${columnNumber} column`
}
},
{
name: "created_at",
inputName: 'created_at',
required: false,
},
{
name: "server_id",
inputName: 'server_id',
required: false,
},
{
name: "server_name",
inputName: 'server_name',
required: false,
},
{
name: "server_host",
inputName: 'server_host',
required: false,
},
{
name: "url",
inputName: 'url',
required: false,
},
{
name: "scheduled",
inputName: 'scheduled',
required: false,
},
{
name: "failed",
inputName: 'failed',
required: false,
},
{
name: "updated_at",
inputName: 'updated_at',
required: false,
}
]
};
CSVFileValidator(csv, config)
.then((e) => {
if(e.inValidMessages.length > 0) {
toast.error('Your upload file is not valid ' + format.toUpperCase());
} else {
this.setState({
data: data,
uploadReady: true,
filename: file.name
});
}
})
.catch((e) => {
toast.error('Your upload file is not valid ' + format.toUpperCase());
})
} else {
try {
var data = JSON.parse(data);
this.setState({
data: data,
uploadReady: true,
filename: file.name
});
} catch(e) {
console.log(e);
toast.error('Your upload file is not valid ' + format.toUpperCase());
}
}
}.bind(this)
reader.onerror = function (evt) {
toast.error('Something went wrong parsing your backup file.');
}
}
uploadFile = () => {
var data = { data: this.state.data, format: this.state.format };
var url = 'api/restore?token=' + window.token;
Axios.post(url, data)
.then((resp) => {
toast.success('Your data is being restored...');
this.setState({
show: false,
data: null,
uploadReady: false,
filename: 'Upload your backup'
});
})
.catch((err) => {
console.log(err);
})
}
render() {
var show = this.state.show;
var uploadReady = this.state.uploadReady;
var filename = this.state.filename;
return (
<>
<DropdownButton variant="secondary" title="Restore" className="m-2 d-inline-block">
<Dropdown.Item href="#" onClick={() => { this.showModal('json') }}>JSON</Dropdown.Item>
<Dropdown.Item href="#" onClick={() => { this.showModal('csv') }}>CSV</Dropdown.Item>
</DropdownButton>
<Modal show={show} onHide={this.hideModal} animation={true}>
<Modal.Header closeButton>
<Modal.Title>Restore from a backup</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Upload your {this.state.format.toUpperCase()} backup file here:</p>
<Form.File
id="restoreFileInput"
label={"Upload " + this.state.format.toUpperCase() + " file"}
className="mb-3"
custom
>
<Form.File.Input onChange={(e) => { this.readFile(e, this.state.format) }} />
<Form.File.Label data-browse="Choose file">
{filename}
</Form.File.Label>
</Form.File>
{uploadReady === true &&
<Button variant="secondary" onClick={this.uploadFile}>Restore</Button>
}
</Modal.Body>
</Modal>
</>
);
}
}
if (document.getElementById('Restore')) {
ReactDOM.render(<Restore />, document.getElementById('Restore'));
}

89
resources/js/components/ErrorPage.js vendored
View File

@@ -1,89 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Link } from "react-router-dom";
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
import { Col } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
export default class ErrorPage extends Component {
constructor(props) {
super(props);
var colour = '';
var message = false;
switch(this.props.code.toString()[0]) {
case 2:
case '2':
colour = 'success';
break;
case 4:
case '4':
colour = 'danger';
break;
case 5:
case '5':
default:
colour = 'warning';
break;
}
switch(this.props.code) {
case '400':
message = 'Bad request'
break;
case '401':
message = 'You aren\'t authenticated';
break;
case '403':
message = 'You aren\'t authorised to view this page';
break;
case '404':
message = 'Page not found';
break;
case '405':
message = 'Method not allowed'
break;
case '413':
message = 'Request too large'
break;
case '422':
message = 'Your request was unprocessable'
break;
}
this.state = {
code: this.props.code,
colour: colour,
message: message
};
}
render() {
const colour = this.state.colour;
const code = this.state.code;
const message = this.state.message;
return (
<Container fluid>
<Row className="fullscreen text-center align-items-center">
<Col
lg={{ span: 2, offset: 5}}
md={{ span: 4, offset: 4}}
sm={{ span: 4, offset: 4}}
xs={{ span: 12}}
>
<h1 className={'text-' + colour + ' mb-0'}>{code}</h1>
{message &&
<p className={colour + '-text mt-0 mb-2'}>{message}</p>
}
<Link to="/" className={'waves-effect waves-' + colour + ' btn ' + colour}><Button variant={colour}>Go home</Button></Link>
</Col>
</Row>
</Container>
);
}
}
if (document.getElementById('errorpage')) {
ReactDOM.render(<ErrorPage />, document.getElementById('errorpage'));
}

23
resources/js/components/Example.js vendored
View File

@@ -1,23 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Index extends Component {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
<div>
</div>
);
}
}
if (document.getElementById('main')) {
ReactDOM.render(<Index />, document.getElementById('main'));
}

392
resources/js/components/Graphics/HistoryGraph.js vendored
View File

@@ -1,392 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Axios from 'axios';
import { Spinner, Container, Row, Form, Card } from 'react-bootstrap';
import { Line, Bar } from 'react-chartjs-2';
import { Col } from 'react-bootstrap';
import { toast } from 'react-toastify';
export default class HistoryGraph extends Component {
constructor(props) {
super(props)
this.state = {
days: props.days,
time: props.dlUl,
fail: props.fail,
config: props.config,
duData: {},
duOptions: {},
pingData: {},
pingOptions: {},
failData: {},
failOptions: {},
loading: true,
interval: null,
graph_ul_dl_enabled: true,
graph_ul_dl_width: 6,
graph_failure_enabled: true,
graph_failure_width: 6,
graph_ping_enabled: true,
graph_ping_width: 6,
firstUpdate: false,
}
}
componentDidMount = () => {
}
componentDidUpdate() {
if(
this.state.time != this.props.dlUl ||
this.state.fail != this.props.fail ||
this.state.config != this.props.config ||
this.state.days != this.props.days
) {
this.setState({
time: this.props.dlUl,
fail: this.props.fail,
config: this.props.config,
days: this.props.days
});
if(this.state.config !== null) {
this.processData();
}
}
if(
!this.state.firstUpdate &&
this.state.config !== null
) {
this.processData();
this.setState({
firstUpdate: true,
});
}
}
processData() {
this.processConfig();
this.processDlUlPing();
this.processFailure();
}
processConfig() {
this.setState({
graph_ul_dl_enabled: Boolean(Number(this.state.config.graphs.download_upload_graph_enabled.value)),
graph_ul_dl_width: this.state.config.graphs.download_upload_graph_width.value,
graph_ping_enabled: Boolean(Number(this.state.config.graphs.ping_graph_enabled.value)),
graph_ping_width: this.state.config.graphs.ping_graph_width.value,
graph_failure_enabled: Boolean(Number(this.state.config.graphs.failure_graph_enabled.value)),
graph_failure_width: this.state.config.graphs.failure_graph_width.value,
});
}
processDlUlPing() {
let days = this.state.days;
var duData = {
labels: [],
datasets:[
{
data: [],
label: 'Download',
borderColor: "#fca503",
fill: false,
},
{
data: [],
label: 'Upload',
borderColor: "#3e95cd",
fill: false,
}
],
};
var duOptions = {
maintainAspectRatio: false,
responsive: true,
tooltips: {
callbacks: {
label: (item) => `${item.yLabel} Mbit/s`,
},
},
title: {
display: false,
text: 'Speedtests results for the last ' + days + ' days',
},
scales: {
xAxes: [{
display: false,
scaleLabel: {
display: true,
labelString: 'DateTime'
}
}],
},
elements: {
point:{
radius: 0,
hitRadius: 8
}
}
};
var pingData = {
labels: [],
datasets:[
{
data: [],
label: 'Ping',
borderColor: "#07db71",
fill: false,
},
],
};
var pingOptions = {
maintainAspectRatio: false,
responsive: true,
tooltips: {
callbacks: {
label: (item) => `${item.yLabel} ms`,
},
},
title: {
display: false,
text: 'Ping results for the last ' + days + ' days',
},
scales: {
xAxes: [{
display: false,
scaleLabel: {
display: true,
labelString: 'DateTime'
}
}],
},
elements: {
point:{
radius: 0,
hitRadius: 8
}
}
}
this.state.time.forEach(e => {
var download = {
t: new Date(e.created_at),
y: e.download,
};
var upload = {
t: new Date(e.created_at),
y: e.upload,
};
var ping = {
t: new Date(e.created_at),
y: parseFloat(e.ping)
}
duData.datasets[0].data.push(download);
duData.datasets[1].data.push(upload);
pingData.datasets[0].data.push(ping);
duData.labels.push(new Date(e.created_at).toLocaleString());
pingData.labels.push(new Date(e.created_at).toLocaleString());
});
this.setState({
duData: duData,
duOptions: duOptions,
pingData: pingData,
pingOptions: pingOptions,
loading: false,
});
}
processFailure() {
let days = this.state.days;
var failData = {
labels: [],
datasets: [
{
data: [],
label: 'Successful',
backgroundColor: '#07db71'
},
{
data: [],
label: 'Failed',
backgroundColor: '#E74C3C'
},
],
};
var failOptions = {
maintainAspectRatio: false,
responsive: true,
tooltips: {
callbacks: {
label: (item) => `${item.yLabel} speedtests`,
},
},
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
};
this.state.fail.forEach(e => {
var success = {x: e.date, y: e.success};
var fail = {x: e.date, y: e.failure};
failData.datasets[0].data.push(success);
failData.datasets[1].data.push(fail);
failData.labels.push(new Date(e.date).toLocaleString([], {year: '2-digit', month:'2-digit', day:'2-digit'}));
})
this.setState({
failData: failData,
failOptions: failOptions
});
}
updateDays = (e) => {
var days = e.target.value;
if(days) {
toast.info('Showing results for the last ' + days + ' days');
this.props.updateDays(days);
}
}
render() {
var loading = this.state.loading;
var duData = this.state.duData;
var duOptions = this.state.duOptions;
var pingData = this.state.pingData;
var pingOptions = this.state.pingOptions;
var failData = this.state.failData;
var failOptions = {
maintainAspectRatio: false,
responsive: true,
tooltips: {
callbacks: {
label: (item) => `${item.yLabel} speedtests`,
},
},
scales: {
xAxes: [{
stacked: true,
gridLines: {
display: false
}
}],
yAxes: [{
stacked: true,
ticks: {
stepSize: 1
}
}]
}
};
var days = this.state.days;
var graph_ul_dl_enabled = this.state.graph_ul_dl_enabled;
var graph_ul_dl_width = this.state.graph_ul_dl_width;
var graph_ping_enabled = this.state.graph_ping_enabled;
var graph_ping_width = this.state.graph_ping_width;
var graph_failure_enabled = this.state.graph_failure_enabled;
var graph_failure_width = this.state.graph_failure_width;
var dlClasses = 'my-2 home-graph ';
var pingClasses = 'my-2 home-graph ';
var failureClasses = 'my-2 home-graph ';
if(graph_ul_dl_enabled == true) {
//
} else {
dlClasses += 'd-none ';
}
if(graph_ping_enabled == true) {
//
} else {
pingClasses += 'd-none ';
}
if(graph_failure_enabled == true) {
//
} else {
failureClasses += 'd-none ';
}
if(loading) {
return (
<div>
<Spinner animation="grow" />
</div>
)
} else {
return (
<Container className="mb-4 mt-1" fluid>
<Row>
<Col
lg={{ span: graph_ul_dl_width }}
md={{ span: graph_ul_dl_width }}
sm={{ span: 12 }}
xs={{ span: 12 }}
className={dlClasses}
>
<Card className="shadow-sm">
<Card.Body>
<Line data={duData} options={duOptions} height={440} />
</Card.Body>
</Card>
</Col>
<Col
lg={{ span: graph_ping_width }}
md={{ span: graph_ping_width }}
sm={{ span: 12 }}
xs={{ span: 12 }}
className={pingClasses}
>
<Card className="shadow-sm">
<Card.Body>
<Line data={pingData} options={pingOptions} height={440} />
</Card.Body>
</Card>
</Col>
<Col
lg={{ span: graph_failure_width }}
md={{ span: graph_failure_width }}
sm={{ span: 12 }}
xs={{ span: 12 }}
className={failureClasses}
>
<Card className="shadow-sm h-100">
<Card.Body className="w-100 h-100">
<Bar data={failData} options={failOptions} height={440} />
</Card.Body>
</Card>
</Col>
</Row>
<Row>
<Col sm={{ span: 12 }}>
<div className="text-center">
<div className="d-inline-flex align-items-center mb-2">
<h4 className="d-inline mb-0">Show results for the last</h4>
<Form.Control id="duDaysInput" className="d-inline-block mx-2" defaultValue={days} onInput={this.updateDays}></Form.Control>
<h4 className="d-inline mb-0">days</h4>
</div>
</div>
</Col>
</Row>
</Container>
);
}
}
}
if (document.getElementById('HistoryGraph')) {
ReactDOM.render(<HistoryGraph />, document.getElementById('HistoryGraph'));
}

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

@@ -1,164 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Axios from 'axios';
import Widget from './Widget';
import { Container, Row, Spinner } from 'react-bootstrap';
import { Col } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import { toast } from 'react-toastify';
export default class LatestResults extends Component {
constructor(props) {
super(props)
this.state = {
data: props.data,
interval: null,
loading: true,
}
}
componentDidUpdate() {
if(this.state.data !== this.props.data) {
this.setState({
data: this.props.data,
loading: false,
});
}
}
componentWillUnmount() {
clearInterval(this.state.interval);
}
newScan = () => {
var url = 'api/speedtest/run?token=' + window.token;
Axios.get(url)
.then((resp) => {
toast.info('A test has been queued. This page will refresh when the test has finished.');
})
.catch((err) => {
if(err.response) {
if(err.response.status == 429) {
toast.error('You are doing that too much. Try again later.');
}
console.log(err.response);
} else {
console.log(err.data);
}
})
}
render() {
var loading = this.state.loading;
var data = this.state.data;
if(loading && data !== false) {
return (
<Container fluid>
<Row>
<Col sm={{ span: 12 }}>
<Spinner animation="grow" />
</Col>
</Row>
</Container>
);
} else if(data === false) {
if( (window.config.auth == true && window.authenticated == true) || window.config.auth == false) {
return (
<Container fluid>
<Row>
<Col sm={{ span: 12 }} className="text-center">
<div>
<Button variant="primary" onClick={this.newScan}>Start your first test!</Button>
</div>
</Col>
</Row>
</Container>
);
} else if(window.config.auth == true && window.authenticated == false) {
return (
<Container fluid>
<Row>
<Col sm={{ span: 12 }} className="text-center">
<div>
<p>Please login to run the first test</p>
</div>
</Col>
</Row>
</Container>
);
}
} else {
return (
<Container fluid>
<Row>
<Col sm={{ span: 12 }} className="text-center mb-2">
<div>
{(window.config.auth == true && window.authenticated == true) || window.config.auth == false ?
<div>
<Button className="d-inline-block mx-3 mb-2" variant="primary" onClick={this.newScan}>Test again</Button>
<p className="text-muted mb-0 d-inline-block">Last test performed at: {new Date(data.data.created_at).toLocaleString()}</p>
</div>
:
<div>
<p className="text-muted mb-0 d-inline-block">Last test performed at: {new Date(data.data.created_at).toLocaleString()}</p>
</div>
}
</div>
</Col>
</Row>
<Row>
<Col
lg={{ span: 4 }}
md={{ span: 4 }}
sm={{ span: 12 }}
className="my-2"
>
<Widget
title="Ping"
data={data}
failed={data.data.failed}
unit="ms"
icon="ping"
/>
</Col>
<Col
lg={{ span: 4 }}
md={{ span: 4 }}
sm={{ span: 12 }}
className="my-2"
>
<Widget
title="Download"
data={data}
failed={data.data.failed}
unit="Mbit/s"
icon="dl"
/>
</Col>
<Col
lg={{ span: 4 }}
md={{ span: 4 }}
sm={{ span: 12 }}
className="my-2"
>
<Widget
title="Upload"
data={data}
failed={data.data.failed}
unit="Mbit/s"
icon="ul"
/>
</Col>
</Row>
</Container>
);
}
}
}
if (document.getElementById('LatestResults')) {
ReactDOM.render(<LatestResults />, document.getElementById('LatestResults'));
}

162
resources/js/components/Graphics/TableRow.js vendored
View File

@@ -1,162 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Modal, Button } from 'react-bootstrap';
import Axios from 'axios';
import { toast } from 'react-toastify';
export default class TableRow extends Component {
constructor(props) {
super(props)
this.state = {
data: this.props.data,
show: false,
}
}
toggleShow = () => {
var show = this.state.show;
if(show) {
this.setState({
show: false
});
} else {
this.setState({
show: true
});
}
}
delete = (id) => {
var url = 'api/speedtest/delete/' + id + '?token=' + window.token;
Axios.delete(url)
.then((resp) => {
console.log(resp);
toast.success('Speedtest deleted');
})
.catch((err) => {
if(err.response.status == 404) {
toast.warning('Speedtest not found');
} else {
toast.error('Something went wrong');
}
})
this.props.refresh();
this.toggleShow();
}
getDataFields = () => {
let allFields = this.props.allFields;
let data = this.state.data;
let processedFields = [];
for(var key in allFields) {
let field = allFields[key];
let value = data[key];
if(field.type === 'date') {
value = new Date(value).toLocaleString();
} else if(field.type === 'bool') {
value = Boolean(value) ? field.if_true : field.if_false
}
let final = {
name: key,
key: field.alias,
value: value,
type: field.type
};
processedFields.push(final);
}
let visible = [];
let inModal = [];
window.config.tables.visible_columns.forEach(column => {
visible.push(processedFields.find(x => x.name == column));
});
inModal = processedFields.filter(el => {
return !visible.includes(el);
});
return {
visible: visible,
modal: inModal
};
}
render() {
var e = this.state.data;
var show = this.state.show;
var fields = this.getDataFields();
if(e.failed != true) {
return (
<tr>
{fields.visible.map((e, i) => {
return (
<td key={i}>{e.value}</td>
);
})}
{e.server_host != null ?
<td>
<span onClick={this.toggleShow} className="ti-arrow-top-right mouse"></span>
<Modal show={show} onHide={this.toggleShow}>
<Modal.Header closeButton>
<Modal.Title>More info</Modal.Title>
</Modal.Header>
<Modal.Body className="text-center">
{fields.modal.map((e, i) => {
if(e.type === 'url') {
return (
<p key={i}>{e.key}: <a href={e.value} target="_blank" rel="noopener noreferer">Speedtest.net</a></p>
);
} else {
return (
<p key={i}>{e.key}: {e.value}</p>
);
}
})}
<Button variant="danger" onClick={() => { this.delete(e.id) }}>Delete</Button>
</Modal.Body>
</Modal>
</td>
:
<td></td>
}
</tr>
);
} else {
return (
<tr>
{fields.visible.map((e, i) => {
console.log(e);
if(e.name === 'created_at') {
return <td key={i}>{new Date(e.value).toLocaleString()}</td>
} else if (e.name === 'id') {
return <td key={i}>{e.value}</td>
}
return (
<td key={i}><span className="ti-close text-danger"></span></td>
);
})}
{(window.config.auth && window.authenticated) || !window.config.auth ?
<td><Button variant="danger" onClick={() => { this.delete(e.id) }}>Delete</Button></td>
:
<td></td>
}
</tr>
);
}
}
}
if (document.getElementById('tableRow')) {
ReactDOM.render(<TableRow />, document.getElementById('tableRow'));
}

189
resources/js/components/Graphics/TestsTable.js vendored
View File

@@ -1,189 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Axios from 'axios';
import { Container, Row, Table, Col, Collapse, Button } from 'react-bootstrap';
import TableRow from './TableRow';
export default class TestsTable extends Component {
constructor(props) {
super(props)
this.state = {
page: 1,
lastPage: 1,
data: [],
showTable: false,
refresh: true,
interval: null,
allFields: {
id: {
type: 'int',
alias: 'ID'
},
created_at: {
type: 'date',
alias: 'Time'
},
download: {
type: 'float',
alias: 'Download (Mbit/s)'
},
upload: {
type: 'float',
alias: 'Upload (Mbit/s)'
},
ping: {
type: 'float',
alias: 'Ping (ms)'
},
server_id: {
type: 'int',
alias: 'Server ID'
},
server_name: {
type: 'string',
alias: 'Name'
},
server_host: {
type: 'string',
alias: 'Host'
},
url: {
type: 'url',
alias: 'URL'
},
scheduled: {
type: 'bool',
alias: 'Type',
if_true: 'scheduled',
if_false: 'manual'
}
}
}
}
componentDidMount() {
this.getData();
var int = setInterval(this.getData, 10000);
this.setState({
interval: int
});
}
componentWillUnmount() {
clearInterval(this.state.interval);
}
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) => {
console.log(err);
})
}
getMoreData = () => {
var page = this.state.page;
page = page + 1;
if(this.state.refresh) {
clearInterval(this.state.interval);
}
this.getData(page, false);
}
toggleCollapse = () => {
var show = this.state.showTable;
if(show) {
this.setState({
showTable: false
});
} else {
this.setState({
showTable: true
});
}
}
render() {
var page = this.state.page;
var lastPage = this.state.lastPage;
var data = this.state.data;
var show = this.state.showTable;
var refresh = this.state.refresh;
let allFields = this.state.allFields;
if(data.length > 0) {
return (
<div>
<Container className="mb-4 mt-4 px-5">
<Row>
<Col sm={{ span: 12 }} className="mb-3 text-center">
<div>
<h4 className="d-inline mr-2">All tests</h4>
<span className="text-muted">Auto refresh: {(refresh) ? 'On' : 'Off'}</span>
</div>
</Col>
</Row>
<Row>
<Col sm={{ span: 12 }} id="testsTable">
<Table responsive>
<thead>
<tr>
{window.config.tables.visible_columns.map((e, i) => {
return (
<th key={i}>{allFields[e].alias}</th>
);
})}
<th>More</th>
</tr>
</thead>
<tbody>
{data.map((e,i) => {
return (
<TableRow key={e.id} data={e} allFields={allFields} refresh={this.getData} />
);
})}
</tbody>
</Table>
</Col>
</Row>
{page < lastPage &&
<Row>
<Col sm={{ span: 12 }} className="text-center">
<Button variant="primary" onClick={this.getMoreData}>Show more</Button>
</Col>
</Row>
}
</Container>
</div>
);
} else {
return (
<>
</>
)
}
}
}
if (document.getElementById('TestsTable')) {
ReactDOM.render(<TestsTable />, document.getElementById('TestsTable'));
}

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

@@ -1,150 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Card } from 'react-bootstrap';
export default class Widget extends Component {
constructor(props) {
super(props)
this.state = {
title: this.props.title,
unit: this.props.unit,
icon: this.props.icon,
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_min) {
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_min) {
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_min) {
returnData.min = parseFloat(data.minimum.download).toFixed(1);
}
}
return returnData;
}
componentDidUpdate = () => {
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,
unit: this.props.unit,
icon: this.props.icon,
failed: this.props.failed,
data: this.props.data
});
}
}
render() {
var title = this.state.title;
var unit = this.state.unit;
var icon = this.state.icon;
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>;
break;
case 'dl':
icon = <span className="ti-download icon text-warning"></span>;
break;
case 'ul':
icon = <span className="ti-upload icon text-primary"></span>;
break;
}
return (
<Card className="widget-card shadow-sm">
<Card.Body>
<div>
<div>
<div className="d-flex align-items-center justify-content-between">
<h4>{title}</h4>
{icon}
</div>
<div className="text-truncate">
<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>
{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>
</Card>
);
}
}
if (document.getElementById('Widget')) {
ReactDOM.render(<Widget />, document.getElementById('Widget'));
}

24
resources/js/components/Home/Footer.js vendored
View File

@@ -1,24 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Container, Row } from 'react-bootstrap';
import { Col } from 'react-bootstrap';
import Version from './Version';
export default class Footer extends Component {
render() {
return (
<Container>
<Row>
<Col sm={{ span: 12 }} className="text-center">
<Version />
<p className="text-muted">See the code on <a href="https://github.com/henrywhitaker3/Speedtest-Tracker" target="_blank" rel="noopener noreferrer">GitHub</a></p>
</Col>
</Row>
</Container>
);
}
}
if (document.getElementById('Footer')) {
ReactDOM.render(<Footer />, document.getElementById('Footer'));
}

84
resources/js/components/Home/HomePage.js vendored
View File

@@ -1,84 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import HistoryGraph from '../Graphics/HistoryGraph';
import LatestResults from '../Graphics/LatestResults';
import Footer from './Footer';
import DataRow from '../Data/DataRow';
import TestsTable from '../Graphics/TestsTable';
import Login from '../Login';
import Authentication from '../Authentication/Authentication';
import Navbar from '../Navbar';
import axios from 'axios';
export default class HomePage extends Component {
constructor(props) {
super(props)
this.state = {
latest: null,
time: null,
fail: null,
config: null,
days: 7,
interval: null,
}
}
componentDidMount = () => {
this.getData();
var interval = setInterval(this.getData, 10000);
this.setState({
interval: interval,
});
}
componentWillUnmount() {
clearInterval(this.state.interval);
}
updateDays = (days) => {
this.setState({ days: days });
this.setState({ days: days }, () => { this.getData() });
}
getData = () => {
axios.get('api/speedtest/home/' + this.state.days)
.then((resp) => {
this.setState({
latest: resp.data.latest,
time: resp.data.time,
fail: resp.data.fail,
config: resp.data.config
});
})
.catch((err) => {
console.log(err);
})
}
render() {
let latest = this.state.latest;
let time = this.state.time;
let fail = this.state.fail;
let config = this.state.config;
let days = this.state.days;
return (
<div>
<Navbar />
<div className="my-4">
{(window.config.auth == true && window.authenticated == false) &&
<Login />
}
<LatestResults data={latest} />
<HistoryGraph updateDays={this.updateDays} dlUl={time} fail={fail} config={config} days={days} />
</div>
<Footer />
</div>
);
}
}
if (document.getElementById('homePage')) {
ReactDOM.render(<HomePage />, document.getElementById('homePage'));
}

152
resources/js/components/Home/Version.js vendored
View File

@@ -1,152 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Axios from 'axios';
import { toast } from 'react-toastify';
import { Modal, ProgressBar } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import Changelog from '../Data/Changelog';
export default class Version extends Component {
constructor(props) {
super(props)
this.state = {
version: document.querySelector('meta[name="version"]').content,
update: false,
modalShow: false,
changelog: [],
showProgress: false,
updateProgress: 0,
};
}
componentDidMount() {
// this.checkForUpdates();
}
checkForUpdates = () => {
var url = 'api/update/check';
Axios.get(url)
.then((resp) => {
var update = resp.data.update;
if(update !== false) {
toast.info('A new version of Speedtest Tracker is available (v' + update.version + '). Go to the bottom of the page to update.');
this.setState({
update: update.version,
changelog: update.changelog,
});
}
})
.catch((err) => {
console.log(err);
});
}
showModal = () => {
this.setState({
modalShow: true
});
}
hideModal = () => {
this.setState({
modalShow: false
});
}
updateApp = () => {
this.setState({
showProgress: true,
updateProgress: 0,
});
toast.info('Downloading update');
Axios.get('api/update/download')
.then((resp) => {
this.setState({
updateProgress: 50,
});
toast.info('Extracting update');
Axios.get('api/speedtest/extract')
.then((resp) => {
this.setState({
updateProgress: 75,
});
toast.info('Applying update');
Axios.get('api/update/move')
.then((resp) => {
this.setState({
updateProgress: 100,
});
toast.success('Update successful. Refreshing your page...');
setTimeout(function() {
location.reload(true);
}, 5000);
})
})
})
.catch((err) => {
toast.error('Something went wrong...');
})
}
render() {
var version = this.state.version;
var update = this.state.update;
var modalShow = this.state.modalShow;
var changelog = this.state.changelog;
var showProgress = this.state.showProgress;
var updateProgress = this.state.updateProgress;
if(update === false) {
return (
<div>
<p className="text-muted mb-0 d-inline-block">Speedtest Tracker Version: {version}</p>
<Changelog />
</div>
);
} else {
return (
<div>
<p className="text-muted mb-0 d-inline">Speedtest Tracker Version: {version} - </p>
<a href="#!" className="mb-0 d-inline" onClick={this.showModal}>New version available - v{update}</a>
<Modal show={modalShow} onHide={this.hideModal} animation={true}>
<Modal.Header closeButton>
<Modal.Title>Update to v{update}</Modal.Title>
</Modal.Header>
<Modal.Body>
<h5>Changelog:</h5>
<ul>
{changelog.map((e, i) => {
if(e.link == '') {
return (
<li key={i}>{e.description}</li>
);
} else {
return (
<li key={i}><a href={e.link} target="_blank" rel="noopener noreferer">{e.description}</a></li>
)
}
})}
</ul>
{showProgress &&
<div>
<p>Update progress:</p>
<ProgressBar animated now={updateProgress} />
</div>
}
{!showProgress &&
<Button variant="primary" onClick={this.updateApp}>Update</Button>
}
</Modal.Body>
</Modal>
</div>
);
}
}
}
if (document.getElementById('Version')) {
ReactDOM.render(<Version />, document.getElementById('Version'));
}

54
resources/js/components/Loader.js vendored
View File

@@ -1,54 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Spinner from 'react-bootstrap/Spinner';
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
import { Col } from 'react-bootstrap';
export default class Loader extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
if(this.props.small) {
return (
<Container fluid>
<Row className="text-center align-items-center">
<Col
lg={{ span: 2, offset: 5}}
md={{ span: 4, offset: 4}}
sm={{ span: 4, offset: 4}}
xs={{ span: 12}}
>
<Spinner animation="grow" size="lg"/>
</Col>
</Row>
</Container>
)
}
return (
<Container fluid>
<Row className="fullscreen text-center align-items-center">
<Col
lg={{ span: 2, offset: 5}}
md={{ span: 4, offset: 4}}
sm={{ span: 4, offset: 4}}
xs={{ span: 12}}
>
<Spinner animation="grow" size="lg"/>
</Col>
</Row>
</Container>
);
}
}
if (document.getElementById('loader')) {
ReactDOM.render(<Loader />, document.getElementById('loader'));
}

97
resources/js/components/Login.js vendored
View File

@@ -1,97 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Container, Row, Form, Toast, Modal } from 'react-bootstrap';
import { Col } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import Axios from 'axios';
import { toast } from 'react-toastify';
import Cookies from 'js-cookie';
export default class Login extends Component {
constructor(props) {
super(props)
this.state = {
loginEmailInput: '',
loginPasswordInput: ''
}
}
updateTextField = (e) => {
this.setState({
[e.target.id]: e.target.value
})
}
login = (e) => {
e.preventDefault();
var data = {
email: this.state.loginEmailInput,
password: this.state.loginPasswordInput
}
var url = 'api/auth/login';
Axios.post(url, data)
.then((resp) => {
var token = resp.data.access_token;
var expires = (resp.data.expires_in / 60) / 24;
Cookies.set('auth', token, { expires: expires })
window.location.reload(true);
})
.catch((err) => {
toast.error('Something went wrong logging in.');
})
}
toggleShow = () => {
if(this.state.show) {
this.setState({
show: false
})
} else {
this.setState({
show: true
})
}
}
render() {
var show = this.state.show;
return (
<Container>
<Row>
<Col
xs={{ span: 12 }}
className="pb-2 text-center"
>
<Button variant="primary" onClick={this.toggleShow}>Login</Button>
<Modal show={show} onHide={this.toggleShow}>
<Modal.Header closeButton>
<Modal.Title>Login</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form onSubmit={this.login}>
<Form.Group controlId="loginEmailInput">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="admin@admin.com" onInput={this.updateTextField} required />
</Form.Group>
<Form.Group controlId="loginPasswordInput">
<Form.Label>Password</Form.Label>
<Form.Control type="password" onInput={this.updateTextField} required />
</Form.Group>
<Button variant="primary" type="submit">Login</Button>
</Form>
</Modal.Body>
</Modal>
</Col>
</Row>
</Container>
);
}
}
if (document.getElementById('login')) {
ReactDOM.render(<Login />, document.getElementById('login'));
}

81
resources/js/components/Navbar.js vendored
View File

@@ -1,81 +0,0 @@
import React, { Component } from 'react';
import {Nav, Navbar as BootstrapNavbar, NavLink as BootstrapNavLink} from 'react-bootstrap';
import ReactDOM from 'react-dom';
import { Link, NavLink } from 'react-router-dom';
export default class Navbar extends Component {
constructor(props) {
super(props)
this.state = {
brand: {
name: window.config.name,
url: window.config.base
},
}
}
generatePagesArray() {
var pages = [
{
name: 'Home',
url: window.config.base,
authRequired: false
},
{
name: 'All Tests',
url: window.config.base + 'speedtests',
authRequired: false
},
{
name: 'Settings',
url: window.config.base + 'settings',
authRequired: true
},
]
return pages;
}
generateLinks = () => {
var pages = this.generatePagesArray();
return pages.map(page => {
if(
page.authRequired === false ||
(
page.authRequired === true &&
window.config.auth &&
window.authenticated
) ||
(
page.authRequired === true &&
window.config.auth === false
)
) {
return <BootstrapNavLink key={page.url} as={NavLink} to={page.url}>{page.name}</BootstrapNavLink>;
}
});
}
render() {
var brand = this.state.brand;
var pages = this.generateLinks();
return (
<BootstrapNavbar variant="dark" bg="dark" expand="sm">
<BootstrapNavbar.Brand as={Link} to={brand.url}><img style={{width: '15%'}} src={window.config.base + 'files/icons/fav/android-icon-192x192.png'} /> {brand.name}</BootstrapNavbar.Brand>
<BootstrapNavbar.Toggle aria-controls="basic-navbar-nav" />
<BootstrapNavbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
{pages}
</Nav>
</BootstrapNavbar.Collapse>
</BootstrapNavbar>
);
}
}
if (document.getElementById('navbar')) {
ReactDOM.render(<Navbar />, document.getElementById('navbar'));
}

320
resources/js/components/Settings/SettingsIndex.js vendored
View File

@@ -1,320 +0,0 @@
import Axios from 'axios';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Footer from '../Home/Footer';
import Loader from '../Loader';
import Navbar from '../Navbar';
import SettingsTabs from './SettingsTabs';
export default class SettingsIndex extends Component {
constructor(props) {
super(props)
this.state = {
data: null,
loading: true,
}
}
getData = () => {
var url = 'api/settings/?token=' + window.token;
Axios.get(url)
.then((resp) => {
this.setState({
data: this.sortSettings(resp.data),
loading: false,
});
})
.catch((err) => {
//
})
}
sortSettings = (data) => {
return {
General: [
{
obj: data.app_name,
type: 'text',
},
{
obj: data.schedule_enabled,
type: 'checkbox',
},
{
obj: data.schedule,
type: 'text',
},
{
obj: data.server,
type: 'text',
},
{
obj: data.show_average,
type: 'checkbox',
},
{
obj: data.show_max,
type: 'checkbox',
},
{
obj: data.show_min,
type: 'checkbox',
}
],
Tables: [
{
obj: data.visible_columns,
type: 'list'
},
{
obj: data.hidden_columns,
type: 'list'
}
],
Graphs: [
{
obj: data.download_upload_graph_enabled,
type: 'checkbox',
hideDescription: true
},
{
obj: data.download_upload_graph_width,
type: 'select',
options: [
{
name: 'Full-width',
'value': 12
},
{
name: 'Half-width',
'value': 6
}
],
},
{
obj: data.ping_graph_enabled,
type: 'checkbox',
hideDescription: true
},
{
obj: data.ping_graph_width,
type: 'select',
options: [
{
name: 'Full-width',
'value': 12
},
{
name: 'Half-width',
'value': 6
}
],
},
{
obj: data.failure_graph_enabled,
type: 'checkbox',
hideDescription: true
},
{
obj: data.failure_graph_width,
type: 'select',
options: [
{
name: 'Full-width',
'value': 12
},
{
name: 'Half-width',
'value': 6
}
],
},
{
obj: data.show_failed_tests_on_graph,
type: 'checkbox',
},
],
Notifications: [
{
obj: data.slack_webhook,
type: 'text'
},
{
obj: data.telegram_bot_token,
type: 'text'
},
{
obj: data.telegram_chat_id,
type: 'text'
},
{
type: 'btn-get',
url: 'api/settings/test-notification?token=' + window.token,
btnType: 'primary',
obj: {
id: (Math.floor(Math.random() * 10000) + 1),
name: 'Test notifications',
description: 'After saving your updated notification settings, use this to check your settings are correct.'
}
},
{
obj: data.speedtest_notifications,
type: 'checkbox'
},
{
obj: data.speedtest_overview_notification,
type: 'checkbox'
},
{
obj: data.speedtest_overview_time,
type: 'number',
min: 0,
max: 23,
},
// Add handling for title stuff
{
obj: data.threshold_alert_percentage,
type: 'number',
min: 0,
max: 100
},
{
obj: data.threshold_alert_absolute_notifications,
type: 'checkbox'
},
{
obj: data.threshold_alert_absolute_download,
type: 'number'
},
{
obj: data.threshold_alert_absolute_upload,
type: 'number'
},
{
obj: data.threshold_alert_absolute_ping,
type: 'number'
},
],
healthchecks: [
{
obj: data.healthchecks_enabled,
type: 'checkbox'
},
{
obj: data.healthchecks_server_url,
type: 'text'
},
{
obj: data.healthchecks_uuid,
type: 'text'
},
{
obj: {
id: (Math.floor(Math.random() * 10000) + 1),
name: "Test healthchecks.io integration",
description: ""
},
},
{
obj: {
id: (Math.floor(Math.random() * 10000) + 1),
name: "Start",
description: ""
},
type: 'btn-get',
url: 'api/settings/test-healthchecks/start?token=' + window.token,
btnType: 'outline-success',
inline: true,
earlyReturn: true,
classes: 'mr-2'
},
{
obj: {
id: (Math.floor(Math.random() * 10000) + 1),
name: "Success",
description: ""
},
type: 'btn-get',
url: 'api/settings/test-healthchecks/success?token=' + window.token,
btnType: 'success',
text: 'Success',
inline: true,
earlyReturn: true,
classes: 'mr-2'
},
{
obj: {
id: (Math.floor(Math.random() * 10000) + 1),
name: "Fail",
description: ""
},
type: 'btn-get',
url: 'api/settings/test-healthchecks/fail?token=' + window.token,
btnType: 'danger',
text: 'Fail',
inline: true,
earlyReturn: true,
classes: 'mr-2'
},
],
influxdb: [
{
obj: data.influx_db_enabled,
type: 'checkbox'
},
{
obj: data.influx_db_host,
type: 'text'
},
{
obj: data.influx_db_port,
type: 'number'
},
{
obj: data.influx_db_database,
type: 'text'
},
{
obj: data.influx_db_username,
type: 'text',
autoComplete: false,
},
{
obj: data.influx_db_password,
type: 'password',
autoComplete: false,
}
],
};
}
componentDidMount() {
this.getData();
}
render() {
var data = this.state.data;
var loading = this.state.loading;
return (
<div>
<Navbar />
<div className="container my-5">
{loading ?
<Loader />
:
<SettingsTabs data={data} refreshConfig={this.props.refreshConfig} />
}
</div>
<Footer />
</div>
);
}
}
if (document.getElementById('settingsIndex')) {
ReactDOM.render(<SettingsIndex />, document.getElementById('settingsIndex'));
}

202
resources/js/components/Settings/SettingsInput.js vendored
View File

@@ -1,202 +0,0 @@
import React, { Component } from 'react';
import { Form } from 'react-bootstrap';
import ReactDOM from 'react-dom';
export default class SettingsInput extends Component {
constructor(props) {
super(props)
this.state = {
type: this.props.type,
name: this.props.name,
displayName: (this.props.name) ? this.formatName(this.props.name) : '',
value: (this.props.value) ? this.props.value : '',
classes: this.props.classes,
id: this.props.id,
label: (this.props.label) ? this.props.label : false,
readonly: true,
description: (this.props.description) ? this.props.description : false,
options: this.props.options ? this.props.options : [],
hideDescription: this.props.hideDescription ? true : false,
min: this.props.min ? this.props.min : null,
max: this.props.max ? this.props.max : null,
url: this.props.url,
inline: this.props.inline ? 'd-inline-block' : 'd-block',
btnType: this.props.btnType,
earlyReturn: this.props.earlyReturn ? true : false,
autoComplete: String(this.props.autoComplete ? true : Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 7)),
}
}
componentDidMount() {
this.setState({
readonly: this.isReadOnly()
});
}
formatName(name) {
name = name.split('_').join(' ');
return name.charAt(0).toUpperCase() + name.slice(1);
}
handleInput = (evt) => {
var val = evt.target.value;
if(this.state.type === 'checkbox') {
val = evt.target.checked;
}
this.props.handler(
this.state.name,
val
);
this.setState({
value: val
});
}
isReadOnly = () => {
if(window.config.editable[this.state.name] == false) {
return true;
}
return false;
}
generateNumberInput(disabled) {
return <Form.Control
name={this.state.name}
type={this.state.type}
defaultValue={this.state.value}
disabled={disabled}
min={this.state.min}
max={this.state.max}
onInput={this.handleInput}
autoComplete={this.state.autoComplete} />
}
generateSelectInput(disabled) {
return (
<Form.Control
as="select"
name={this.state.name}
type={this.state.type}
defaultValue={this.state.value}
disabled={disabled}
onInput={this.handleInput}
>
{this.state.options.map((option,i) => {
return <option key={i} value={option.value}>{option.name}</option>
})}
</Form.Control>
);
}
generateCheckboxInput(disabled) {
return <Form.Control
custom
className="ml-2"
name={this.state.name}
type={this.state.type}
defaultChecked={this.state.value}
disabled={disabled}
onInput={this.handleInput} />
}
generateTextInput(disabled) {
return <Form.Control
name={this.state.name}
type={this.state.type}
defaultValue={this.state.value}
disabled={disabled}
onInput={this.handleInput}
autoComplete={this.state.autoComplete} />
}
generatePasswordInput(disabled) {
return <Form.Control
name={this.state.name}
type={this.state.type}
defaultValue={this.state.value}
disabled={disabled}
onInput={this.handleInput}
autoComplete={this.state.autoComplete} />
}
generateButtonGetInput() {
var url = this.state.url;
return (
<button
type="button"
className={"btn btn-" + this.state.btnType + ' ' + this.state.inline + ' ' + this.state.classes}
onClick={() => {
window.axios.get(url)
}}
>{this.state.displayName}</button>
);
}
generateInput = () => {
var disabled = (this.state.readonly) ? true : false;
var input = null;
if(this.state.type === 'number') {
input = this.generateNumberInput(disabled);
}
if(this.state.type === 'select') {
input = this.generateSelectInput(disabled);
}
if(this.state.type === 'checkbox') {
input = this.generateCheckboxInput(disabled);
}
if(this.state.type === 'text') {
input = this.generateTextInput(disabled);
}
if(this.state.type === 'password') {
input = this.generatePasswordInput(disabled);
}
if(this.state.type === 'btn-get') {
input = this.generateButtonGetInput();
}
if(this.state.earlyReturn) {
return input;
}
return (
<Form.Group controlId={this.state.id}>
{this.state.label &&
<Form.Label style={{fontSize: '1.25rem'}}>{this.formatName(this.state.name)}</Form.Label>
}
{input}
{this.state.description && !this.state.hideDescription &&
<p className="mt-1 text-muted" dangerouslySetInnerHTML={{ __html: this.state.description }}></p>
}
{this.state.readonly &&
<Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
}
</Form.Group>
);
}
render() {
var input = this.generateInput();
return input;
}
}
if (document.getElementById('SettingsInput')) {
ReactDOM.render(<SettingsInput />, document.getElementById('SettingsInput'));
}

192
resources/js/components/Settings/SettingsTabs.js vendored
View File

@@ -1,192 +0,0 @@
import Axios from 'axios';
import React, { Component } from 'react';
import { Nav, Tab, Tabs } from 'react-bootstrap';
import ReactDOM from 'react-dom';
import { toast } from 'react-toastify';
import SettingsInput from './SettingsInput';
import ResetSettings from './tabs/ResetSettings';
import BackupSettings from './tabs/BackupSettings';
import GeneralSettings from './tabs/GeneralSettings';
import GraphsSettings from './tabs/GraphsSettings';
import HealthchecksSettings from './tabs/HealthchecksSettings';
import NotificationsSettings from './tabs/NotificationsSettings';
import Authentication from '../Authentication/Authentication';
import TableSettings from './tabs/TableSettings';
import InfluxDBSettings from './tabs/InfluxDBSettings';
export default class SettingsTabs extends Component {
constructor(props) {
super(props)
this.state = {
tab: "General",
data: this.props.data
}
}
generateTabs = () => {
var tabs = [
'General',
'Graphs',
'Tables',
'Notifications',
'healthchecks.io',
'InfluxDB',
'Reset',
'Backup/Restore',
];
if(window.config.auth) {
tabs.push('Authentication');
}
return tabs.map((tab) => {
return <Tab key={tab} eventKey={tab} title={tab} />
});
}
switchTab = (tab) => {
this.setState({
tab: tab
});
}
save = (settings, name) => {
var url = 'api/settings/bulk?token=' + window.token;
var data = [];
settings.forEach(e => {
if(e.type !== 'btn-get') {
var res = {
name: e.obj.name,
value: e.obj.value
};
data.push(res);
}
});
data = {
data: data
};
Axios.post(url, data)
.then((resp) => {
toast.success(name + ' settings updated');
Axios.get('api/settings/config')
.then((resp) => {
window.config = resp.data;
})
})
.catch((err) => {
if(err.response.status == 422) {
toast.error('Your input was invalid');
} else {
toast.error('Something went wrong')
}
})
}
generateInputs = (settings, handler) => {
return settings.map((setting) => {
return <SettingsInput
key={setting.obj.id}
name={setting.obj.name}
id={setting.obj.id}
type={setting.type}
value={setting.obj.value}
description={setting.obj.description}
handler={handler}
label={setting.obj.name}
description={setting.obj.description}
options={setting.type == 'select' ? setting.options : []}
hideDescription={setting.hideDescription ? setting.hideDescription : false}
min={setting.min ? setting.min : false}
max={setting.max ? setting.max : false}
btnType={setting.btnType}
inline={setting.inline}
url={setting.url}
earlyReturn={setting.earlyReturn ? true : false}
classes={setting.classes ? setting.classes : ''}
autoComplete={setting.autoComplete ? true : false}
/>
})
}
getTabContent = () => {
var data = this.state.data;
switch(this.state.tab) {
case 'General':
return <GeneralSettings
data={data.General}
generateInputs={this.generateInputs}
save={this.save} />
case 'Graphs':
return <GraphsSettings
data={data.Graphs}
generateInputs={this.generateInputs}
save={this.save} />
case 'Tables':
return <TableSettings
data={data.Tables}
refreshConfig={this.props.refreshConfig}
save={this.save} />
case 'Notifications':
return <NotificationsSettings
data={data.Notifications}
generateInputs={this.generateInputs}
save={this.save} />
case 'healthchecks.io':
return <HealthchecksSettings
data={data.healthchecks}
generateInputs={this.generateInputs}
save={this.save} />
case 'InfluxDB':
return <InfluxDBSettings
data={data.influxdb}
generateInputs={this.generateInputs}
save={this.save} />
case 'Reset':
return <ResetSettings
data={data.healthchecks}
generateInputs={this.generateInputs}
save={this.save} />
case 'Backup/Restore':
return <BackupSettings
data={data.healthchecks}
generateInputs={this.generateInputs}
save={this.save} />
case 'Authentication':
return <Authentication
data={data.healthchecks}
generateInputs={this.generateInputs}
save={this.save} />
}
}
render() {
var tabs = this.generateTabs();
var activeTab = this.state.tab;
var tabContent = this.getTabContent();
return (
<div>
<Tabs
variant="tabs"
onSelect={(tab) => { this.switchTab(tab) }}
activeKey={activeTab}
>
{tabs}
</Tabs>
<div className="mt-3">
{tabContent}
</div>
</div>
);
}
}
if (document.getElementById('settingsTabs')) {
ReactDOM.render(<SettingsTabs />, document.getElementById('settingsTabs'));
}

26
resources/js/components/Settings/tabs/BackupSettings.js vendored
View File

@@ -1,26 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Modal, Button, Tab } from 'react-bootstrap';
import Axios from 'axios';
import DataRow from '../../Data/DataRow';
export default class BackupSettings extends Component {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
<Tab.Content>
<DataRow />
</Tab.Content>
);
}
}
if (document.getElementById('BackupSettings')) {
ReactDOM.render(<BackupSettings />, document.getElementById('BackupSettings'));
}

46
resources/js/components/Settings/tabs/GeneralSettings.js vendored
View File

@@ -1,46 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Modal, Button, Tab } from 'react-bootstrap';
import Axios from 'axios';
export default class GeneralSettings extends Component {
constructor(props) {
super(props)
this.state = {
data: this.props.data
}
}
inputHandler = (name, val) => {
var settings = this.state.data;
var i = 0;
settings.forEach(ele => {
if(ele.obj.name == name) {
ele.obj.value = val;
}
settings[i] = ele;
i++;
});
this.setState({
data: settings
});
}
render() {
var settings = this.props.generateInputs(this.state.data, this.inputHandler);
return (
<Tab.Content>
{settings}
<div className="mt-3">
<button className="btn btn-primary" onClick={() => { this.props.save(this.state.data, 'General') }}>Save</button>
</div>
</Tab.Content>
);
}
}
if (document.getElementById('GeneralSettings')) {
ReactDOM.render(<GeneralSettings />, document.getElementById('GeneralSettings'));
}

48
resources/js/components/Settings/tabs/GraphsSettings.js vendored
View File

@@ -1,48 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Modal, Button, Tab } from 'react-bootstrap';
import Axios from 'axios';
import { toast } from 'react-toastify';
import SettingsInput from '../SettingsInput';
export default class GraphsSettings extends Component {
constructor(props) {
super(props)
this.state = {
data: this.props.data
}
}
inputHandler = (name, val) => {
var settings = this.state.data;
var i = 0;
settings.forEach(ele => {
if(ele.obj.name == name) {
ele.obj.value = val;
}
settings[i] = ele;
i++;
});
this.setState({
data: settings
});
}
render() {
var settings = this.props.generateInputs(this.state.data, this.inputHandler);
return (
<Tab.Content>
{settings}
<div className="mt-3">
<button className="btn btn-primary" onClick={() => { this.props.save(this.state.data, 'General') }}>Save</button>
</div>
</Tab.Content>
);
}
}
if (document.getElementById('GraphsSettings')) {
ReactDOM.render(<GraphsSettings />, document.getElementById('GraphsSettings'));
}

48
resources/js/components/Settings/tabs/HealthchecksSettings.js vendored
View File

@@ -1,48 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Modal, Button, Tab } from 'react-bootstrap';
import Axios from 'axios';
import { toast } from 'react-toastify';
import SettingsInput from '../SettingsInput';
export default class HealthchecksSettings extends Component {
constructor(props) {
super(props)
this.state = {
data: this.props.data
}
}
inputHandler = (name, val) => {
var settings = this.state.data;
var i = 0;
settings.forEach(ele => {
if(ele.obj.name == name) {
ele.obj.value = val;
}
settings[i] = ele;
i++;
});
this.setState({
data: settings
});
}
render() {
var settings = this.props.generateInputs(this.state.data, this.inputHandler);
return (
<Tab.Content>
{settings}
<div className="mt-3">
<button className="btn btn-primary" onClick={() => { this.props.save(this.state.data, 'healthchecks.io') }}>Save</button>
</div>
</Tab.Content>
);
}
}
if (document.getElementById('HealthchecksSettings')) {
ReactDOM.render(<HealthchecksSettings />, document.getElementById('HealthchecksSettings'));
}

50
resources/js/components/Settings/tabs/InfluxDBSettings.js vendored
View File

@@ -1,50 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Modal, Button, Tab } from 'react-bootstrap';
import Axios from 'axios';
export default class InfluxDBSettings extends Component {
constructor(props) {
super(props)
this.state = {
data: this.props.data,
}
}
inputHandler = (name, val) => {
var settings = this.state.data;
var i = 0;
settings.forEach(ele => {
if(ele.obj.name == name) {
ele.obj.value = val;
}
settings[i] = ele;
i++;
});
this.setState({
data: settings
});
}
render() {
var settings = this.props.generateInputs(this.state.data, this.inputHandler);
return (
<Tab.Content>
<form onSubmit={(e) => { e.preventDefault() }} autoComplete="off">
<input type="text" autoComplete="username" style={{ display: 'none' }} />
<input type="password" name="password" autoComplete="passoword" style={{ display: 'none' }} />
{settings}
</form>
<div className="mt-3">
<button className="btn btn-primary" onClick={() => { this.props.save(this.state.data, 'healthchecks.io') }}>Save</button>
</div>
</Tab.Content>
);
}
}
if (document.getElementById('InfluxDBSettings')) {
ReactDOM.render(<InfluxDBSettings />, document.getElementById('InfluxDBSettings'));
}

46
resources/js/components/Settings/tabs/NotificationsSettings.js vendored
View File

@@ -1,46 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Modal, Button, Tab } from 'react-bootstrap';
import Axios from 'axios';
export default class NotificationsSettings extends Component {
constructor(props) {
super(props)
this.state = {
data: this.props.data
}
}
inputHandler = (name, val) => {
var settings = this.state.data;
var i = 0;
settings.forEach(ele => {
if(ele.obj.name == name) {
ele.obj.value = val;
}
settings[i] = ele;
i++;
});
this.setState({
data: settings
});
}
render() {
var settings = this.props.generateInputs(this.state.data, this.inputHandler);
return (
<Tab.Content>
{settings}
<div className="mt-3">
<button className="btn btn-primary" onClick={() => { this.props.save(this.state.data, 'Notifications') }}>Save</button>
</div>
</Tab.Content>
);
}
}
if (document.getElementById('NotificationsSettings')) {
ReactDOM.render(<NotificationsSettings />, document.getElementById('NotificationsSettings'));
}

48
resources/js/components/Settings/tabs/ResetSettings.js vendored
View File

@@ -1,48 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-bootstrap';
import Axios from 'axios';
import { toast } from 'react-toastify';
export default class ResetSettings extends Component {
constructor(props) {
super(props)
this.state = {
}
}
deleteAll = () => {
var url = 'api/speedtest/delete/all';
Axios.delete(url)
.then((resp) => {
toast.success('All speedtests have been deleted.');
this.toggleShow();
})
.catch((err) => {
if(err.response.data.error == undefined) {
toast.error('Something went wrong.');
}
toast.error(err.response.data.error);
})
}
render() {
var show = this.state.show;
const title = 'Reset Speedtests';
return (
<>
<h4>Clear all speedtests</h4>
<p className="text-muted">If using SQLite, a backup of the database will be stored in the location of the current database.</p>
<Button onClick={this.deleteAll} variant="danger">Delete all</Button>
</>
);
}
}
if (document.getElementById('ResetSettings')) {
ReactDOM.render(<ResetSettings />, document.getElementById('ResetSettings'));
}

123
resources/js/components/Settings/tabs/TableSettings.js vendored
View File

@@ -1,123 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Modal, Button, Tab } from 'react-bootstrap';
import Axios from 'axios';
import { toast } from 'react-toastify';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
export default class TableSettings extends Component {
constructor(props) {
super(props)
this.state = {
visible: this.props.data[0],
hidden: this.props.data[1],
}
}
handleOnDragEnd = (result) => {
if (!result.destination) return;
let visible = this.state.visible;
let hidden = this.state.hidden;
let from = result.source.droppableId == 'visibleColumns' ? visible.obj.value : hidden.obj.value;
let to = result.destination.droppableId == 'visibleColumns' ? visible.obj.value : hidden.obj.value;
let [reorderedItem] = from.splice(result.source.index, 1);
to.splice(result.destination.index, 0, reorderedItem);
this.setState({
visible: visible,
hidden: hidden
});
}
save = () => {
var url = 'api/settings/bulk?token=' + window.token;
Axios.post(url, {
data: [
{
name: 'visible_columns',
value: this.state.visible.obj.value
},
{
name: 'hidden_columns',
value: this.state.hidden.obj.value
}
],
})
.then((resp) => {
toast.success('Table settings updated');
this.props.refreshConfig();
})
.catch((err) => {
toast.error('Something went wrong');
console.log(err);
})
}
render() {
let visible = this.state.visible;
let hidden = this.state.hidden;
return (
<Tab.Content>
<div>
<p>{visible.obj.description}</p>
<DragDropContext onDragEnd={this.handleOnDragEnd}>
<div className="card pt-4 pb-2 px-4 mb-4">
<h4>Visible Columns</h4>
<Droppable droppableId="visibleColumns">
{(provided) => (
<ul className="visibleColumns pl-0" {...provided.droppableProps} ref={provided.innerRef}>
{visible.obj.value.map((e, i) => {
return (
<Draggable draggableId={e} index={i} key={e}>
{(provided) => (
<li className="card bg-secondary py-2 px-3 my-2" key={e} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>{e}</li>
)}
</Draggable>
);
})}
{provided.placeholder}
</ul>
)}
</Droppable>
</div>
<div className="card pt-4 pb-2 px-4">
<h4>Hidden Columns</h4>
<Droppable droppableId="hiddenColumns pl-0">
{(provided) => (
<ul className="hiddenColumns pl-0" {...provided.droppableProps} ref={provided.innerRef}>
{hidden.obj.value.map((e, i) => {
return (
<Draggable draggableId={e} index={i} key={e}>
{(provided) => (
<li className="card bg-secondary py-2 px-3 my-2" key={e} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>{e}</li>
)}
</Draggable>
);
})}
{provided.placeholder}
</ul>
)}
</Droppable>
</div>
</DragDropContext>
<div className="mt-3">
<button className="btn btn-primary" onClick={() => { this.save() }}>Save</button>
</div>
</div>
</Tab.Content>
);
}
}
if (document.getElementById('TableSettings')) {
ReactDOM.render(<TableSettings />, document.getElementById('TableSettings'));
}

29
resources/js/components/SpeedtestsPage.js vendored
View File

@@ -1,29 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import TestsTable from './Graphics/TestsTable';
import Footer from './Home/Footer';
import Navbar from './Navbar';
export default class SpeedtestsPage extends Component {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
<div>
<Navbar />
<TestsTable />
<Footer />
</div>
);
}
}
if (document.getElementById('SpeedtestsPage')) {
ReactDOM.render(<SpeedtestsPage />, document.getElementById('SpeedtestsPage'));
}

125
resources/js/index.js vendored
View File

@@ -1,125 +0,0 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Switch, Route, Redirect, useHistory } from 'react-router-dom';
import Axios from 'axios';
import ErrorPage from './components/ErrorPage';
import Loader from './components/Loader';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import HomePage from './components/Home/HomePage';
import Cookies from 'js-cookie';
import SettingsIndex from './components/Settings/SettingsIndex';
import SpeedtestsPage from './components/SpeedtestsPage';
export default class Index extends Component {
constructor(props) {
super(props)
this.state = {
loading: true,
redirect: false,
}
}
componentDidMount = () => {
this.getConfig();
}
getConfig() {
var url = 'api/settings/config';
Axios.get(url)
.then((resp) => {
window.config = resp.data;
if(window.config.auth === true) {
var authCookie = Cookies.get('auth');
if(authCookie == undefined) {
window.authenticated = false;
this.setState({
loading: false,
redirect: true,
});
} else {
var url = 'api/auth/me?token=' + authCookie;
Axios.get(url)
.then((resp) => {
window.authenticated = true;
window.token = authCookie;
})
.catch((err) => {
Cookies.remove('auth');
window.authenticated = false;
})
.finally(() => {
this.setState({
loading: false,
redirect: true,
});
})
}
} else {
this.setState({
loading: false,
redirect: true,
});
}
})
}
render() {
var loading = this.state.loading;
var redirect = this.state.redirect;
var baseSet = this.isset(window.config);
if(loading) {
return (
<Loader />
);
} else {
if(baseSet && window.config.base) {
return (
<BrowserRouter>
<Route render={(props) => (<ToastContainer />)} />
<Switch>
<Route exact path={window.config.base} render={(props) => (
<div>
<HomePage />
</div>
)} />
<Route exact path={window.config.base + 'speedtests'} render={(props) => (
<div>
<SpeedtestsPage />
</div>
)} />
<Route exact path={window.config.base + 'settings'} render={(props) => (
<div>
<SettingsIndex refreshConfig={this.getConfig} />
</div>
)} />
<Route exact path={window.config.base + "error/:code"} render={(props) => ( <ErrorPage code={props.match.params.code} /> )} />
<Route render={(props) => (<ErrorPage code="404" />)} />
</Switch>
</BrowserRouter>
);
} else {
return (
<Loader />
);
}
}
}
isset(v) {
if(typeof v !== "undefined" || v !== null) {
return true;
} else {
return false;
}
}
}
if (document.getElementById('main')) {
ReactDOM.render(<Index />, document.getElementById('main'));
}