partial progress bar coloring

README.MD

@@ -3,6 +3,8 @@
 # ToDo
 - [X] Pausing functions
 - [X] Presets
-- [ ] Progress bar
 - [X] time on countdown page
 - [X] one-way messaging
+- [ ] Better UI
+- [ ] Progress bar
+- [ ] Endpoint docs

index.js

@@ -26,7 +26,9 @@ currentState = {
   showTimeOnCountdown: true,
   message: "",
   showMessage: false,
-  messageAppearTime: 0
+  messageAppearTime: 0,
+  showProgressbar: true,
+  colorSegments: {20000: "#FFAE00", 5000: "#ff0000", "START": "yellow"}
 };
 
 app.get("/", function (req, res) {
@@ -86,6 +88,12 @@ app.get("/api/v1/set/showTime", function (req, res) {
   res.json({ status: "ok" });
 });
 
+app.get("/api/v1/set/showProgressBar", function (req, res) {
+  currentState.showProgressbar = (req.query.show === 'true');
+  res.json({ status: "ok" });
+});
+
+
 app.get("/api/v1/ctrl/message/show", function (req, res) {
   currentState.message = req.query.msg
   currentState.showMessage = true

static/css/styles.css

@@ -40,13 +40,31 @@ html, body {
   order: 1;
 }
 
+.progWrapper{
+  font-size: 10em;
+  background-color: rgba(63, 63, 63, 0.733);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  font-family: sans-serif;
+  order: 1;
+  height: 24px;
+  width: 80%;
+  border: 1px solid rgb(63, 63, 63);
+}
+
+.progBar {
+  appearance: none;
+  height: 100%;
+  width: 80%;
+  border-radius: 0px;
+  background-color: darkcyan;
+}
+
 .testImg{
   height: 100%;
   width: 100%;
 }
 
-
-
 #overlay {
   position: fixed;
   font-family: sans-serif;

static/js/script.js

@@ -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";
   }
 }
 

templates/adminPanel.html

@@ -51,6 +51,7 @@
 
   <form action="/api/v1/set/addMillisToTimer" target="hiddenFrame">
     <select id="time" name="time" onchange="">
+      <option value="20000">debug 1 (20 secs)</option>
       <option value="300000">00:05:00</option>
       <option value="600000">00:10:00</option>
       <option value="900000">00:15:00</option>

templates/timerPage.html

@@ -27,6 +27,9 @@
     </valueStore>
 
     <div class="container">
+        <div class="progWrapper" id="wholeProgBar">
+            <div class="progBar" id="progBar"></div>
+        </div>
         <div class="timer" id="timer">
             00:00:00
         </div>