Icon for Mesh, wifi scan result modal for commands

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 (
-            <WifiChannelTable channels={parseThroughList(scanList)}/>
-          );
-      }
-      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 (
           <pre>{JSON.stringify(result, null, 4)}</pre>
         );
     }
-      return <pre>{JSON.stringify(commandDetails, null, 4)}</pre>
+
+    return <pre>{JSON.stringify(commandDetails, null, 4)}</pre>
     
   }
   const columns = [
@@ -196,9 +174,8 @@ const DeviceCommands = () => {
                           variant={details.includes(index) ? "" : "outline"}
                           shape="square"
                           size="sm"
-
                           onClick={() => {
-                            toggleDetails(index);
+                            toggleDetails(item, index);
                           }}
                         >
                           <CIcon name="cilList" size="lg" />
@@ -230,6 +207,7 @@ const DeviceCommands = () => {
         </div>
       }
     >
+    <WifiScanResultModalWidget show={showModal} toggle={toggleModal} scanResults={chosenWifiScan} date={scanDate}/>
       <CIcon name="cilNotes" style={{ color: 'white' }} size="lg" />
     </CWidgetDropdown>
   );

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 <img src={apIcon} style={{ height: '32px', width: '32px' }} alt="IOT" />;
+      return <img src={apIcon} style={{ height: '32px', width: '32px' }} alt="AP" />;
       // return <CIcon name="cilRouter" size="2xl" alt="AP" />;
     }
     if (deviceType === 'MESH') {
-      return <img src={iotIcon} style={{ height: '32px', width: '32px' }} alt="IOT" />;
+      return <img src={meshIcon} style={{ height: '32px', width: '32px' }} alt="MESH" />;
     }
     if (deviceType === 'SWITCH') {
       return <img src={internetSwitch} style={{ height: '32px', width: '32px' }} alt="SWITCH" />;

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 (
+        <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;