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

Prettier run on whole solution

Browse Source
This commit is contained in:
bourquecharles
2021-05-21 18:22:27 -04:00
parent 99e11cee88
commit 8e68f12558
21 changed files with 687 additions and 625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/containers/TheSidebar.js
View File

@@ -23,8 +23,18 @@ const TheSidebar = () => {
return (
<CSidebar show={show} onShowChange={(val) => dispatch({ type: 'set', sidebarShow: val })}>
<CSidebarBrand className="d-md-down-none" to="/devices">
<img className="c-sidebar-brand-full" src={logoBar} style={{ height: '75px'}} alt="OpenWifi" />
<img className="c-sidebar-brand-minimized" src={logoBar} style={{ height: '75px', width: '75px' }} alt="OpenWifi" />
<img
className="c-sidebar-brand-full"
src={logoBar}
style={{ height: '75px' }}
alt="OpenWifi"
/>
<img
className="c-sidebar-brand-minimized"
src={logoBar}
style={{ height: '75px', width: '75px' }}
alt="OpenWifi"
/>
</CSidebarBrand>
<CSidebarNav>
<CCreateElement

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

@@ -94,7 +94,7 @@ const DeviceList = () => {
})
.then((response) => {
const device = response.data.devicesWithStatus[0];
const foundIndex = devices.findIndex(obj => obj.serialNumber === serialNumber);
const foundIndex = devices.findIndex((obj) => obj.serialNumber === serialNumber);
const newList = devices;
newList[foundIndex] = device;
setDevices(newList);
@@ -103,7 +103,7 @@ const DeviceList = () => {
.catch(() => {
setLoading(false);
});
}
};
const updateDevicesPerPage = (value) => {
setDevicesPerPage(value);
@@ -143,7 +143,14 @@ const DeviceList = () => {
);
};
const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount, updatePage, refreshDevice }) => {
const DeviceListDisplay = ({
devices,
loading,
updateDevicesPerPage,
pageCount,
updatePage,
refreshDevice,
}) => {
const columns = [
{ key: 'deviceType', label: '', filter: false, sorter: false, _style: { width: '5%' } },
{ key: 'verifiedCertificate', label: 'Certificate', _style: { width: '1%' } },
@@ -191,23 +198,35 @@ const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount,
};
const getCertBadge = (cert) => {
if(cert === 'NO_CERTIFICATE') {
if (cert === 'NO_CERTIFICATE') {
return (
<div style={{position: 'relative'}}>
<CIcon style={{position: 'absolute', left: '31%', marginTop:'8%'}} name="cil-badge" content={cilBadge} size="2xl" alt="AP" />
<CIcon style={{position: 'absolute', zIndex: 99, left: '21%', color: '#e55353'}} name="cil-ban" content={cilBan} size="3xl" alt="AP" />
<div style={{ position: 'relative' }}>
<CIcon
style={{ position: 'absolute', left: '31%', marginTop: '8%' }}
name="cil-badge"
content={cilBadge}
size="2xl"
alt="AP"
/>
<CIcon
style={{ position: 'absolute', zIndex: 99, left: '21%', color: '#e55353' }}
name="cil-ban"
content={cilBan}
size="3xl"
alt="AP"
/>
</div>
);
}
let color = 'transparent';
switch(cert) {
switch (cert) {
case 'VALID_CERTIFICATE':
color = 'danger'
color = 'danger';
break;
case 'MISMATCH_SERIAL':
return (
<CBadge color={color} style={{backgroundColor: '#FFFF5C'}}>
<CBadge color={color} style={{ backgroundColor: '#FFFF5C' }}>
<CIcon name="cil-badge" content={cilBadge} size="2xl" alt="AP" />
</CBadge>
);
@@ -215,11 +234,23 @@ const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount,
color = 'success';
break;
default:
return(
<div style={{position: 'relative'}}>
<CIcon style={{position: 'absolute', left: '31%', marginTop:'8%'}}name="cil-badge" content={cilBadge} size="2xl" alt="AP" />
<CIcon style={{position: 'absolute', zIndex: 99, left: '21%', color: '#e55353'}} name="cil-ban" content={cilBan} size="3xl" alt="AP" />
</div>
return (
<div style={{ position: 'relative' }}>
<CIcon
style={{ position: 'absolute', left: '31%', marginTop: '8%' }}
name="cil-badge"
content={cilBadge}
size="2xl"
alt="AP"
/>
<CIcon
style={{ position: 'absolute', zIndex: 99, left: '21%', color: '#e55353' }}
name="cil-ban"
content={cilBan}
size="3xl"
alt="AP"
/>
</div>
);
}
return (
@@ -227,8 +258,7 @@ const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount,
<CIcon name="cil-badge" content={cilBadge} size="2xl" alt="AP" />
</CBadge>
);
}
};
const getStatusBadge = (status) => {
if (status) {
@@ -264,11 +294,11 @@ const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount,
serialNumber: (item) => (
<td style={{ textAlign: 'center' }}>
<CLink
className="c-subheader-nav-link"
aria-current="page"
to={() => `/devices/${item.serialNumber}`}
>
{item.serialNumber}
className="c-subheader-nav-link"
aria-current="page"
to={() => `/devices/${item.serialNumber}`}
>
{item.serialNumber}
</CLink>
</td>
),
@@ -286,10 +316,7 @@ const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount,
),
verifiedCertificate: (item) => (
<td style={{ textAlign: 'center' }}>
<CPopover
content={item.verifiedCertificate ?? 'Unknown'}
placement="top"
>
<CPopover content={item.verifiedCertificate ?? 'Unknown'} placement="top">
{getCertBadge(item.verifiedCertificate)}
</CPopover>
</td>
@@ -319,7 +346,12 @@ const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount,
),
refresh: (item) => (
<td className="py-2">
<CButton onClick={() => refreshDevice(item.serialNumber)} color="primary" variant="outline" size="sm">
<CButton
onClick={() => refreshDevice(item.serialNumber)}
color="primary"
variant="outline"
size="sm"
>
<CIcon name="cil-sync" content={cilSync} size="sm" />
</CButton>
</td>

15
src/pages/DevicePage/ActionModalWidget.js
View File

@@ -118,15 +118,10 @@ const ActionModalWidget = ({ show, toggleModal, title, directions, action, extra
<h6>{directions}</h6>
<CRow style={{ marginTop: '20px' }}>
<CCol>
<CButton
onClick={() => doAction(true)}
disabled={waiting}
block
color="primary"
>
{waiting && doingNow ? 'Loading...' : 'Do Now!'}
<CSpinner hidden={!waiting || !doingNow} component="span" size="sm" />
</CButton>
<CButton onClick={() => doAction(true)} disabled={waiting} block color="primary">
{waiting && doingNow ? 'Loading...' : 'Do Now!'}
<CSpinner hidden={!waiting || !doingNow} component="span" size="sm" />
</CButton>
</CCol>
<CCol>
<CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
@@ -155,7 +150,7 @@ const ActionModalWidget = ({ show, toggleModal, title, directions, action, extra
<div hidden={!hadSuccess && !hadFailure}>
<div>
<pre className='ignore'>{responseBody}</pre>
<pre className="ignore">{responseBody}</pre>
</div>
</div>
</CModalBody>

394
src/pages/DevicePage/BlinkModalWidget.js
View File

@@ -1,17 +1,17 @@
import {
CButton,
CModal,
CModalHeader,
CModalTitle,
CModalBody,
CModalFooter,
CSpinner,
CCol,
CRow,
CForm,
CFormGroup,
CInputRadio,
CLabel
CButton,
CModal,
CModalHeader,
CModalTitle,
CModalBody,
CModalFooter,
CSpinner,
CCol,
CRow,
CForm,
CFormGroup,
CInputRadio,
CLabel,
} from '@coreui/react';
import React, { useState, useEffect } from 'react';
import DatePicker from 'react-widgets/DatePicker';
@@ -21,181 +21,195 @@ import 'react-widgets/styles.css';
import { getToken } from '../../utils/authHelper';
import axiosInstance from '../../utils/axiosInstance';
const BlinkModalWidget = ({show, toggleModal}) => {
const [hadSuccess, setHadSuccess] = useState(false);
const [hadFailure, setHadFailure] = useState(false);
const [doingNow, setDoingNow] = useState(false);
const [waiting, setWaiting] = useState(false);
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 = () => {
const date = convertDateToUtc(new Date());
if (date.getHours() >= 3) {
date.setDate(date.getDate() + 1);
}
date.setHours(3);
date.setMinutes(0);
setChosenDate(convertDateFromUtc(date).toString());
};
const setDate = (date) => {
if (date) {
setChosenDate(date.toString());
}
};
const confirmingIfSure = () => {
setCheckingIfSure(true);
};
useEffect(() => {
setHadSuccess(false);
setHadFailure(false);
setWaiting(false);
setChosenDate(new Date().toString());
setResponseBody('');
setPattern('on');
setCheckingIfSure(false);
setDoingNow(false);
}, [show]);
const doAction = (isNow) => {
setDoingNow(isNow);
setHadFailure(false);
setHadSuccess(false);
setWaiting(true);
const token = getToken();
const utcDate = new Date(chosenDate);
const utcDateString = utcDate.toISOString();
const parameters = {
serialNumber: selectedDeviceId,
when: isNow ? '' : utcDateString,
pattern: chosenPattern,
duration: 30
};
const headers = {
Accept: 'application/json',
Authorization: `Bearer ${token}`,
};
axiosInstance
.post(`/device/${selectedDeviceId}/leds`, parameters, { headers })
.then(() => {
setResponseBody('Command submitted!');
setHadSuccess(true);
})
.catch(() => {
setResponseBody('Error while submitting command!');
setHadFailure(true);
})
.finally(() => {
setDoingNow(false);
setCheckingIfSure(false);
setWaiting(false);
});
};
return (
<CModal show={show} onClose={toggleModal}>
<CModalHeader closeButton>
<CModalTitle>LEDs of Device</CModalTitle>
</CModalHeader>
<CModalBody>
<h6>When would you like make the LEDs of this device blink?</h6>
<CRow style={{ marginTop: '20px' }}>
<CCol>
<CButton
onClick={() => doAction(true)}
disabled={waiting}
block
color="primary"
>
{waiting && doingNow ? 'Loading...' : 'Do Now!'}
<CSpinner hidden={!waiting || !doingNow} component="span" size="sm" />
</CButton>
</CCol>
<CCol>
<CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
Later tonight
</CButton>
</CCol>
</CRow>
<CRow style={{ marginTop: '20px' }}>
<CCol md="4" style={{ marginTop: '7px' }}>
<p>Date:</p>
</CCol>
<CCol xs="12" md="8">
<DatePicker
selected={new Date(chosenDate)}
includeTime
value={new Date(chosenDate)}
placeholder="Select custom date"
disabled={waiting}
onChange={(date) => setDate(date)}
min={convertDateToUtc(new Date())}
/>
</CCol>
</CRow>
<CRow style={{ marginTop: '20px' }}>
<CCol md="7">
Choose a pattern you would like to use:
</CCol>
<CCol>
<CForm>
<CFormGroup variant="checkbox" onClick={() => setPattern('on')}>
<CInputRadio defaultChecked={chosenPattern === 'on'} id="radio1" name="radios" value="option1" />
<CLabel variant="checkbox" htmlFor="radio1">On</CLabel>
</CFormGroup>
<CFormGroup variant="checkbox" onClick={() => setPattern('off')}>
<CInputRadio defaultChecked={chosenPattern === 'off'} id="radio2" name="radios" value="option2" />
<CLabel variant="checkbox" htmlFor="radio2">Off</CLabel>
</CFormGroup>
<CFormGroup variant="checkbox" onClick={() => setPattern('blink')}>
<CInputRadio defaultChecked={chosenPattern === 'blink'} id="radio2" name="radios" value="option2" />
<CLabel variant="checkbox" htmlFor="radio2">Blink</CLabel>
</CFormGroup>
</CForm>
</CCol>
</CRow>
<div hidden={!hadSuccess && !hadFailure}>
<div>
<pre className='ignore'>{responseBody}</pre>
</div>
</div>
</CModalBody>
<CModalFooter>
<div hidden={!checkingIfSure}>Are you sure?</div>
<CButton
disabled={waiting}
hidden={checkingIfSure}
color="primary"
onClick={() => confirmingIfSure()}
>
Schedule
</CButton>
<CButton
hidden={!checkingIfSure}
disabled={waiting}
color="primary"
onClick={() => doAction(false)}
>
{waiting && !doingNow ? 'Loading...' : 'Yes'} {' '}
<CSpinner hidden={!waiting || doingNow} component="span" size="sm" />
</CButton>
<CButton color="secondary" onClick={toggleModal}>
Cancel
</CButton>
</CModalFooter>
</CModal>
);
}
const BlinkModalWidget = ({ show, toggleModal }) => {
const [hadSuccess, setHadSuccess] = useState(false);
const [hadFailure, setHadFailure] = useState(false);
const [doingNow, setDoingNow] = useState(false);
const [waiting, setWaiting] = useState(false);
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);
export default BlinkModalWidget;
const setDateToLate = () => {
const date = convertDateToUtc(new Date());
if (date.getHours() >= 3) {
date.setDate(date.getDate() + 1);
}
date.setHours(3);
date.setMinutes(0);
setChosenDate(convertDateFromUtc(date).toString());
};
const setDate = (date) => {
if (date) {
setChosenDate(date.toString());
}
};
const confirmingIfSure = () => {
setCheckingIfSure(true);
};
useEffect(() => {
setHadSuccess(false);
setHadFailure(false);
setWaiting(false);
setChosenDate(new Date().toString());
setResponseBody('');
setPattern('on');
setCheckingIfSure(false);
setDoingNow(false);
}, [show]);
const doAction = (isNow) => {
setDoingNow(isNow);
setHadFailure(false);
setHadSuccess(false);
setWaiting(true);
const token = getToken();
const utcDate = new Date(chosenDate);
const utcDateString = utcDate.toISOString();
const parameters = {
serialNumber: selectedDeviceId,
when: isNow ? '' : utcDateString,
pattern: chosenPattern,
duration: 30,
};
const headers = {
Accept: 'application/json',
Authorization: `Bearer ${token}`,
};
axiosInstance
.post(`/device/${selectedDeviceId}/leds`, parameters, { headers })
.then(() => {
setResponseBody('Command submitted!');
setHadSuccess(true);
})
.catch(() => {
setResponseBody('Error while submitting command!');
setHadFailure(true);
})
.finally(() => {
setDoingNow(false);
setCheckingIfSure(false);
setWaiting(false);
});
};
return (
<CModal show={show} onClose={toggleModal}>
<CModalHeader closeButton>
<CModalTitle>LEDs of Device</CModalTitle>
</CModalHeader>
<CModalBody>
<h6>When would you like make the LEDs of this device blink?</h6>
<CRow style={{ marginTop: '20px' }}>
<CCol>
<CButton onClick={() => doAction(true)} disabled={waiting} block color="primary">
{waiting && doingNow ? 'Loading...' : 'Do Now!'}
<CSpinner hidden={!waiting || !doingNow} component="span" size="sm" />
</CButton>
</CCol>
<CCol>
<CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
Later tonight
</CButton>
</CCol>
</CRow>
<CRow style={{ marginTop: '20px' }}>
<CCol md="4" style={{ marginTop: '7px' }}>
<p>Date:</p>
</CCol>
<CCol xs="12" md="8">
<DatePicker
selected={new Date(chosenDate)}
includeTime
value={new Date(chosenDate)}
placeholder="Select custom date"
disabled={waiting}
onChange={(date) => setDate(date)}
min={convertDateToUtc(new Date())}
/>
</CCol>
</CRow>
<CRow style={{ marginTop: '20px' }}>
<CCol md="7">Choose a pattern you would like to use:</CCol>
<CCol>
<CForm>
<CFormGroup variant="checkbox" onClick={() => setPattern('on')}>
<CInputRadio
defaultChecked={chosenPattern === 'on'}
id="radio1"
name="radios"
value="option1"
/>
<CLabel variant="checkbox" htmlFor="radio1">
On
</CLabel>
</CFormGroup>
<CFormGroup variant="checkbox" onClick={() => setPattern('off')}>
<CInputRadio
defaultChecked={chosenPattern === 'off'}
id="radio2"
name="radios"
value="option2"
/>
<CLabel variant="checkbox" htmlFor="radio2">
Off
</CLabel>
</CFormGroup>
<CFormGroup variant="checkbox" onClick={() => setPattern('blink')}>
<CInputRadio
defaultChecked={chosenPattern === 'blink'}
id="radio2"
name="radios"
value="option2"
/>
<CLabel variant="checkbox" htmlFor="radio2">
Blink
</CLabel>
</CFormGroup>
</CForm>
</CCol>
</CRow>
<div hidden={!hadSuccess && !hadFailure}>
<div>
<pre className="ignore">{responseBody}</pre>
</div>
</div>
</CModalBody>
<CModalFooter>
<div hidden={!checkingIfSure}>Are you sure?</div>
<CButton
disabled={waiting}
hidden={checkingIfSure}
color="primary"
onClick={() => confirmingIfSure()}
>
Schedule
</CButton>
<CButton
hidden={!checkingIfSure}
disabled={waiting}
color="primary"
onClick={() => doAction(false)}
>
{waiting && !doingNow ? 'Loading...' : 'Yes'} {' '}
<CSpinner hidden={!waiting || doingNow} component="span" size="sm" />
</CButton>
<CButton color="secondary" onClick={toggleModal}>
Cancel
</CButton>
</CModalFooter>
</CModal>
);
};
export default BlinkModalWidget;

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

@@ -82,10 +82,10 @@ const DeviceActions = () => {
actionLabel="reboot"
action="reboot"
/>
<BlinkModalWidget show={showBlinkModal} toggleModal={toggleBlinkModal}/>
<BlinkModalWidget show={showBlinkModal} toggleModal={toggleBlinkModal} />
<FirmwareUpgradeModal show={showUpgradeModal} toggleModal={toggleUpgradeModal} />
<TraceModalWidget show={showTraceModal} toggleModal={toggleTraceModal} />
<WifiScanModalWidget show={showScanModal} toggleModal={toggleScanModal} />
<WifiScanModalWidget show={showScanModal} toggleModal={toggleScanModal} />
</CCard>
);
};

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

@@ -18,7 +18,7 @@ import axiosInstance from '../../utils/axiosInstance';
import { getToken } from '../../utils/authHelper';
import WifiScanResultModalWidget from './WifiScanResultModal';
const DeviceCommands = ({selectedDeviceId}) => {
const DeviceCommands = ({ selectedDeviceId }) => {
const [showModal, setShowModal] = useState(false);
const [chosenWifiScan, setChosenWifiScan] = useState(null);
const [scanDate, setScanDate] = useState('');
@@ -40,11 +40,11 @@ const DeviceCommands = ({selectedDeviceId}) => {
const modifyStart = (value) => {
setStart(value);
}
};
const modifyEnd = (value) => {
setEnd(value);
}
};
const getCommands = () => {
setLoading(true);
@@ -67,26 +67,24 @@ const DeviceCommands = ({selectedDeviceId}) => {
.then((response) => {
setCommands(response.data.commands);
})
.catch(() => {
})
.catch(() => {})
.finally(() => {
setLoading(false);
});
};
const toggleDetails = (item, index) => {
if(item.command !== 'wifiscan' || !item.results.status){
if (item.command !== 'wifiscan' || !item.results.status) {
const position = details.indexOf(index);
let newDetails = details.slice();
if (position !== -1) {
newDetails.splice(position, 1);
} else {
newDetails = [...details, index];
}
setDetails(newDetails);
}
else{
} else {
setChosenWifiScan(item.results.status.scan.scan);
setScanDate(item.completed);
console.log(scanDate);
@@ -96,20 +94,16 @@ const DeviceCommands = ({selectedDeviceId}) => {
const refreshCommands = () => {
setEnd(new Date());
}
};
const getDetails = (command, commandDetails) => {
if (command === 'reboot' || command === 'leds'){
if (command === 'reboot' || command === 'leds') {
const result = commandDetails.results;
if(result)
return (
<pre className='ignore'>{JSON.stringify(result, null, 4)}</pre>
);
if (result) return <pre className="ignore">{JSON.stringify(result, null, 4)}</pre>;
}
return <pre className='ignore'>{JSON.stringify(commandDetails, null, 4)}</pre>
}
return <pre className="ignore">{JSON.stringify(commandDetails, null, 4)}</pre>;
};
const columns = [
{ key: 'UUID', label: 'Id' },
{ key: 'command' },
@@ -124,13 +118,13 @@ const DeviceCommands = ({selectedDeviceId}) => {
];
useEffect(() => {
if(selectedDeviceId){
if (selectedDeviceId) {
getCommands();
}
}, [selectedDeviceId, start, end]);
}, [selectedDeviceId, start, end]);
useEffect(() => {
if(selectedDeviceId){
if (selectedDeviceId) {
setStart(addDays(new Date(), -3).toString());
setEnd(new Date().toString());
getCommands();
@@ -139,23 +133,23 @@ const DeviceCommands = ({selectedDeviceId}) => {
return (
<CWidgetDropdown
inverse='true'
inverse="true"
color="gradient-primary"
header="Device Commands"
footerSlot={
<div style={{ padding: '20px' }}>
<CCollapse show={collapse}>
<CRow>
<CCol/>
<CCol />
<CCol>
<div style={{float: 'right'}}>
<CButton onClick={() => refreshCommands()} size="sm">
<CIcon
name="cil-sync"
content={cilSync}
<div style={{ float: 'right' }}>
<CButton onClick={() => refreshCommands()} size="sm">
<CIcon
name="cil-sync"
content={cilSync}
style={{ color: 'white' }}
size="2xl"
/>
size="2xl"
/>
</CButton>
</div>
</CCol>
@@ -190,12 +184,18 @@ const DeviceCommands = ({selectedDeviceId}) => {
border
sorterValue={{ column: 'completed', desc: 'true' }}
scopedSlots={{
completed: (item) => <td>{(item.completed && item.completed !== "") ? prettyDate(item.completed) : 'Pending'}</td>,
completed: (item) => (
<td>
{item.completed && item.completed !== ''
? prettyDate(item.completed)
: 'Pending'}
</td>
),
show_details: (item, index) => (
<td className="py-2">
<CButton
color="primary"
variant={details.includes(index) ? "" : "outline"}
variant={details.includes(index) ? '' : 'outline'}
shape="square"
size="sm"
onClick={() => {
@@ -210,9 +210,7 @@ const DeviceCommands = ({selectedDeviceId}) => {
<CCollapse show={details.includes(index)}>
<CCardBody>
<h5>Details</h5>
<div>
{getDetails(item.command, item)}
</div>
<div>{getDetails(item.command, item)}</div>
</CCardBody>
</CCollapse>
),
@@ -231,7 +229,12 @@ const DeviceCommands = ({selectedDeviceId}) => {
</div>
}
>
<WifiScanResultModalWidget show={showModal} toggle={toggleModal} scanResults={chosenWifiScan} date={scanDate}/>
<WifiScanResultModalWidget
show={showModal}
toggle={toggleModal}
scanResults={chosenWifiScan}
date={scanDate}
/>
<CIcon name="cilNotes" style={{ color: 'white' }} size="lg" />
</CWidgetDropdown>
);

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

@@ -17,7 +17,7 @@ import { cleanTimestamp } from '../../utils/helper';
import axiosInstance from '../../utils/axiosInstance';
import { getToken } from '../../utils/authHelper';
const DeviceConfiguration = ({selectedDeviceId}) => {
const DeviceConfiguration = ({ selectedDeviceId }) => {
const [collapse, setCollapse] = useState(false);
const [device, setDevice] = useState(null);
@@ -39,13 +39,11 @@ const DeviceConfiguration = ({selectedDeviceId}) => {
.then((response) => {
setDevice(response.data);
})
.catch(() => {
});
.catch(() => {});
};
useEffect(() => {
if(selectedDeviceId)
getDevice();
if (selectedDeviceId) getDevice();
}, [selectedDeviceId]);
if (device) {
@@ -145,7 +143,12 @@ const DeviceConfiguration = ({selectedDeviceId}) => {
</CFormGroup>
</CCollapse>
<CCardFooter>
<CButton show={collapse ? 'true' : 'false'} color="transparent" onClick={toggle} block>
<CButton
show={collapse ? 'true' : 'false'}
color="transparent"
onClick={toggle}
block
>
<CIcon name={collapse ? 'cilChevronTop' : 'cilChevronBottom'} size="lg" />
</CButton>
</CCardFooter>

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

@@ -9,7 +9,7 @@ import {
CCardBody,
CRow,
CCol,
CProgress
CProgress,
} from '@coreui/react';
import CIcon from '@coreui/icons-react';
import DatePicker from 'react-widgets/DatePicker';
@@ -17,7 +17,7 @@ import { prettyDate, addDays } from '../../utils/helper';
import axiosInstance from '../../utils/axiosInstance';
import { getToken } from '../../utils/authHelper';
const DeviceHealth = ({selectedDeviceId}) => {
const DeviceHealth = ({ selectedDeviceId }) => {
const [collapse, setCollapse] = useState(false);
const [details, setDetails] = useState([]);
const [loading, setLoading] = useState(false);
@@ -34,11 +34,11 @@ const DeviceHealth = ({selectedDeviceId}) => {
const modifyStart = (value) => {
setStart(value);
}
};
const modifyEnd = (value) => {
setEnd(value);
}
};
const getDeviceHealth = () => {
setLoading(true);
@@ -61,8 +61,7 @@ const DeviceHealth = ({selectedDeviceId}) => {
.then((response) => {
setHealthChecks(response.data.values);
})
.catch(() => {
})
.catch(() => {})
.finally(() => {
setLoading(false);
});
@@ -95,19 +94,17 @@ const DeviceHealth = ({selectedDeviceId}) => {
];
useEffect(() => {
if(selectedDeviceId){
if (selectedDeviceId) {
getDeviceHealth();
}
}, [selectedDeviceId, start, end]);
if (healthChecks && healthChecks.length > 0) {
sanityLevel = healthChecks[healthChecks.length-1].sanity;
sanityLevel = healthChecks[healthChecks.length - 1].sanity;
if (sanityLevel === 100) barColor = 'gradient-success';
else if (sanityLevel >= 90) barColor = 'gradient-warning';
else barColor = 'gradient-danger';
}
else{
} else {
sanityLevel = 0;
barColor = 'gradient-dark';
}
@@ -121,7 +118,7 @@ const DeviceHealth = ({selectedDeviceId}) => {
inverse="true"
footerSlot={
<div style={{ padding: '20px' }}>
<CProgress style={{marginBottom: '20px'}} color="white" value={sanityLevel ?? 0} />
<CProgress style={{ marginBottom: '20px' }} color="white" value={sanityLevel ?? 0} />
<CCollapse show={collapse}>
<CRow style={{ marginBottom: '10px' }}>
<CCol>
@@ -163,7 +160,7 @@ const DeviceHealth = ({selectedDeviceId}) => {
<td className="py-2">
<CButton
color="primary"
variant={details.includes(index) ? "" : "outline"}
variant={details.includes(index) ? '' : 'outline'}
shape="square"
size="sm"
onClick={() => {
@@ -180,7 +177,7 @@ const DeviceHealth = ({selectedDeviceId}) => {
<CCardBody>
<h5>Details</h5>
<div>
<pre className='ignore'>{JSON.stringify(item.values, null, 4)}</pre>
<pre className="ignore">{JSON.stringify(item.values, null, 4)}</pre>
</div>
</CCardBody>
</CCollapse>

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

@@ -16,7 +16,7 @@ import { addDays, prettyDate } from '../../utils/helper';
import axiosInstance from '../../utils/axiosInstance';
import { getToken } from '../../utils/authHelper';
const DeviceLogs = ({selectedDeviceId}) => {
const DeviceLogs = ({ selectedDeviceId }) => {
const [collapse, setCollapse] = useState(false);
const [details, setDetails] = useState([]);
const [loading, setLoading] = useState(false);
@@ -31,11 +31,11 @@ const DeviceLogs = ({selectedDeviceId}) => {
const modifyStart = (value) => {
setStart(value);
}
};
const modifyEnd = (value) => {
setEnd(value);
}
};
const getLogs = () => {
setLoading(true);
@@ -58,8 +58,7 @@ const DeviceLogs = ({selectedDeviceId}) => {
.then((response) => {
setLogs(response.data.values);
})
.catch(() => {
})
.catch(() => {})
.finally(() => {
setLoading(false);
});
@@ -89,16 +88,16 @@ const DeviceLogs = ({selectedDeviceId}) => {
filter: false,
},
];
useEffect(() => {
if(selectedDeviceId){
if (selectedDeviceId) {
getLogs();
}
}, [start, end, selectedDeviceId]);
return (
<CWidgetDropdown
inverse='true'
inverse="true"
color="gradient-info"
header="Device Logs"
footerSlot={
@@ -139,7 +138,7 @@ const DeviceLogs = ({selectedDeviceId}) => {
<td className="py-2">
<CButton
color="primary"
variant={details.includes(index) ? "" : "outline"}
variant={details.includes(index) ? '' : 'outline'}
shape="square"
size="sm"
onClick={() => {
@@ -155,7 +154,7 @@ const DeviceLogs = ({selectedDeviceId}) => {
<CCardBody>
<h5>Details</h5>
<div>
<pre className='ignore'>{JSON.stringify(item, null, 4)}</pre>
<pre className="ignore">{JSON.stringify(item, null, 4)}</pre>
</div>
</CCardBody>
</CCollapse>

15
src/pages/DevicePage/DevicePage.js
View File

@@ -11,11 +11,10 @@ import DeviceLogs from './DeviceLogs';
const DevicePage = () => {
const dispatch = useDispatch();
const { deviceId } = useParams();
const { deviceId } = useParams();
useEffect(() => {
if(deviceId)
dispatch({ type: 'set', selectedDeviceId: deviceId });
if (deviceId) dispatch({ type: 'set', selectedDeviceId: deviceId });
}, [deviceId]);
return (
@@ -23,13 +22,13 @@ const DevicePage = () => {
<div className="App">
<CRow>
<CCol xs="12" sm="6">
<DeviceConfiguration selectedDeviceId = {deviceId} />
<DeviceCommands selectedDeviceId = {deviceId} />
<DeviceConfiguration selectedDeviceId={deviceId} />
<DeviceCommands selectedDeviceId={deviceId} />
</CCol>
<CCol xs="12" sm="6">
<DeviceLogs selectedDeviceId = {deviceId} />
<DeviceHealth selectedDeviceId = {deviceId} />
<DeviceActions selectedDeviceId = {deviceId} />
<DeviceLogs selectedDeviceId={deviceId} />
<DeviceHealth selectedDeviceId={deviceId} />
<DeviceActions selectedDeviceId={deviceId} />
</CCol>
</CRow>
</div>

42
src/pages/DevicePage/FirmwareUpgradeModal.js
View File

@@ -69,7 +69,7 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
const confirmingIfNow = () => {
setCheckingIfNow(true);
}
};
useEffect(() => {
setHadSuccess(false);
@@ -137,25 +137,25 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
<h6>Choose a time and a firmware version for this device</h6>
<CRow style={{ marginTop: '20px' }}>
<CCol>
<CButton
color="primary"
onClick={() => formValidation() ? confirmingIfNow() : null}
disabled={waiting}
hidden={checkingIfNow}
block
>
Do Now!
</CButton>
<CButton
color="primary"
onClick={() => formValidation() ? postUpgrade(true) : null}
disabled={waiting}
hidden={!checkingIfNow}
block
>
{waiting && doingNow ? 'Loading...' : 'Confirm'}
<CSpinner hidden={!waiting || doingNow} component="span" size="sm" />
</CButton>
<CButton
color="primary"
onClick={() => (formValidation() ? confirmingIfNow() : null)}
disabled={waiting}
hidden={checkingIfNow}
block
>
Do Now!
</CButton>
<CButton
color="primary"
onClick={() => (formValidation() ? postUpgrade(true) : null)}
disabled={waiting}
hidden={!checkingIfNow}
block
>
{waiting && doingNow ? 'Loading...' : 'Confirm'}
<CSpinner hidden={!waiting || doingNow} component="span" size="sm" />
</CButton>
</CCol>
<CCol>
<CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
@@ -196,7 +196,7 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
<CInvalidFeedback>You need a url...</CInvalidFeedback>
<div hidden={!hadSuccess && !hadFailure}>
<div>
<pre className='ignore'>{responseBody}</pre>
<pre className="ignore">{responseBody}</pre>
</div>
</div>
</CModalBody>

42
src/pages/DevicePage/TraceModalWidget.js
View File

@@ -8,9 +8,9 @@ import {
CSpinner,
CBadge,
CCol,
CRow,
CRow,
CInvalidFeedback,
CSelect
CSelect,
} from '@coreui/react';
import React, { useState, useEffect } from 'react';
import DatePicker from 'react-widgets/DatePicker';
@@ -63,7 +63,7 @@ const TraceModalWidget = ({ show, toggleModal }) => {
const now = new Date();
let utcDateString = dateChosen.toISOString();
if(dateChosen <= now){
if (dateChosen <= now) {
const newDate = new Date();
newDate.setSeconds(newDate.getSeconds() + 60);
utcDateString = newDate.toISOString();
@@ -72,7 +72,7 @@ const TraceModalWidget = ({ show, toggleModal }) => {
const parameters = {
serialNumber: selectedDeviceId,
when: dateChosen <= now ? '' : utcDateString,
network: 'lan'
network: 'lan',
};
if (usingDuration) {
@@ -140,17 +140,33 @@ const TraceModalWidget = ({ show, toggleModal }) => {
<CCol xs="12" md="8">
{usingDuration ? (
<CSelect defaultValue="duration" disabled={waiting}>
<option value="20" onClick={() => setDuration(20)}>20s</option>
<option value="40" onClick={() => setDuration(40)}>40s</option>
<option value="60" onClick={() => setDuration(60)}>60s</option>
<option value="120" onClick={() => setDuration(120)}>120s</option>
<option value="20" onClick={() => setDuration(20)}>
20s
</option>
<option value="40" onClick={() => setDuration(40)}>
40s
</option>
<option value="60" onClick={() => setDuration(60)}>
60s
</option>
<option value="120" onClick={() => setDuration(120)}>
120s
</option>
</CSelect>
) : (
<CSelect defaultValue={packets} disabled={waiting}>
<option value="100" onClick={() => setPackets(100)}>100</option>
<option value="250" onClick={() => setPackets(250)}>250</option>
<option value="500" onClick={() => setPackets(500)}>500</option>
<option value="1000" onClick={() => setPackets(1000)}>1000</option>
<option value="100" onClick={() => setPackets(100)}>
100
</option>
<option value="250" onClick={() => setPackets(250)}>
250
</option>
<option value="500" onClick={() => setPackets(500)}>
500
</option>
<option value="1000" onClick={() => setPackets(1000)}>
1000
</option>
</CSelect>
)}
</CCol>
@@ -175,7 +191,7 @@ const TraceModalWidget = ({ show, toggleModal }) => {
<div hidden={!hadSuccess && !hadFailure}>
<div>
<pre className='ignore'>{responseBody} </pre>
<pre className="ignore">{responseBody} </pre>
</div>
</div>
</CModalBody>

47
src/pages/DevicePage/WifiChannelCard.js
View File

@@ -1,37 +1,22 @@
import {
CCard,
CCardTitle,
CCardBody,
CDataTable,
CCardHeader
} from '@coreui/react';
import { CCard, CCardTitle, CCardBody, CDataTable, CCardHeader } from '@coreui/react';
import React from 'react';
import 'react-widgets/styles.css';
const WifiChannelCard = ({ channel }) => {
const columns = [
{ key: 'SSID', _style: { width: '70%' }},
{ key: 'Signal' },
];
const columns = [{ key: 'SSID', _style: { width: '70%' } }, { key: 'Signal' }];
return (
<CCard>
<CCardHeader>
<CCardTitle style={{color:'black'}}>
Channel #{channel.channel}
</CCardTitle>
</CCardHeader>
<CCardBody>
<div className="overflow-auto" style={{ height: '250px' }}>
<CDataTable
items={channel.devices}
fields={columns}
style={{ color: 'white' }}
/>
</div>
</CCardBody>
</CCard>
);
}
return (
<CCard>
<CCardHeader>
<CCardTitle style={{ color: 'black' }}>Channel #{channel.channel}</CCardTitle>
</CCardHeader>
<CCardBody>
<div className="overflow-auto" style={{ height: '250px' }}>
<CDataTable items={channel.devices} fields={columns} style={{ color: 'white' }} />
</div>
</CCardBody>
</CCard>
);
};
export default WifiChannelCard;
export default WifiChannelCard;

60
src/pages/DevicePage/WifiChannelTable.js
View File

@@ -1,41 +1,33 @@
import {
CCol,
CRow
} from '@coreui/react';
import { CCol, CRow } from '@coreui/react';
import React, { useEffect } from 'react';
import { v4 as createUuid } from 'uuid';
import WifiChannelCard from './WifiChannelCard';
const WifiChannelTable = ({channels}) => {
const sortChannels = () => {
channels.sort((a, b) => (a.channel > b.channel) ? 1 : -1);
};
const WifiChannelTable = ({ channels }) => {
const sortChannels = () => {
channels.sort((a, b) => (a.channel > b.channel ? 1 : -1));
};
useEffect(() => {
if (channels)
sortChannels();
}, [channels]);
useEffect(() => {
if (channels) sortChannels();
}, [channels]);
return (
<CRow>
<CCol>
{
channels.map((channel, index) => {
if(index % 2 === 0) return <WifiChannelCard key={createUuid()} channel={channel}/>;
return <div key={createUuid()}/>
})
}
</CCol>
<CCol>
{
channels.map((channel, index) => {
if(index % 2 === 1) return <WifiChannelCard key={createUuid()} channel={channel}/>;
return <div key={createUuid()}/>
})
}
</CCol>
</CRow>
);
}
return (
<CRow>
<CCol>
{channels.map((channel, index) => {
if (index % 2 === 0) return <WifiChannelCard key={createUuid()} channel={channel} />;
return <div key={createUuid()} />;
})}
</CCol>
<CCol>
{channels.map((channel, index) => {
if (index % 2 === 1) return <WifiChannelCard key={createUuid()} channel={channel} />;
return <div key={createUuid()} />;
})}
</CCol>
</CRow>
);
};
export default WifiChannelTable;
export default WifiChannelTable;

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

@@ -1,162 +1,171 @@
import {
CButton,
CModal,
CModalHeader,
CModalTitle,
CModalBody,
CModalFooter,
CSpinner,
CRow,
CFormGroup,
CInputRadio,
CLabel,
CForm
} from '@coreui/react';
import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import WifiChannelTable from './WifiChannelTable';
import 'react-widgets/styles.css';
import { getToken } from '../../utils/authHelper';
import axiosInstance from '../../utils/axiosInstance';
const WifiScanModalWidget = ({ show, toggleModal }) => {
const [hadSuccess, setHadSuccess] = useState(false);
const [hadFailure, setHadFailure] = useState(false);
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);
CButton,
CModal,
CModalHeader,
CModalTitle,
CModalBody,
CModalFooter,
CSpinner,
CRow,
CFormGroup,
CInputRadio,
CLabel,
CForm,
} from '@coreui/react';
import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import WifiChannelTable from './WifiChannelTable';
import 'react-widgets/styles.css';
import { getToken } from '../../utils/authHelper';
import axiosInstance from '../../utils/axiosInstance';
const confirmingIfSure = () => {
setCheckingIfSure(true);
};
useEffect(() => {
setHadSuccess(false);
setHadFailure(false);
setWaiting(false);
setChannelList([]);
setCheckingIfSure(false);
setVerbose(true);
}, [show]);
const parseThroughList = (scanList) => {
const dbmNumber = 4294967295;
const listOfChannels = [];
const WifiScanModalWidget = ({ show, toggleModal }) => {
const [hadSuccess, setHadSuccess] = useState(false);
const [hadFailure, setHadFailure] = useState(false);
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);
scanList.forEach((scan) => {
if(!listOfChannels.includes(scan.channel)){
listOfChannels.push(scan.channel);
}
});
const finalList = [];
listOfChannels.forEach((channelNumber) => {
const channel = {
channel: channelNumber,
devices: []
};
scanList.forEach((device) => {
if(device.channel === channelNumber){
const deviceToAdd = {};
deviceToAdd.SSID = device.ssid ?? 'N/A';
deviceToAdd.Signal = (dbmNumber - device.signal) * -1;
channel.devices.push(deviceToAdd);
}
});
finalList.push(channel);
});
return finalList;
}
const doAction = () => {
setHadFailure(false);
setHadSuccess(false);
setWaiting(true);
const token = getToken();
const parameters = {
serialNumber: selectedDeviceId,
verbose: choseVerbose
};
const headers = {
Accept: 'application/json',
Authorization: `Bearer ${token}`,
};
axiosInstance
.post(`/device/${selectedDeviceId}/wifiscan`, parameters, { headers })
.then((response) => {
const scanList = response.data.results.status.scan.scan;
if(scanList){
setChannelList(parseThroughList(scanList));
setHadSuccess(true);
}
else{
setHadFailure(true);
}
})
.catch(() => {
setHadFailure(true);
})
.finally(() => {
setCheckingIfSure(false);
setWaiting(false);
});
};
return (
<CModal size="lg" show={show} onClose={toggleModal}>
<CModalHeader closeButton>
<CModalTitle>Wifi Scan</CModalTitle>
</CModalHeader>
<CModalBody>
<h6>
Launch a wifi scan of this device, which should take approximately 25 seconds.
</h6>
<CRow style={{ marginTop: '20px' }}>
<CForm style={{paddingLeft: '5%'}}>
<CFormGroup variant="checkbox" onClick={() => setVerbose(true)}>
<CInputRadio defaultChecked={choseVerbose} id="radio1" name="radios" value="option1" />
<CLabel variant="checkbox" htmlFor="radio1">With verbose</CLabel>
</CFormGroup>
<CFormGroup variant="checkbox" onClick={() => setVerbose(false)}>
<CInputRadio defaultChecked={!choseVerbose} id="radio2" name="radios" value="option2" />
<CLabel variant="checkbox" htmlFor="radio2">Without verbose</CLabel>
</CFormGroup>
</CForm>
</CRow>
<div style={{marginTop: '3%'}} hidden={!hadSuccess && !hadFailure}>
<WifiChannelTable channels={channelList}/>
</div>
</CModalBody>
<CModalFooter>
<div hidden={!checkingIfSure}>Are you sure?</div>
<CButton hidden={checkingIfSure} color="primary" onClick={() => confirmingIfSure()}>
{(hadSuccess || hadFailure) ? 'Re-Scan' : 'Scan'}
</CButton>
<CButton
hidden={!checkingIfSure}
disabled={waiting}
color="primary"
onClick={() => doAction()}
>
{waiting ? 'Loading...' : 'Yes'} {' '}
<CSpinner hidden={!waiting} component="span" size="sm" />
</CButton>
<CButton color="secondary" onClick={toggleModal}>
Cancel
</CButton>
</CModalFooter>
</CModal>
);
const confirmingIfSure = () => {
setCheckingIfSure(true);
};
export default WifiScanModalWidget;
useEffect(() => {
setHadSuccess(false);
setHadFailure(false);
setWaiting(false);
setChannelList([]);
setCheckingIfSure(false);
setVerbose(true);
}, [show]);
const parseThroughList = (scanList) => {
const dbmNumber = 4294967295;
const listOfChannels = [];
scanList.forEach((scan) => {
if (!listOfChannels.includes(scan.channel)) {
listOfChannels.push(scan.channel);
}
});
const finalList = [];
listOfChannels.forEach((channelNumber) => {
const channel = {
channel: channelNumber,
devices: [],
};
scanList.forEach((device) => {
if (device.channel === channelNumber) {
const deviceToAdd = {};
deviceToAdd.SSID = device.ssid ?? 'N/A';
deviceToAdd.Signal = (dbmNumber - device.signal) * -1;
channel.devices.push(deviceToAdd);
}
});
finalList.push(channel);
});
return finalList;
};
const doAction = () => {
setHadFailure(false);
setHadSuccess(false);
setWaiting(true);
const token = getToken();
const parameters = {
serialNumber: selectedDeviceId,
verbose: choseVerbose,
};
const headers = {
Accept: 'application/json',
Authorization: `Bearer ${token}`,
};
axiosInstance
.post(`/device/${selectedDeviceId}/wifiscan`, parameters, { headers })
.then((response) => {
const scanList = response.data.results.status.scan.scan;
if (scanList) {
setChannelList(parseThroughList(scanList));
setHadSuccess(true);
} else {
setHadFailure(true);
}
})
.catch(() => {
setHadFailure(true);
})
.finally(() => {
setCheckingIfSure(false);
setWaiting(false);
});
};
return (
<CModal size="lg" show={show} onClose={toggleModal}>
<CModalHeader closeButton>
<CModalTitle>Wifi Scan</CModalTitle>
</CModalHeader>
<CModalBody>
<h6>Launch a wifi scan of this device, which should take approximately 25 seconds.</h6>
<CRow style={{ marginTop: '20px' }}>
<CForm style={{ paddingLeft: '5%' }}>
<CFormGroup variant="checkbox" onClick={() => setVerbose(true)}>
<CInputRadio
defaultChecked={choseVerbose}
id="radio1"
name="radios"
value="option1"
/>
<CLabel variant="checkbox" htmlFor="radio1">
With verbose
</CLabel>
</CFormGroup>
<CFormGroup variant="checkbox" onClick={() => setVerbose(false)}>
<CInputRadio
defaultChecked={!choseVerbose}
id="radio2"
name="radios"
value="option2"
/>
<CLabel variant="checkbox" htmlFor="radio2">
Without verbose
</CLabel>
</CFormGroup>
</CForm>
</CRow>
<div style={{ marginTop: '3%' }} hidden={!hadSuccess && !hadFailure}>
<WifiChannelTable channels={channelList} />
</div>
</CModalBody>
<CModalFooter>
<div hidden={!checkingIfSure}>Are you sure?</div>
<CButton hidden={checkingIfSure} color="primary" onClick={() => confirmingIfSure()}>
{hadSuccess || hadFailure ? 'Re-Scan' : 'Scan'}
</CButton>
<CButton
hidden={!checkingIfSure}
disabled={waiting}
color="primary"
onClick={() => doAction()}
>
{waiting ? 'Loading...' : 'Yes'} {' '}
<CSpinner hidden={!waiting} component="span" size="sm" />
</CButton>
<CButton color="secondary" onClick={toggleModal}>
Cancel
</CButton>
</CModalFooter>
</CModal>
);
};
export default WifiScanModalWidget;

102
src/pages/DevicePage/WifiScanResultModal.js
View File

@@ -6,56 +6,60 @@ import {
CModalHeader,
CModalBody,
CModalTitle,
CModalFooter
CModalFooter,
} from '@coreui/react';
import WifiChannelTable from './WifiChannelTable';
import { prettyDate } from '../../utils/helper';
const WifiScanResultModalWidget = ({show, toggle, scanResults, date}) => {
const parseThroughList = (scanList) => {
const dbmNumber = 4294967295;
const listOfChannels = [];
scanList.forEach((scan) => {
if(!listOfChannels.includes(scan.channel)){
listOfChannels.push(scan.channel);
}
});
const finalList = [];
listOfChannels.forEach((channelNumber) => {
const channel = {
channel: channelNumber,
devices: []
};
scanList.forEach((device) => {
if(device.channel === channelNumber){
const deviceToAdd = {};
deviceToAdd.SSID = device.ssid ?? 'N/A';
deviceToAdd.Signal = (dbmNumber - device.signal) * -1;
channel.devices.push(deviceToAdd);
}
});
finalList.push(channel);
});
return finalList;
}
return (
<CModal size="lg" show={show} onClose={toggle}>
<CModalHeader closeButton>
<CModalTitle style={{color: 'black'}}>{date !== '' ? prettyDate(date) : ''} Wifi Scan Results</CModalTitle>
</CModalHeader>
<CModalBody>
{scanResults === null ? null : <WifiChannelTable channels={parseThroughList(scanResults)}/>}
</CModalBody>
<CModalFooter>
<CButton color="secondary" onClick={toggle}>
Close
</CButton>
</CModalFooter>
</CModal>
);
}
export default WifiScanResultModalWidget;
const WifiScanResultModalWidget = ({ show, toggle, scanResults, date }) => {
const parseThroughList = (scanList) => {
const dbmNumber = 4294967295;
const listOfChannels = [];
scanList.forEach((scan) => {
if (!listOfChannels.includes(scan.channel)) {
listOfChannels.push(scan.channel);
}
});
const finalList = [];
listOfChannels.forEach((channelNumber) => {
const channel = {
channel: channelNumber,
devices: [],
};
scanList.forEach((device) => {
if (device.channel === channelNumber) {
const deviceToAdd = {};
deviceToAdd.SSID = device.ssid ?? 'N/A';
deviceToAdd.Signal = (dbmNumber - device.signal) * -1;
channel.devices.push(deviceToAdd);
}
});
finalList.push(channel);
});
return finalList;
};
return (
<CModal size="lg" show={show} onClose={toggle}>
<CModalHeader closeButton>
<CModalTitle style={{ color: 'black' }}>
{date !== '' ? prettyDate(date) : ''} Wifi Scan Results
</CModalTitle>
</CModalHeader>
<CModalBody>
{scanResults === null ? null : (
<WifiChannelTable channels={parseThroughList(scanResults)} />
)}
</CModalBody>
<CModalFooter>
<CButton color="secondary" onClick={toggle}>
Close
</CButton>
</CModalFooter>
</CModal>
);
};
export default WifiScanResultModalWidget;

9
src/pages/LoginPage/Login.js
View File

@@ -20,7 +20,7 @@ import CIcon from '@coreui/icons-react';
import { cilUser, cilLockLocked, cilLink } from '@coreui/icons';
import { useDispatch } from 'react-redux';
import axiosInstance from '../../utils/axiosInstance';
import logo from '../../assets/OpenWiFi_LogoLockup_DarkGreyColour.svg'
import logo from '../../assets/OpenWiFi_LogoLockup_DarkGreyColour.svg';
const Login = () => {
const dispatch = useDispatch();
@@ -92,7 +92,12 @@ const Login = () => {
<CContainer>
<CRow className="justify-content-center">
<CCol md="8">
<img className="c-sidebar-brand-full" src={logo} style={{ paddingLeft: '17%', width: '85%'}} alt="OpenWifi" />
<img
className="c-sidebar-brand-full"
src={logo}
style={{ paddingLeft: '17%', width: '85%' }}
alt="OpenWifi"
/>
<CCardGroup>
<CCard className="p-4">
<CCardBody>

4
src/scss/_custom.scss
View File

@@ -1,4 +1,4 @@
// Here you can add other styles
pre.ignore {
font-family: inherit;
}
font-family: inherit;
}

2
src/store.js
View File

@@ -3,7 +3,7 @@ import { createStore } from 'redux';
const initialState = {
sidebarShow: 'responsive',
connected: false,
selectedDeviceId: null
selectedDeviceId: null,
};
const changeState = (state = initialState, { type, ...rest }) => {

7
src/utils/axiosInstance.js
View File

@@ -4,11 +4,8 @@ import http from 'http';
import https from 'https';
const httpAgent = new http.Agent({ keepAlive: true });
const httpsAgent = new https.Agent({ keepAlive: true});
const axiosInstance = axios.create(
httpAgent,
httpsAgent
);
const httpsAgent = new https.Agent({ keepAlive: true });
const axiosInstance = axios.create(httpAgent, httpsAgent);
axiosRetry(axiosInstance, {
retries: 3,

10
src/utils/helper.js
View File

@@ -37,14 +37,16 @@ export const addDays = (date, days) => {
};
const prettyNumber = (number) => {
if (number >= 10){
if (number >= 10) {
return number;
}
return `0${number}`;
}
};
export const prettyDate = (dateString) => {
const date = new Date(dateString);
return `${date.getFullYear()}-${prettyNumber(date.getMonth() + 1)}-${prettyNumber(date.getDate())}
${prettyNumber(date.getHours())}:${prettyNumber(date.getMinutes())}:${prettyNumber(date.getSeconds())}`;
}
${prettyNumber(date.getHours())}:${prettyNumber(date.getMinutes())}:${prettyNumber(
date.getSeconds(),
)}`;
};