52 lines
1.6 KiB
TypeScript
52 lines
1.6 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="flex justify-center items-center gap-2 p-3 border rounded-lg bg-gray-100 shadow-sm">
|
|
{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-3 h-3 rounded-full border-2 border-gray-300 shadow-sm ${bgColor} transition-all duration-200 hover:scale-110 flex-shrink-0`}
|
|
title={`Slot ${slotIndex} LED${ledIndex + 1}: ${statusText}`}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FallSensors;
|