partial progress bar coloring

This commit is contained in:
2022-02-24 22:18:21 +01:00
parent 2619771e18
commit 94eccbca1f
6 changed files with 71 additions and 6 deletions

View File

@ -13,6 +13,10 @@ function enterFullscreen(element) {
}
}
function percentage(partialValue, totalValue) {
return (100 * partialValue) / totalValue;
}
function updateFullscreen(){
if(JSON.parse(document.getElementById("incomeData").innerHTML).defaultFullScreen && allowFullscreen){
enterFullscreen(document.documentElement)
@ -45,6 +49,24 @@ function msToTime(s, data) {
return out;
}
function findProgessColor(colors, value){
console.info("\n\n\n\n\n")
const allColors = Object.keys(colors);
let resColor = colors["START"]
for(let color in allColors){
const currColor = allColors[color]
console.log(color, currColor, parseInt(currColor), value, colors[String(currColor)])
if(value <= parseInt(currColor)){
console.log("trith")
resColor = colors[currColor]
}
}
// console.info(resColor, value)
return(resColor)
}
function handleUpdate() {
resp = httpGet("/api/v1/data");
@ -77,13 +99,22 @@ function handleUpdate() {
if (data.mode == "clock") {
document.getElementById("timer").innerHTML = getTime();
document.getElementById("testImg").style.display = "none";
document.getElementById("wholeProgBar").style.display = "none";
} else if (data.mode == "timer") {
document.getElementById("wholeProgBar").style.display = "block";
if(data.timerRunState){
const now = new Date()
const diff = data.countdownGoal - now.getTime()
document.getElementById("timer").innerHTML = msToTime(diff, data);
document.getElementById("progBar").style.width = percentage(diff, data.timeAmountInital) + "%";
document.getElementById("progBar").style.backgroundColor = findProgessColor(data.colorSegments,diff)
document.getElementById("testImg").style.display = "none";
}
if(data.showTimeOnCountdown){
document.getElementById("clockSec").innerHTML = getTime();
@ -94,10 +125,12 @@ function handleUpdate() {
} else if (data.mode == "black") {
document.getElementById("timer").innerHTML = "";
document.getElementById("testImg").style.display = "none";
document.getElementById("wholeProgBar").style.display = "none";
} else if (data.mode == "test") {
document.getElementById("timer").innerHTML = "";
document.getElementById("testImg").style.display = "block";
document.getElementById("progBar").style.display = "none";
}
}