style: dark mode ISO, RSL und TDR
This commit is contained in:
ISA
@@ -4,29 +4,20 @@ import React, { useEffect } from "react";
|
||||
import ReactModal from "react-modal";
|
||||
import TDRChart from "./TDRChart";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { AppDispatch } from "@/redux/store";
|
||||
import { RootState } from "@/redux/store";
|
||||
import { AppDispatch, RootState } from "@/redux/store";
|
||||
import {
|
||||
setChartOpen,
|
||||
setFullScreen,
|
||||
setSlotNumber,
|
||||
} from "@/redux/slices/kabelueberwachungChartSlice";
|
||||
|
||||
import { resetBrushRange } from "@/redux/slices/brushSlice";
|
||||
|
||||
import {
|
||||
setVonDatum,
|
||||
setBisDatum,
|
||||
setSelectedMode,
|
||||
setSelectedSlotType,
|
||||
setChartTitle,
|
||||
} from "@/redux/slices/kabelueberwachungChartSlice";
|
||||
|
||||
import {
|
||||
setSelectedSlot,
|
||||
setActiveMode,
|
||||
} from "@/redux/slices/kueChartModeSlice";
|
||||
import { resetBrushRange } from "@/redux/slices/brushSlice";
|
||||
import { setSelectedSlot, setActiveMode } from "@/redux/slices/kueChartModeSlice";
|
||||
import { Listbox } from "@headlessui/react";
|
||||
import { setChartTitle } from "@/redux/slices/kabelueberwachungChartSlice";
|
||||
import Report from "../IsoMeasurementChart/Report";
|
||||
|
||||
interface TDRChartViewProps {
|
||||
@@ -35,70 +26,48 @@ interface TDRChartViewProps {
|
||||
slotIndex: number;
|
||||
}
|
||||
|
||||
const TDRChartView: React.FC<TDRChartViewProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
slotIndex,
|
||||
}) => {
|
||||
const TDRChartView: React.FC<TDRChartViewProps> = ({ isOpen, onClose, slotIndex }) => {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const { isFullScreen, chartTitle } = useSelector((s: RootState) => s.kabelueberwachungChartSlice);
|
||||
|
||||
const { isFullScreen, chartTitle } = useSelector(
|
||||
(state: RootState) => state.kabelueberwachungChartSlice
|
||||
);
|
||||
|
||||
// **Modal öffnen - TDR spezifische Einstellungen**
|
||||
// Initialize defaults when opening
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
const today = new Date();
|
||||
const thirtyDaysAgo = new Date();
|
||||
thirtyDaysAgo.setDate(today.getDate() - 30);
|
||||
|
||||
const toISO = (date: Date) => date.toLocaleDateString("sv-SE");
|
||||
|
||||
// Set TDR mode and slot
|
||||
dispatch(setActiveMode("TDR"));
|
||||
dispatch(setSelectedSlot(slotIndex));
|
||||
|
||||
// Also set slot number for general chart slice
|
||||
dispatch(setSlotNumber(slotIndex));
|
||||
|
||||
// Set dates
|
||||
dispatch(setVonDatum(toISO(thirtyDaysAgo)));
|
||||
dispatch(setBisDatum(toISO(today)));
|
||||
|
||||
// TDR specific settings (if needed)
|
||||
dispatch(setSelectedSlotType("isolationswiderstand"));
|
||||
}
|
||||
}, [isOpen, slotIndex, dispatch]);
|
||||
|
||||
// **Modal schließen + Redux-Status zurücksetzen**
|
||||
const handleClose = () => {
|
||||
if (!isOpen) return;
|
||||
const today = new Date();
|
||||
const thirtyDaysAgo = new Date();
|
||||
thirtyDaysAgo.setDate(today.getDate() - 30);
|
||||
|
||||
const toISO = (date: Date) => date.toLocaleDateString("sv-SE");
|
||||
|
||||
// Reset Datum
|
||||
dispatch(setActiveMode("TDR"));
|
||||
dispatch(setSelectedSlot(slotIndex));
|
||||
dispatch(setSlotNumber(slotIndex));
|
||||
|
||||
dispatch(setVonDatum(toISO(thirtyDaysAgo)));
|
||||
dispatch(setBisDatum(toISO(today)));
|
||||
|
||||
// Reset Dropdowns
|
||||
if (chartTitle !== "Messkurve" && chartTitle !== "Meldungen") {
|
||||
dispatch(setChartTitle("Messkurve"));
|
||||
}
|
||||
// Only run when opened or slot changes or chartTitle invalid
|
||||
}, [isOpen, slotIndex, chartTitle, dispatch]);
|
||||
|
||||
const handleClose = () => {
|
||||
// Reset generic chart slice to DIA1 isolationswiderstand defaults (same pattern as other modals)
|
||||
const today = new Date();
|
||||
const thirtyDaysAgo = new Date();
|
||||
thirtyDaysAgo.setDate(today.getDate() - 30);
|
||||
const toISO = (date: Date) => date.toLocaleDateString("sv-SE");
|
||||
dispatch(setVonDatum(toISO(thirtyDaysAgo)));
|
||||
dispatch(setBisDatum(toISO(today)));
|
||||
dispatch(setSelectedMode("DIA1"));
|
||||
dispatch(setSelectedSlotType("isolationswiderstand"));
|
||||
|
||||
// Sonstiges Reset
|
||||
dispatch(setChartOpen(false));
|
||||
dispatch(setFullScreen(false));
|
||||
dispatch(resetBrushRange());
|
||||
|
||||
onClose();
|
||||
};
|
||||
|
||||
// **Vollbildmodus umschalten**
|
||||
const toggleFullScreen = () => {
|
||||
dispatch(setFullScreen(!isFullScreen));
|
||||
};
|
||||
const toggleFullScreen = () => dispatch(setFullScreen(!isFullScreen));
|
||||
|
||||
return (
|
||||
<ReactModal
|
||||
@@ -106,77 +75,53 @@ const TDRChartView: React.FC<TDRChartViewProps> = ({
|
||||
onRequestClose={handleClose}
|
||||
ariaHideApp={false}
|
||||
style={{
|
||||
overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
|
||||
overlay: {
|
||||
backgroundColor: "rgba(0,0,0,0.55)",
|
||||
backdropFilter: "blur(2px)",
|
||||
},
|
||||
content: {
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
bottom: "auto",
|
||||
marginRight: "-50%",
|
||||
inset: "50% auto auto 50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: isFullScreen ? "90vw" : "70rem",
|
||||
height: isFullScreen ? "90vh" : "35rem",
|
||||
padding: "1rem",
|
||||
transition: "all 0.3s ease-in-out",
|
||||
width: isFullScreen ? "90vw" : "72rem",
|
||||
height: isFullScreen ? "90vh" : "38rem",
|
||||
padding: 0,
|
||||
border: "1px solid var(--color-border)",
|
||||
background: "var(--color-surface)",
|
||||
borderRadius: "14px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
},
|
||||
}}
|
||||
contentLabel="TDR Messung"
|
||||
>
|
||||
{/* Action-Buttons */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "0.625rem",
|
||||
right: "0.625rem",
|
||||
display: "flex",
|
||||
gap: "0.75rem",
|
||||
}}
|
||||
>
|
||||
{/* Fullscreen-Button */}
|
||||
<button
|
||||
onClick={toggleFullScreen}
|
||||
style={{
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
fontSize: "1.5rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className={
|
||||
isFullScreen ? "bi bi-fullscreen-exit" : "bi bi-arrows-fullscreen"
|
||||
}
|
||||
></i>
|
||||
</button>
|
||||
|
||||
{/* Schließen-Button */}
|
||||
<button
|
||||
onClick={handleClose}
|
||||
style={{
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
fontSize: "1.5rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-x-circle-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Chart-Container */}
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-2 pr-24">
|
||||
<h3 className="text-lg font-semibold">
|
||||
{chartTitle === "Messkurve" ? "TDR-Messung" : "Meldungen"}
|
||||
</h3>
|
||||
{/* Dropdown Messkurve / Meldungen */}
|
||||
<header className="modal-header relative pr-56">
|
||||
<h3 className="text-sm font-semibold tracking-wide">TDR-Messung</h3>
|
||||
<div className="absolute top-2 right-2 flex gap-2">
|
||||
<button
|
||||
onClick={toggleFullScreen}
|
||||
className="icon-btn"
|
||||
aria-label={isFullScreen ? "Vollbild verlassen" : "Vollbild"}
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
className={
|
||||
isFullScreen
|
||||
? "bi bi-fullscreen-exit"
|
||||
: "bi bi-arrows-fullscreen"
|
||||
}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="icon-btn"
|
||||
aria-label="Schließen"
|
||||
type="button"
|
||||
>
|
||||
<i className="bi bi-x-lg" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="absolute top-2 right-28">
|
||||
<Listbox
|
||||
value={chartTitle}
|
||||
onChange={(value: "Messkurve" | "Meldungen") =>
|
||||
@@ -184,31 +129,21 @@ const TDRChartView: React.FC<TDRChartViewProps> = ({
|
||||
}
|
||||
>
|
||||
<div className="relative w-40">
|
||||
<Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
|
||||
<span>{chartTitle}</span>
|
||||
<svg
|
||||
className="w-5 h-5 text-gray-400"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<Listbox.Button className="dropdown-surface w-full flex items-center justify-between h-8">
|
||||
<span className="dropdown-text-fix">{chartTitle}</span>
|
||||
<i className="bi bi-chevron-down text-sm opacity-70" />
|
||||
</Listbox.Button>
|
||||
<Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
|
||||
<Listbox.Options className="dropdown-options absolute z-50 mt-1 w-full max-h-60 overflow-auto text-sm">
|
||||
{(["Messkurve", "Meldungen"] as const).map((option) => (
|
||||
<Listbox.Option
|
||||
key={option}
|
||||
value={option}
|
||||
className={({ selected, active }) =>
|
||||
`px-4 py-1 cursor-pointer ${
|
||||
`px-3 py-1.5 cursor-pointer rounded-sm m-0.5 ${
|
||||
selected
|
||||
? "bg-littwin-blue text-white"
|
||||
? "dropdown-option-active"
|
||||
: active
|
||||
? "bg-gray-200"
|
||||
? "dropdown-option-hover"
|
||||
: ""
|
||||
}`
|
||||
}
|
||||
@@ -220,8 +155,9 @@ const TDRChartView: React.FC<TDRChartViewProps> = ({
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
{/* Chart oder Meldungen */}
|
||||
<div style={{ flex: 1, height: "90%" }}>
|
||||
</header>
|
||||
<div className="flex flex-col flex-1 p-3 gap-3">
|
||||
<div className="flex-1 relative">
|
||||
{chartTitle === "Messkurve" ? (
|
||||
<TDRChart isFullScreen={isFullScreen} />
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user