fix: Vergleich und Speicherung von Änderungen im KUE-Modul korrigiert
- Originalwerte werden jetzt direkt aus window.win_kueXYZ geladen - Vergleiche in handleSave.ts angepasst für stabile Zahl/String-Auswertung - Fehlerhafte Meldung „Keine Änderungen vorgenommen“ behoben - Nur geänderte Werte werden per GET-API gesendet
This commit is contained in:
ISA
@@ -0,0 +1,9 @@
|
||||
import React from "react";
|
||||
|
||||
interface Props {
|
||||
slot: number;
|
||||
}
|
||||
|
||||
export default function Knotenpunkte({ slot }: Props) {
|
||||
return <div>Knotenpunkte – Slot {slot + 1}</div>;
|
||||
}
|
||||
@@ -0,0 +1,201 @@
|
||||
"use client";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import type { RootState } from "../../../../../redux/store";
|
||||
import { setKueData } from "../../../../../redux/slices/kueDataSlice";
|
||||
import handleSave, { OriginalValues } from "../handlers/handleSave";
|
||||
import handleDisplayEinschalten from "../handlers/handleDisplayEinschalten";
|
||||
import firmwareUpdate from "../handlers/firmwareUpdate";
|
||||
|
||||
interface Props {
|
||||
slot: number;
|
||||
onClose?: () => void;
|
||||
onModulNameChange?: (id: string) => void;
|
||||
}
|
||||
|
||||
export default function KueEinstellung({
|
||||
slot,
|
||||
onClose = () => {},
|
||||
onModulNameChange = () => {},
|
||||
}: Props) {
|
||||
const dispatch = useDispatch();
|
||||
const {
|
||||
kueID,
|
||||
kueLimit1,
|
||||
kueDelay1,
|
||||
kueLimit2Low,
|
||||
kueLoopInterval,
|
||||
kueLimit2High,
|
||||
} = useSelector((state: RootState) => state.kueDataSlice);
|
||||
|
||||
const isAdminLoggedIn = useSelector(
|
||||
(state: any) => state.authSlice.isAdminLoggedIn
|
||||
);
|
||||
|
||||
const handleSaveWrapper = () => {
|
||||
const originalValues: OriginalValues = {
|
||||
kueID: [...(window.win_kueID ?? [])],
|
||||
isolationsgrenzwerte: [...(window.win_kueLimit1 ?? [])],
|
||||
verzoegerung: [...(window.win_kueDelay1 ?? [])],
|
||||
untereSchleifenGrenzwerte: [...(window.win_kueLimit2Low ?? [])],
|
||||
obereSchleifenGrenzwerte: [...(window.win_kueLimit2High ?? [])],
|
||||
schleifenintervall: [...(window.win_kueLoopInterval ?? [])],
|
||||
};
|
||||
|
||||
handleSave({
|
||||
ids: [...kueID],
|
||||
isolationsgrenzwerte: [...kueLimit1],
|
||||
verzoegerung: [...kueDelay1],
|
||||
untereSchleifenGrenzwerte: [...kueLimit2Low],
|
||||
obereSchleifenGrenzwerte: [...kueLimit2High],
|
||||
schleifenintervall: [...kueLoopInterval],
|
||||
originalValues,
|
||||
slot,
|
||||
dispatch,
|
||||
onModulNameChange,
|
||||
onClose,
|
||||
});
|
||||
};
|
||||
|
||||
const updateArray = (
|
||||
key: keyof RootState["kueDataSlice"],
|
||||
array: number[],
|
||||
value: number
|
||||
) => {
|
||||
const updated = [...array];
|
||||
updated[slot] = value;
|
||||
dispatch(setKueData({ [key]: updated }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="text-black space-y-6">
|
||||
<div>
|
||||
<label className="font-bold">Kabelbezeichnung:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full border rounded p-1 text-sm"
|
||||
value={kueID[slot] || ""}
|
||||
onChange={(e) => {
|
||||
const newIds = [...kueID];
|
||||
newIds[slot] = e.target.value;
|
||||
dispatch(setKueData({ kueID: newIds }));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-bold text-center mb-2">Isolationsmessung</h3>
|
||||
<table className="w-full border-collapse text-sm">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="border p-2 text-center">Grenzwert (MOhm)</th>
|
||||
<th className="border p-2 text-center">Verzögerung (sek)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="border p-2 text-center">
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
className="w-[6rem] border rounded p-1"
|
||||
value={kueLimit1[slot] ?? ""}
|
||||
onChange={(e) =>
|
||||
updateArray(
|
||||
"kueLimit1",
|
||||
kueLimit1,
|
||||
parseFloat(e.target.value)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="border p-2 text-center">
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
className="w-[6rem] border rounded p-1"
|
||||
value={kueDelay1[slot] ?? ""}
|
||||
onChange={(e) =>
|
||||
updateArray(
|
||||
"kueDelay1",
|
||||
kueDelay1,
|
||||
parseFloat(e.target.value)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-bold text-center mb-2">Schleifenmessung</h3>
|
||||
<table className="w-full border-collapse text-sm">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="border p-2 text-center">Grenzwert (kOhm)</th>
|
||||
<th className="border p-2 text-center">Schleifenintervall (h)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="border p-2 text-center">
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
className="w-[6rem] border rounded p-1"
|
||||
value={kueLimit2Low[slot] ?? ""}
|
||||
onChange={(e) =>
|
||||
updateArray(
|
||||
"kueLimit2Low",
|
||||
kueLimit2Low,
|
||||
parseFloat(e.target.value)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="border p-2 text-center">
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
className="w-[6rem] border rounded p-1"
|
||||
value={kueLoopInterval[slot] ?? ""}
|
||||
onChange={(e) =>
|
||||
updateArray(
|
||||
"kueLoopInterval",
|
||||
kueLoopInterval,
|
||||
parseFloat(e.target.value)
|
||||
)
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 bg-gray-100 p-3 rounded">
|
||||
{isAdminLoggedIn && (
|
||||
<button
|
||||
onClick={() => firmwareUpdate(slot)}
|
||||
className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
|
||||
>
|
||||
<span className="mr-2">🔧</span> Firmware Update
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleDisplayEinschalten(slot)}
|
||||
className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
|
||||
>
|
||||
<span className="mr-2">📺</span> Display einschalten
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveWrapper}
|
||||
className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
|
||||
>
|
||||
<span className="mr-2">💾</span> Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
108
components/main/kabelueberwachung/kue705FO/modals/KueModal.tsx
Normal file
108
components/main/kabelueberwachung/kue705FO/modals/KueModal.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import ReactModal from "react-modal";
|
||||
import KueEinstellung from "./KueEinstellung";
|
||||
import TdrEinstellung from "./TdrEinstellung";
|
||||
import Knotenpunkte from "./Knotenpunkte";
|
||||
|
||||
interface KueModalProps {
|
||||
showModal: boolean;
|
||||
onClose: () => void;
|
||||
slot: number;
|
||||
onModulNameChange: (id: string) => void; // NEU!
|
||||
}
|
||||
|
||||
export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
|
||||
const [activeTab, setActiveTab] = useState<"kue" | "tdr" | "knoten">("kue");
|
||||
|
||||
useEffect(() => {
|
||||
if (showModal) {
|
||||
setActiveTab("kue");
|
||||
}
|
||||
}, [showModal]);
|
||||
|
||||
return (
|
||||
<ReactModal
|
||||
isOpen={showModal}
|
||||
onRequestClose={onClose}
|
||||
ariaHideApp={false}
|
||||
style={{
|
||||
overlay: {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
zIndex: 100,
|
||||
},
|
||||
content: {
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
right: "auto",
|
||||
bottom: "auto",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "90%",
|
||||
maxWidth: "850px",
|
||||
padding: "0px",
|
||||
border: "none",
|
||||
borderRadius: "8px",
|
||||
position: "relative",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div className="bg-littwin-blue text-white p-2 flex justify-between items-center rounded-t-md">
|
||||
<h2 className="text-sm font-bold">Einstellungen – Slot {slot + 1}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-white text-xl hover:text-gray-200"
|
||||
>
|
||||
<i className="bi bi-x-circle-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center bg-gray-100 space-x-2 p-2">
|
||||
<button
|
||||
onClick={() => setActiveTab("kue")}
|
||||
className={`px-4 py-1 rounded-t font-bold text-sm ${
|
||||
activeTab === "kue"
|
||||
? "bg-white text-blue-600"
|
||||
: "text-gray-500 hover:text-black"
|
||||
}`}
|
||||
>
|
||||
KUE Einstellung
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("tdr")}
|
||||
className={`px-4 py-1 rounded-t font-bold text-sm ${
|
||||
activeTab === "tdr"
|
||||
? "bg-white text-blue-600"
|
||||
: "text-gray-500 hover:text-black"
|
||||
}`}
|
||||
>
|
||||
TDR Einstellung
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("knoten")}
|
||||
className={`px-4 py-1 rounded-t font-bold text-sm ${
|
||||
activeTab === "knoten"
|
||||
? "bg-white text-blue-600"
|
||||
: "text-gray-500 hover:text-black"
|
||||
}`}
|
||||
>
|
||||
Knotenpunkte
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-white rounded-b-md max-h-[75vh] overflow-y-auto">
|
||||
{activeTab === "kue" && (
|
||||
<KueEinstellung
|
||||
slot={slot}
|
||||
onModulNameChange={(id) => {
|
||||
console.log("Modulname geändert:", id);
|
||||
}}
|
||||
onClose={onClose}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === "tdr" && <TdrEinstellung slot={slot} />}
|
||||
{activeTab === "knoten" && <Knotenpunkte slot={slot} />}
|
||||
</div>
|
||||
</ReactModal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from "react";
|
||||
|
||||
interface Props {
|
||||
slot: number;
|
||||
}
|
||||
|
||||
export default function TdrEinstellung({ slot }: Props) {
|
||||
return <div>TdrEinstellung – Slot {slot + 1}</div>;
|
||||
}
|
||||
Reference in New Issue
Block a user