Github
/
Ward
mirror of
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

js fixes

This commit is contained in:
Antony Leons 2024-04-15 18:53:31 +01:00
parent abe3fbc9e3
commit 9d1fd3b45f
6 changed files with 52 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/main/resources/static/js/background.js
View File

@ -1,14 +1,13 @@
"use strict";
/**
* Initializes dynamic background
*/
function backgroundInitialization()
{
if (html.getAttribute("enableFog") == "true")
if (html.getAttribute("enableFog") === "true")
{
background = VANTA.FOG({el: "#background", blurFactor: 0.40, zoom: 1.50});
if (html.getAttribute("theme") == "light")
if (html.getAttribute("theme") === "light")
{
background.setOptions
({
@ -34,9 +33,9 @@ if (html.getAttribute("enableFog") == "true")
if (background){
background.destroy();
}
if (html.getAttribute("backgroundColor") == "default" )
if (html.getAttribute("backgroundColor") === "default" )
{
document.body.style.backgroundColor = html.getAttribute("theme") == "light" ? "#e5e5e5" : "#292929"
document.body.style.backgroundColor = html.getAttribute("theme") === "light" ? "#e5e5e5" : "#292929"
}
else
{

29
src/main/resources/static/js/chart.js
View File

@ -1,21 +1,20 @@
"use strict";
/**
* Initializes labels and datasets
*/
function chartInitialization()
{
let processorRectangle = document.getElementById("processor-rectangle");
let ramRectangle = document.getElementById("ram-rectangle");
let storageRectangle = document.getElementById("storage-rectangle");
const processorRectangle = document.getElementById("processor-rectangle");
const ramRectangle = document.getElementById("ram-rectangle");
const storageRectangle = document.getElementById("storage-rectangle");
let ctx = document.getElementById("chart-body").getContext("2d");
const ctx = document.getElementById("chart-body").getContext("2d");
processorTriangle = document.getElementById("processor-triangle");
ramTriangle = document.getElementById("ram-triangle");
storageTriangle = document.getElementById("storage-triangle");
let dataLight =
const dataLight =
{
data:
{
@ -55,7 +54,7 @@ function chartInitialization()
]
}
}
let dataDark =
const dataDark =
{
data:
{
@ -95,7 +94,7 @@ function chartInitialization()
]
}
}
let options =
const options =
{
type: "line",
options:
@ -150,11 +149,11 @@ function chartInitialization()
}
};
chart = new Chart(ctx, Object.assign((html.getAttribute("theme") == "light") ? dataLight : dataDark, options));
chart = new Chart(ctx, Object.assign((html.getAttribute("theme") === "light") ? dataLight : dataDark, options));
processorRectangle.addEventListener("click", function(event) {hideDataset(event.target || event.srcElement)});
ramRectangle.addEventListener("click", function(event) {hideDataset(event.target || event.srcElement)});
storageRectangle.addEventListener("click", function(event) {hideDataset(event.target || event.srcElement)});
processorRectangle.addEventListener("click", (event) => {hideDataset(event.target || event.srcElement)});
ramRectangle.addEventListener("click", (event) => {hideDataset(event.target || event.srcElement)});
storageRectangle.addEventListener("click", (event) => {hideDataset(event.target || event.srcElement)});
}
/**
@ -165,12 +164,12 @@ function chartInitialization()
*/
function chartTick(usageData)
{
let datasets = chart.data.datasets;
const datasets = chart.data.datasets;
for (let i = 0; i < datasets.length; i++)
{
let dataset = datasets[i].data;
let usageDataArray = Object.values(usageData);
const dataset = datasets[i].data;
const usageDataArray = Object.values(usageData);
for (let k = 0; k < dataset.length - 1; k++)
{

1
src/main/resources/static/js/globals.js
View File

@ -1,4 +1,3 @@
"use strict";
/**
* Used to determine html tag object

27
src/main/resources/static/js/index.js
View File

@ -1,4 +1,3 @@
"use strict";
/**
* Initializes uptime, labels and chart values
@ -32,18 +31,18 @@ function indexInitialization()
*/
function showCards()
{
let cards = document.getElementsByClassName("card");
let versionLabel = document.getElementById("project-version");
const cards = document.getElementsByClassName("card");
const versionLabel = document.getElementById("project-version");
let randomSequenceArray = getRandomSequenceArray();
const randomSequenceArray = getRandomSequenceArray();
for (let i = 0; i < cards.length; i++)
{
setTimeout(function()
setTimeout(()=>
{
cards[randomSequenceArray[i]].style.opacity = "1";
if (randomSequenceArray[i] == 4)
if (randomSequenceArray[i] === 4)
{
versionLabel.style.opacity = "1";
}
@ -56,11 +55,11 @@ function showCards()
*/
function getRandomSequenceArray()
{
let buffer = [];
const buffer = [];
while (buffer.length < 5)
{
let randomNumber = Math.floor(Math.random() * 5);
const randomNumber = Math.floor(Math.random() * 5);
if ((buffer.indexOf(randomNumber) === -1))
{
@ -78,9 +77,9 @@ function sendUsageRequest()
{
usageXHR.onreadystatechange = function()
{
if ((this.readyState == 4) && (this.status == 200))
if ((this.readyState === 4) && (this.status === 200))
{
let response = JSON.parse(this.response);
const response = JSON.parse(this.response);
labelsTick(response);
chartTick(response);
@ -100,9 +99,9 @@ function sendInfoRequest()
{
infoXHR.onreadystatechange = function()
{
if ((this.readyState == 4) && (this.status == 200))
if ((this.readyState === 4) && (this.status === 200))
{
let response = JSON.parse(this.response);
const response = JSON.parse(this.response);
currentClockSpeed.innerHTML = response.processor.clockSpeed;
currentProcCount.innerHTML = response.machine.procCount;
@ -124,9 +123,9 @@ function sendUptimeRequest()
{
infoXHR.onreadystatechange = function()
{
if ((this.readyState == 4) && (this.status == 200))
if ((this.readyState === 4) && (this.status === 200))
{
let response = JSON.parse(this.response);
const response = JSON.parse(this.response);
days.innerHTML = response.days;
hours.innerHTML = response.hours;

23
src/main/resources/static/js/labels.js
View File

@ -1,4 +1,3 @@
"use strict";
/**
* Initializes labels span arrays
@ -32,7 +31,7 @@ function labelsInitialization()
*/
function labelsTick(usageData)
{
let usageDataArray = Object.values(usageData);
const usageDataArray = Object.values(usageData);
for (let i = 0; i < usageDataArray.length; i++)
{
@ -65,38 +64,38 @@ function labelsTick(usageData)
*/
function formatLabels(labelArray, usageData)
{
let usageDataString = String(usageData);
const usageDataString = String(usageData);
switch (usageDataString.length)
{
case 1:
{
labelArray[0].innerHTML = 0;
labelArray[0].style.color = (html.getAttribute("theme") == "light") ? "rgba(188, 188, 188, 1)" : "rgba(121, 121, 121, 1)";
labelArray[0].style.color = (html.getAttribute("theme") === "light") ? "rgba(188, 188, 188, 1)" : "rgba(121, 121, 121, 1)";
labelArray[1].innerHTML = 0;
labelArray[1].style.color = (html.getAttribute("theme") == "light") ? "rgba(188, 188, 188, 1)" : "rgba(121, 121, 121, 1)";
labelArray[1].style.color = (html.getAttribute("theme") === "light") ? "rgba(188, 188, 188, 1)" : "rgba(121, 121, 121, 1)";
labelArray[2].innerHTML = usageDataString[0];
labelArray[2].style.color = (html.getAttribute("theme") == "light") ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 1)";
labelArray[2].style.color = (html.getAttribute("theme") === "light") ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 1)";
break;
}
case 2:
{
labelArray[0].innerHTML = 0;
labelArray[0].style.color = (html.getAttribute("theme") == "light") ? "rgba(188, 188, 188, 1)" : "rgba(121, 121, 121, 1)";
labelArray[0].style.color = (html.getAttribute("theme") === "light") ? "rgba(188, 188, 188, 1)" : "rgba(121, 121, 121, 1)";
labelArray[1].innerHTML = usageDataString[0];
labelArray[1].style.color = (html.getAttribute("theme") == "light") ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 1)";
labelArray[1].style.color = (html.getAttribute("theme") === "light") ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 1)";
labelArray[2].innerHTML = usageDataString[1];
labelArray[2].style.color = (html.getAttribute("theme") == "light") ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 1)";
labelArray[2].style.color = (html.getAttribute("theme") === "light") ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 1)";
break;
}
default:
{
labelArray[0].innerHTML = usageDataString[0];
labelArray[0].style.color = (html.getAttribute("theme") == "light") ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 1)";
labelArray[0].style.color = (html.getAttribute("theme") === "light") ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 1)";
labelArray[1].innerHTML = usageDataString[1];
labelArray[1].style.color = (html.getAttribute("theme") == "light") ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 1)";
labelArray[1].style.color = (html.getAttribute("theme") === "light") ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 1)";
labelArray[2].innerHTML = usageDataString[2];
labelArray[2].style.color = (html.getAttribute("theme") == "light") ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 1)";
labelArray[2].style.color = (html.getAttribute("theme") === "light") ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 1)";
}
}
}

20
src/main/resources/static/js/setup.js
View File

@ -101,16 +101,16 @@ function sendSetupRequest()
setupXHR.onreadystatechange = function()
{
if (this.readyState == 4)
if (this.readyState === 4)
{
if (this.status == 200)
if (this.status === 200)
{
submit.value = "LOADING";
window.location = "http://" + window.location.hostname + ":" + port.value;
window.location = `http://${window.location.hostname}:${port.value}`;
}
else
{
let message =
const message =
{
text: "Fill the form correctly",
type: ("")
@ -121,13 +121,13 @@ function sendSetupRequest()
}
}
let data =
const data =
{
"serverName": serverName.value,
"theme": html.getAttribute("theme"),
"port": port.value,
"enableFog": String(enableFog.checked),
"backgroundColor": backgroundColor.value
serverName: serverName.value,
theme: html.getAttribute("theme"),
port: port.value,
enableFog: String(enableFog.checked),
backgroundColor: backgroundColor.value
}
setupXHR.send(JSON.stringify(data));