diff --git a/src/assets/icons/Mesh.png b/src/assets/icons/Mesh.png new file mode 100644 index 0000000..82b8f2d Binary files /dev/null and b/src/assets/icons/Mesh.png differ diff --git a/src/components/DeviceCommands.js b/src/components/DeviceCommands.js index 1c294db..94ab70c 100644 --- a/src/components/DeviceCommands.js +++ b/src/components/DeviceCommands.js @@ -16,9 +16,12 @@ import DatePicker from 'react-widgets/DatePicker'; import { prettyDate, addDays } from '../utils/helper'; import axiosInstance from '../utils/axiosInstance'; import { getToken } from '../utils/authHelper'; -import WifiChannelTable from './WifiChannels/WifiChannelTable'; +import WifiScanResultModalWidget from '../widgets/WifiScanResultModalWidget'; const DeviceCommands = () => { + const [showModal, setShowModal] = useState(false); + const [chosenWifiScan, setChosenWifiScan] = useState(null); + const [scanDate, setScanDate] = useState(''); const [collapse, setCollapse] = useState(false); const [details, setDetails] = useState([]); const [commands, setCommands] = useState([]); @@ -32,36 +35,10 @@ const DeviceCommands = () => { e.preventDefault(); }; - const parseThroughList = (scanList) => { - const dbmNumber = 4294967295; - const listOfChannels = []; + const toggleModal = () => { + setShowModal(!showModal); + }; - 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 getCommands = () => { setLoading(true); const utcStart = new Date(start).toISOString(); @@ -90,39 +67,40 @@ const DeviceCommands = () => { }); }; - const toggleDetails = (index) => { - const position = details.indexOf(index); - let newDetails = details.slice(); - - if (position !== -1) { - newDetails.splice(position, 1); - } else { - newDetails = [...details, index]; + const toggleDetails = (item, index) => { + if(item.command !== 'wifiscan'){ + const position = details.indexOf(index); + let newDetails = details.slice(); + + if (position !== -1) { + newDetails.splice(position, 1); + } else { + newDetails = [...details, index]; + } + setDetails(newDetails); + } + else{ + setChosenWifiScan(item.results.status.scan.scan); + setScanDate(item.completed); + console.log(scanDate); + setShowModal(true); } - setDetails(newDetails); }; const getDetails = (command, commandDetails) => { if (command === 'wifiscan') { - try{ - const scanList = commandDetails.results.status.scan.scan; - if(scanList) - return ( - - ); - } - catch(error) { - console.log(error); - } + return null; } - else if (command === 'reboot' || command === 'leds'){ + + if (command === 'reboot' || command === 'leds'){ const result = commandDetails.results; if(result) return (
{JSON.stringify(result, null, 4)}
); } - return
{JSON.stringify(commandDetails, null, 4)}
+ + return
{JSON.stringify(commandDetails, null, 4)}
} const columns = [ @@ -196,9 +174,8 @@ const DeviceCommands = () => { variant={details.includes(index) ? "" : "outline"} shape="square" size="sm" - onClick={() => { - toggleDetails(index); + toggleDetails(item, index); }} > @@ -230,6 +207,7 @@ const DeviceCommands = () => { } > + ); diff --git a/src/components/DeviceList.js b/src/components/DeviceList.js index fab171a..bb9f72c 100644 --- a/src/components/DeviceList.js +++ b/src/components/DeviceList.js @@ -18,7 +18,7 @@ import CIcon from '@coreui/icons-react'; import { getToken } from '../utils/authHelper'; import axiosInstance from '../utils/axiosInstance'; import { cleanBytesString, cropStringWithEllipsis } from '../utils/helper'; -import iotIcon from '../assets/icons/iot.png'; +import meshIcon from '../assets/icons/Mesh.png'; import apIcon from '../assets/icons/AP.png'; import internetSwitch from '../assets/icons/Switch.png'; @@ -151,11 +151,11 @@ const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount, const getDeviceIcon = (deviceType) => { if (deviceType === 'AP_Default' || deviceType === 'AP') { - return IOT; + return AP; // return ; } if (deviceType === 'MESH') { - return IOT; + return MESH; } if (deviceType === 'SWITCH') { return SWITCH; diff --git a/src/widgets/WifiScanResultModalWidget.js b/src/widgets/WifiScanResultModalWidget.js new file mode 100644 index 0000000..3cd546b --- /dev/null +++ b/src/widgets/WifiScanResultModalWidget.js @@ -0,0 +1,61 @@ +/* eslint-disable-rule prefer-destructuring */ +import React from 'react'; +import { + CButton, + CModal, + CModalHeader, + CModalBody, + CModalTitle, + CModalFooter +} from '@coreui/react'; +import WifiChannelTable from '../components/WifiChannels/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 ( + + + {date !== '' ? prettyDate(date) : ''} Wifi Scan Results + + + {scanResults === null ? null : } + + + + Close + + + + ); +} +export default WifiScanResultModalWidget; \ No newline at end of file