diff --git a/src/assets/svg/air_dryer_A_rev.svg b/src/assets/svg/air_dryer_A_rev.svg
index 757cf04..e852408 100644
--- a/src/assets/svg/air_dryer_A_rev.svg
+++ b/src/assets/svg/air_dryer_A_rev.svg
@@ -186,7 +186,7 @@
Alarm Info
- ####.##
+ ####.##
H
RT or LT Dry
@@ -217,14 +217,9 @@
REGEN
-
DRYING
-
-
REGEN
-
DRYING
-
AIR DRYER UNIT A (01-CL-10532-A)
####.##
####.##
@@ -237,11 +232,16 @@
####.##
####.##
##
-
-
-
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/assets/svg/air_dryer_B_rev.svg b/src/assets/svg/air_dryer_B_rev.svg
index 5f84a33..564c3fa 100644
--- a/src/assets/svg/air_dryer_B_rev.svg
+++ b/src/assets/svg/air_dryer_B_rev.svg
@@ -186,7 +186,7 @@
Alarm Info
- ####.##
+ ####.##
H
RT or LT Dry
@@ -217,13 +217,9 @@
REGEN
-
DRYING
-
REGEN
-
DRYING
-
AIR DRYER UNIT B (01-CL-10535-B)
####.##
####.##
@@ -236,12 +232,16 @@
####.##
####.##
##
-
+
-
-
-
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/assets/svg/air_dryer_C_rev.svg b/src/assets/svg/air_dryer_C_rev.svg
index 4b320ba..7431663 100644
--- a/src/assets/svg/air_dryer_C_rev.svg
+++ b/src/assets/svg/air_dryer_C_rev.svg
@@ -186,7 +186,7 @@
Alarm Info
- ####.##
+ ####.##
H
RT or LT Dry
@@ -217,13 +217,9 @@
REGEN
-
DRYING
-
REGEN
-
DRYING
-
AIR DRYER UNIT C (01-CL-10539-C)
####.##
####.##
@@ -236,12 +232,16 @@
####.##
####.##
##
-
+
-
-
-
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/Global/MqttConnection.jsx b/src/components/Global/MqttConnection.jsx
index def0648..c3202a8 100644
--- a/src/components/Global/MqttConnection.jsx
+++ b/src/components/Global/MqttConnection.jsx
@@ -74,7 +74,21 @@ const listenMessage = (callback) => {
});
};
-function StatusColor(el, num) {
+const dryerIds = ['c_4018', 'c_4021', 'c_5018', 'c_5021', 'c_6018', 'c_6021'];
+const DryerColor = (condition) => {
+ switch (condition) {
+ case 1:
+ c_4018.style.fill = 'yellow';
+ c_4021.style.fill = 'rgb(216,216,216)';
+ break;
+ default:
+ c_4018.style.fill = 'rgb(216,216,216)';
+ c_4021.style.fill = 'yellow';
+ }
+};
+
+const colorIds = ['c_1023', 'c_2023', 'c_2023'];
+const StatusColor = (el, num) => {
switch (num) {
case 1:
el.style.fill = 'orange';
@@ -85,37 +99,61 @@ function StatusColor(el, num) {
default:
el.style.fill = 'rgb(216,216,216)';
}
-}
+};
-const colorIds = ['c_1023', 'c_2023', 'c_2023'];
+const handleBoolean = (svg, el, value) => {
+ if (!dryerIds.includes(el.id)) {
+ el.style.display = value ? '' : 'none';
+ return;
+ }
+
+ const i = dryerIds.indexOf(el.id);
+ const id1 = dryerIds[i - (i % 2)];
+ const id2 = dryerIds[i - (i % 2) + 1];
+
+ const el1 = svg.getElementById(id1);
+ const el2 = svg.getElementById(id2);
+
+ if (!el1 || !el2) return;
+
+ el1.style.fill = value ? 'rgb(216,216,216)' : 'yellow';
+ el2.style.fill = value ? 'yellow' : 'rgb(216,216,216)';
+};
+
+const handleNumber = (el, value) => {
+ const num = Number(value);
+
+ if (colorIds.includes(el.id)) {
+ StatusColor(el, num);
+ } else {
+ el.textContent = num.toFixed(2);
+ }
+};
+
+const handleOther = (el, value) => {
+ el.textContent = value;
+};
const setValSvg = (listenTopic, svg) => {
client.on('message', (topic, message) => {
- // console.log(topic ,' = ', listenTopic);
if (topic === listenTopic) {
const objChanel = JSON.parse(message);
Object.entries(objChanel).forEach(([key, value]) => {
- // console.log(key, value);
const el = svg.getElementById(key);
- if (el) {
- if (value === true) {
- el.style.display = ''; // sembunyikan
- } else if (value === false) {
- el.style.display = 'none';
- } else if (!isNaN(value)) {
- 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;
- }
+
+ if (!el) return;
+
+ if (typeof value === 'boolean') {
+ handleBoolean(svg, el, value);
+ } else if (!isNaN(value)) {
+ handleNumber(el, value);
+ } else {
+ handleOther(el, value);
}
});
+ const target = svg.querySelector('text[x="225.25"][y="537.752"]');
+ if (target) target.remove();
}
});
};