Added popup things

2025-07-17 20:33:48 +02:00 · 2021-09-19 12:16:49 +02:00
parent 722b8e1333
commit 6481d73c28
6 changed files with 3451 additions and 545 deletions
--- a/index.js
+++ b/index.js
@ -71,6 +71,11 @@ var mySession = {
  usedUIDs: [],
 };

+var currentState = {
+  projectName: "",
+  projectDirty: false
+}
+
 var mainConn = "";
 var mainNetworkInterface = undefined;

@ -416,6 +421,17 @@ function init() {
      win.loadFile("ui_templates/temp.html");
      const timestamp3 = Date.now();
      event.returnValue = "";
+    } else if (String(arg).includes("ACTION:power")) {
+      // Change to a diffrent page of the programm
+
+      command = String(arg).split(".")[1];
+      if(command == "quit"){
+        if(currentState.projectDirty){
+          event.returnValue = "ANS:PROJECT_DIRTY";
+        }
+        app.quit()
+        console.log("Trying to quit")
+      }
    } else if (String(arg).includes("SESSION:get.state")) {
      // Retrives the session state

--- a/package-lock.json
+++ b/package-lock.json
--- a/ui_templates/header.html
+++ b/ui_templates/header.html
@ -1,203 +1,234 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8" />
-    <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 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 class="areaRight">
-        <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>
+
+<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>
-    <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);
-
-      // 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;"
-          );
+  </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 {
-          console.warn("Network is no longer valid");
-          ipcRenderer.sendSync(
-            "synchronous-message",
-            "state:networkNoLongerValid"
-          );
+          document.getElementById("loader").innerHTML = "";
        }
-        console.log("hide loader")
-        loaderInUse = false;
-        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++;
      }

-      function selectNewNetwork(id) {
-        idAsNumber = parseInt(id);
-        newNetwork = allNetworkNames[id];
-        ipcRenderer.sendSync(
-          "synchronous-message",
-          "set:newNetwork|" + newNetwork
-        );
-        buildNetworkDropDown();
-
-        nameOfElm = "networkEntry" + String(idAsNumber);
+      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"); // prints "pong"
-      var batteryShowdStart = false;
-      if (batteryExists) {
-        batteryLevel = ipcRenderer.sendSync(
-          "synchronous-message",
-          "getBatteryLevel"
+  </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")
        );

-        //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");
-            }
+        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>
+      }
+    };
+  </script>

  <!--</body>
-</html>-->
+</html>-->
--- a/ui_templates/static/default.css
+++ b/ui_templates/static/default.css
@ -1,73 +1,165 @@
-@import url('fonts/Quicksand-Regular.ttf');
-body, html {
-    margin: 0px;
-    background-color: rgb(51, 51, 51);
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    font-family: 'Quicksand', sans-serif;
-    color:white;
+:root {
+    --backgroundGray: rgb(51, 51, 51);
+    --accentGray: rgba(36, 36, 36, 0.9); 
+    --accentGray2:rgba(20, 20, 20, 0.877); 
+  }
+
+@import url("fonts/Quicksand-Regular.ttf");
+body,
+html {
+  margin: 0px;
+  background-color: rgb(51, 51, 51);
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  font-family: "Quicksand", sans-serif;
+  color: white;
 }
 small {
-    font-size: 10px;
+  font-size: 10px;
 }

-.header-bar{
-    margin: 0px;
-    padding: 0px;
-    width: 100%;
-    height: 34px;
-    background-color: rgba(36, 36, 36, 0.9);
+.header-bar {
+  margin: 0px;
+  padding: 0px;
+  width: 100%;
+  height: 34px;
+  background-color: rgba(36, 36, 36, 0.9);
 }

 .header-clock {
-    padding: 2px;
-    padding-right: 4px;
+  padding: 2px;
+  padding-right: 4px;
 }

 .battery {
-    right: 80px;
-    position: fixed;
-    padding: 2px;
-    padding-right: 4px;
+  right: 80px;
+  position: fixed;
+  padding: 2px;
+  padding-right: 4px;
 }
 .loader1 {
-    position: fixed;
-    right: 80px;
+  position: fixed;
+  right: 80px;
 }

 .areaRight {
-    float: right;
+  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;
+  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,
+power {
+  cursor: pointer;
+}
+.popup-content {
+  background-color: rgba(36, 36, 36, 0.9);
+  position: fixed;
+  height: 10vh;
+  width: 10vw;
+}
+
+.headerIframe {
+  width: 100%;
+  border: 0px;
+  height: 2.5%;
+}
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
-  .dropdown-content a {
-    color: black;
-    padding: 12px 16px;
+  /* Modal Content */
+  .modal-content {
+    position: relative;
+    background-color: var(--accentGray);;
+    color: white;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+  }
+
+  button .modal-footer{
+      height: 50px;
+  }
+  
+  /* Add Animation */
+  @-webkit-keyframes animatetop {
+    from {top:-300px; opacity:0} 
+    to {top:0; opacity:1}
+  }
+  
+  @keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+  }
+  
+  /* The Close Button */
+  .close {
+    color: white;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: #000;
    text-decoration: none;
-    display: block;
+    cursor: pointer;
  }
  
-  .dropdown a:hover {background-color: #ddd;}
-
-  .show {display: block;}
-  
-  network{
-      cursor: pointer;
+  .modal-header {
+    padding: 2px 16px;
+    background-color: var(--accentGray2);
+    color: white;
+  }
+  
+  .modal-body {padding: 2px 16px;}
+  
+  .modal-footer {
+    padding: 2px 16px;
+    background-color: var(--accentGray2);
+    color: white;
  }
-
-  .headerIframe{
-      width: 100%;
-      border: 0px;
-      height: 2.5%;
-  }
--- a/ui_templates/static/js/helper.js
+++ b/ui_templates/static/js/helper.js
@ -20,4 +20,37 @@ function updateTime(k) {
  } else {
    return k;
  }
+}
+
+function createModalPopup(titel, body, actions){
+  // Creates a modal popup and makes sure only one layer of "darking" is applied.
+  // Returns the modals id
+  modalsList = JSON.parse(document.getElementById("modals").innerHTML)
+  const idTime = Date.now();
+  modalsList.open.push(idTime);
+  
+  let modal = document.getElementById("mainModal");
+  modal.style.display = "block";
+  // modal.innerHTML += '<div class="modal-content" id="modal-' + String(idTime) + '">  <span class="close" onclick="closeModal(' + String(idTime) + ')">&times;</span>' + body + '<br><button>Shutdown</button><button>Lock</button><button onclick="">Close Software</button></div>'
+  modal.innerHTML += '<div class="modal-content" id="modal-' + String(idTime) + '"> \
+   <div class="modal-header"> \
+   <span class="close" onclick="closeModal(' + String(idTime) + ')">&times;</span> \
+   <h2>' + titel + '</h2>\
+   </div>\
+   <div class="modal-body"><p>' + body + '</p></div>  \
+   <div class="modal-footer"><center>' + actions + '</center></div> \
+   </div>'
+  document.getElementById("modals").innerHTML = JSON.stringify(modalsList)
+  return(idTime)
+}
+
+function closeModal(id){
+  modalsList = JSON.parse(document.getElementById("modals").innerHTML)
+  document.getElementById("modal-" + String(id)).remove()
+  modalsList.open.pop(String(id))
+  document.getElementById("modals").innerHTML = JSON.stringify(modalsList)
+  if(modalsList.open.length == 0){
+    let modal = document.getElementById("mainModal");
+    modal.style.display = "none";
+  }
 }
--- 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>