From 4cca3fb95a3e01fdc344c0995d2abe96dafd073b Mon Sep 17 00:00:00 2001 From: zain94rif Date: Wed, 8 Apr 2026 14:28:41 +0700 Subject: [PATCH] fix(color): color conditiion in air dryer A, B, C & remove H(text) --- src/assets/svg/air_dryer_A_rev.svg | 18 +++--- src/assets/svg/air_dryer_B_rev.svg | 18 +++--- src/assets/svg/air_dryer_C_rev.svg | 18 +++--- src/components/Global/MqttConnection.jsx | 80 +++++++++++++++++------- 4 files changed, 86 insertions(+), 48 deletions(-) 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(); } }); };