scottk/OptimCloud-gw-ui
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/OptimCloud-gw-ui.git synced 2025-10-31 02:07: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"

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

@@ -54,8 +54,6 @@ const DeviceActions = ({selectedDeviceId}) => {
.catch(() => {}); .catch(() => {});
}; };
return ( return (
<CCard> <CCard>
<CCardHeader>Device Actions</CCardHeader> <CCardHeader>Device Actions</CCardHeader>
@@ -98,7 +96,7 @@ 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>

50
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,11 +61,11 @@ 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;
@@ -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;

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' });
}); });
}; };

1
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);