Network and clock feature added

2026-01-31 07:30:24 +01:00 · 2020-11-23 20:36:44 +01:00
parent 32c80d6dd0
commit 28c98856c0
7 changed files with 290 additions and 43 deletions
--- a/ui_templates/index.html
+++ b/ui_templates/index.html
@@ -2,34 +2,178 @@
 <html>
  <head>
    <meta charset="UTF-8" />
-    <title>Hello World!</title>
+    <title>Enlight - Screen 1</title>
    <!--<meta
      http-equiv="Content-Security-Policy"
      content="script-src 'self' 'unsafe-inline';"
    />-->
+    <script src="static/jquery-1.7.1.min.js" type="text/javascript"></script>
+    <script src="static/js/helper.js" type="text/javascript"></script>
+    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>*-->
    <link href="static/default.css" rel="stylesheet" />
-    <link href="static/fontawesome-free-5.15.1-web/css/all.css" rel="stylesheet">
+    <link
+      href="static/fontawesome-free-5.15.1-web/css/all.css"
+      rel="stylesheet"
+    />
+    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">-->
  </head>
  <body>
    <div id="header-bar" class="header-bar">
-      <clock id="clock" class="header-clock"></clock>
-      <battery id="battery" class="battery"><i class="fas fa-battery-full"></i></battery>
+      <div class="areaRight">
+        <network>
+          <i
+            class="fas fa-network-wired"
+            id="networkBtn"
+            onclick='document.getElementById("networkDropdown").classList.toggle("show");'
+          ></i>
+          <div id="networkDropdown" class="dropdown-content"></div>
+        </network>
+        <battery id="battery" class="fa"></battery>
+        <clock id="clock" class="header-clock"></clock>
+        <i
+          class="fa-spin loader1 fa"
+          style="font-size: 18px; padding-right: 4px"
+          id="loader"
+          >&#xf1ce;</i
+        >
+      </div>
    </div>
    <script>
-      function updateTime(k) {
-        if (k < 10) {
-          return "0" + k;
+      const { ipcRenderer } = require("electron");
+      setInterval(function () {
+        // Pulling general info from main thread
+        loadOverride = ipcRenderer.sendSync(
+          "synchronous-message",
+          "loadOverride"
+        );
+        if (loadOverride) {
+          document.getElementById("loader").innerHTML = "&#xf1ce;";
        } else {
-          return k;
+          document.getElementById("loader").innerHTML = "";
+        }
+      }, 200);
+
+      // Network info
+      var allNetworkNames = [];
+      function buildNetworkDropDown() {
+        allNetworks = ipcRenderer.sendSync(
+          "synchronous-message",
+          "getNetworks"
+        );
+        lastNetwork = ipcRenderer.sendSync(
+          "synchronous-message",
+          "getMainNetwork"
+        );
+        allNetworkNames = []
+        console.log(lastNetwork);
+        i = 0;
+        var dropDown = document.getElementById("networkDropdown");
+        dropDown.innerHTML = ""
+        while (i < allNetworks.length) {
+          temp =
+            "<a id='networkEntry" +
+            String(i) +
+            "' onclick='selectNewNetwork(" +
+            String(i) +
+            ")'>&nbsp;&nbsp;&nbsp;" +
+            encode_html(allNetworks[i].ifaceName) +
+            "</a>";
+          dropDown.innerHTML += temp;
+          allNetworkNames.push(allNetworks[i].ifaceName);
+          i++;
+        }
+
+        if (does_list_contain(allNetworkNames, lastNetwork)) {
+          nameOfElm =
+            "networkEntry" + String(allNetworkNames.indexOf(lastNetwork));
+          networkEntryElm = document.getElementById(nameOfElm);
+          networkEntryElm.innerHTML = networkEntryElm.innerHTML.replace(
+            "&nbsp;&nbsp;&nbsp;",
+            "&#10004;"
+          );
+        } else {
+          console.warn("Network is no longer valid");
+          ipcRenderer.sendSync(
+            "synchronous-message",
+            "state:networkNoLongerValid"
+          );
        }
      }
-      setInterval(function(){
+
+      function selectNewNetwork(id) {
+        idAsNumber = parseInt(id);
+        newNetwork = allNetworkNames[id];
+        ipcRenderer.sendSync("synchronous-message", "set:newNetwork|" + newNetwork);
+        buildNetworkDropDown();
+
+        nameOfElm = "networkEntry" + String(idAsNumber);
+        networkEntryElm = document.getElementById(nameOfElm);
+        networkEntryElm.innerHTML = networkEntryElm.innerHTML.replace(
+          "&nbsp;&nbsp;&nbsp;",
+          "&#10004;"
+        );
+        //alert(newNetwork);
+      }
+      buildNetworkDropDown();
+    </script>
+    <script>
+      // Battery info screen
+      batteryExists = ipcRenderer.sendSync("synchronous-message", "hasBattery"); // prints "pong"
+      var batteryShowdStart = false;
+      if (batteryExists) {
+        batteryLevel = ipcRenderer.sendSync(
+          "synchronous-message",
+          "getBatteryLevel"
+        );
+
+        //Setup regular updates
+        setInterval(function () {
+          batteryLevel = parseInt(
+            ipcRenderer.sendSync("synchronous-message", "getBatteryLevel")
+          );
+
+          batteryShowdStart = true;
+          if (batteryLevel > 75) {
+            document.getElementById("battery").innerHTML = "&#xf240;";
+          } else if (batteryLevel <= 75 && batteryLevel > 50) {
+            document.getElementById("battery").innerHTML = "&#xf241;";
+          } else if (batteryLevel <= 50 && batteryLevel > 25) {
+            document.getElementById("battery").innerHTML = "&#xf242;";
+          } else if (batteryLevel <= 25 && batteryLevel > 5) {
+            document.getElementById("battery").innerHTML = "&#xf243;";
+          } else {
+            document.getElementById("battery").innerHTML = "&#xf244;";
+          }
+        }, 2000);
+      } else {
+        batteryShowdStart = true;
+      }
+      if (batteryShowdStart) {
+        document.getElementById("loader").innerHTML = "";
+      }
+
+      setInterval(function () {
        var date = new Date();
        hour = updateTime(date.getHours());
        min = updateTime(date.getMinutes());
        sec = updateTime(date.getSeconds());
-        document.getElementById("clock").innerHTML = hour + ":" + min + ":" + sec;
-        }, 200);
+        document.getElementById("clock").innerHTML =
+          hour + ":" + min + ":" + sec;
+      }, 500);
+    </script>
+    <script>
+      window.onclick = function (event) {
+        if (!event.target.matches("#networkBtn")) {
+          var dropdowns = document.getElementsByClassName("dropdown-content");
+          var i;
+          for (i = 0; i < dropdowns.length; i++) {
+            var openDropdown = dropdowns[i];
+            if (openDropdown.classList.contains("show")) {
+              openDropdown.classList.remove("show");
+            }
+          }
+        }
+      };
    </script>
    <h1>Hello World!</h1>
    We are using node
--- a/ui_templates/startUp.html
+++ b/ui_templates/startUp.html
@@ -5,8 +5,9 @@
    <title>Enlight - Starting</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <link href="static/default.css" rel="stylesheet"/>
+    <link href="static/fontawesome-free-5.15.1-web/css/all.css" rel="stylesheet">
 </head>
-<body>
+<body class="fa-spin">
    <center>
    
    <img src="static/icon.png" alt="Logo" height="40px"></img>
--- a/ui_templates/static/default.css
+++ b/ui_templates/static/default.css
@@ -21,8 +21,6 @@ small {
 }

 .header-clock {
-    right: 0px;
-    position: fixed;
    padding: 2px;
    padding-right: 4px;
 }
@@ -32,4 +30,38 @@ small {
    position: fixed;
    padding: 2px;
    padding-right: 4px;
-}
+}
+.loader1 {
+    position: fixed;
+    right: 80px;
+}
+
+.areaRight {
+    float: right;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f1f1f1;
+    min-width: 160px;
+    overflow: auto;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    right: 0px;
+  }
+  
+  .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+  }
+  
+  .dropdown a:hover {background-color: #ddd;}
+
+  .show {display: block;}
+  
+  network{
+      cursor: pointer;
+  }
--- a/ui_templates/static/jquery-1.7.1.min.js
+++ b/ui_templates/static/jquery-1.7.1.min.js
--- a/ui_templates/static/js/helper.js
+++ b/ui_templates/static/js/helper.js
@@ -0,0 +1,23 @@
+function encode_html(rawStr) {
+  var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/g, function (i) {
+    return "&#" + i.charCodeAt(0) + ";";
+  });
+
+  return encodedStr;
+}
+
+function does_list_contain(list, needle) {
+  if (list.indexOf(needle) >= 0) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+function updateTime(k) {
+  if (k < 10) {
+    return "0" + k;
+  } else {
+    return k;
+  }
+}