cleanups

speedtest/volumes/config/www/resources/js/components/Home/Footer.js

@@ -0,0 +1,24 @@
+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'));
+}

speedtest/volumes/config/www/resources/js/components/Home/HomePage.js

@@ -0,0 +1,85 @@
+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.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'));
+}

speedtest/volumes/config/www/resources/js/components/Home/Version.js

@@ -0,0 +1,152 @@
+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'));
+}