Added popup things

2025-07-19 05:03:49 +02:00 · 2021-09-19 12:16:49 +02:00
parent 722b8e1333
commit 6481d73c28
6 changed files with 3451 additions and 545 deletions
--- a/ui_templates/temp.html
+++ b/ui_templates/temp.html
@ -1,4 +1,237 @@
 <!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Enlight - Screen 1</title>
+  <script src="static/jquery-1.7.1.min.js" type="text/javascript"></script>
+  <script src="static/js/helper.js" type="text/javascript"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="static/default.css" rel="stylesheet" />
+  <link href="static/fontawesome-free-5.15.1-web/css/all.css" rel="stylesheet" />
+  <dataStore id="modals" style="display: none;">
+    {"open": []}
+  </dataStore>
+</head>
+
+<body>
+  <script>
+    let modalsList = [];
+  </script>
+  <modal class="modal" id="mainModal">
+
+  </modal>
+
+  </div>
+  <div id="header-bar" class="header-bar">
+    <div class="areaRight">
+      <power>
+        <i class="fas fa-power-off" id="powerBtn"
+          onclick='createModalPopup("Power Functions", "What action do you want to execute?", "<button>Shutdown</button><button>Lock</button><button onclick=\" quitApplication() \">Close Software</button>")'></i>
+      </power>
+
+      <network>
+        <i class="fas fa-network-wired" id="networkBtn"
+          onclick='document.getElementById("networkDropdown").classList.toggle("show");buildNetworkDropDown();'></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>
+    var loaderInUse = true;
+    const { ipcRenderer } = require("electron");
+    setInterval(function () {
+      // Pulling general info from main thread
+      loadOverride = ipcRenderer.sendSync(
+        "synchronous-message",
+        "loadOverride"
+      );
+      if (!loaderInUse) {
+        if (loadOverride) {
+          document.getElementById("loader").innerHTML = "&#xf1ce;";
+        } else {
+          document.getElementById("loader").innerHTML = "";
+        }
+      }
+    }, 500);
+
+    function quitApplication() {
+      if (ipcRenderer.sendSync('synchronous-message', 'ACTION:power.quit') == "ANS:PROJECT_DIRTY") {
+
+      }
+    }
+
+    var modal = document.getElementById("powerDropdown");
+    var span = document.getElementsByClassName("close")[0];
+
+    // When the user clicks on <span> (x), close the modal
+    span.onclick = function () {
+      modal.style.display = "none";
+    }
+
+    // When the user clicks anywhere outside of the modal, close it
+    window.onclick = function (event) {
+      if (event.target == modal) {
+        modal.style.display = "none";
+      }
+    }
+
+    // Power dialog
+    function powerDropdown() {
+      loaderInUse = true;
+      document.getElementById("loader").innerHTML = "&#xf1ce;";
+      document.getElementById("powerDropdown").innerHTML = "test"
+    }
+
+    // Network info
+    var allNetworkNames = [];
+    function buildNetworkDropDown() {
+      loaderInUse = true;
+      document.getElementById("loader").innerHTML = "&#xf1ce;";
+      console.log("show loader")
+      const timestamp = Date.now();
+      allNetworks = ipcRenderer.sendSync(
+        "synchronous-message",
+        "getNetworks"
+      );
+      lastNetwork = ipcRenderer.sendSync(
+        "synchronous-message",
+        "getMainNetwork"
+      );
+      const timestamp2 = Date.now();
+      console.log("Requests took", (timestamp2 - timestamp))
+
+      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"
+        );
+      }
+      console.log("hide loader")
+      loaderInUse = false;
+      document.getElementById("loader").innerHTML = "";
+    }
+
+    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;"
+      );
+    }
+      //setTimeout(function(){
+      //  buildNetworkDropDown();
+      //}, 1000)
+      //
+  </script>
+  <script>
+    // Battery info screen
+    batteryExists = ipcRenderer.sendSync("synchronous-message", "hasBattery");
+    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 = "";
+      loaderInUse = false;
+    }
+
+    function updateClock() {
+      var date = new Date();
+      hour = updateTime(date.getHours());
+      min = updateTime(date.getMinutes());
+      sec = updateTime(date.getSeconds());
+      document.getElementById("clock").innerHTML =
+        hour + ":" + min + ":" + sec;
+    }
+    updateClock();
+    setInterval(function () {
+      updateClock()
+    }, 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>
+
+  <!--</body>
+</html>--><!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8" />
@ -18,13 +251,13 @@
    <!--<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">
+    <!--<div id="header-bar" class="header-bar">
      <div class="areaRight">
        <network>
          <i
            class="fas fa-network-wired"
            id="networkBtn"
-            onclick='document.getElementById("networkDropdown").classList.toggle("show");buildNetworkDropDown();'
+            onclick='document.getElementById("networkDropdown").classList.toggle("show");'
          ></i>
          <div id="networkDropdown" class="dropdown-content"></div>
        </network>
@ -61,8 +294,6 @@
      function buildNetworkDropDown() {
        loaderInUse = true;
        document.getElementById("loader").innerHTML = "&#xf1ce;";
-        console.log("show loader")
-        const timestamp = Date.now();
        allNetworks = ipcRenderer.sendSync(
          "synchronous-message",
          "getNetworks"
@ -71,9 +302,6 @@
          "synchronous-message",
          "getMainNetwork"
        );
-        const timestamp2 = Date.now();
-        console.log("Requests took" , (timestamp2 - timestamp))
-
        allNetworkNames = [];
        console.log(lastNetwork);
        i = 0;
@ -108,7 +336,6 @@
            "state:networkNoLongerValid"
          );
        }
-        console.log("hide loader")
        loaderInUse = false;
        document.getElementById("loader").innerHTML = "";
      }
@ -129,10 +356,7 @@
          "&#10004;"
        );
      }
-      //setTimeout(function(){
-      //  buildNetworkDropDown();
-      //}, 1000)
-      //
+      buildNetworkDropDown();
    </script>
    <script>
      // Battery info screen
@ -170,18 +394,14 @@
        document.getElementById("loader").innerHTML = "";
        loaderInUse = false;
      }
-      
-      function updateClock(){
+
+      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;
-      }
-      updateClock();
-      setInterval(function () {
-        updateClock()
      }, 500);
    </script>
    <script>
@ -197,97 +417,23 @@
          }
        }
      };
-    </script>
-
-  <!--</body>
-</html>-->
-<style>
-  table {
-    font-family: arial, sans-serif;
-    border-collapse: collapse;
-    width: 100%;
-    overflow-y: scroll;
-    height: 80%;
-  }
-  
-  td, th {
-    border: 1px solid #dddddd;
-    text-align: left;
-    padding: 8px;
-    
-  }
-  .cust {
-    overflow-y: scroll;
-    height: 80%;
-  }
-  </style>    
-    
-    <h1>Fixtures</h1>
-    <button onclick='ipcRenderer.sendSync("synchronous-message", "PAGE:change.index");'>Back</button>
-    <button onclick='ipcRenderer.sendSync("synchronous-message", "FIXTURE:initDB");'>Do magic init stuff</button><br><br>
-    <input type = "text" placeholder="Search fixture libary" id="libSearch"></input><br>
-    <div class="cust">
-    <table id="fixtureList">
-      <tr>
-        <th>Name</th>
-        <th>Manufacturer:</th>
-        <th>Description:</th>
-      </tr>
-      <tr>
-        <td> </td>
-        <td> </td>
-        <td> </td>
-      </tr>
-      <tr>
-        <td> </td>
-        <td> </td>
-        <td> </td>
-      </tr>
-      <tr>
-        <td> </td>
-        <td> </td>
-        <td> </td>
-      </tr>
-
-      <tr>
-        <td> </td>
-        <td> </td>
-        <td> </td>
-      </tr>
-    </table>
-  </div>
-
+    </script>-->
+    <!--<iframe src="header.html" class="headerIframe"></iframe>-->
+    <h1>Hello World!</h1>
+    <button onclick='ipcRenderer.sendSync("synchronous-message", "PAGE:change.session");'>Session screen</button>
+    <button onclick='ipcRenderer.sendSync("synchronous-message", "PAGE:change.fixtures");'>Fixture screen</button>
+    We are using node
    <script>
-      firstState = document.getElementById("libSearch").value
-      setInterval(function(){
-        temp = document.getElementById("libSearch").value
-        if(temp != firstState){
-          outy = ipcRenderer.sendSync("synchronous-message", "FIXTURE:search|" + temp);
-          console.log(outy)
-          elm = document.getElementById("fixtureList")
-          elm.innerHTML = `
-          <tr>
-        <th>Name</th>
-        <th>Manufacturer</th>
-        <th>Description</th>
-      </tr>
-          `
-          i = 0
-          while(i<outy.length){
-            text = ""
-            text += "<tr>"
-              text += "<td>" + outy[i].LongName + "</td>"
-              text += "<td>" + outy[i].Manufacturer + "</td>"
-              text += "<td>" + outy[i].Description + "</td>"
-              text += "</tr>"
-            elm.innerHTML += text
-            i++
-          }
-          firstState = temp
-        }
-      }, 500)
+      document.write(process.versions.node);
    </script>
-
-    
+    , Chrome
+    <script>
+      document.write(process.versions.chrome);
+    </script>
+    , and Electron
+    <script>
+      document.write(process.versions.electron);
+    </script>
+    .
  </body>
 </html>