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:
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user