🚸 Improved network availability displays

Author: GitSquared

src/assets/css/mod_conninfo.css

@@ -62,9 +62,11 @@ div#mod_conninfo i {
 div#mod_conninfo canvas {
     width: 100%;
     height: 8.7vh;
+    z-index: 10;
     border-top: 0.092vh dashed rgba(var(--color_r), var(--color_g), var(--color_b), 0.3);
     border-bottom: 0.092vh dashed rgba(var(--color_r), var(--color_g), var(--color_b), 0.3);
     margin: 0.46vh 0vh;
+    opacity: 1;
 }
 
 div#mod_conninfo canvas#mod_conninfo_canvas_top {
@@ -76,3 +78,18 @@ div#mod_conninfo canvas#mod_conninfo_canvas_bottom {
     border-top: 0.139vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.4);
     margin-top: -0.092vh;
 }
+
+div#mod_conninfo h3:last-child {
+    position: absolute;
+    font-size: 2vh;
+    z-index: 15;
+    opacity: 0;
+}
+
+div#mod_conninfo.offline canvas {
+    opacity: 0.3;
+}
+
+div#mod_conninfo.offline h3:last-child {
+    opacity: 1;
+}

src/classes/conninfo.class.js

@@ -12,6 +12,7 @@ class Conninfo {
                 <h2>TOTAL<i>0B OUT, 0B IN</i></h2>
                 <canvas id="mod_conninfo_canvas_top"></canvas>
                 <canvas id="mod_conninfo_canvas_bottom"></canvas>
+                <h3>OFFLINE</h3>
             </div>
         </div>`;
 
@@ -76,11 +77,13 @@ class Conninfo {
 
             let time = new Date().getTime();
 
-            if (net.ip4 === "127.0.0.1") {
+            if (window.mods.netstat.offline) {
                 this.series[0].append(time, 0);
                 this.series[1].append(time, 0);
+                document.querySelector("div#mod_conninfo").setAttribute("class", "offline");
                 return;
             } else {
+                document.querySelector("div#mod_conninfo").setAttribute("class", "");
                 this.si.networkStats(net.iface, (data) => {
 
                     let max0 = this.series[0].maxValue;

src/classes/netstat.class.js

@@ -26,6 +26,7 @@ class Netstat {
             </div>
         </div>`;
 
+        this.offline = false;
 
         // Init updaters
         this.updateInfo();
@@ -35,6 +36,8 @@ class Netstat {
     }
     updateInfo() {
         this.si.networkInterfaces((data) => {
+            let offline = false;
+
             // Find the first external network networkInterface
             let net = data[0];
             let netID = 0;
@@ -49,14 +52,8 @@ class Netstat {
             }
 
             if (net.ip4 === "127.0.0.1") {
-                // We're offline.
-                document.querySelector("#mod_netstat_innercontainer > div:first-child > h2").innerHTML = "OFFLINE";
-                document.querySelector("#mod_netstat_innercontainer > div:nth-child(2) > h2").innerHTML = "--.--.--.--";
-                document.querySelector("#mod_netstat_innercontainer > div:nth-child(3) > h2").innerHTML = "--ms";
-                return;
+                offline = true;
             } else {
-                document.querySelector("#mod_netstat_innercontainer > div:first-child > h2").innerHTML = "ONLINE";
-
                 require("https").get({"host": "ipinfo.now.sh", "port": 443, "path": "/"}, (res) => {
                     let rawData = "";
                     res.on("data", (chunk) => {
@@ -83,10 +80,20 @@ class Netstat {
                     let ping;
                     if (data === -1) {
                         ping = "--ms";
+                        offline = true;
                     } else {
                         ping = Math.round(data)+"ms";
                     }
-                    document.querySelector("#mod_netstat_innercontainer > div:nth-child(3) > h2").innerHTML = ping;
+
+                    this.offline = offline;
+                    if (offline) {
+                        document.querySelector("#mod_netstat_innercontainer > div:first-child > h2").innerHTML = "OFFLINE";
+                        document.querySelector("#mod_netstat_innercontainer > div:nth-child(2) > h2").innerHTML = "--.--.--.--";
+                        document.querySelector("#mod_netstat_innercontainer > div:nth-child(3) > h2").innerHTML = "--ms";
+                    } else {
+                        document.querySelector("#mod_netstat_innercontainer > div:first-child > h2").innerHTML = "ONLINE";
+                        document.querySelector("#mod_netstat_innercontainer > div:nth-child(3) > h2").innerHTML = ping;
+                    }
                 });
             }
         });