diff --git a/src/components/LoadingButton.js b/src/components/LoadingButton.js index bfe75f6..462824c 100644 --- a/src/components/LoadingButton.js +++ b/src/components/LoadingButton.js @@ -2,8 +2,23 @@ import React from 'react'; import PropTypes from 'prop-types'; import { CButton, CSpinner } from '@coreui/react'; -const LoadingButton = ({ isLoading, label, isLoadingLabel, action, color, variant}) => ( - action()} block> +const LoadingButton = ({ + isLoading, + label, + isLoadingLabel, + action, + color, + variant, + block, + disabled, +}) => ( + action()} + block={block} + disabled={isLoading || disabled} + > {isLoading ? isLoadingLabel : label} @@ -11,16 +26,20 @@ const LoadingButton = ({ isLoading, label, isLoadingLabel, action, color, varian LoadingButton.propTypes = { isLoading: PropTypes.bool.isRequired, + block: PropTypes.bool, + disabled: PropTypes.bool, label: PropTypes.string.isRequired, isLoadingLabel: PropTypes.string.isRequired, action: PropTypes.func.isRequired, color: PropTypes.string, - variant: PropTypes.string + variant: PropTypes.string, }; LoadingButton.defaultProps = { - color: "primary", - variant: "" -} + color: 'primary', + variant: '', + block: true, + disabled: false, +}; export default LoadingButton; diff --git a/src/components/SuccessfulActionModalBody.js b/src/components/SuccessfulActionModalBody.js new file mode 100644 index 0000000..c5692de --- /dev/null +++ b/src/components/SuccessfulActionModalBody.js @@ -0,0 +1,22 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { CButton, CModalBody, CModalFooter } from '@coreui/react'; + +const SuccessfulActionModalBody = ({ toggleModal }) => ( +
+ +
Command submitted successfully
+ + + toggleModal()} block> + Dismiss + + +
+); + +SuccessfulActionModalBody.propTypes = { + toggleModal: PropTypes.func.isRequired, +}; + +export default SuccessfulActionModalBody; diff --git a/src/containers/TheFooter.js b/src/containers/TheFooter.js index 11cefec..f050405 100644 --- a/src/containers/TheFooter.js +++ b/src/containers/TheFooter.js @@ -3,7 +3,7 @@ import { CFooter } from '@coreui/react'; const TheFooter = () => ( -
Version 0.0.11
+
Version 0.0.12
Powered by diff --git a/src/pages/DeviceListPage/DeviceList.js b/src/pages/DeviceListPage/DeviceList.js index 2848634..0e5776e 100644 --- a/src/pages/DeviceListPage/DeviceList.js +++ b/src/pages/DeviceListPage/DeviceList.js @@ -66,7 +66,10 @@ const DeviceList = () => { const startIndex = page * devicesPerPage; const endIndex = parseInt(startIndex, 10) + parseInt(devicesPerPage, 10); - const serialsToGet = serialNumbers.slice(startIndex, endIndex).map(x => encodeURIComponent(x)).join(','); + const serialsToGet = serialNumbers + .slice(startIndex, endIndex) + .map((x) => encodeURIComponent(x)) + .join(','); axiosInstance .get(`/devices?deviceWithStatus=true&select=${serialsToGet}`, { diff --git a/src/pages/DevicePage/ActionModal.js b/src/pages/DevicePage/ActionModal.js index b3053b2..dab410e 100644 --- a/src/pages/DevicePage/ActionModal.js +++ b/src/pages/DevicePage/ActionModal.js @@ -19,6 +19,8 @@ import 'react-widgets/styles.css'; import { getToken } from '../../utils/authHelper'; import axiosInstance from '../../utils/axiosInstance'; import eventBus from '../../utils/EventBus'; +import LoadingButton from '../../components/LoadingButton'; +import SuccessfulActionModalBody from '../../components/SuccessfulActionModalBody'; const ActionModal = ({ show, toggleModal, title, directions, action }) => { const [hadSuccess, setHadSuccess] = useState(false); @@ -28,17 +30,8 @@ const ActionModal = ({ show, toggleModal, title, directions, action }) => { const [chosenDate, setChosenDate] = useState(new Date().toString()); const [doingNow, setDoingNow] = useState(false); const [responseBody, setResponseBody] = useState(''); - const [checkingIfSure, setCheckingIfSure] = useState(false); const selectedDeviceId = useSelector((state) => state.selectedDeviceId); - const formValidation = () => { - if (chosenDate === '') { - setValidDate(false); - return false; - } - return true; - }; - const setDateToLate = () => { const date = convertDateToUtc(new Date()); if (date.getHours() >= 3) { @@ -56,23 +49,20 @@ const ActionModal = ({ show, toggleModal, title, directions, action }) => { } }; - const confirmingIfSure = () => { - setCheckingIfSure(true); - }; - useEffect(() => { - setHadSuccess(false); - setHadFailure(false); - setWaiting(false); - setDoingNow(false); - setChosenDate(new Date().toString()); - setResponseBody(''); - setValidDate(true); - setCheckingIfSure(false); + if (show) { + setHadSuccess(false); + setHadFailure(false); + setWaiting(false); + setDoingNow(false); + setChosenDate(new Date().toString()); + setResponseBody(''); + setValidDate(true); + } }, [show]); const doAction = (isNow) => { - setDoingNow(isNow); + if (isNow !== undefined) setDoingNow(isNow); setHadFailure(false); setHadSuccess(false); setWaiting(true); @@ -103,7 +93,6 @@ const ActionModal = ({ show, toggleModal, title, directions, action }) => { }) .finally(() => { setDoingNow(false); - setCheckingIfSure(false); setWaiting(false); eventBus.dispatch('actionCompleted', { message: 'An action has been completed' }); }); @@ -114,69 +103,66 @@ const ActionModal = ({ show, toggleModal, title, directions, action }) => { {title} - -
{directions}
- - - doAction(true)} disabled={waiting} block color="primary"> - {waiting && doingNow ? 'Loading...' : 'Do Now!'} - - - - setDateToLate()}> - Later tonight - - - - - -

Date:

- - - setDate(date)} - min={convertDateToUtc(new Date())} - /> - - - You need a date... + {hadSuccess ? ( + + ) : ( +
+ +
{directions}
+ + + doAction(true)} disabled={waiting} block color="primary"> + {waiting && doingNow ? 'Loading...' : 'Do Now!'} + + + + setDateToLate()}> + Later tonight + + + + + +

Date:

+ + + setDate(date)} + min={convertDateToUtc(new Date())} + /> + + + You need a date... - - - - - - - - Cancel - - + )} ); }; diff --git a/src/pages/DevicePage/BlinkModal.js b/src/pages/DevicePage/BlinkModal.js index f7407cd..fc725f9 100644 --- a/src/pages/DevicePage/BlinkModal.js +++ b/src/pages/DevicePage/BlinkModal.js @@ -22,6 +22,8 @@ import 'react-widgets/styles.css'; import { getToken } from '../../utils/authHelper'; import axiosInstance from '../../utils/axiosInstance'; import eventBus from '../../utils/EventBus'; +import SuccessfulActionModalBody from '../../components/SuccessfulActionModalBody'; +import LoadingButton from '../../components/LoadingButton'; const BlinkModal = ({ show, toggleModal }) => { const [hadSuccess, setHadSuccess] = useState(false); @@ -31,7 +33,6 @@ const BlinkModal = ({ show, toggleModal }) => { const [chosenDate, setChosenDate] = useState(new Date().toString()); const [chosenPattern, setPattern] = useState('on'); const [responseBody, setResponseBody] = useState(''); - const [checkingIfSure, setCheckingIfSure] = useState(false); const selectedDeviceId = useSelector((state) => state.selectedDeviceId); const setDateToLate = () => { @@ -51,23 +52,20 @@ const BlinkModal = ({ show, toggleModal }) => { } }; - const confirmingIfSure = () => { - setCheckingIfSure(true); - }; - useEffect(() => { - setHadSuccess(false); - setHadFailure(false); - setWaiting(false); - setChosenDate(new Date().toString()); - setResponseBody(''); - setPattern('on'); - setCheckingIfSure(false); - setDoingNow(false); + if (show) { + setWaiting(false); + setChosenDate(new Date().toString()); + setResponseBody(''); + setPattern('on'); + setDoingNow(false); + setHadSuccess(false); + setHadFailure(false); + } }, [show]); const doAction = (isNow) => { - setDoingNow(isNow); + if (isNow !== undefined) setDoingNow(isNow); setHadFailure(false); setHadSuccess(false); setWaiting(true); @@ -100,7 +98,6 @@ const BlinkModal = ({ show, toggleModal }) => { }) .finally(() => { setDoingNow(false); - setCheckingIfSure(false); setWaiting(false); eventBus.dispatch('actionCompleted', { message: 'An action has been completed' }); }); @@ -111,106 +108,103 @@ const BlinkModal = ({ show, toggleModal }) => { LEDs of Device - -
When would you like make the LEDs of this device blink?
- - - doAction(true)} disabled={waiting} block color="primary"> - {waiting && doingNow ? 'Loading...' : 'Do Now!'} - - - - setDateToLate()}> - Later tonight - - - - - -

Date:

- - - + ) : ( +
+ +
When would you like make the LEDs of this device blink?
+ + + doAction(true)} disabled={waiting} block color="primary"> + {waiting && doingNow ? 'Loading...' : 'Do Now!'} + + + + setDateToLate()}> + Later tonight + + + + + +

Date:

+ + + setDate(date)} + min={convertDateToUtc(new Date())} + /> + + + + Choose a pattern you would like to use: + + + setPattern('on')}> + + + On + + + setPattern('off')}> + + + Off + + + setPattern('blink')}> + + + Blink + + + + + + + + + setDate(date)} - min={convertDateToUtc(new Date())} /> - - - - Choose a pattern you would like to use: - - - setPattern('on')}> - - - On - - - setPattern('off')}> - - - Off - - - setPattern('blink')}> - - - Blink - - - - - - - - - - - - - Cancel - - + )} ); }; diff --git a/src/pages/DevicePage/ConfigureModal.js b/src/pages/DevicePage/ConfigureModal.js index d4a38f9..56d974f 100644 --- a/src/pages/DevicePage/ConfigureModal.js +++ b/src/pages/DevicePage/ConfigureModal.js @@ -1,161 +1,166 @@ import { - CButton, - CModal, - CModalHeader, - CModalTitle, - CModalBody, - CModalFooter, - CSpinner, - CCol, - CRow, - CForm, - CTextarea, - CInvalidFeedback - } from '@coreui/react'; - import React, { useState, useEffect } from 'react'; - import PropTypes from 'prop-types'; - import { useSelector } from 'react-redux'; - import 'react-widgets/styles.css'; - import { getToken } from '../../utils/authHelper'; - import { checkIfJson } from '../../utils/helper'; - import axiosInstance from '../../utils/axiosInstance'; - import eventBus from '../../utils/EventBus'; - - const ConfigureModal = ({ show, toggleModal }) => { - const [hadSuccess, setHadSuccess] = useState(false); - const [hadFailure, setHadFailure] = useState(false); - const [doingNow, setDoingNow] = useState(false); - const [waiting, setWaiting] = useState(false); - const [newConfig, setNewConfig] = useState(''); - const [responseBody, setResponseBody] = useState(''); - const [checkingIfSure, setCheckingIfSure] = useState(false); - const [errorJson, setErrorJson] = useState(false); - const selectedDeviceId = useSelector((state) => state.selectedDeviceId); + CButton, + CModal, + CModalHeader, + CModalTitle, + CModalBody, + CModalFooter, + CSpinner, + CCol, + CRow, + CForm, + CTextarea, + CInvalidFeedback, +} from '@coreui/react'; +import React, { useState, useEffect } from 'react'; +import PropTypes from 'prop-types'; +import { useSelector } from 'react-redux'; +import 'react-widgets/styles.css'; +import { getToken } from '../../utils/authHelper'; +import { checkIfJson } from '../../utils/helper'; +import axiosInstance from '../../utils/axiosInstance'; +import eventBus from '../../utils/EventBus'; +import SuccessfulActionModalBody from '../../components/SuccessfulActionModalBody'; - const confirmingIfSure = () => { - if (checkIfJson(newConfig)){ - setCheckingIfSure(true); - } - else { - setErrorJson(true); - } - }; - - useEffect(() => { - setHadSuccess(false); - setHadFailure(false); - setWaiting(false); - setResponseBody(''); - setCheckingIfSure(false); - setDoingNow(false); - setNewConfig(''); - setErrorJson(false); - }, [show]); +const ConfigureModal = ({ show, toggleModal }) => { + const [hadSuccess, setHadSuccess] = useState(false); + const [hadFailure, setHadFailure] = useState(false); + const [doingNow, setDoingNow] = useState(false); + const [waiting, setWaiting] = useState(false); + const [newConfig, setNewConfig] = useState(''); + const [responseBody, setResponseBody] = useState(''); + const [checkingIfSure, setCheckingIfSure] = useState(false); + const [errorJson, setErrorJson] = useState(false); + const selectedDeviceId = useSelector((state) => state.selectedDeviceId); - useEffect(() => { - setErrorJson(false); - }, [newConfig]); - - const doAction = (isNow) => { - setDoingNow(isNow); - setHadFailure(false); - setHadSuccess(false); - setWaiting(true); - - const token = getToken(); - - const parameters = { - serialNumber: selectedDeviceId, - when: 0, - UUID: 1, - configuration: JSON.parse(newConfig), - }; - - const headers = { - Accept: 'application/json', - Authorization: `Bearer ${token}`, - }; - - axiosInstance - .post(`/device/${encodeURIComponent(selectedDeviceId)}/configure`, parameters, { headers }) - .then(() => { - setResponseBody('Command submitted!'); - setHadSuccess(true); - }) - .catch(() => { - setResponseBody('Error while submitting command!'); - setHadFailure(true); - }) - .finally(() => { - setDoingNow(false); - setCheckingIfSure(false); - setWaiting(false); - eventBus.dispatch('actionCompleted', { message: 'An action has been completed' }); - }); + const confirmingIfSure = () => { + if (checkIfJson(newConfig)) { + setCheckingIfSure(true); + } else { + setErrorJson(true); + } + }; + + useEffect(() => { + setHadSuccess(false); + setHadFailure(false); + setWaiting(false); + setResponseBody(''); + setCheckingIfSure(false); + setDoingNow(false); + setNewConfig(''); + setErrorJson(false); + }, [show]); + + useEffect(() => { + setErrorJson(false); + }, [newConfig]); + + const doAction = (isNow) => { + setDoingNow(isNow); + setHadFailure(false); + setHadSuccess(false); + setWaiting(true); + + const token = getToken(); + + const parameters = { + serialNumber: selectedDeviceId, + when: 0, + UUID: 1, + configuration: JSON.parse(newConfig), }; - - return ( - - - Configure Device - - -
Enter new device configuration:
- - + + const headers = { + Accept: 'application/json', + Authorization: `Bearer ${token}`, + }; + + axiosInstance + .post(`/device/${encodeURIComponent(selectedDeviceId)}/configure`, parameters, { headers }) + .then(() => { + setResponseBody('Command submitted!'); + setHadSuccess(true); + }) + .catch(() => { + setResponseBody('Error while submitting command!'); + setHadFailure(true); + }) + .finally(() => { + setDoingNow(false); + setCheckingIfSure(false); + setWaiting(false); + eventBus.dispatch('actionCompleted', { message: 'An action has been completed' }); + }); + }; + + return ( + + + Configure Device + + {hadSuccess ? ( + + ) : ( +
+ +
Enter new device configuration:
+ + - setNewConfig(event.target.value)} - invalid={errorJson} - /> - - You need to enter valid JSON - + setNewConfig(event.target.value)} + invalid={errorJson} + /> + + You need to enter valid JSON + - - - + )} + + ); +}; + +ConfigureModal.propTypes = { + show: PropTypes.bool.isRequired, + toggleModal: PropTypes.func.isRequired, +}; + +export default ConfigureModal; diff --git a/src/pages/DevicePage/DeviceActions.js b/src/pages/DevicePage/DeviceActions.js index 42af7c8..95eac4a 100644 --- a/src/pages/DevicePage/DeviceActions.js +++ b/src/pages/DevicePage/DeviceActions.js @@ -117,7 +117,7 @@ const DeviceActions = ({ selectedDeviceId }) => { - Configure + Configure diff --git a/src/pages/DevicePage/DeviceCommands.js b/src/pages/DevicePage/DeviceCommands.js index d286bd7..b1b1f4a 100644 --- a/src/pages/DevicePage/DeviceCommands.js +++ b/src/pages/DevicePage/DeviceCommands.js @@ -58,7 +58,7 @@ const DeviceCommands = ({ selectedDeviceId }) => { const showMoreCommands = () => { setCommandLimit(commandLimit + 50); - } + }; const modifyStart = (value) => { setStart(value); @@ -86,17 +86,17 @@ const DeviceCommands = ({ selectedDeviceId }) => { Authorization: `Bearer ${getToken()}`, }, params: { - limit: commandLimit + limit: commandLimit, }, }; let extraParams = '&newest=true'; - if(start !=='' && end !==''){ + if (start !== '' && end !== '') { const utcStart = new Date(start).toISOString(); const utcEnd = new Date(end).toISOString(); options.params.startDate = dateToUnix(utcStart); options.params.endDate = dateToUnix(utcEnd); - extraParams=''; + extraParams = ''; } axiosInstance @@ -204,8 +204,7 @@ const DeviceCommands = ({ selectedDeviceId }) => { useEffect(() => { if (selectedDeviceId && start !== '' && end !== '') { getCommands(); - } - else if(selectedDeviceId && start === '' && end === ''){ + } else if (selectedDeviceId && start === '' && end === '') { getCommands(); } }, [selectedDeviceId, start, end]); @@ -238,8 +237,7 @@ const DeviceCommands = ({ selectedDeviceId }) => { useEffect(() => { if (commands.length === 0 || (commands.length > 0 && commands.length < commandLimit)) { setShowLoadingMore(false); - } - else { + } else { setShowLoadingMore(true); } }, [commands]); @@ -270,17 +268,11 @@ const DeviceCommands = ({ selectedDeviceId }) => { From: - modifyStart(date)} - /> + modifyStart(date)} /> To: - modifyEnd(date)} - /> + modifyEnd(date)} /> @@ -384,16 +376,16 @@ const DeviceCommands = ({ selectedDeviceId }) => { ), }} /> - - {showLoadingMore && - - } + + {showLoadingMore && ( + + )}
diff --git a/src/pages/DevicePage/DeviceConfiguration.js b/src/pages/DevicePage/DeviceConfiguration.js index 68b021d..0e1187b 100644 --- a/src/pages/DevicePage/DeviceConfiguration.js +++ b/src/pages/DevicePage/DeviceConfiguration.js @@ -144,12 +144,12 @@ const DeviceConfiguration = ({ selectedDeviceId }) => { - - + + diff --git a/src/pages/DevicePage/DeviceHealth.js b/src/pages/DevicePage/DeviceHealth.js index 96b363d..20b0a30 100644 --- a/src/pages/DevicePage/DeviceHealth.js +++ b/src/pages/DevicePage/DeviceHealth.js @@ -47,7 +47,7 @@ const DeviceHealth = ({ selectedDeviceId }) => { const showMoreLogs = () => { setLogLimit(logLimit + 50); - } + }; const getDeviceHealth = () => { if (loading) return; @@ -60,17 +60,17 @@ const DeviceHealth = ({ selectedDeviceId }) => { Authorization: `Bearer ${getToken()}`, }, params: { - limit: logLimit + limit: logLimit, }, }; let extraParams = '?newest=true'; - if(start !=='' && end !==''){ + if (start !== '' && end !== '') { const utcStart = new Date(start).toISOString(); const utcEnd = new Date(end).toISOString(); options.params.startDate = dateToUnix(utcStart); options.params.endDate = dateToUnix(utcEnd); - extraParams=''; + extraParams = ''; } axiosInstance @@ -133,12 +133,11 @@ const DeviceHealth = ({ selectedDeviceId }) => { getDeviceHealth(); } }, [logLimit]); - + useEffect(() => { if (healthChecks.length === 0 || (healthChecks.length > 0 && healthChecks.length < logLimit)) { setShowLoadingMore(false); - } - else { + } else { setShowLoadingMore(true); } }, [healthChecks]); @@ -146,8 +145,7 @@ const DeviceHealth = ({ selectedDeviceId }) => { useEffect(() => { if (selectedDeviceId && start !== '' && end !== '') { getDeviceHealth(); - } - else if(selectedDeviceId && start === '' && end === ''){ + } else if (selectedDeviceId && start === '' && end === '') { getDeviceHealth(); } }, [start, end, selectedDeviceId]); @@ -176,17 +174,11 @@ const DeviceHealth = ({ selectedDeviceId }) => { From: - modifyStart(date)} - /> + modifyStart(date)} /> To: - modifyEnd(date)} - /> + modifyEnd(date)} /> @@ -231,16 +223,16 @@ const DeviceHealth = ({ selectedDeviceId }) => { ), }} /> - - {showLoadingMore && - - } + + {showLoadingMore && ( + + )}
diff --git a/src/pages/DevicePage/DeviceLogs.js b/src/pages/DevicePage/DeviceLogs.js index 088379b..7804ab4 100644 --- a/src/pages/DevicePage/DeviceLogs.js +++ b/src/pages/DevicePage/DeviceLogs.js @@ -44,7 +44,7 @@ const DeviceLogs = ({ selectedDeviceId }) => { const showMoreLogs = () => { setLogLimit(logLimit + 50); - } + }; const getLogs = () => { if (loading) return; @@ -57,17 +57,17 @@ const DeviceLogs = ({ selectedDeviceId }) => { Authorization: `Bearer ${getToken()}`, }, params: { - limit: logLimit + limit: logLimit, }, }; let extraParams = '?newest=true'; - if(start !=='' && end !==''){ + if (start !== '' && end !== '') { const utcStart = new Date(start).toISOString(); const utcEnd = new Date(end).toISOString(); options.params.startDate = dateToUnix(utcStart); options.params.endDate = dateToUnix(utcEnd); - extraParams=''; + extraParams = ''; } axiosInstance @@ -133,8 +133,7 @@ const DeviceLogs = ({ selectedDeviceId }) => { useEffect(() => { if (logs.length === 0 || (logs.length > 0 && logs.length < logLimit)) { setShowLoadingMore(false); - } - else { + } else { setShowLoadingMore(true); } }, [logs]); @@ -142,8 +141,7 @@ const DeviceLogs = ({ selectedDeviceId }) => { useEffect(() => { if (selectedDeviceId && start !== '' && end !== '') { getLogs(); - } - else if(selectedDeviceId && start === '' && end === ''){ + } else if (selectedDeviceId && start === '' && end === '') { getLogs(); } }, [start, end, selectedDeviceId]); @@ -159,17 +157,11 @@ const DeviceLogs = ({ selectedDeviceId }) => { From: - modifyStart(date)} - /> + modifyStart(date)} /> To: - modifyEnd(date)} - /> + modifyEnd(date)} /> @@ -208,16 +200,16 @@ const DeviceLogs = ({ selectedDeviceId }) => { ), }} /> - - {showLoadingMore && - - } + + {showLoadingMore && ( + + )}
diff --git a/src/pages/DevicePage/DevicePage.js b/src/pages/DevicePage/DevicePage.js index 2a74760..b95ee3d 100644 --- a/src/pages/DevicePage/DevicePage.js +++ b/src/pages/DevicePage/DevicePage.js @@ -16,7 +16,8 @@ const DevicePage = () => { const previouslySelectedDeviceId = useSelector((state) => state.selectedDeviceId); useEffect(() => { - if (deviceId && deviceId !== previouslySelectedDeviceId) dispatch({ type: 'set', selectedDeviceId: deviceId }); + if (deviceId && deviceId !== previouslySelectedDeviceId) + dispatch({ type: 'set', selectedDeviceId: deviceId }); }, [deviceId]); return ( @@ -34,7 +35,7 @@ const DevicePage = () => { - + diff --git a/src/pages/DevicePage/DeviceStatistics/DeviceLifetimeStatisics.js b/src/pages/DevicePage/DeviceStatistics/DeviceLifetimeStatisics.js index 3df0487..a77ec51 100644 --- a/src/pages/DevicePage/DeviceStatistics/DeviceLifetimeStatisics.js +++ b/src/pages/DevicePage/DeviceStatistics/DeviceLifetimeStatisics.js @@ -6,85 +6,83 @@ import { getToken } from '../../../utils/authHelper'; import { addDays, dateToUnix } from '../../../utils/helper'; const DeviceLifetimeStatistics = ({ selectedDeviceId }) => { - const [loading, setLoading] = useState(false); + const [loading, setLoading] = useState(false); - const displayInformation = (data) => { - const sortedData = data.sort((a,b) => { - if(a.recorded > b.recorded) return 1; - if(b.recorded > a.recorded) return -1; - return 0; - }); - const interfaces = [ - { - label: 'wan', - backgroundColor: 'rgb(228,102,81,0.9)', - data: [], - fill: false - }, - { - label: 'lan', - backgroundColor: 'rgb(0,216,255,0.9)', - data: [], - fill: false - } - ]; + const displayInformation = (data) => { + const sortedData = data.sort((a, b) => { + if (a.recorded > b.recorded) return 1; + if (b.recorded > a.recorded) return -1; + return 0; + }); + const interfaces = [ + { + label: 'wan', + backgroundColor: 'rgb(228,102,81,0.9)', + data: [], + fill: false, + }, + { + label: 'lan', + backgroundColor: 'rgb(0,216,255,0.9)', + data: [], + fill: false, + }, + ]; - const interfaceIndexes = { - 'wan': 0, - 'lan': 1 - }; - - for (const log of sortedData){ - for (const inter of log.data.interfaces){ - interfaces[interfaceIndexes[inter.name]].data.push(inter.counters.tx_bytes); - } - } - setDataset(interfaces); - } - - const getStatistics = () => { - if (loading) return; - setLoading(true); - - const options = { - headers: { - Accept: 'application/json', - Authorization: `Bearer ${getToken()}`, - }, - params: { - serialNumber: "24f5a207a130", - lifetime: true - } - }; - - axiosInstance - .get(`/device/${selectedDeviceId}/statistics`, options) - .then((response) => { - displayInformation(response.data.data); - }) - .catch(() => {}) - .finally(() => { - setLoading(false); - }); + const interfaceIndexes = { + wan: 0, + lan: 1, }; - useEffect(() => { - if (selectedDeviceId) { - getStatistics(); - } - }, [selectedDeviceId]); + for (const log of sortedData) { + for (const inter of log.data.interfaces) { + interfaces[interfaceIndexes[inter.name]].data.push(inter.counters.tx_bytes); + } + } + setDataset(interfaces); + }; - return ( -
- -
- ); -} + const getStatistics = () => { + if (loading) return; + setLoading(true); -DeviceLifetimeStatistics.propTypes = { - selectedDeviceId: PropTypes.string.isRequired, + const options = { + headers: { + Accept: 'application/json', + Authorization: `Bearer ${getToken()}`, + }, + params: { + serialNumber: '24f5a207a130', + lifetime: true, + }, + }; + + axiosInstance + .get(`/device/${selectedDeviceId}/statistics`, options) + .then((response) => { + displayInformation(response.data.data); + }) + .catch(() => {}) + .finally(() => { + setLoading(false); + }); + }; + + useEffect(() => { + if (selectedDeviceId) { + getStatistics(); + } + }, [selectedDeviceId]); + + return ( +
+ +
+ ); }; -export default DeviceLifetimeStatistics; \ No newline at end of file +DeviceLifetimeStatistics.propTypes = { + selectedDeviceId: PropTypes.string.isRequired, +}; + +export default DeviceLifetimeStatistics; diff --git a/src/pages/DevicePage/DeviceStatistics/DeviceStatisticsCard.js b/src/pages/DevicePage/DeviceStatistics/DeviceStatisticsCard.js index de633ac..81e8f82 100644 --- a/src/pages/DevicePage/DeviceStatistics/DeviceStatisticsCard.js +++ b/src/pages/DevicePage/DeviceStatistics/DeviceStatisticsCard.js @@ -1,53 +1,44 @@ -import React, {useState} from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { - CCard, - CCardHeader, - CCardBody, - CPopover, - CRow, - CCol -} from '@coreui/react'; +import { CCard, CCardHeader, CCardBody, CPopover, CRow, CCol } from '@coreui/react'; import { cilSync } from '@coreui/icons'; import CIcon from '@coreui/icons-react'; import StatisticsChartList from './StatisticsChartList'; const DeviceStatisticsCard = ({ selectedDeviceId }) => { - const [lastRefresh, setLastRefresh] = useState(''); + const [lastRefresh, setLastRefresh] = useState(''); - const refresh = () => { - setLastRefresh(new Date().toString()); - } + const refresh = () => { + setLastRefresh(new Date().toString()); + }; - return ( - - - - - Statistics - - - - refresh()} - name="cil-sync" - content={cilSync} - size="lg" - color='primary' - /> - - - - - - - - - ); + return ( + + + + Statistics + + + refresh()} + name="cil-sync" + content={cilSync} + size="lg" + color="primary" + /> + + + + + + + + + ); }; DeviceStatisticsCard.propTypes = { - selectedDeviceId: PropTypes.string.isRequired, + selectedDeviceId: PropTypes.string.isRequired, }; -export default DeviceStatisticsCard; \ No newline at end of file +export default DeviceStatisticsCard; diff --git a/src/pages/DevicePage/DeviceStatistics/DeviceStatisticsChart.js b/src/pages/DevicePage/DeviceStatistics/DeviceStatisticsChart.js index 019b343..1694d00 100644 --- a/src/pages/DevicePage/DeviceStatistics/DeviceStatisticsChart.js +++ b/src/pages/DevicePage/DeviceStatistics/DeviceStatisticsChart.js @@ -1,26 +1,21 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Chart from 'react-apexcharts' +import Chart from 'react-apexcharts'; const DeviceStatisticsChart = ({ data, options }) => ( -
- -
+
+ +
); DeviceStatisticsChart.propTypes = { - data: PropTypes.instanceOf(Array), - options: PropTypes.instanceOf(Object), + data: PropTypes.instanceOf(Array), + options: PropTypes.instanceOf(Object), }; DeviceStatisticsChart.defaultProps = { - data: [], - options: {}, + data: [], + options: {}, }; -export default DeviceStatisticsChart; \ No newline at end of file +export default DeviceStatisticsChart; diff --git a/src/pages/DevicePage/DeviceStatistics/StatisticsChartList.js b/src/pages/DevicePage/DeviceStatistics/StatisticsChartList.js index 04a512c..15ad4d0 100644 --- a/src/pages/DevicePage/DeviceStatistics/StatisticsChartList.js +++ b/src/pages/DevicePage/DeviceStatistics/StatisticsChartList.js @@ -7,167 +7,167 @@ import { getToken } from '../../../utils/authHelper'; import { unixToTime, capitalizeFirstLetter } from '../../../utils/helper'; const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => { - const [loading, setLoading] = useState(false); - const [deviceStats, setStats] = useState([]); - const [statOptions, setStatOptions] = useState({}); + const [loading, setLoading] = useState(false); + const [deviceStats, setStats] = useState([]); + const [statOptions, setStatOptions] = useState({}); - const transformIntoDataset = (data) => { - const sortedData = data.sort((a,b) => { - if(a.recorded > b.recorded) return 1; - if(b.recorded > a.recorded) return -1; - return 0; - }); + const transformIntoDataset = (data) => { + const sortedData = data.sort((a, b) => { + if (a.recorded > b.recorded) return 1; + if (b.recorded > a.recorded) return -1; + return 0; + }); - // This dictionary will have a key that is the interface name and a value of it's index in the final array - const interfaceTypes = {} - const interfaceList = []; - const categories = []; - let i = 0; + // This dictionary will have a key that is the interface name and a value of it's index in the final array + const interfaceTypes = {}; + const interfaceList = []; + const categories = []; + let i = 0; - // Just building the array for all the interfaces - for (const log of sortedData){ - categories.push(unixToTime(log.recorded)); - for (const logInterface of log.data.interfaces){ - if(interfaceTypes[logInterface.name] === undefined) { - interfaceTypes[logInterface.name] = i; - interfaceList.push([{ - titleName: logInterface.name, - name: 'Tx', - backgroundColor: 'rgb(228,102,81,0.9)', - data: [], - fill: false - }, - { - titleName: logInterface.name, - name: 'Rx', - backgroundColor: 'rgb(0,216,255,0.9)', - data: [], - fill: false - }]); - i += 1; - } - } + // Just building the array for all the interfaces + for (const log of sortedData) { + categories.push(unixToTime(log.recorded)); + for (const logInterface of log.data.interfaces) { + if (interfaceTypes[logInterface.name] === undefined) { + interfaceTypes[logInterface.name] = i; + interfaceList.push([ + { + titleName: logInterface.name, + name: 'Tx', + backgroundColor: 'rgb(228,102,81,0.9)', + data: [], + fill: false, + }, + { + titleName: logInterface.name, + name: 'Rx', + backgroundColor: 'rgb(0,216,255,0.9)', + data: [], + fill: false, + }, + ]); + i += 1; } - - // Looping through all the data - for (const log of sortedData){ - // Looping through the interfaces of the log - for (const inter of log.data.interfaces){ - interfaceList[interfaceTypes[inter.name]][0].data.push(Math.floor(inter.counters.tx_bytes / 1024)); - interfaceList[interfaceTypes[inter.name]][1].data.push(Math.floor(inter.counters.rx_bytes)); - } - } - - const options = { - chart: { - id: 'chart', - group: 'txrx' - }, - xaxis: { - title: { - text: 'Time', - style: { - fontSize: '15px' - }, - }, - categories, - tickAmount:20 - }, - yaxis: { - labels: { - minWidth: 40 - }, - title: { - text: 'Data (KB)', - style: { - fontSize: '15px' - }, - }, - }, - legend: { - position: 'top', - horizontalAlign: 'right', - float: true - }, - - }; - - setStatOptions(options); - setStats(interfaceList); + } } - const getStatistics = () => { - if (!loading){ - setLoading(true); + // Looping through all the data + for (const log of sortedData) { + // Looping through the interfaces of the log + for (const inter of log.data.interfaces) { + interfaceList[interfaceTypes[inter.name]][0].data.push( + Math.floor(inter.counters.tx_bytes / 1024), + ); + interfaceList[interfaceTypes[inter.name]][1].data.push(Math.floor(inter.counters.rx_bytes)); + } + } - const options = { - headers: { - Accept: 'application/json', - Authorization: `Bearer ${getToken()}`, - }, - params: { - serialNumber: "24f5a207a130" - } - }; - - axiosInstance - .get(`/device/${selectedDeviceId}/statistics?newest=true&limit=50`, options) - .then((response) => { - transformIntoDataset(response.data.data); - }) - .catch(() => {}) - .finally(() => { - setLoading(false); - }); - } + const options = { + chart: { + id: 'chart', + group: 'txrx', + }, + xaxis: { + title: { + text: 'Time', + style: { + fontSize: '15px', + }, + }, + categories, + tickAmount: 20, + }, + yaxis: { + labels: { + minWidth: 40, + }, + title: { + text: 'Data (KB)', + style: { + fontSize: '15px', + }, + }, + }, + legend: { + position: 'top', + horizontalAlign: 'right', + float: true, + }, }; - useEffect(() => { - if (selectedDeviceId) { - getStatistics(); - } - }, [selectedDeviceId]); + setStatOptions(options); + setStats(interfaceList); + }; - useEffect(() => { - if (lastRefresh !== '' && selectedDeviceId){ - getStatistics(); - } - }, [lastRefresh]) + const getStatistics = () => { + if (!loading) { + setLoading(true); + const options = { + headers: { + Accept: 'application/json', + Authorization: `Bearer ${getToken()}`, + }, + params: { + serialNumber: '24f5a207a130', + }, + }; - return ( -
- { - deviceStats.map( - (data) => -
- -
- ) - } + axiosInstance + .get(`/device/${selectedDeviceId}/statistics?newest=true&limit=50`, options) + .then((response) => { + transformIntoDataset(response.data.data); + }) + .catch(() => {}) + .finally(() => { + setLoading(false); + }); + } + }; + + useEffect(() => { + if (selectedDeviceId) { + getStatistics(); + } + }, [selectedDeviceId]); + + useEffect(() => { + if (lastRefresh !== '' && selectedDeviceId) { + getStatistics(); + } + }, [lastRefresh]); + + return ( +
+ {deviceStats.map((data) => ( +
+
- ); -} + ))} +
+ ); +}; StatisticsChartList.propTypes = { - lastRefresh: PropTypes.string, - selectedDeviceId: PropTypes.string.isRequired, + lastRefresh: PropTypes.string, + selectedDeviceId: PropTypes.string.isRequired, }; StatisticsChartList.defaultProps = { - lastRefresh: '' -} + lastRefresh: '', +}; -export default StatisticsChartList; \ No newline at end of file +export default StatisticsChartList; diff --git a/src/pages/DevicePage/TraceModal.js b/src/pages/DevicePage/TraceModal.js index 903ff37..0864804 100644 --- a/src/pages/DevicePage/TraceModal.js +++ b/src/pages/DevicePage/TraceModal.js @@ -5,8 +5,6 @@ import { CModalTitle, CModalBody, CModalFooter, - CSpinner, - CBadge, CCol, CRow, CInvalidFeedback, @@ -21,6 +19,7 @@ import 'react-widgets/styles.css'; import { getToken } from '../../utils/authHelper'; import axiosInstance from '../../utils/axiosInstance'; import eventBus from '../../utils/EventBus'; +import LoadingButton from '../../components/LoadingButton'; const TraceModal = ({ show, toggleModal }) => { const [hadSuccess, setHadSuccess] = useState(false); @@ -31,7 +30,6 @@ const TraceModal = ({ show, toggleModal }) => { const [packets, setPackets] = useState(100); const [chosenDate, setChosenDate] = useState(new Date().toString()); const [responseBody, setResponseBody] = useState(''); - const [checkingIfSure, setCheckingIfSure] = useState(false); const selectedDeviceId = useSelector((state) => state.selectedDeviceId); const setDate = (date) => { @@ -40,17 +38,12 @@ const TraceModal = ({ show, toggleModal }) => { } }; - const confirmingIfSure = () => { - setCheckingIfSure(true); - }; - useEffect(() => { setHadSuccess(false); setHadFailure(false); setWaiting(false); setChosenDate(new Date().toString()); setResponseBody(''); - setCheckingIfSure(false); setDuration(20); setPackets(100); }, [show]); @@ -99,7 +92,6 @@ const TraceModal = ({ show, toggleModal }) => { setHadFailure(true); }) .finally(() => { - setCheckingIfSure(false); setWaiting(false); eventBus.dispatch('actionCompleted', { message: 'An action has been completed' }); }); @@ -199,25 +191,15 @@ const TraceModal = ({ show, toggleModal }) => {
- - - + /> Cancel diff --git a/src/pages/DevicePage/WifiScanModal.js b/src/pages/DevicePage/WifiScanModal.js index cd4eaf6..f448020 100644 --- a/src/pages/DevicePage/WifiScanModal.js +++ b/src/pages/DevicePage/WifiScanModal.js @@ -5,7 +5,6 @@ import { CModalTitle, CModalBody, CModalFooter, - CSpinner, CRow, CForm, CSwitch, @@ -18,6 +17,7 @@ import 'react-widgets/styles.css'; import { getToken } from '../../utils/authHelper'; import axiosInstance from '../../utils/axiosInstance'; import eventBus from '../../utils/EventBus'; +import LoadingButton from '../../components/LoadingButton'; const WifiScanModal = ({ show, toggleModal }) => { const [hadSuccess, setHadSuccess] = useState(false); @@ -25,23 +25,17 @@ const WifiScanModal = ({ show, toggleModal }) => { const [waiting, setWaiting] = useState(false); const [choseVerbose, setVerbose] = useState(true); const [channelList, setChannelList] = useState([]); - const [checkingIfSure, setCheckingIfSure] = useState(false); const selectedDeviceId = useSelector((state) => state.selectedDeviceId); const toggleVerbose = () => { setVerbose(!choseVerbose); }; - const confirmingIfSure = () => { - setCheckingIfSure(true); - }; - useEffect(() => { setHadSuccess(false); setHadFailure(false); setWaiting(false); setChannelList([]); - setCheckingIfSure(false); setVerbose(true); }, [show]); @@ -108,7 +102,6 @@ const WifiScanModal = ({ show, toggleModal }) => { setHadFailure(true); }) .finally(() => { - setCheckingIfSure(false); setWaiting(false); eventBus.dispatch('actionCompleted', { message: 'An action has been completed' }); }); @@ -138,19 +131,15 @@ const WifiScanModal = ({ show, toggleModal }) => {
- - - + /> Cancel diff --git a/src/pages/LoginPage/Login.js b/src/pages/LoginPage/Login.js index 5457e31..e54c602 100644 --- a/src/pages/LoginPage/Login.js +++ b/src/pages/LoginPage/Login.js @@ -38,24 +38,24 @@ const Login = () => { const formValidation = () => { setHadError(false); - let isSuccesful = true; + let isSuccessful = true; if (userId.trim() === '') { setEmptyUsername(true); - isSuccesful = false; + isSuccessful = false; } if (password.trim() === '') { setEmptyPassword(true); - isSuccesful = false; + isSuccessful = false; } if (gatewayUrl.trim() === '') { setEmptyGateway(true); - isSuccesful = false; + isSuccessful = false; } - return isSuccesful; + return isSuccessful; }; const SignIn = (credentials) => { diff --git a/src/utils/helper.js b/src/utils/helper.js index e29092a..c571d80 100644 --- a/src/utils/helper.js +++ b/src/utils/helper.js @@ -60,7 +60,7 @@ export const unixToTime = (dateString) => { return `${prettyNumber(date.getHours())}:${prettyNumber(date.getMinutes())}:${prettyNumber( date.getSeconds(), )}`; -} +}; export const dateToUnix = (date) => Math.floor(new Date(date).getTime() / 1000); @@ -69,10 +69,8 @@ export const capitalizeFirstLetter = (string) => string.charAt(0).toUpperCase() export const checkIfJson = (string) => { try { JSON.parse(string); - } - catch (e) { - return false + } catch (e) { + return false; } return true; -} - +};