Changes from SPA to MPA

resources/js/components/Settings/tabs/BackupSettings.js

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

resources/js/components/Settings/tabs/GeneralSettings.js

@@ -2,8 +2,6 @@ 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 GeneralSettings extends Component {
     constructor(props) {
@@ -14,7 +12,7 @@ export default class GeneralSettings extends Component {
         }
     }
 
-    inputHandler = () => {
+    inputHandler = (name, val) => {
         var settings = this.state.data;
         var i = 0;
         settings.forEach(ele => {
@@ -30,21 +28,14 @@ export default class GeneralSettings extends Component {
     }
 
     render() {
-        var settings = this.state.data[0];
+        var settings = this.props.generateInputs(this.state.data, this.inputHandler);
 
         return (
             <Tab.Content>
-                General
-                <SettingsInput
-                    name={settings.obj.name}
-                    id={settings.obj.id}
-                    type={settings.type}
-                    value={settings.obj.value}
-                    description={settings.obj.description}
-                    handler={this.inputHandler}
-                    label={settings.obj.name.split('_').join(' ')}
-                    description={settings.obj.description}
-                />
+                {settings}
+                <div className="mt-3">
+                    <button className="btn btn-primary" onClick={() => { this.props.save(this.state.data, 'General') }}>Save</button>
+                </div>
             </Tab.Content>
         );
     }

resources/js/components/Settings/tabs/GraphsSettings.js

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

resources/js/components/Settings/tabs/HealthchecksSettings.js

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

resources/js/components/Settings/tabs/NotificationsSettings.js

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

resources/js/components/Settings/tabs/ResetSettings.js

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