scottk/OptimCloud-gw-ui
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/OptimCloud-gw-ui.git synced 2025-11-01 02:37:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optimized Device commands

Browse Source
This commit is contained in:
bourquecharles
2021-05-26 18:18:53 -04:00
parent 14e9b61163
commit 12a17a3648
9 changed files with 78 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/DeviceListPage/DeviceList.js
View File

@@ -351,7 +351,7 @@ const DeviceListDisplay = ({
), ),
refresh: (item) => ( refresh: (item) => (
<td className="py-2"> <td className="py-2">
<CPopover content='Refresh Device'> <CPopover content="Refresh Device">
<CButton <CButton
onClick={() => refreshDevice(item.serialNumber)} onClick={() => refreshDevice(item.serialNumber)}
color="primary" color="primary"
@@ -365,7 +365,7 @@ const DeviceListDisplay = ({
), ),
show_details: (item) => ( show_details: (item) => (
<td className="py-2"> <td className="py-2">
<CPopover content='Device Details'> <CPopover content="Device Details">
<CLink <CLink
className="c-subheader-nav-link" className="c-subheader-nav-link"
aria-current="page" aria-current="page"

8
src/pages/DevicePage/DeviceActions.js
View File

@@ -9,7 +9,7 @@ import BlinkModal from './BlinkModal';
import axiosInstance from '../../utils/axiosInstance'; import axiosInstance from '../../utils/axiosInstance';
import { getToken } from '../../utils/authHelper'; import { getToken } from '../../utils/authHelper';
const DeviceActions = ({selectedDeviceId}) => { const DeviceActions = ({ selectedDeviceId }) => {
const [showRebootModal, setShowRebootModal] = useState(false); const [showRebootModal, setShowRebootModal] = useState(false);
const [showBlinkModal, setShowBlinkModal] = useState(false); const [showBlinkModal, setShowBlinkModal] = useState(false);
const [showUpgradeModal, setShowUpgradeModal] = useState(false); const [showUpgradeModal, setShowUpgradeModal] = useState(false);
@@ -53,8 +53,6 @@ const DeviceActions = ({selectedDeviceId}) => {
}) })
.catch(() => {}); .catch(() => {});
}; };
return ( return (
<CCard> <CCard>
@@ -98,11 +96,11 @@ const DeviceActions = ({selectedDeviceId}) => {
</CRow> </CRow>
<CRow style={{ marginTop: '10px' }}> <CRow style={{ marginTop: '10px' }}>
<CCol> <CCol>
<CButton onClick={getRttysInfo} color='primary' block> <CButton onClick={getRttysInfo} color="primary" block>
Connect Connect
</CButton> </CButton>
</CCol> </CCol>
<CCol/> <CCol />
</CRow> </CRow>
</CCardBody> </CCardBody>
<ActionModal <ActionModal

54
src/pages/DevicePage/DeviceCommands.js
View File

@@ -8,7 +8,6 @@ import {
CButton, CButton,
CDataTable, CDataTable,
CCard, CCard,
CCardBody,
CPopover, CPopover,
} from '@coreui/react'; } from '@coreui/react';
import CIcon from '@coreui/icons-react'; import CIcon from '@coreui/icons-react';
@@ -16,12 +15,13 @@ import DatePicker from 'react-widgets/DatePicker';
import { cilSync } from '@coreui/icons'; import { cilSync } from '@coreui/icons';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faClipboardCheck } from '@fortawesome/free-solid-svg-icons' import { faClipboardCheck } from '@fortawesome/free-solid-svg-icons';
import { prettyDate, addDays, dateToUnix } from '../../utils/helper'; import { prettyDate, addDays, dateToUnix } from '../../utils/helper';
import axiosInstance from '../../utils/axiosInstance'; import axiosInstance from '../../utils/axiosInstance';
import { getToken } from '../../utils/authHelper'; import { getToken } from '../../utils/authHelper';
import WifiScanResultModalWidget from './WifiScanResultModal'; import WifiScanResultModalWidget from './WifiScanResultModal';
import ConfirmModal from '../../components/ConfirmModal'; import ConfirmModal from '../../components/ConfirmModal';
import DeviceCommandsCollapse from './DeviceCommandsCollapse';
import eventBus from '../../utils/EventBus'; import eventBus from '../../utils/EventBus';
const DeviceCommands = ({ selectedDeviceId }) => { const DeviceCommands = ({ selectedDeviceId }) => {
@@ -61,14 +61,14 @@ const DeviceCommands = ({ selectedDeviceId }) => {
}; };
const deleteCommandFromList = (commandUuid) => { const deleteCommandFromList = (commandUuid) => {
const indexToDelete = commands.map(e => e.UUID).indexOf(commandUuid); const indexToDelete = commands.map((e) => e.UUID).indexOf(commandUuid);
const newCommands = commands; const newCommands = commands;
newCommands.splice(indexToDelete, 1); newCommands.splice(indexToDelete, 1);
setCommands(newCommands); setCommands(newCommands);
} };
const getCommands = () => { const getCommands = () => {
if(loading) return; if (loading) return;
setLoading(true); setLoading(true);
const utcStart = new Date(start).toISOString(); const utcStart = new Date(start).toISOString();
const utcEnd = new Date(end).toISOString(); const utcEnd = new Date(end).toISOString();
@@ -94,7 +94,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
setLoading(false); setLoading(false);
}); });
}; };
const deleteCommand = async () => { const deleteCommand = async () => {
if (uuidDelete === '') { if (uuidDelete === '') {
return false; return false;
@@ -193,13 +193,11 @@ const DeviceCommands = ({ selectedDeviceId }) => {
}, [selectedDeviceId, start, end]); }, [selectedDeviceId, start, end]);
useEffect(() => { useEffect(() => {
eventBus.on("actionCompleted", () => eventBus.on('actionCompleted', () => getCommands());
getCommands()
);
return () => { return () => {
eventBus.remove("actionCompleted"); eventBus.remove('actionCompleted');
} };
}, []); }, []);
useEffect(() => { useEffect(() => {
@@ -301,7 +299,11 @@ const DeviceCommands = ({ selectedDeviceId }) => {
toggleDetails(item, index); toggleDetails(item, index);
}} }}
> >
<FontAwesomeIcon icon={faClipboardCheck} className='c-icon c-icon-lg' style={{height:'19px'}}/> <FontAwesomeIcon
icon={faClipboardCheck}
className="c-icon c-icon-lg"
style={{ height: '19px' }}
/>
</CButton> </CButton>
</CPopover> </CPopover>
</CCol> </CCol>
@@ -339,20 +341,14 @@ const DeviceCommands = ({ selectedDeviceId }) => {
</td> </td>
), ),
details: (item, index) => ( details: (item, index) => (
<div> <DeviceCommandsCollapse
<CCollapse show={details.includes(index)}> details={details}
<CCardBody> responses={responses}
<h5>Result</h5> index={index}
<div>{getDetails(item.command, item, index)}</div> getDetails={getDetails}
</CCardBody> getResponse={getResponse}
</CCollapse> item={item}
<CCollapse show={responses.includes(index)}> />
<CCardBody>
<h5>Details</h5>
<div>{getResponse(item, index)}</div>
</CCardBody>
</CCollapse>
</div>
), ),
}} }}
/> />
@@ -375,11 +371,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
scanResults={chosenWifiScan} scanResults={chosenWifiScan}
date={scanDate} date={scanDate}
/> />
<ConfirmModal <ConfirmModal show={showConfirmModal} toggle={toggleConfirmModal} action={deleteCommand} />
show={showConfirmModal}
toggle={toggleConfirmModal}
action={deleteCommand}
/>
<CIcon name="cilNotes" style={{ color: 'white' }} size="lg" /> <CIcon name="cilNotes" style={{ color: 'white' }} size="lg" />
</CWidgetDropdown> </CWidgetDropdown>
); );

31
src/pages/DevicePage/DeviceCommandsCollapse.js Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react';
import { CCollapse, CCardBody } from '@coreui/react';
import PropTypes from 'prop-types';
const DeviceCommandsCollapse = ({ details, responses, index, item, getDetails, getResponse }) => (
<div>
<CCollapse show={details.includes(index)}>
<CCardBody>
<h5>Result</h5>
<div>{getDetails(item.command, item, index)}</div>
</CCardBody>
</CCollapse>
<CCollapse show={responses.includes(index)}>
<CCardBody>
<h5>Details</h5>
<div>{getResponse(item, index)}</div>
</CCardBody>
</CCollapse>
</div>
);
DeviceCommandsCollapse.propTypes = {
details: PropTypes.instanceOf(Array).isRequired,
responses: PropTypes.instanceOf(Array).isRequired,
index: PropTypes.number.isRequired,
getDetails: PropTypes.func.isRequired,
getResponse: PropTypes.func.isRequired,
item: PropTypes.instanceOf(Object).isRequired,
};
export default DeviceCommandsCollapse;

30
src/pages/DevicePage/DeviceConfiguration.js
View File

@@ -94,21 +94,21 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
</CCol> </CCol>
</CFormGroup> </CFormGroup>
<CFormGroup row> <CFormGroup row>
<CCol md="3"> <CCol md="3">
<CLabel>Created : </CLabel> <CLabel>Created : </CLabel>
</CCol> </CCol>
<CCol xs="12" md="9"> <CCol xs="12" md="9">
{prettyDate(device.createdTimestamp)} {prettyDate(device.createdTimestamp)}
</CCol> </CCol>
</CFormGroup> </CFormGroup>
<CFormGroup row> <CFormGroup row>
<CCol md="3"> <CCol md="3">
<CLabel>Last Configuration Download : </CLabel> <CLabel>Last Configuration Download : </CLabel>
</CCol> </CCol>
<CCol xs="12" md="9"> <CCol xs="12" md="9">
{prettyDate(device.lastConfigurationDownload)} {prettyDate(device.lastConfigurationDownload)}
</CCol> </CCol>
</CFormGroup> </CFormGroup>
<CCollapse show={collapse}> <CCollapse show={collapse}>
<CFormGroup row> <CFormGroup row>
<CCol md="3"> <CCol md="3">

2
src/pages/DevicePage/DeviceHealth.js
View File

@@ -42,7 +42,7 @@ const DeviceHealth = ({ selectedDeviceId }) => {
}; };
const getDeviceHealth = () => { const getDeviceHealth = () => {
if(loading) return; if (loading) return;
setLoading(true); setLoading(true);
const utcStart = new Date(start).toISOString(); const utcStart = new Date(start).toISOString();
const utcEnd = new Date(end).toISOString(); const utcEnd = new Date(end).toISOString();

2
src/pages/DevicePage/DeviceLogs.js
View File

@@ -39,7 +39,7 @@ const DeviceLogs = ({ selectedDeviceId }) => {
}; };
const getLogs = () => { const getLogs = () => {
if(loading) return; if (loading) return;
setLoading(true); setLoading(true);
const utcStart = new Date(start).toISOString(); const utcStart = new Date(start).toISOString();
const utcEnd = new Date(end).toISOString(); const utcEnd = new Date(end).toISOString();

2
src/pages/DevicePage/WifiScanModal.js
View File

@@ -108,7 +108,7 @@ const WifiScanModal = ({ show, toggleModal }) => {
.finally(() => { .finally(() => {
setCheckingIfSure(false); setCheckingIfSure(false);
setWaiting(false); setWaiting(false);
eventBus.dispatch("actionCompleted", { message: "An action has been completed" }); eventBus.dispatch('actionCompleted', { message: 'An action has been completed' });
}); });
}; };

3
src/utils/helper.js
View File

@@ -45,7 +45,6 @@ const prettyNumber = (number) => {
const unixToDateString = (unixNumber) => unixNumber * 1000; const unixToDateString = (unixNumber) => unixNumber * 1000;
export const prettyDate = (dateString) => { export const prettyDate = (dateString) => {
const convertedTimestamp = unixToDateString(dateString); const convertedTimestamp = unixToDateString(dateString);
const date = new Date(convertedTimestamp); const date = new Date(convertedTimestamp);
@@ -55,4 +54,4 @@ export const prettyDate = (dateString) => {
)}`; )}`;
}; };
export const dateToUnix = (date) => Math.floor(new Date(date).getTime()/1000); export const dateToUnix = (date) => Math.floor(new Date(date).getTime() / 1000);