feat: Implement dynamic module name rendering using window.kueVersion

- Updated KabelModulStatus component to dynamically display module names based on version.
- Integrated window.kueVersion[slot] to determine the correct module name (KÜ705, KÜ605, or KÜSS).
- Enhanced UI to reflect the module type and status accordingly.
This commit is contained in:
ISA
2024-09-30 12:26:33 +02:00
parent 8f94d70b92
commit 91e744ef42
2 changed files with 34 additions and 14 deletions

View File

@@ -0,0 +1,49 @@
// components/modulesStatus/KabelModulStatus.jsx
import React from "react";
const KabelModulStatus = ({ slot, kueCableBreak, isOnline, moduleVersion }) => {
if (!isOnline) {
return (
<div className="border border-gray-400 w-10 h-20 flex items-center justify-center bg-gray-200">
<div className="text-xs text-gray-500">Leer</div>
</div>
);
}
// Bestimme den Modultyp basierend auf der Version
let moduleName = "";
let moduleType = "";
if (moduleVersion === 419) {
moduleName = "KÜ705";
moduleType = "FO";
} else if (moduleVersion === 350) {
moduleName = "KÜ605";
moduleType = "µC";
} else if (moduleVersion === 1100) {
moduleName = "KÜSS";
moduleType = "___";
}
const isCableBreak = kueCableBreak[slot - 1] === 1;
return (
<div className="border border-gray-400 w-10 h-20 flex flex-col">
{/* Slot-Nummer anzeigen */}
<div className="bg-blue-500 flex-grow flex flex-col items-center justify-center text-white text-[10px]">
<div className="flex w-full mb-1 items-start justify-start">{slot}</div>
<div className="text-[10px]">{moduleName}</div>
<div className="text-[10px]">{moduleType}</div>
</div>
{/* Status-Anzeige */}
<div
className={`w-full h-2/6 ${
isCableBreak ? "bg-red-500" : "bg-green-500"
}`}
></div>
<div className="bg-blue-500 w-full h-1/6"></div>
</div>
);
};
export default KabelModulStatus;