270 lines
9.0 KiB
TypeScript
270 lines
9.0 KiB
TypeScript
// KueEinstellung.tsx – final überarbeitet: formData wird direkt nach dem Speichern aktualisiert
|
||
|
||
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { useDispatch, useSelector } from "react-redux";
|
||
import type { RootState } from "../../../../../redux/store";
|
||
import handleSave from "../handlers/handleSave";
|
||
import handleDisplayEinschalten from "../handlers/handleDisplayEinschalten";
|
||
import firmwareUpdate from "../handlers/firmwareUpdate";
|
||
import { useAdminAuth } from "../../../settingsPageComponents/hooks/useAdminAuth";
|
||
|
||
interface Props {
|
||
slot: number;
|
||
showModal: boolean;
|
||
onClose?: () => void;
|
||
onModulNameChange?: (id: string) => void;
|
||
}
|
||
|
||
const memoryIntervalOptions = [
|
||
{ value: 0, label: "Kein" },
|
||
{ value: 1, label: "1 Minute" },
|
||
{ value: 5, label: "5 Minuten" },
|
||
{ value: 10, label: "10 Minuten" },
|
||
{ value: 15, label: "15 Minuten" },
|
||
{ value: 30, label: "30 Minuten" },
|
||
{ value: 60, label: "60 Minuten" },
|
||
{ value: 360, label: "6 Stunden" },
|
||
{ value: 720, label: "12 Stunden" },
|
||
];
|
||
|
||
export default function KueEinstellung({
|
||
slot,
|
||
showModal,
|
||
onClose = () => {},
|
||
onModulNameChange,
|
||
}: Props) {
|
||
const dispatch = useDispatch();
|
||
const {
|
||
kueID,
|
||
kueName,
|
||
kueLimit1,
|
||
kueDelay1,
|
||
kueLimit2Low,
|
||
kueLoopInterval,
|
||
memoryInterval,
|
||
} = useSelector((state: RootState) => state.kueDataSlice);
|
||
|
||
const { isAdminLoggedIn } = useAdminAuth(true);
|
||
|
||
const formCacheKey = `slot_${slot}`;
|
||
if (typeof window !== "undefined") {
|
||
window.__kueCache = window.__kueCache || {};
|
||
}
|
||
const cached =
|
||
typeof window !== "undefined" ? window.__kueCache?.[formCacheKey] : null;
|
||
|
||
const [formData, setFormData] = useState(() => {
|
||
if (cached) return cached;
|
||
return {
|
||
kueID: kueID[slot] || "",
|
||
kueName: kueName[slot] || "",
|
||
limit1: kueLimit1[slot]?.toString() ?? "",
|
||
delay1: kueDelay1[slot]?.toString() ?? "",
|
||
limit2Low: kueLimit2Low[slot]?.toString() ?? "",
|
||
loopInterval: kueLoopInterval[slot]?.toString() ?? "",
|
||
memoryInterval: memoryInterval[slot]?.toString() ?? "",
|
||
};
|
||
});
|
||
|
||
const handleChange = (key: keyof typeof formData, value: string) => {
|
||
const updated = { ...formData, [key]: value };
|
||
setFormData(updated);
|
||
if (typeof window !== "undefined") {
|
||
window.__kueCache![formCacheKey] = updated;
|
||
}
|
||
};
|
||
|
||
const handleSaveWrapper = async () => {
|
||
const updatedKueID = [...kueID];
|
||
updatedKueID[slot] = formData.kueID;
|
||
|
||
const updatedKueName = [...kueName];
|
||
updatedKueName[slot] = formData.kueName;
|
||
|
||
const updatedLimit1 = [...kueLimit1];
|
||
updatedLimit1[slot] = Number(formData.limit1);
|
||
|
||
const updatedDelay1 = [...kueDelay1];
|
||
updatedDelay1[slot] = Number(formData.delay1);
|
||
|
||
const updatedLimit2Low = [...kueLimit2Low];
|
||
updatedLimit2Low[slot] = Number(formData.limit2Low);
|
||
|
||
const updatedLoopInterval = [...kueLoopInterval];
|
||
updatedLoopInterval[slot] = Number(formData.loopInterval);
|
||
|
||
const updatedMemoryInterval = [...memoryInterval];
|
||
updatedMemoryInterval[slot] = Number(formData.memoryInterval);
|
||
|
||
const newData = {
|
||
kueID: updatedKueID[slot],
|
||
kueName: updatedKueName[slot],
|
||
limit1: updatedLimit1[slot].toString(),
|
||
delay1: updatedDelay1[slot].toString(),
|
||
limit2Low: updatedLimit2Low[slot].toString(),
|
||
loopInterval: updatedLoopInterval[slot].toString(),
|
||
memoryInterval: updatedMemoryInterval[slot].toString(),
|
||
};
|
||
|
||
setFormData(newData);
|
||
if (typeof window !== "undefined") {
|
||
window.__kueCache![`slot_${slot}`] = newData;
|
||
}
|
||
|
||
// 🔧 handleSave aufrufen mit allen Daten
|
||
await handleSave({
|
||
slot,
|
||
ids: updatedKueID,
|
||
kueName: updatedKueName,
|
||
isolationsgrenzwerte: updatedLimit1,
|
||
verzoegerung: updatedDelay1,
|
||
untereSchleifenGrenzwerte: updatedLimit2Low,
|
||
obereSchleifenGrenzwerte: updatedLimit2Low, // ggf. anpassen, falls du später High-Werte brauchst
|
||
schleifenintervall: updatedLoopInterval,
|
||
speicherintervall: updatedMemoryInterval,
|
||
originalValues: {
|
||
kueID,
|
||
kueName,
|
||
isolationsgrenzwerte: kueLimit1,
|
||
verzoegerung: kueDelay1,
|
||
untereSchleifenGrenzwerte: kueLimit2Low,
|
||
obereSchleifenGrenzwerte: kueLimit2Low,
|
||
schleifenintervall: kueLoopInterval,
|
||
speicherintervall: memoryInterval,
|
||
},
|
||
dispatch,
|
||
onModulNameChange,
|
||
onClose,
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div className="p-4 text-sm">
|
||
{/* Kabelbezeichnung */}
|
||
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
|
||
<label className="">Kabelbezeichnung:</label>
|
||
<input
|
||
type="text"
|
||
className="w-full border rounded p-1 bg-gray-100 text-gray-600"
|
||
value={formData.kueID}
|
||
readOnly
|
||
title="Feld kann nicht bearbeitet werden"
|
||
/>
|
||
</div>
|
||
{/* Kabelname */}
|
||
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
|
||
<label className="">Kabelname:</label>
|
||
<input
|
||
type="text"
|
||
className="w-full border rounded p-1"
|
||
value={formData.kueName}
|
||
onChange={(e) => handleChange("kueName", e.target.value)}
|
||
/>
|
||
</div>
|
||
{/* Speicherintervall */}
|
||
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
|
||
<label className="">Speicherintervall:</label>
|
||
<select
|
||
className="w-full border rounded p-1"
|
||
value={formData.memoryInterval}
|
||
onChange={(e) => handleChange("memoryInterval", e.target.value)}
|
||
>
|
||
{memoryIntervalOptions.map((opt) => (
|
||
<option key={opt.value} value={opt.value}>
|
||
{opt.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
{/* Isolationsmessung */}
|
||
<div className="mb-4 w-full">
|
||
<h3 className="font-bold mb-2">Isolationsmessung</h3>
|
||
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
|
||
<label className="w-48 ">Grenzwert:</label>
|
||
<div className="relative w-36">
|
||
<input
|
||
type="number"
|
||
className="border rounded px-2 py-1 pr-20 w-full text-right"
|
||
value={formData.limit1}
|
||
onChange={(e) => handleChange("limit1", e.target.value)}
|
||
/>
|
||
<span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
|
||
MOhm
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
|
||
<label className="w-48 ">Verzögerung:</label>
|
||
<div className="relative w-36">
|
||
<input
|
||
type="number"
|
||
className="border rounded px-2 py-1 pr-20 w-full text-right"
|
||
value={formData.delay1}
|
||
onChange={(e) => handleChange("delay1", e.target.value)}
|
||
/>
|
||
<span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
|
||
Sekunden
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* Schleifenmessung */}
|
||
<div className="mb-4">
|
||
<h3 className="font-bold mb-2">Schleifenmessung</h3>
|
||
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
|
||
<label className="w-48 ">Grenzwert:</label>
|
||
<div className="relative w-36">
|
||
<input
|
||
type="number"
|
||
className="border rounded px-2 py-1 pr-20 w-full text-right"
|
||
value={formData.limit2Low}
|
||
onChange={(e) => handleChange("limit2Low", e.target.value)}
|
||
/>
|
||
<span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
|
||
kOhm
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
|
||
<label className="w-48 ">Schleifenmessintervall:</label>
|
||
<div className="relative w-36">
|
||
<input
|
||
type="number"
|
||
className="border rounded px-2 py-1 pr-20 w-full text-right"
|
||
value={formData.loopInterval}
|
||
onChange={(e) => handleChange("loopInterval", e.target.value)}
|
||
/>
|
||
<span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
|
||
Stunden
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-end gap-2 p-0 rounded">
|
||
{isAdminLoggedIn && (
|
||
<button
|
||
onClick={() => firmwareUpdate(slot)}
|
||
className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
|
||
>
|
||
Firmware Update
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => handleDisplayEinschalten(slot)}
|
||
className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
|
||
>
|
||
Display einschalten
|
||
</button>{" "}
|
||
<button
|
||
onClick={handleSaveWrapper}
|
||
className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
|
||
>
|
||
Speichern
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|