89 lines
3.1 KiB
TypeScript
89 lines
3.1 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
import { Dialog } from "@headlessui/react";
|
||
import { useSelector, useDispatch } from "react-redux";
|
||
import { RootState } from "@/redux/store";
|
||
import { setIsChartModalOpen } from "@/redux/slices/analogInputs/analogInputsUiSlice";
|
||
import AnalogInputsChart from "@/components/main/analogInputs/AnalogInputsChart";
|
||
|
||
export default function AnalogInputsChartModal({
|
||
loading,
|
||
setLoading,
|
||
}: {
|
||
loading: boolean;
|
||
setLoading: (v: boolean) => void;
|
||
}) {
|
||
const dispatch = useDispatch();
|
||
const isOpen = useSelector(
|
||
(state: RootState) => state.analogInputsUi.isChartModalOpen
|
||
);
|
||
const selectedId = useSelector(
|
||
(state: RootState) => state.analogInputsHistory.selectedId
|
||
);
|
||
const [isFullscreen, setIsFullscreen] = React.useState(false);
|
||
|
||
if (!isOpen) return null;
|
||
|
||
return (
|
||
<Dialog
|
||
open={isOpen}
|
||
onClose={() => dispatch(setIsChartModalOpen(false))}
|
||
className="relative z-[9999]"
|
||
>
|
||
{/* Backdrop */}
|
||
<div className="fixed inset-0 bg-black/50" aria-hidden="true" />
|
||
{/* Centered panel */}
|
||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
||
<Dialog.Panel className="relative outline-none">
|
||
<div
|
||
className={`rounded-xl shadow-xl border border-base bg-[var(--color-surface)] text-fg flex flex-col transition-all duration-300 overflow-hidden`}
|
||
style={{
|
||
width: isFullscreen ? "90vw" : "70rem",
|
||
height: isFullscreen ? "90vh" : "38rem",
|
||
}}
|
||
>
|
||
{/* Header */}
|
||
<header className="flex items-center justify-between px-6 py-4 border-b border-base select-none">
|
||
<h2 className="text-base font-bold">
|
||
Messkurve Messwerteingang {selectedId ?? "–"}
|
||
</h2>
|
||
<div className="flex items-center gap-3">
|
||
<button
|
||
onClick={() => setIsFullscreen((v) => !v)}
|
||
className="icon-btn text-xl"
|
||
aria-label={isFullscreen ? "Vollbild verlassen" : "Vollbild"}
|
||
type="button"
|
||
title={isFullscreen ? "Vollbild verlassen" : "Vollbild"}
|
||
>
|
||
<i
|
||
className={
|
||
isFullscreen
|
||
? "bi bi-fullscreen-exit"
|
||
: "bi bi-arrows-fullscreen"
|
||
}
|
||
/>
|
||
</button>
|
||
<button
|
||
onClick={() => dispatch(setIsChartModalOpen(false))}
|
||
className="icon-btn text-2xl"
|
||
aria-label="Modal schließen"
|
||
type="button"
|
||
title="Schließen"
|
||
>
|
||
<i className="bi bi-x-circle-fill" />
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Body */}
|
||
<div className="flex-1 min-h-0 px-4 pt-3 pb-4 bg-[var(--color-surface)]">
|
||
<AnalogInputsChart loading={loading} setLoading={setLoading} />
|
||
</div>
|
||
</div>
|
||
</Dialog.Panel>
|
||
</div>
|
||
</Dialog>
|
||
);
|
||
}
|