121 lines
3.9 KiB
TypeScript
121 lines
3.9 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">
|
||
<div
|
||
className="bg-white rounded-xl shadow-xl border border-gray-200"
|
||
style={{
|
||
width: isFullscreen ? "90vw" : "70rem",
|
||
height: isFullscreen ? "90vh" : "35rem",
|
||
padding: "1rem",
|
||
transition: "all 0.3s ease-in-out",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
}}
|
||
>
|
||
{/* Controls top-right (fullscreen + close) */}
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
top: "0.625rem",
|
||
right: "0.625rem",
|
||
display: "flex",
|
||
gap: "0.75rem",
|
||
}}
|
||
>
|
||
<button
|
||
onClick={() => setIsFullscreen((v) => !v)}
|
||
style={{
|
||
background: "transparent",
|
||
border: "none",
|
||
fontSize: "1.5rem",
|
||
cursor: "pointer",
|
||
}}
|
||
title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
|
||
aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
|
||
>
|
||
<i
|
||
className={
|
||
isFullscreen
|
||
? "bi bi-fullscreen-exit"
|
||
: "bi bi-arrows-fullscreen"
|
||
}
|
||
></i>
|
||
</button>
|
||
<button
|
||
onClick={() => dispatch(setIsChartModalOpen(false))}
|
||
style={{
|
||
background: "transparent",
|
||
border: "none",
|
||
fontSize: "1.5rem",
|
||
cursor: "pointer",
|
||
}}
|
||
title="Schließen"
|
||
aria-label="Modal schließen"
|
||
>
|
||
<i className="bi bi-x-circle-fill"></i>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Title row (align like IsoChartView) */}
|
||
<div className="flex justify-between items-center mb-2 pr-24">
|
||
<Dialog.Title className="text-lg font-semibold text-gray-700">
|
||
Messkurve Messwerteingang {selectedId ?? "–"}
|
||
</Dialog.Title>
|
||
</div>
|
||
|
||
{/* Chart container (structure similar to IsoChartView) */}
|
||
<div
|
||
style={{
|
||
flex: 1,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
height: "90%",
|
||
}}
|
||
>
|
||
{/* Optional: place an action bar here if needed */}
|
||
<div style={{ flex: 1, height: "90%" }}>
|
||
<AnalogInputsChart loading={loading} setLoading={setLoading} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Dialog.Panel>
|
||
</div>
|
||
</Dialog>
|
||
);
|
||
}
|