Added open source animation

frontend/routes/Wifi.jsx

@@ -16,6 +16,8 @@ import Paper from '@material-ui/core/Paper';
 import { green, orange } from '@material-ui/core/colors';
 import Skeleton from '@material-ui/lab/Skeleton';
 import { Box, Chip } from '@material-ui/core';
+import "@lottiefiles/lottie-player";
+const wifi_animation = require("../util/animations/wifi_loading.json");
 import {
   SignalWifi4Bar,
   SignalWifi0Bar,
@@ -25,6 +27,8 @@ import {
 } from '@material-ui/icons';
 export const title = 'Wifi Configuration';
 export const route = '/wifi';
+import { useTheme } from '@material-ui/core/styles';
+import { Player } from '@lottiefiles/react-lottie-player';
 
 export class Component extends React.Component {
   constructor(props) {
@@ -64,7 +68,6 @@ const in_use = 'IN-USE';
 const initial_direction = 'asc';
 const security = 'SECURITY';
 const bars = 'BARS';
-const active_color = orange[50];
 const headCells = {
   [in_use]: { numeric: false, disablePadding: true, label: 'Connected' },
   BSSID: { numeric: false, disablePadding: false, label: 'BSSID' },
@@ -79,6 +82,7 @@ const headCells = {
 
 function SortableTableHead(props) {
   const { classes, order, orderBy, onRequestSort } = props;
+
   return (
     <TableHead>
       <TableRow>
@@ -271,43 +275,68 @@ function SortableTable(props) {
     setOrderBy(property);
   };
 
+  const theme = useTheme();
+
   return (
     <div className={classes.root}>
-      <Paper className={classes.paper}>
-        <SortableTableToolbar />
-        <TableContainer>
-          <Table className={classes.table} aria-labelledby="tableTitle" aria-label="sortable table">
-            <SortableTableHead
-              classes={classes}
-              order={order}
-              orderBy={orderBy}
-              onRequestSort={handleRequestSort}
-            />
-            <TableBody>
-              {stableSort(rows, getComparator(order, orderBy)).map((row, index) => {
-                return (
-                  <TableRow
-                    hover
-                    tabIndex={-1}
-                    key={index}
-                    style={{
-                      background: row[in_use].length > 0 ? active_color : null,
-                    }}
-                  >
-                    {Object.keys(headCells).map(function(key) {
-                      return (
-                        <TableCell key={key} align="center">
-                          {renderTableCell(key, row, classes)}
-                        </TableCell>
-                      );
-                    })}
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </Paper>
+      {rows.length > 0 ? (
+        <Paper className={classes.paper}>
+          <SortableTableToolbar />
+          <TableContainer>
+            <Table
+              className={classes.table}
+              aria-labelledby="tableTitle"
+              aria-label="sortable table"
+            >
+              <SortableTableHead
+                classes={classes}
+                order={order}
+                orderBy={orderBy}
+                onRequestSort={handleRequestSort}
+              />
+              <TableBody>
+                {stableSort(rows, getComparator(order, orderBy)).map((row, index) => {
+                  return (
+                    <TableRow
+                      hover
+                      tabIndex={-1}
+                      key={index}
+                      style={{
+                        background: row[in_use].length > 0 ? orange[50] : null,
+                      }}
+                    >
+                      {Object.keys(headCells).map(function(key) {
+                        return (
+                          <TableCell key={key} align="center">
+                            {renderTableCell(key, row, classes)}
+                          </TableCell>
+                        );
+                      })}
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Paper>
+      ) : (
+        <div
+          style={{
+            height: '100%',
+            width: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            display: 'flex',
+          }}
+        >
+          <Player
+          src={wifi_animation}
+          autoplay={true}
+          loop={true}
+          controls={false}
+          style={{ height: '300px', width: '300px' }}/>
+        </div>
+      )}
     </div>
   );
 }

frontend/util/animations/wifi_loading.json

@@ -0,0 +1 @@
+{"v":"4.11.1","fr":29.9700012207031,"ip":0,"op":120.0000048877,"w":300,"h":300,"nm":"Text","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"internet Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[150,140,0],"ix":2},"a":{"a":0,"k":[50,42.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[2.4,2],[17.3,0],[12.4,-10.2],[-2.1,-2.3],[0,0],[-2.3,1.9],[-14.4,0],[-10.3,-8.6],[-2,2.3],[0,0]],"o":[[-12.4,-10.3],[-17.3,0],[-2.4,2],[0,0],[2,2.3],[10.3,-8.6],[14.4,0],[2.3,1.9],[0,0],[2.1,-2.3]],"v":[[45.5,2.8],[0,-13.6],[-45.5,2.8],[-46.1,10.6],[-45.7,11.1],[-38,11.7],[0,-2],[38,11.7],[45.7,11.1],[46.1,10.6]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[50,17.533],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":3,"s":[30],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":8,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":86,"s":[0],"e":[30]},{"t":91.000003706506}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[2.4,1.9],[12.2,0],[8.8,-7.2],[-2,-2.3],[0,0],[-2.3,1.9],[-9.5,0],[-6.799,-5.6],[-1.899,2.2],[0,0]],"o":[[-8.8,-7.2],[-12.2,0],[-2.4,2],[0,0],[1.9,2.2],[6.9,-5.6],[9.5,0],[2.3,1.9],[0,0],[2.1,-2.3]],"v":[[32.25,0.4],[-0.05,-11.1],[-32.35,0.4],[-33.05,8.2],[-32.85,8.5],[-25.25,9.2],[-0.05,0.2],[25.15,9.2],[32.75,8.5],[32.95,8.2]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[50.05,35.134],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":6,"s":[32],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":11,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":82,"s":[0],"e":[30]},{"t":88.0000035843135}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[2.5,1.9],[7.2,0],[5.3,-4.1],[-2,-2.3],[-2.3,1.8],[-4.7,0],[-3.4,-2.6],[-1.9,2.2]],"o":[[-5.3,-4.2],[-7.2,0],[-2.4,1.9],[1.9,2.2],[3.4,-2.7],[4.7,0],[2.3,1.8],[2,-2.3]],"v":[[19.2,-1.85],[0,-8.45],[-19.2,-1.85],[-19.9,5.95],[-12.4,6.65],[0,2.45],[12.4,6.65],[19.9,5.95]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[50,52.583],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":8,"s":[30],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":14,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":79,"s":[0],"e":[30]},{"t":83.0000033806593}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-4.584,0],[0,-4.584],[4.584,0],[0,4.584]],"o":[[4.584,0],[0,4.584],[-4.584,0],[0,-4.584]],"v":[[0,-8.3],[8.3,0],[0,8.3],[-8.3,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[50,72.534],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p833_1_0p333_0","0p833_1_0p333_0"],"t":12,"s":[100,100],"e":[250,250]},{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_1_0p167_0p167","0p833_1_0p167_0p167"],"t":18,"s":[250,250],"e":[100,100]},{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0,0]},"n":["0p833_1_0p167_0","0p833_1_0p167_0"],"t":24,"s":[100,100],"e":[100,100]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0,0]},"n":["0p833_0p833_0p167_0","0p833_0p833_0p167_0"],"t":63,"s":[100,100],"e":[250,250]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0,0]},"n":["0p667_1_0p167_0","0p667_1_0p167_0"],"t":70,"s":[250,250],"e":[100,100]},{"t":77.0000031362743}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":12,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":24,"s":[100],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":44,"s":[0],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":63,"s":[100],"e":[100]},{"t":70.0000028511585}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"ix":4,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":120.0000048877,"st":0,"bm":0}]}

package.json

@@ -14,6 +14,8 @@
     "last 10 Firefox versions"
   ],
   "dependencies": {
+    "@lottiefiles/lottie-player": "^1.0.0",
+    "@lottiefiles/react-lottie-player": "3.0.5",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "dygraphs": "^2.1.0",
     "express": "~4.17.1",

yarn.lock

@@ -713,6 +713,24 @@
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.3.tgz#f060bf6eaafae4d56a7dac618980838b0696e2ab"
   integrity sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==
 
+"@lottiefiles/lottie-player@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@lottiefiles/lottie-player/-/lottie-player-1.0.0.tgz#df0f74a205851a878561c56126caa9a5f0a307b2"
+  integrity sha512-LQG7zduWhbFUSSMh+N9MTyaCHd4z5OFZCxfFXSFqtr2kEfD1UNb+Av1AjXQmopBhXZSGQeBz1Ry28t9SXS8SZg==
+  dependencies:
+    "@types/pako" "^1.0.1"
+    lit-element "^2.3.1"
+    lottie-web "^5.6.6"
+    pako "^1.0.11"
+    resize-observer-polyfill "^1.5.1"
+
+"@lottiefiles/[email protected]":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@lottiefiles/react-lottie-player/-/react-lottie-player-3.0.5.tgz#8df8067983ed95eb72141f6234901adc6285ea79"
+  integrity sha512-wBml9Z8UNJTzuozpBRDx4Ifi1iIBYJ2Yt+lkNAxNCyS/qQkF2Pqwyqn5+50SuueeKEYTJK/rcnktIeH4vUkYQw==
+  dependencies:
+    lottie-web "^5.6.0"
+
 "@material-ui/core@^4.9.10":
   version "4.11.3"
   resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.3.tgz#f22e41775b0bd075e36a7a093d43951bf7f63850"
@@ -866,6 +884,11 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.3.tgz#856c99cdc1551d22c22b18b5402719affec9839a"
   integrity sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw==
 
+"@types/pako@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/pako/-/pako-1.0.1.tgz#33b237f3c9aff44d0f82fe63acffa4a365ef4a61"
+  integrity sha512-GdZbRSJ3Cv5fiwT6I0SQ3ckeN2PWNqxd26W9Z2fCK1tGrrasGy4puvNFtnddqH9UJFMQYXxEuuB7B8UK+LLwSg==
+
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@@ -3580,6 +3603,18 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lit-element@^2.3.1:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.4.0.tgz#b22607a037a8fc08f5a80736dddf7f3f5d401452"
+  integrity sha512-pBGLglxyhq/Prk2H91nA0KByq/hx/wssJBQFiYqXhGDvEnY31PRGYf1RglVzyLeRysu0IHm2K0P196uLLWmwFg==
+  dependencies:
+    lit-html "^1.1.1"
+
+lit-html@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.3.0.tgz#c80f3cc5793a6dea6c07172be90a70ab20e56034"
+  integrity sha512-0Q1bwmaFH9O14vycPHw8C/IeHMk/uSDldVLIefu/kfbTBGIc44KGH6A8p1bDfxUfHdc8q6Ct7kQklWoHgr4t1Q==
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -3627,6 +3662,11 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-web@^5.6.0, lottie-web@^5.6.6:
+  version "5.7.7"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.7.7.tgz#077c705d5c82b33a421618c529fccebd69a111fd"
+  integrity sha512-dAUrMX5BRxP7dr+qDWzablhGY6SqXztCS46sW11wjuzExQKZl5GLX2yMGGqg4AkdjgfjetndcU+VR1xoLhlkpA==
+
 magic-string@^0.22.4:
   version "0.22.5"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.5.tgz#8e9cf5afddf44385c1da5bc2a6a0dbd10b03657e"
@@ -4125,6 +4165,11 @@ pako@^0.2.5:
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
   integrity sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=
 
+pako@^1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
 pako@~1.0.5:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
@@ -5138,6 +5183,11 @@ reselect@^4.0.0:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
   integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"