Added settings section and custom cron scheduling

resources/js/components/Home/HomePage.js

@@ -5,6 +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';
 
 export default class HomePage extends Component {
 
@@ -15,6 +16,7 @@ export default class HomePage extends Component {
                     <LatestResults />
                     <HistoryGraph />
                     <TestsTable />
+                    <Settings />
                     <DataRow />
                 </div>
                 <Footer />

resources/js/components/Home/Setting.js

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Card, Form, Button } from 'react-bootstrap';
+import Axios from 'axios';
+import { toast } from 'react-toastify';
+
+export default class Setting extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            name: this.props.name,
+            value: this.props.value,
+            description: this.props.description,
+        }
+    }
+
+    ucfirst(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+    }
+
+    update = () => {
+        var url = '/api/settings';
+        var data = {
+            name: this.state.name,
+            value: this.state.value
+        };
+
+        Axios.post(url, data)
+        .then((resp) => {
+            toast.success(this.ucfirst(this.state.name) + ' updated');
+        })
+        .catch((err) => {
+            if(err.response.status == 422) {
+                var errors = err.response.data.error;
+                for(var key in errors) {
+                    var error = errors[key];
+                    toast.error(error[0])
+                }
+            } else {
+                toast.error('Something went wrong')
+            }
+        })
+    }
+
+    updateValue = (e) => {
+        this.setState({
+            value: e.target.value
+        });
+    }
+
+    render() {
+        var name = this.state.name;
+        var value = this.state.value;
+        var description = this.state.description;
+
+        return (
+            <Card className="m-2">
+                <Card.Body>
+                    <h4>{this.ucfirst(name)}</h4>
+                    <div dangerouslySetInnerHTML={{ __html: description}} />
+                    <Form.Group controlId={name}>
+                        <Form.Label>{this.ucfirst(name)}</Form.Label>
+                        <Form.Control type="text" label={name} defaultValue={value} onInput={this.updateValue} />
+                    </Form.Group>
+                    <Button variant="primary" onClick={this.update}>Save</Button>
+                </Card.Body>
+            </Card>
+        );
+    }
+}
+
+if (document.getElementById('Setting')) {
+    ReactDOM.render(<Setting />, document.getElementById('Setting'));
+}

resources/js/components/Home/Settings.js

@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, Container, Row, Col, Collapse } from 'react-bootstrap';
+import Loader from '../Loader';
+import Axios from 'axios';
+import Setting from './Setting';
+
+export default class Settings extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            show: false,
+            loading: true,
+            data: [],
+        }
+    }
+
+    componentDidMount = () => {
+        this.getData();
+    }
+
+    toggleShow = () => {
+        if(this.state.show) {
+            var show = false;
+        } else {
+            var show = true;
+        }
+
+        this.setState({
+            show: show
+        });
+    }
+
+    getData = () => {
+        var url = '/api/settings/';
+
+        Axios.get(url)
+        .then((resp) => {
+            this.setState({
+                loading: false,
+                data: resp.data
+            });
+        })
+        .catch((err) => {
+            if(err.response) {
+
+            }
+        })
+    }
+
+    buildSettingsCards = () => {
+        var e = this.state.data;
+        return (
+            <Row>
+                <Col lg={{ span: 3, offset: 3 }} md={{ span: 6 }} sm={{ span: 12 }}>
+                    <Setting name={e.schedule.name} value={e.schedule.value} description={e.schedule.description} />
+                </Col>
+                <Col lg={{ span: 3 }} md={{ span: 6 }} sm={{ span: 12 }}>
+                    <Setting name={e.server.name} value={e.server.value} description={e.server.description} />
+                </Col>
+            </Row>
+        )
+    }
+
+    render() {
+        var show = this.state.show;
+        var loading = this.state.loading;
+        var data = this.state.data;
+        if(!loading) {
+            var cards = this.buildSettingsCards();
+        }
+
+        return (
+            <div>
+                <Container className="my-4" fluid>
+                    <Row>
+                        <Col sm={{ span: 12 }} className="mb-3 text-center">
+                            <div className="mouse" onClick={this.toggleShow}>
+                                <h4 className="mb-0 mr-2 d-inline">Settings</h4>
+                                {(show) ?
+                                    <span className="ti-angle-up"></span>
+                                :
+                                    <span className="ti-angle-down"></span>
+                                }
+                            </div>
+                        </Col>
+                    </Row>
+                    <Collapse in={show}>
+                        <div>
+                            <Row>
+                                <Col sm={{ span: 12 }}>
+                                    {loading ?
+                                        <Loader small />
+                                    :
+                                        cards
+                                    }
+                                </Col>
+                            </Row>
+                        </div>
+                    </Collapse>
+                </Container>
+
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('Settings')) {
+    ReactDOM.render(<Settings />, document.getElementById('Settings'));
+}

resources/js/components/Loader.js

@@ -15,6 +15,23 @@ export default class Loader extends Component {
     }
 
     render() {
+        if(this.props.small) {
+            return (
+                <Container fluid>
+                    <Row className="text-center align-items-center">
+                        <Col
+                            lg={{ span: 2, offset: 5}}
+                            md={{ span: 4, offset: 4}}
+                            sm={{ span: 4, offset: 4}}
+                            xs={{ span: 12}}
+                        >
+                            <Spinner animation="grow" size="lg"/>
+                        </Col>
+                    </Row>
+                </Container>
+            )
+        }
+
         return (
             <Container fluid>
                 <Row className="fullscreen text-center align-items-center">