Changes from SPA to MPA

resources/js/components/Settings/SettingsTabs.js

@@ -1,8 +1,16 @@
+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';
 
 export default class SettingsTabs extends Component {
     constructor(props) {
@@ -21,8 +29,13 @@ export default class SettingsTabs extends Component {
             'Notifications',
             'healthchecks.io',
             'Reset',
+            'Backup/Restore',
         ];
 
+        if(window.config.auth) {
+            tabs.push('Authentication');
+        }
+
         return tabs.map((tab) => {
             return <Tab key={tab} eventKey={tab} title={tab} />
         });
@@ -34,17 +47,105 @@ export default class SettingsTabs extends Component {
         });
     }
 
+    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}
+                        min={setting.max ? setting.max : false}
+                        btnType={setting.btnType}
+                        inline={setting.inline}
+                        url={setting.url}
+                        earlyReturn={setting.earlyReturn ? true : false}
+                        classes={setting.classes ? setting.classes : ''}
+                    />
+        })
+    }
+
     getTabContent = () => {
         var data = this.state.data;
-        console.log(data);
 
         switch(this.state.tab) {
             case 'General':
-                return <GeneralSettings data={data.General} />
-                break;
+                return <GeneralSettings
+                            data={data.General}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
             case 'Graphs':
-                return <GraphsSettings />
-                break;
+                return <GraphsSettings
+                            data={data.Graphs}
+                            generateInputs={this.generateInputs}
+                            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 '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} />
         }
     }