From 187a81f326be437636e0785cce8a76c48650aa77 Mon Sep 17 00:00:00 2001
From: bourquecharles <charles.bourque96@gmail.com>
Date: Tue, 18 May 2021 19:38:23 -0400
Subject: [PATCH] Icon for Mesh, wifi scan result modal for commands

---
 src/assets/icons/Mesh.png                | Bin 0 -> 1441 bytes
 src/components/DeviceCommands.js         |  84 +++++++++--------------
 src/components/DeviceList.js             |   6 +-
 src/widgets/WifiScanResultModalWidget.js |  61 ++++++++++++++++
 4 files changed, 95 insertions(+), 56 deletions(-)
 create mode 100644 src/assets/icons/Mesh.png
 create mode 100644 src/widgets/WifiScanResultModalWidget.js

diff --git a/src/assets/icons/Mesh.png b/src/assets/icons/Mesh.png
new file mode 100644
index 0000000000000000000000000000000000000000..82b8f2de2d59e150258cd17617f1edf86eb97fa4
GIT binary patch
literal 1441
zcmV;S1z!4zP)<h;3K|Lk000e1NJLTq000mG001ut1^@s6>fcHk00004b3#c}2nYxW
zd<bNS000G8Nkl<ZNQsS>TZ~;*8OMKX?REA(=j=1nnXxlH?U`OE0cv7QAW=+=2*LP*
z8lw*qc<}{7AdobKgg~Oi79SM#36uKN#0UwsfT^e$jW!73k`RWGa!F}Bl;KS0);Tk0
z&Smet*5|`Mx1LM!d)V1$owdI8{V(5I8+zi{sZ;s6_s{?2?D>l)KRo~0A^wk00LP9U
z%iQ?YZ`>0E!O={{o775?$rzNUk9&c6Z2$Chd1Qk1O6AUt%Jwg7wZ^O<Xsyv&<7tJ~
znp`%E(&{%7XPzvT#@G52XmN7u-aRw32M?4OA1k0xAkvx8j3VMFK8zQwtgK!B>H7Nm
zjw=#uZPz!qs@pi{C>3{dU~iEypBpIEIj5pHc_I;AUfZl5URqiT0d%!q)0a25*r;r>
zwOs>*QgJ7x-7^Hf4+0_rq*YmKbCM*#o}8MxlqAWMCNLfoV`FSpx4H1?BGZ!-j1>y_
znGB`kPU?+_jm;|7T9i`ca{;+*mbJ^9;f2L=Y#iXkQ3&&lj}=&2U8TIT%4{)(;`<qP
z&rH#5#u(#K+1h6QgAdrKREd+MX>fuFC<P*p;?6Ii^fc!dE}}in{yjzFOolL*<K6eq
z@yX&c%{anYi}3<<0w98uG?561a~#|^%eDLV^52ina<RNbGm2PVTW9go5*cF%^C1?i
zjQ~zSBRD{J{e`ubFCV%A<9U>qS1_KTw5y0x>Hp#qrFG&I2yNxlw=U}fB+jz0w1*(@
z2jtbYDDtE&RWFR5F=Sv}CrnC#0ICIH5Xz_w&N(zVM5JRDCn>3dTw$Q$IUL%#?$7pu
zR*ue?$nXlRwYmpFZ^@uKP+E+SfMHSygEcx-A0NX*M^WMp0_;NR>^?#X6I-jg5c{DB
zs`DI-C~>Kb);i9XS9y84hKpnFz3~9!`7FKC4v$uXzkgij-3WGNJg%S0@#sr$6E&I~
z|MBfO5uB)@Bz9D|CTF-d5Bp~(iQ<H>|KMwUR;hBwFaF4>M}ElFtf<8~uG=$B!zzAt
zW|^a}pX2@$uQ3w_JazYNJaO_>M%W-F(UJNf>uYWb6}Nxs5UZ7K?)u%!{OO_ZF?X(v
zsNp06m{cL*;PfQUt#jn93+zf7{Pyl|^6j5J!=E3&6Pz20!U4KnfgltD!%gEE0ufHU
z`4PW=@H+q_t?Uwq!F4C>ni%7bi7}kp&Dq6Ob`-*nOGnXQtV_H$3;?AR#xs0ze{pD!
z^oNe3NT;pa9ZVs$4Bgw({fl+yKmnzClBE7k_f=|WvjI3OCY5nSvwU7B0&Noehg*E0
z(l<2{MG66tmRY(Bp@;jcoU5iokw|OdXvv0GAQlm!cmG}(pPN7_FO{n8cj?fdDlysu
z0B9=~trS_`@9N)uT=i52&^WNpQExWWOEZ`4yP>Y0z_^}MIf`SF#F7nsjPa<|8?Aev
z0j;%4Kf+8BTcwoh?BYnP(Xl2Q_;^~=Xf`{PYOTrV0-8}wltg%|w)wAIAzTTA{H=vT
z-t=x{t;IP<;0KHs^3-ZgYV`)SMg#&In;Wlq3un$me|_Qk*B4y$^i;T`k<aID3A4El
z_acy3%lKHx`HM?zRck1vP)el<+7lP%<{GC?K6kpF^Z!r?Cm+h^eX>E2a-b9w;|0nq
z>(uK_lu~Hzu~7cx9|OIjeZP|PLp<g2&U^1giM3a#ptWXk`O=5~eB+hxKK{TxM@)Z$
zXA6b(1M_olOzil|&Ck5_;<u{Lomjc=t{?q;wmAL$wacq(Z@x4C=+Q?WJPz2A+8#dg
v)Wd)I_kWgwOndBar%yld*8Ke5{<;4HC@SPEODkBa00000NkvXXu0mjf5H!r#

literal 0
HcmV?d00001

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 (
-            <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>
   );
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 <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" />;
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 (
+        <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;
\ No newline at end of file