feat: KVZ API JSON Data

components/main/fall-detection-sensors/FallSensors.tsx

@@ -1,25 +1,49 @@
 import React from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
+
 // components/main/fall-detection-sensors/FallSensors.tsx
-const FallSensors = () => {
-  const sensors = [
-    { id: "KVZ1", status: "inactive" },
-    { id: "KVZ2", status: "active" },
-    { id: "KVZ3", status: "active" },
-    { id: "KVZ4", status: "active" },
-  ];
+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 gap-1 p-1  border rounded bg-gray-200">
-      {sensors.map((sensor) => (
-        <div key={sensor.id} className="flex flex-col items-center gap-1">
-          <span className="text-[0.5rem]">{sensor.id}</span>
+    <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
-            className={`w-4 h-4 flex items-center justify-center rounded-full border ${
-              sensor.status === "active" ? "bg-green-400" : "bg-red-400"
-            }`}
-          ></div>
-        </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>
   );
 };