134 lines
4.3 KiB
TypeScript
134 lines
4.3 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState } from "react";
|
||
import { useSelector } from "react-redux";
|
||
import { RootState, useAppDispatch } from "../../../../../redux/store";
|
||
import { updateKvzData } from "../../../../../redux/thunks/kvzThunks";
|
||
import { useAdminAuth } from "../../../settingsPageComponents/hooks/useAdminAuth";
|
||
|
||
type KvzData = {
|
||
// Hier können später weitere KVz-spezifische Einstellungen hinzugefügt werden
|
||
kvzSettings: string;
|
||
};
|
||
|
||
interface Props {
|
||
slot: number;
|
||
onClose?: () => void;
|
||
}
|
||
|
||
export default function KvzModalView({ slot, onClose }: Props) {
|
||
const { isAdminLoggedIn } = useAdminAuth(true);
|
||
const dispatch = useAppDispatch();
|
||
const kvzSlice = useSelector((state: RootState) => state.kueDataSlice);
|
||
|
||
// KVZ System: 32 Slots mit je 4 LEDs
|
||
const isKvzPresent = kvzSlice.kvzPresence?.[slot] === 1;
|
||
const isKvzActive = kvzSlice.kvzActive?.[slot] === 1;
|
||
|
||
// LED Status für diesen Slot (4 LEDs pro Slot)
|
||
const getKvzLedStatus = (ledIndex: number) => {
|
||
const arrayIndex = slot * 4 + ledIndex;
|
||
return kvzSlice.kvzStatus?.[arrayIndex] === 1;
|
||
};
|
||
|
||
const [localKvzActive, setLocalKvzActive] = useState(() => isKvzActive);
|
||
|
||
// Synchronisiere localState mit Redux State
|
||
React.useEffect(() => {
|
||
setLocalKvzActive(isKvzActive);
|
||
}, [isKvzActive]);
|
||
|
||
const handleKvzToggle = async () => {
|
||
const newState = !localKvzActive;
|
||
setLocalKvzActive(newState);
|
||
|
||
try {
|
||
// API Update mit neuem Thunk - kvzActive statt kvzPresence
|
||
await dispatch(
|
||
updateKvzData([{ key: "kvzActive", slot, value: newState ? 1 : 0 }])
|
||
);
|
||
|
||
const msg = newState
|
||
? "✅ KVz wurde aktiviert."
|
||
: "⚠️ KVz wurde deaktiviert.";
|
||
alert(msg);
|
||
location.reload();
|
||
} catch (error) {
|
||
console.error("Fehler beim KVz-Toggle:", error);
|
||
alert("Fehler beim Umschalten der KVz-Funktion.");
|
||
// State zurücksetzen bei Fehler
|
||
setLocalKvzActive(!newState);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="p-4 text-sm">
|
||
{/* KVz-Funktion - nur anzeigen wenn KVZ vorhanden ist */}
|
||
{isAdminLoggedIn && isKvzPresent && (
|
||
<div className="mb-4 mt-4 grid grid-cols-3 items-center gap-2 w-full">
|
||
<span className="text-sm font-medium">KVz-Funktion:</span>
|
||
<div className="col-span-2 flex items-center gap-4">
|
||
<button
|
||
type="button"
|
||
role="switch"
|
||
aria-checked={localKvzActive}
|
||
onClick={handleKvzToggle}
|
||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
|
||
localKvzActive ? "bg-littwin-blue" : "bg-gray-300"
|
||
}`}
|
||
>
|
||
<span
|
||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
|
||
localKvzActive ? "translate-x-6" : "translate-x-1"
|
||
}`}
|
||
/>
|
||
</button>
|
||
<span className="text-sm text-gray-600">
|
||
{localKvzActive ? "aktiviert" : "deaktiviert"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Meldung wenn KVZ nicht vorhanden */}
|
||
{!isKvzPresent && (
|
||
<div className="mb-4 mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-yellow-600">⚠️</span>
|
||
<p className="text-sm text-yellow-800">
|
||
<strong>Kein KVZ-Gerät vorhanden</strong>
|
||
<br />
|
||
Für Slot {slot + 1} ist kein KVZ-Gerät installiert oder
|
||
konfiguriert.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Zukünftige KVz-Einstellungen können hier hinzugefügt werden */}
|
||
{!isAdminLoggedIn && (
|
||
<div className="mt-6 mb-4">
|
||
<div className="mb-4">
|
||
<p className="text-sm text-gray-600">
|
||
Nur Admin-Benutzer können diese Einstellungen ändern.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Speichern Button */}
|
||
|
||
{/* <div className="mt-36">
|
||
<div className="flex justify-end gap-2 p-3 rounded">
|
||
<button
|
||
onClick={handleSave}
|
||
className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
|
||
>
|
||
Speichern
|
||
</button>
|
||
</div>
|
||
</div> */}
|
||
</div>
|
||
);
|
||
}
|