Added functionality to change graph days

public/js/app.js

@@ -126657,6 +126657,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-bootstrap */ "./node_modules/react-bootstrap/esm/index.js");
 /* harmony import */ var react_chartjs_2__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-chartjs-2 */ "./node_modules/react-chartjs-2/es/index.js");
+/* harmony import */ var react_toastify__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-toastify */ "./node_modules/react-toastify/esm/react-toastify.js");
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -126688,6 +126689,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
+
 var HistoryGraph = /*#__PURE__*/function (_Component) {
   _inherits(HistoryGraph, _Component);
 
@@ -126795,6 +126797,25 @@ var HistoryGraph = /*#__PURE__*/function (_Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "updateDays", function (e) {
+      var days = e.target.value;
+
+      if (days) {
+        _this.getData(days);
+
+        clearInterval(_this.state["int"]);
+
+        var _int2 = setInterval(_this.getData, 10000);
+
+        react_toastify__WEBPACK_IMPORTED_MODULE_5__["toast"].info('Showing results for the last ' + days + ' days');
+
+        _this.setState({
+          days: days,
+          interval: _int2
+        });
+      }
+    });
+
     _this.state = {
       days: 30,
       token: _this.props.token,
@@ -126837,7 +126858,8 @@ var HistoryGraph = /*#__PURE__*/function (_Component) {
         }, "Show results for the last"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Form"].Control, {
           id: "duDaysInput",
           className: "d-inline mx-2",
-          defaultValue: days
+          defaultValue: days,
+          onInput: this.updateDays
         }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h4", {
           className: "d-inline"
         }, "days"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", {
@@ -126993,7 +127015,6 @@ var LatestResults = /*#__PURE__*/function (_Component) {
     value: function render() {
       var loading = this.state.loading;
       var data = this.state.data;
-      console.log(data);
 
       if (loading) {
         return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_4__["Container"], {
@@ -127057,7 +127078,14 @@ var LatestResults = /*#__PURE__*/function (_Component) {
           value: parseFloat(data.data.upload).toFixed(1),
           unit: "Mbit/s",
           icon: "ul"
-        }))));
+        }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_4__["Row"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_4__["Col"], {
+          sm: {
+            span: 12
+          },
+          className: "text-center"
+        }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", {
+          className: "text-muted"
+        }, "Last scan performed at: ", new Date(data.data.created_at).toLocaleString()))));
       }
     }
   }]);
@@ -127159,19 +127187,19 @@ var Widget = /*#__PURE__*/function (_Component) {
       switch (icon) {
         case 'ping':
           icon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
-            "class": "ti-pulse icon text-success"
+            className: "ti-pulse icon text-success"
           });
           break;
 
         case 'dl':
           icon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
-            "class": "ti-download icon text-warning"
+            className: "ti-download icon text-warning"
           });
           break;
 
         case 'ul':
           icon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
-            "class": "ti-upload icon text-primary"
+            className: "ti-upload icon text-primary"
           });
           break;
       }
@@ -127435,7 +127463,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
-
 var Login = /*#__PURE__*/function (_Component) {
   _inherits(Login, _Component);
 

resources/js/components/Graphics/HistoryGraph.js

@@ -4,6 +4,7 @@ import Axios from 'axios';
 import { Spinner, Container, Row, Form, Card } from 'react-bootstrap';
 import { Line } from 'react-chartjs-2';
 import { Col } from 'react-bootstrap';
+import { toast } from 'react-toastify';
 
 export default class HistoryGraph extends Component {
     constructor(props) {
@@ -119,6 +120,20 @@ export default class HistoryGraph extends Component {
         })
     }
 
+    updateDays = (e) => {
+        var days = e.target.value;
+        if(days) {
+            this.getData(days);
+            clearInterval(this.state.int);
+            var int = setInterval(this.getData, 10000);
+            toast.info('Showing results for the last ' + days + ' days');
+            this.setState({
+                days: days,
+                interval: int
+            });
+        }
+    }
+
     render() {
         var loading = this.state.loading;
         var duData = this.state.duData;
@@ -140,7 +155,7 @@ export default class HistoryGraph extends Component {
                         <Col sm={{ span: 12 }}>
                             <div className="text-center">
                                 <h4 className="d-inline">Show results for the last</h4>
-                                <Form.Control id="duDaysInput" className="d-inline mx-2" defaultValue={days}></Form.Control>
+                                <Form.Control id="duDaysInput" className="d-inline mx-2" defaultValue={days} onInput={this.updateDays}></Form.Control>
                                 <h4 className="d-inline">days</h4>
                                 <p className="text-muted">This data refreshes every 10 seconds</p>
                             </div>

resources/js/components/Graphics/LatestResults.js

@@ -43,7 +43,6 @@ export default class LatestResults extends Component {
     render() {
         var loading = this.state.loading;
         var data = this.state.data;
-        console.log(data);
 
         if(loading) {
             return (
@@ -99,6 +98,11 @@ export default class LatestResults extends Component {
                             />
                         </Col>
                     </Row>
+                    <Row>
+                        <Col sm={{ span: 12 }} className="text-center">
+                            <p className="text-muted">Last scan performed at: {new Date(data.data.created_at).toLocaleString()}</p>
+                        </Col>
+                    </Row>
                 </Container>
             );
         }

resources/js/components/Graphics/Widget.js

@@ -33,13 +33,13 @@ export default class Widget extends Component {
 
         switch(icon) {
             case 'ping':
-                icon = <span class="ti-pulse icon text-success"></span>;
+                icon = <span className="ti-pulse icon text-success"></span>;
                 break;
             case 'dl':
-                icon = <span class="ti-download icon text-warning"></span>;
+                icon = <span className="ti-download icon text-warning"></span>;
                 break;
             case 'ul':
-                icon = <span class="ti-upload icon text-primary"></span>;
+                icon = <span className="ti-upload icon text-primary"></span>;
                 break;
         }
 

resources/js/components/Login.js

@@ -4,7 +4,6 @@ import { Container, Row, Form, Toast } from 'react-bootstrap';
 import { Col } from 'react-bootstrap';
 import { Button } from 'react-bootstrap';
 import Axios from 'axios';
-import { Alert } from 'react-bootstrap';
 import { toast } from 'react-toastify';
 
 export default class Login extends Component {