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

New result icon for commands which doesnt lag

Browse Source
This commit is contained in:
bourquecharles
2021-05-25 19:15:37 -04:00
parent da3b75071b
commit 18a8794891
1 changed files with 8 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,13 +15,13 @@ import CIcon from '@coreui/icons-react';
import DatePicker from 'react-widgets/DatePicker'; 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 { faClipboardCheck } from '@fortawesome/free-solid-svg-icons'
import { prettyDate, addDays } from '../../utils/helper'; import { prettyDate, addDays } 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 BlueResultIcon from '../../assets/icons/BlueResultsIcon.png';
import WhiteResultIcon from '../../assets/icons/WhiteResultsIcon.png';
import eventBus from '../../utils/EventBus'; import eventBus from '../../utils/EventBus';
const DeviceCommands = ({ selectedDeviceId }) => { const DeviceCommands = ({ selectedDeviceId }) => {
@@ -32,7 +32,6 @@ const DeviceCommands = ({ selectedDeviceId }) => {
const [scanDate, setScanDate] = useState(''); const [scanDate, setScanDate] = useState('');
const [collapse, setCollapse] = useState(false); const [collapse, setCollapse] = useState(false);
const [details, setDetails] = useState([]); const [details, setDetails] = useState([]);
const [toDelete, setToDelete] = useState(null);
const [responses, setResponses] = useState([]); const [responses, setResponses] = useState([]);
const [commands, setCommands] = useState([]); const [commands, setCommands] = useState([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -48,8 +47,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
setShowScanModal(!showScanModal); setShowScanModal(!showScanModal);
}; };
const toggleConfirmModal = (uuid, index) => { const toggleConfirmModal = (uuid) => {
setToDelete(index);
setUuidDelete(uuid); setUuidDelete(uuid);
setShowConfirmModal(!showConfirmModal); setShowConfirmModal(!showConfirmModal);
}; };
@@ -62,9 +60,10 @@ const DeviceCommands = ({ selectedDeviceId }) => {
setEnd(value); setEnd(value);
}; };
const deleteCommandFromList = (index) => { const deleteCommandFromList = (commandUuid) => {
const indexToDelete = commands.map(e => e.UUID).indexOf(commandUuid);
const newCommands = commands; const newCommands = commands;
newCommands.splice(index, 1); newCommands.splice(indexToDelete, 1);
setCommands(newCommands); setCommands(newCommands);
} }
@@ -112,7 +111,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
return axiosInstance return axiosInstance
.delete(`/command/${uuidDelete}`, options) .delete(`/command/${uuidDelete}`, options)
.then(() => { .then(() => {
deleteCommandFromList(toDelete); deleteCommandFromList(uuidDelete);
setUuidDelete(''); setUuidDelete('');
return true; return true;
}) })
@@ -201,7 +200,6 @@ const DeviceCommands = ({ selectedDeviceId }) => {
setStart(addDays(new Date(), -3).toString()); setStart(addDays(new Date(), -3).toString());
setEnd(new Date().toString()); setEnd(new Date().toString());
getCommands(); getCommands();
setToDelete(null);
} }
}, [selectedDeviceId]); }, [selectedDeviceId]);
@@ -296,23 +294,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
toggleDetails(item, index); toggleDetails(item, index);
}} }}
> >
<img <FontAwesomeIcon icon={faClipboardCheck} className='c-icon c-icon-lg' style={{height:'19px'}}/>
src={details.includes(index) ? WhiteResultIcon : BlueResultIcon}
onMouseOver={(e) => (e.currentTarget.src = WhiteResultIcon)}
onMouseOut={(e) =>
(e.currentTarget.src = details.includes(index)
? WhiteResultIcon
: BlueResultIcon)
}
onBlur={(e) =>
(e.currentTarget.src = details.includes(index)
? WhiteResultIcon
: BlueResultIcon)
}
onFocus={(e) => (e.currentTarget.src = WhiteResultIcon)}
style={{ height: '26px', width: '25px', color: '#007bff' }}
alt="AP"
/>
</CButton> </CButton>
</CPopover> </CPopover>
</CCol> </CCol>