63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import { useSelector } from "react-redux";
|
|
import { RootState } from "../../../redux/store";
|
|
|
|
// components/main/fall-detection-sensors/FallSensors.tsx
|
|
interface FallSensorsProps {
|
|
slotIndex: number;
|
|
}
|
|
|
|
const FallSensors: React.FC<FallSensorsProps> = ({ slotIndex }) => {
|
|
const { kvzStatus } = useSelector((state: RootState) => state.kueDataSlice);
|
|
|
|
// Nur 4 LEDs für den spezifischen Slot anzeigen
|
|
const leds = Array.from({ length: 4 }, (_, ledIndex) => {
|
|
const arrayIndex = slotIndex * 4 + ledIndex;
|
|
const ledValue = kvzStatus?.[arrayIndex];
|
|
|
|
// LED Status: 1 = grün, 0 = rot, 2 = grau, undefined = grau
|
|
if (ledValue === 1) return "green";
|
|
if (ledValue === 0) return "red";
|
|
return "gray"; // für 2 oder undefined
|
|
});
|
|
|
|
return (
|
|
<div className="bg-gray-300 border border-gray-400 rounded p-1 mt-4 w-full ">
|
|
{/* Überschrift mit KVZ-Labels */}
|
|
<div className="flex justify-between items-center mb-2">
|
|
<span className="text-[8px] font-medium text-gray-700">KVZ1</span>
|
|
<span className="text-[8px] font-medium text-gray-700">KVZ2</span>
|
|
<span className="text-[8px] font-medium text-gray-700">KVZ3</span>
|
|
<span className="text-[8px] font-medium text-gray-700">KVZ4</span>
|
|
</div>
|
|
|
|
{/* LEDs */}
|
|
<div className="flex justify-between items-center">
|
|
{leds.map((ledStatus, ledIndex) => {
|
|
// LED Farben: grün (1), rot (0), grau (2)
|
|
let bgColor = "bg-gray-400"; // Standard grau
|
|
let statusText = "Unbekannt";
|
|
|
|
if (ledStatus === "green") {
|
|
bgColor = "bg-green-500";
|
|
statusText = "Ein";
|
|
} else if (ledStatus === "red") {
|
|
bgColor = "bg-red-500";
|
|
statusText = "Aus";
|
|
}
|
|
|
|
return (
|
|
<div
|
|
key={ledIndex}
|
|
className={`w-4 h-4 rounded-full border border-gray-500 ${bgColor} flex-shrink-0`}
|
|
title={`Slot ${slotIndex} LED${ledIndex + 1}: ${statusText}`}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FallSensors;
|