Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Aderbruch in dashboard anzeigen bei Status

Browse Source
This commit is contained in:
ISA
2024-09-30 11:41:02 +02:00
parent 47070f63aa
commit 8f94d70b92
3 changed files with 65 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/modulesStatus/Kue705_FO.jsx
View File

@@ -1,19 +1,31 @@
// components/Kue705_FO.jsx
import React from "react";
const Kue705_FO = ({ slot }) => {
const Kue705_FO = ({ slot, kueCableBreak, isOnline }) => {
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>
);
}
const isCableBreak = kueCableBreak[slot - 1] === 1;
return (
<div className="border border-gray-400 w-10 h-20 flex flex-col">
{/* Erstes Kind, nimmt den restlichen Platz ein */}
<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="flex w-full mb-1 items-start justify-start">{slot}</div>
<div className="text-[10px]">KÜ705</div>
<div className="text-[10px]">FO</div>
</div>
{/* Die unteren Abschnitte behalten ihre festen Höhen */}
<div className="bg-green-500 w-full h-2/6"></div>
<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>
);