From f84e5389371be8b3b86cd60a9a34b532fbb8a29a Mon Sep 17 00:00:00 2001 From: Henry Whitaker Date: Wed, 8 Apr 2020 17:56:33 +0100 Subject: [PATCH] Added functionality to change graph days --- public/js/app.js | 41 +++++++++++++++---- .../js/components/Graphics/HistoryGraph.js | 17 +++++++- .../js/components/Graphics/LatestResults.js | 6 ++- resources/js/components/Graphics/Widget.js | 6 +-- resources/js/components/Login.js | 1 - 5 files changed, 58 insertions(+), 13 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index 414e5b93..f39d2773 100644 --- a/public/js/app.js +++ b/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); diff --git a/resources/js/components/Graphics/HistoryGraph.js b/resources/js/components/Graphics/HistoryGraph.js index dd816b5e..45b0793d 100644 --- a/resources/js/components/Graphics/HistoryGraph.js +++ b/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 {

Show results for the last

- +

days

This data refreshes every 10 seconds

diff --git a/resources/js/components/Graphics/LatestResults.js b/resources/js/components/Graphics/LatestResults.js index 74e78672..ddbab979 100644 --- a/resources/js/components/Graphics/LatestResults.js +++ b/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 { /> + + +

Last scan performed at: {new Date(data.data.created_at).toLocaleString()}

+ + ); } diff --git a/resources/js/components/Graphics/Widget.js b/resources/js/components/Graphics/Widget.js index 966d8c1e..e4bdb18b 100644 --- a/resources/js/components/Graphics/Widget.js +++ b/resources/js/components/Graphics/Widget.js @@ -33,13 +33,13 @@ export default class Widget extends Component { switch(icon) { case 'ping': - icon = ; + icon = ; break; case 'dl': - icon = ; + icon = ; break; case 'ul': - icon = ; + icon = ; break; } diff --git a/resources/js/components/Login.js b/resources/js/components/Login.js index 0edf414a..37bf8669 100644 --- a/resources/js/components/Login.js +++ b/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 {