grey/Enlight
1
0
Fork 0
mirror of https://github.com/TheGreyDiamond/Enlight.git synced 2025-07-17 20:33:48 +02:00
Code Issues Releases Activity

Added popup things

Browse Source
This commit is contained in:
TheGreyDiamond
2021-09-19 12:16:49 +02:00
parent 722b8e1333
commit 6481d73c28
6 changed files with 3451 additions and 545 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
index.js
View File

@ -71,6 +71,11 @@ var mySession = {
usedUIDs: [], usedUIDs: [],
}; };
var currentState = {
projectName: "",
projectDirty: false
}
var mainConn = ""; var mainConn = "";
var mainNetworkInterface = undefined; var mainNetworkInterface = undefined;
@ -416,6 +421,17 @@ function init() {
win.loadFile("ui_templates/temp.html"); win.loadFile("ui_templates/temp.html");
const timestamp3 = Date.now(); const timestamp3 = Date.now();
event.returnValue = ""; 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")) { } else if (String(arg).includes("SESSION:get.state")) {
// Retrives the session state // Retrives the session state

3006
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

389
ui_templates/header.html
View File

@ -1,203 +1,234 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="UTF-8" /> <head>
<title>Enlight - Screen 1</title> <meta charset="UTF-8" />
<!--<meta <title>Enlight - Screen 1</title>
http-equiv="Content-Security-Policy" <script src="static/jquery-1.7.1.min.js" type="text/javascript"></script>
content="script-src 'self' 'unsafe-inline';" <script src="static/js/helper.js" type="text/javascript"></script>
/>--> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="static/jquery-1.7.1.min.js" type="text/javascript"></script> <link href="static/default.css" rel="stylesheet" />
<script src="static/js/helper.js" type="text/javascript"></script> <link href="static/fontawesome-free-5.15.1-web/css/all.css" rel="stylesheet" />
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>*--> <dataStore id="modals" style="display: none;">
<link href="static/default.css" rel="stylesheet" /> {"open": []}
<link </dataStore>
href="static/fontawesome-free-5.15.1-web/css/all.css" </head>
rel="stylesheet"
/> <body>
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">--> <script>
</head> let modalsList = [];
<body> </script>
<div id="header-bar" class="header-bar"> <modal class="modal" id="mainModal">
<div class="areaRight">
<network> </modal>
<i
class="fas fa-network-wired" </div>
id="networkBtn" <div id="header-bar" class="header-bar">
onclick='document.getElementById("networkDropdown").classList.toggle("show");buildNetworkDropDown();' <div class="areaRight">
></i> <power>
<div id="networkDropdown" class="dropdown-content"></div> <i class="fas fa-power-off" id="powerBtn"
</network> onclick='createModalPopup("Power Functions", "What action do you want to execute?", "<button>Shutdown</button><button>Lock</button><button onclick=\" quitApplication() \">Close Software</button>")'></i>
<battery id="battery" class="fa"></battery> </power>
<clock id="clock" class="header-clock"></clock>
<i <network>
class="fa-spin loader1 fa" <i class="fas fa-network-wired" id="networkBtn"
style="font-size: 18px; padding-right: 4px" onclick='document.getElementById("networkDropdown").classList.toggle("show");buildNetworkDropDown();'></i>
id="loader" <div id="networkDropdown" class="dropdown-content">
>&#xf1ce;</i </div>
> </network>
</div> <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> </div>
var loaderInUse = true; <script>
const { ipcRenderer } = require("electron"); var loaderInUse = true;
setInterval(function () { const { ipcRenderer } = require("electron");
// Pulling general info from main thread setInterval(function () {
loadOverride = ipcRenderer.sendSync( // Pulling general info from main thread
"synchronous-message", loadOverride = ipcRenderer.sendSync(
"loadOverride" "synchronous-message",
); "loadOverride"
if (!loaderInUse) { );
if (loadOverride) { if (!loaderInUse) {
document.getElementById("loader").innerHTML = "&#xf1ce;"; if (loadOverride) {
} else { document.getElementById("loader").innerHTML = "&#xf1ce;";
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;"
);
} else { } else {
console.warn("Network is no longer valid"); document.getElementById("loader").innerHTML = "";
ipcRenderer.sendSync(
"synchronous-message",
"state:networkNoLongerValid"
);
} }
console.log("hide loader") }
loaderInUse = false; }, 500);
document.getElementById("loader").innerHTML = "";
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) { if (does_list_contain(allNetworkNames, lastNetwork)) {
idAsNumber = parseInt(id); nameOfElm =
newNetwork = allNetworkNames[id]; "networkEntry" + String(allNetworkNames.indexOf(lastNetwork));
ipcRenderer.sendSync(
"synchronous-message",
"set:newNetwork|" + newNetwork
);
buildNetworkDropDown();
nameOfElm = "networkEntry" + String(idAsNumber);
networkEntryElm = document.getElementById(nameOfElm); networkEntryElm = document.getElementById(nameOfElm);
networkEntryElm.innerHTML = networkEntryElm.innerHTML.replace( networkEntryElm.innerHTML = networkEntryElm.innerHTML.replace(
"&nbsp;&nbsp;&nbsp;", "&nbsp;&nbsp;&nbsp;",
"&#10004;" "&#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(){ //setTimeout(function(){
// buildNetworkDropDown(); // buildNetworkDropDown();
//}, 1000) //}, 1000)
// //
</script> </script>
<script> <script>
// Battery info screen // Battery info screen
batteryExists = ipcRenderer.sendSync("synchronous-message", "hasBattery"); // prints "pong" batteryExists = ipcRenderer.sendSync("synchronous-message", "hasBattery");
var batteryShowdStart = false; var batteryShowdStart = false;
if (batteryExists) { if (batteryExists) {
batteryLevel = ipcRenderer.sendSync( batteryLevel = ipcRenderer.sendSync(
"synchronous-message", "synchronous-message",
"getBatteryLevel" "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; batteryShowdStart = true;
} if (batteryLevel > 75) {
if (batteryShowdStart) { document.getElementById("battery").innerHTML = "&#xf240;";
document.getElementById("loader").innerHTML = ""; } else if (batteryLevel <= 75 && batteryLevel > 50) {
loaderInUse = false; document.getElementById("battery").innerHTML = "&#xf241;";
} } else if (batteryLevel <= 50 && batteryLevel > 25) {
document.getElementById("battery").innerHTML = "&#xf242;";
function updateClock(){ } else if (batteryLevel <= 25 && batteryLevel > 5) {
var date = new Date(); document.getElementById("battery").innerHTML = "&#xf243;";
hour = updateTime(date.getHours()); } else {
min = updateTime(date.getMinutes()); document.getElementById("battery").innerHTML = "&#xf244;";
sec = updateTime(date.getSeconds()); }
document.getElementById("clock").innerHTML = }, 2000);
hour + ":" + min + ":" + sec; } else {
} batteryShowdStart = true;
updateClock(); }
setInterval(function () { if (batteryShowdStart) {
updateClock() document.getElementById("loader").innerHTML = "";
}, 500); loaderInUse = false;
</script> }
<script>
window.onclick = function (event) { function updateClock() {
if (!event.target.matches("#networkBtn")) { var date = new Date();
var dropdowns = document.getElementsByClassName("dropdown-content"); hour = updateTime(date.getHours());
var i; min = updateTime(date.getMinutes());
for (i = 0; i < dropdowns.length; i++) { sec = updateTime(date.getSeconds());
var openDropdown = dropdowns[i]; document.getElementById("clock").innerHTML =
if (openDropdown.classList.contains("show")) { hour + ":" + min + ":" + sec;
openDropdown.classList.remove("show"); }
} 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> <!--</body>
</html>--> </html>-->

190
ui_templates/static/default.css
View File

@ -1,73 +1,165 @@
@import url('fonts/Quicksand-Regular.ttf'); :root {
body, html { --backgroundGray: rgb(51, 51, 51);
margin: 0px; --accentGray: rgba(36, 36, 36, 0.9);
background-color: rgb(51, 51, 51); --accentGray2:rgba(20, 20, 20, 0.877);
height: 100%; }
width: 100%;
overflow: hidden; @import url("fonts/Quicksand-Regular.ttf");
font-family: 'Quicksand', sans-serif; body,
color:white; html {
margin: 0px;
background-color: rgb(51, 51, 51);
height: 100%;
width: 100%;
overflow: hidden;
font-family: "Quicksand", sans-serif;
color: white;
} }
small { small {
font-size: 10px; font-size: 10px;
} }
.header-bar{ .header-bar {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
width: 100%; width: 100%;
height: 34px; height: 34px;
background-color: rgba(36, 36, 36, 0.9); background-color: rgba(36, 36, 36, 0.9);
} }
.header-clock { .header-clock {
padding: 2px; padding: 2px;
padding-right: 4px; padding-right: 4px;
} }
.battery { .battery {
right: 80px; right: 80px;
position: fixed; position: fixed;
padding: 2px; padding: 2px;
padding-right: 4px; padding-right: 4px;
} }
.loader1 { .loader1 {
position: fixed; position: fixed;
right: 80px; right: 80px;
} }
.areaRight { .areaRight {
float: right; float: right;
} }
.dropdown-content { .dropdown-content {
display: none; display: none;
position: absolute; position: absolute;
background-color: #f1f1f1; background-color: #f1f1f1;
min-width: 160px; min-width: 160px;
overflow: auto; overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1; z-index: 1;
right: 0px; 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 { /* Modal Content */
color: black; .modal-content {
padding: 12px 16px; 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; text-decoration: none;
display: block; cursor: pointer;
} }
.dropdown a:hover {background-color: #ddd;} .modal-header {
padding: 2px 16px;
.show {display: block;} background-color: var(--accentGray2);
color: white;
network{ }
cursor: pointer;
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: var(--accentGray2);
color: white;
} }
.headerIframe{
width: 100%;
border: 0px;
height: 2.5%;
}

33
ui_templates/static/js/helper.js
View File

@ -20,4 +20,37 @@ function updateTime(k) {
} else { } else {
return k; 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";
}
} }

362
ui_templates/temp.html
View File

@ -1,4 +1,237 @@
<!DOCTYPE html> <!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> <html>
<head> <head>
<meta charset="UTF-8" /> <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">--> <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">-->
</head> </head>
<body> <body>
<div id="header-bar" class="header-bar"> <!--<div id="header-bar" class="header-bar">
<div class="areaRight"> <div class="areaRight">
<network> <network>
<i <i
class="fas fa-network-wired" class="fas fa-network-wired"
id="networkBtn" id="networkBtn"
onclick='document.getElementById("networkDropdown").classList.toggle("show");buildNetworkDropDown();' onclick='document.getElementById("networkDropdown").classList.toggle("show");'
></i> ></i>
<div id="networkDropdown" class="dropdown-content"></div> <div id="networkDropdown" class="dropdown-content"></div>
</network> </network>
@ -61,8 +294,6 @@
function buildNetworkDropDown() { function buildNetworkDropDown() {
loaderInUse = true; loaderInUse = true;
document.getElementById("loader").innerHTML = "&#xf1ce;"; document.getElementById("loader").innerHTML = "&#xf1ce;";
console.log("show loader")
const timestamp = Date.now();
allNetworks = ipcRenderer.sendSync( allNetworks = ipcRenderer.sendSync(
"synchronous-message", "synchronous-message",
"getNetworks" "getNetworks"
@ -71,9 +302,6 @@
"synchronous-message", "synchronous-message",
"getMainNetwork" "getMainNetwork"
); );
const timestamp2 = Date.now();
console.log("Requests took" , (timestamp2 - timestamp))
allNetworkNames = []; allNetworkNames = [];
console.log(lastNetwork); console.log(lastNetwork);
i = 0; i = 0;
@ -108,7 +336,6 @@
"state:networkNoLongerValid" "state:networkNoLongerValid"
); );
} }
console.log("hide loader")
loaderInUse = false; loaderInUse = false;
document.getElementById("loader").innerHTML = ""; document.getElementById("loader").innerHTML = "";
} }
@ -129,10 +356,7 @@
"&#10004;" "&#10004;"
); );
} }
//setTimeout(function(){ buildNetworkDropDown();
// buildNetworkDropDown();
//}, 1000)
//
</script> </script>
<script> <script>
// Battery info screen // Battery info screen
@ -170,18 +394,14 @@
document.getElementById("loader").innerHTML = ""; document.getElementById("loader").innerHTML = "";
loaderInUse = false; loaderInUse = false;
} }
function updateClock(){ setInterval(function () {
var date = new Date(); var date = new Date();
hour = updateTime(date.getHours()); hour = updateTime(date.getHours());
min = updateTime(date.getMinutes()); min = updateTime(date.getMinutes());
sec = updateTime(date.getSeconds()); sec = updateTime(date.getSeconds());
document.getElementById("clock").innerHTML = document.getElementById("clock").innerHTML =
hour + ":" + min + ":" + sec; hour + ":" + min + ":" + sec;
}
updateClock();
setInterval(function () {
updateClock()
}, 500); }, 500);
</script> </script>
<script> <script>
@ -197,97 +417,23 @@
} }
} }
}; };
</script> </script>-->
<!--<iframe src="header.html" class="headerIframe"></iframe>-->
<!--</body> <h1>Hello World!</h1>
</html>--> <button onclick='ipcRenderer.sendSync("synchronous-message", "PAGE:change.session");'>Session screen</button>
<style> <button onclick='ipcRenderer.sendSync("synchronous-message", "PAGE:change.fixtures");'>Fixture screen</button>
table { We are using node
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> <script>
firstState = document.getElementById("libSearch").value document.write(process.versions.node);
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)
</script> </script>
, Chrome
<script>
document.write(process.versions.chrome);
</script>
, and Electron
<script>
document.write(process.versions.electron);
</script>
.
</body> </body>
</html> </html>