src/components/Global/MqttConnection.jsx

@@ -74,6 +74,21 @@ const listenMessage = (callback) => {
     });
 };
 
+function StatusColor(el, num) {
+    switch (num) {
+        case 1:
+            el.style.fill = 'orange';
+            break;
+        case 2:
+            el.style.fill = 'green';
+            break;
+        default:
+            el.style.fill = 'rgb(216,216,216)';
+    }
+}
+
+const colorIds = ['c_1023', 'c_2023', 'c_2023'];
+
 const setValSvg = (listenTopic, svg) => {
     client.on('message', (topic, message) => {
         // console.log(topic ,' = ', listenTopic);
@@ -89,7 +104,13 @@ const setValSvg = (listenTopic, svg) => {
                     } else if (value === false) {
                         el.style.display = 'none';
                     } else if (!isNaN(value)) {
-                        el.textContent = Number(value ?? 0.0).toFixed(2);
+                        const num = Number(value);
+                        // el.textContent = Number(value ?? 0.0).toFixed(2);
+                        if (colorIds.includes(el.id)) {
+                            StatusColor(el, num);
+                        } else {
+                            el.textContent = num.toFixed(2);
+                        }
                     } else {
                         el.textContent = value;
                     }