From 641bd832072962b3607df74487286d665d8dbfe3 Mon Sep 17 00:00:00 2001
From: Parnic <github@parnic.com>
Date: Wed, 13 Oct 2021 13:49:34 -0500
Subject: [PATCH] Show different colors based on filled value

This shows green until the bar is at 50%, yellow until 33%, and red
below that.

This also fixes the bar to show white when "colored" is disabled in the
config.
---
 MMM-ScreenLogic.js | 12 +++++++++++-
 screenlogic.css    | 10 +++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/MMM-ScreenLogic.js b/MMM-ScreenLogic.js
index 43111f6..a0ef46a 100644
--- a/MMM-ScreenLogic.js
+++ b/MMM-ScreenLogic.js
@@ -86,8 +86,18 @@ Module.register('MMM-ScreenLogic',{
                 let dataStr = poolData.status.pH
                 if (this.config.showPHTankLevel) {
                     let percent = Math.round(((poolData.status.pHTank - 1) / this.config.pHTankLevelMax) * 100)
+                    let cls = ""
+                    if (this.config.colored) {
+                        if (percent <= 50 && percent > 33) {
+                            cls = "progress-bar-warning"
+                        } else if (percent <= 33) {
+                            cls = "progress-bar-danger"
+                        } else {
+                            cls = "progress-bar-success"
+                        }
+                    }
                     let progBarDiv = `<div class="progress vertical">
-                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100" style="width: ${percent}%;">
+                        <div class="progress-bar ${cls}" role="progressbar" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100" style="width: ${percent}%;">
                         </div>
                     </div>`
 
diff --git a/screenlogic.css b/screenlogic.css
index 422a24c..875211b 100644
--- a/screenlogic.css
+++ b/screenlogic.css
@@ -118,7 +118,7 @@
     line-height: 20px;
     color: #fff;
     text-align: center;
-    background-color: #337ab7;
+    background-color: #fff;
     -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
     box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
     -webkit-transition: width .6s ease;
@@ -128,4 +128,12 @@
 
 .MMM-ScreenLogic .progress-bar-success {
     background-color: #5cb85c;
+}
+
+.MMM-ScreenLogic .progress-bar-warning {
+    background-color: #ffc107;
+}
+
+.MMM-ScreenLogic .progress-bar-danger {
+    background-color: #dc3545;
 }
\ No newline at end of file