Added methods to delete speedtests

resources/js/components/Graphics/TableRow.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { Modal } from 'react-bootstrap';
+import { Modal, Button } from 'react-bootstrap';
+import Axios from 'axios';
+import { toast } from 'react-toastify';
 
 export default class TableRow extends Component {
     constructor(props) {
@@ -25,6 +27,25 @@ export default class TableRow extends Component {
         }
     }
 
+    delete = (id) => {
+        var url = 'api/speedtest/delete/' + id;
+
+        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.toggleShow();
+    }
+
     render() {
         var e = this.state.data;
         var show = this.state.show;
@@ -52,6 +73,7 @@ export default class TableRow extends Component {
                                     {e.scheduled != undefined &&
                                         <p>Type: {e.scheduled == true ? 'scheduled' : 'manual'}</p>
                                     }
+                                    <Button variant="danger" onClick={() => { this.delete(e.id) }}>Delete</Button>
                                 </Modal.Body>
                             </Modal>
                         </td>

resources/js/components/Home/HomePage.js

@@ -5,7 +5,7 @@ import LatestResults from '../Graphics/LatestResults';
 import Footer from './Footer';
 import DataRow from '../Data/DataRow';
 import TestsTable from '../Graphics/TestsTable';
-import Settings from './Settings';
+import Settings from '../Settings/Settings';
 
 export default class HomePage extends Component {
 

resources/js/components/Settings/ResetSettings.js

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, Button } from 'react-bootstrap';
+import SettingsModalCard from './SettingsModalCard';
+import Axios from 'axios';
+import { toast } from 'react-toastify';
+
+export default class ResetSettings extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            show: false,
+        }
+    }
+
+    toggleShow = () => {
+        if(this.state.show) {
+            this.setState({ show: false });
+        } else {
+            this.setState({ show:true });
+        }
+    }
+
+    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 (
+            <>
+                <SettingsModalCard title={title} description="Bulk delete speedtests from the database." toggleShow={this.toggleShow} />
+                <Modal show={show} onHide={this.toggleShow}>
+                    <Modal.Header>
+                        <Modal.Title>{title}</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        <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>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+
+if (document.getElementById('ResetSettings')) {
+    ReactDOM.render(<ResetSettings />, document.getElementById('ResetSettings'));
+}

resources/js/components/Settings/SettingWithModal.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { Card, Form, Button, Modal, Row, Col } from 'react-bootstrap';
 import Axios from 'axios';
 import { toast } from 'react-toastify';
+import SettingsModalCard from '../Settings/SettingsModalCard';
 
 export default class SettingWithModal extends Component {
     constructor(props) {
@@ -98,15 +99,7 @@ export default class SettingWithModal extends Component {
 
         return (
             <>
-                <Card className="m-2 setting-card">
-                    <Card.Body className="d-flex align-items-center">
-                        <div>
-                            <h4>{title}</h4>
-                            <p>{description}</p>
-                            <Button variant="primary" onClick={this.toggleShow}>Edit</Button>
-                        </div>
-                    </Card.Body>
-                </Card>
+                <SettingsModalCard title={title} description={description} toggleShow={this.toggleShow} />
                 <Modal show={show} onHide={this.toggleShow}>
                     <Modal.Header>
                         <Modal.Title>{title}</Modal.Title>
@@ -130,7 +123,15 @@ export default class SettingWithModal extends Component {
                                 readonly = true;
                             }
 
-                            if(e.type == 'checkbox') {
+                            if(e.type == 'info') {
+                                return (
+                                    <Row key={e.obj.id} className="d-flex align-items-center">
+                                        <Col md={md} sm={sm}>
+                                            <p>{e.obj.content}</p>
+                                        </Col>
+                                    </Row>
+                                )
+                            } else if(e.type == 'checkbox') {
                                 return (
                                     <Row key={e.obj.id} className="d-flex align-items-center">
                                         <Col  md={md} sm={sm}>

resources/js/components/Settings/Settings.js

@@ -5,6 +5,7 @@ import Loader from '../Loader';
 import Axios from 'axios';
 import Setting from './Setting';
 import SettingWithModal from './SettingWithModal';
+import ResetSettings from './ResetSettings';
 
 export default class Settings extends Component {
     constructor(props) {
@@ -157,6 +158,9 @@ export default class Settings extends Component {
                         }
                     ]} />
                 </Col>
+                <Col lg={{ span: 4 }} md={{ span: 6 }} sm={{ span: 12 }}>
+                    <ResetSettings />
+                </Col>
             </Row>
         )
     }

resources/js/components/Settings/SettingsModalCard.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Card, Button } from 'react-bootstrap';
+
+export default class SettingsModalCard extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            title: this.props.title,
+            description: this.props.description,
+            toggleShow: this.props.toggleShow,
+        }
+    }
+
+    render() {
+        var title = this.state.title;
+        var description = this.state.description;
+        var toggleShow = this.state.toggleShow;
+
+        return (
+            <Card className="m-2 setting-card">
+                <Card.Body className="d-flex align-items-center">
+                    <div>
+                        <h4>{title}</h4>
+                        <p>{description}</p>
+                        <Button variant="primary" onClick={toggleShow}>Edit</Button>
+                    </div>
+                </Card.Body>
+            </Card>
+        );
+    }
+}
+
+if (document.getElementById('SettingModalCard')) {
+    ReactDOM.render(<SettingsModalCard />, document.getElementById('SettingModalCard'));
+}