Started building the general settings tab

resources/js/components/Settings/SettingsIndex.js

@@ -1,20 +1,82 @@
+import Axios from 'axios';
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 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.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',
+                }
+            ],
+            Graphs: {}
+        };
+    }
+
+    componentDidMount() {
+        this.getData();
+    }
+
     render() {
+        var data = this.state.data;
+        var loading = this.state.loading;
+
+        if(loading) {
+            return (
+                <div>Loading</div>
+            );
+        }
+
         return (
             <div>
                 <Navbar />
+                <div className="container my-5">
+                    <SettingsTabs data={data} />
+                </div>
             </div>
         );
     }

resources/js/components/Settings/SettingsInput.js

@@ -0,0 +1,92 @@
+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,
+            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,
+        }
+    }
+
+    componentDidMount() {
+        this.setState({
+            readonly: this.isReadOnly()
+        });
+    }
+
+    handleInput = (evt) => {
+        var val = evt.target.value;
+
+        if(this.state.type === 'checkbox') {
+            val = e.target.checked;
+        }
+
+        this.props.handleInput(
+            this.state.name.split(' ').join('_'),
+            val
+        );
+
+        this.setState({
+            value: val
+        });
+    }
+
+    isReadOnly = () => {
+        if(window.config.editable[this.state.name] == false) {
+            return true;
+        }
+
+        return false;
+    }
+
+    generateInput = () => {
+        var disabled = (this.state.readonly) ? true : false;
+
+        return <Form.Control
+                    name={this.state.name}
+                    type={this.state.type}
+                    defaultValue={this.state.value}
+                    disabled={disabled}
+                    onInput={this.handleInput} />
+    }
+
+    render() {
+        var input = this.generateInput();
+        var id = this.state.id;
+        var readonly = this.state.readonly;
+        var label = this.state.label;
+        var description = this.state.description;
+
+        return (
+            <Form.Group controlId={id}>
+                {label &&
+                    <Form.Label dangerouslySetInnerHTML={{ __html: label }} />
+                }
+
+                {input}
+
+                {description &&
+                    <p dangerouslySetInnerHTML={{ __html: description }}></p>
+                }
+
+                {readonly &&
+                    <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
+                }
+            </Form.Group>
+        );
+    }
+}
+
+if (document.getElementById('SettingsInput')) {
+    ReactDOM.render(<SettingsInput />, document.getElementById('SettingsInput'));
+}

resources/js/components/Settings/SettingsTabs.js

@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import { Nav, Tab, Tabs } from 'react-bootstrap';
+import ReactDOM from 'react-dom';
+import GeneralSettings from './tabs/GeneralSettings';
+import GraphsSettings from './tabs/GraphsSettings';
+
+export default class SettingsTabs extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            tab: "General",
+            data: this.props.data
+        }
+    }
+
+    generateTabs = () => {
+        var tabs = [
+            'General',
+            'Graphs',
+            'Notifications',
+            'healthchecks.io',
+            'Reset',
+        ];
+
+        return tabs.map((tab) => {
+            return <Tab key={tab} eventKey={tab} title={tab} />
+        });
+    }
+
+    switchTab = (tab) => {
+        this.setState({
+            tab: tab
+        });
+    }
+
+    getTabContent = () => {
+        var data = this.state.data;
+        console.log(data);
+
+        switch(this.state.tab) {
+            case 'General':
+                return <GeneralSettings data={data.General} />
+                break;
+            case 'Graphs':
+                return <GraphsSettings />
+                break;
+        }
+    }
+
+    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'));
+}

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

@@ -0,0 +1,55 @@
+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) {
+        super(props)
+
+        this.state = {
+            data: this.props.data
+        }
+    }
+
+    inputHandler = () => {
+        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.state.data[0];
+
+        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}
+                />
+            </Tab.Content>
+        );
+    }
+}
+
+if (document.getElementById('GeneralSettings')) {
+    ReactDOM.render(<GeneralSettings />, document.getElementById('GeneralSettings'));
+}