125 lines
3.7 KiB
TypeScript
125 lines
3.7 KiB
TypeScript
"use client";
|
|
import { useState, useEffect } from "react";
|
|
import ReactModal from "react-modal";
|
|
import KueEinstellung from "./KueEinstellung";
|
|
import TdrEinstellung from "./TdrEinstellung";
|
|
import KvzModalView from "./KvzModalView";
|
|
import Knotenpunkte from "./Knotenpunkte";
|
|
|
|
interface KueModalProps {
|
|
showModal: boolean;
|
|
onClose: () => void;
|
|
slot: number;
|
|
onModulNameChange: (id: string) => void;
|
|
}
|
|
|
|
declare global {
|
|
interface Window {
|
|
__lastKueTab?: "kue" | "tdr" | "kvz" | "knoten";
|
|
kabelModalOpen?: boolean;
|
|
}
|
|
}
|
|
|
|
export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
|
|
const [activeTab, setActiveTab] = useState<"kue" | "tdr" | "kvz" | "knoten">(
|
|
() => {
|
|
if (typeof window !== "undefined" && window.__lastKueTab) {
|
|
return window.__lastKueTab;
|
|
}
|
|
return "kue";
|
|
}
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== "undefined") {
|
|
window.__lastKueTab = activeTab;
|
|
}
|
|
}, [activeTab]);
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== "undefined") {
|
|
window.kabelModalOpen = showModal;
|
|
}
|
|
}, [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%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: "90%",
|
|
maxWidth: "850px",
|
|
padding: "0px",
|
|
border: "none",
|
|
borderRadius: "8px",
|
|
position: "relative",
|
|
bottom: "auto",
|
|
right: "auto",
|
|
},
|
|
}}
|
|
>
|
|
<div className="p-2 flex justify-between items-center rounded-t-md bg-surface-alt border-b border-base">
|
|
<h2 className="text-base font-bold text-fg">
|
|
Einstellungen KÜ {slot + 1}
|
|
</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-2xl text-fg-muted hover:text-fg transition-colors focus:outline-none focus:ring-2 focus:ring-accent/50 rounded"
|
|
aria-label="Modal schließen"
|
|
>
|
|
<i className="bi bi-x-circle-fill"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex justify-start bg-surface-alt space-x-2 p-2 border-b border-base">
|
|
{[
|
|
{ label: "Allgemein", key: "kue" as const },
|
|
{ label: "TDR ", key: "tdr" as const },
|
|
{ label: "KVz", key: "kvz" as const },
|
|
{ label: "Knotenpunkte", key: "knoten" as const },
|
|
].map(({ label, key }) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => setActiveTab(key)}
|
|
className={`px-4 py-1 rounded-t font-semibold text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-accent/40 ${
|
|
activeTab === key
|
|
? "bg-surface text-accent shadow-sm"
|
|
: "text-fg-muted hover:text-fg"
|
|
}`}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="p-4 bg-surface rounded-b-md h-[20rem] laptop:h-[24rem] 2xl:h-[30rem] overflow-y-auto text-fg">
|
|
{activeTab === "kue" && (
|
|
<KueEinstellung
|
|
slot={slot}
|
|
showModal={showModal}
|
|
onModulNameChange={(id) => console.log("Modulname geändert:", id)}
|
|
onClose={onClose}
|
|
/>
|
|
)}
|
|
{activeTab === "tdr" && (
|
|
<TdrEinstellung slot={slot} onClose={onClose} />
|
|
)}
|
|
{activeTab === "kvz" && <KvzModalView slot={slot} onClose={onClose} />}
|
|
{activeTab === "knoten" && (
|
|
<Knotenpunkte slot={slot} onClose={onClose} />
|
|
)}
|
|
</div>
|
|
</ReactModal>
|
|
);
|
|
}
|