yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(color): color conditiion in air dryer A, B, C & remove H(text)

Browse Source
This commit is contained in:
zain94rif
2026-04-08 14:28:41 +07:00
parent 13fcc126a2
commit 4cca3fb95a
4 changed files with 86 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/Global/MqttConnection.jsx
View File

@@ -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();
}
});
};