Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: dark mode ISO, RSL und TDR

Browse Source
This commit is contained in:
ISA
2025-09-09 10:35:34 +02:00
parent 8580032ff9
commit f7d1a36e0f
9 changed files with 247 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
View File

@@ -281,26 +281,23 @@ const LoopChartActionBar = forwardRef((_props, ref) => {
handleFetchData,
}));
// Sichtbarkeits-Flags
const isMesskurve = chartTitle === "Messkurve";
return (
<div className="flex justify-between p-1 bg-gray-100 rounded-lg ">
<div className="flex items-center">
<label className="text-sm font-semibold">
<div className="toolbar w-full flex flex-wrap items-center gap-2">
<div className="flex items-center mr-2 min-w-[4rem]">
<span className="text-xs font-semibold opacity-80 select-none">
KÜ {slotNumber !== null ? slotNumber + 1 : "-"}
</label>
</span>
</div>
<div className="flex items-center space-x-2">
{/* DateRangePicker – für beide Ansichten sichtbar */}
<div>
<DateRangePicker compact />
</div>
<div className="flex items-center gap-2 flex-wrap">
{/* DateRangePicker immer sichtbar */}
<DateRangePicker />
{/* DIA0/DIA1/DIA2 Dropdown – nur sichtbar bei Messkurve */}
<div
style={{
visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
}}
>
{/* Modus-Dropdown nur für Messkurve */}
<div className={isMesskurve ? "" : "hidden"}>
<Listbox
value={selectedMode}
onChange={(value) => {
@@ -309,39 +306,29 @@ const LoopChartActionBar = forwardRef((_props, ref) => {
}}
>
<div className="relative w-48">
<Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
<span>
<Listbox.Button className="dropdown-surface w-full flex items-center justify-between">
<span className="dropdown-text-fix">
{
{
DIA0: "Alle Messwerte",
DIA1: "Stündliche Werte",
DIA2: "Tägliche Werte",
DIA1: "Stündlich",
DIA2: "Täglich",
}[selectedMode]
}
</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>
<i className="bi bi-chevron-down 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">
{["DIA0", "DIA1", "DIA2"].map((mode) => (
<Listbox.Option
key={mode}
value={mode}
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"
: ""
}`
}
@@ -349,8 +336,8 @@ const LoopChartActionBar = forwardRef((_props, ref) => {
{
{
DIA0: "Alle Messwerte",
DIA1: "Stündliche Werte",
DIA2: "Tägliche Werte",
DIA1: "Stündlich",
DIA2: "Täglich",
}[mode]
}
</Listbox.Option>
@@ -359,41 +346,38 @@ const LoopChartActionBar = forwardRef((_props, ref) => {
</div>
</Listbox>
</div>
{/* Dropdown für Messkurve / Meldungen in View-Header umgezogen */}
{/* Buttons – nur sichtbar bei Messkurve, Platz bleibt erhalten */}
<div
style={{
visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
}}
className="flex items-center space-x-2"
>
{/* Buttons nur für Messkurve */}
<div className={isMesskurve ? "flex items-center gap-2" : "hidden"}>
<button
onClick={handleStartRSL}
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
className="btn-primary h-8 font-medium px-3"
disabled={isLoading || rslRunning}
type="button"
>
{rslRunning ? "RSL läuft..." : "RSL Messung starten"}
{rslRunning ? "RSL läuft…" : "RSL Messung starten"}
</button>
<button
onClick={handleFetchData}
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
className="btn-primary h-8 font-medium px-3"
disabled={rslRunning}
type="button"
>
Daten laden
</button>
</div>
</div>
{rslRunning && (
<div className="fixed inset-0 z-[1000] flex flex-col items-center justify-center bg-white/80 backdrop-blur-sm">
<div className="fixed inset-0 z-[1000] flex flex-col items-center justify-center bg-black/60 backdrop-blur-sm">
<div className="mb-4 text-center space-y-1">
<p className="text-lg font-semibold">RSL Messung läuft</p>
<p className="text-sm text-gray-700">
<p className="text-sm font-semibold">RSL Messung läuft</p>
<p className="text-xs opacity-80">
Bitte warten…{" "}
{Math.min(100, Math.round((rslProgress / TOTAL_DURATION) * 100))}%
</p>
</div>
<div className="w-2/3 max-w-xl h-4 bg-gray-200 rounded overflow-hidden shadow-inner">
<div className="w-2/3 max-w-xl h-3 bg-[var(--color-border)] rounded overflow-hidden shadow-inner">
<div
className="h-full bg-littwin-blue transition-all ease-linear"
style={{ width: `${(rslProgress / TOTAL_DURATION) * 100}%` }}

208
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartView.tsx
View File

@@ -1,31 +1,24 @@
"use client"; // LoopChartView.tsx
import React, { useEffect } from "react";
import React, { useEffect, useRef } from "react";
import { Listbox } from "@headlessui/react";
import ReactModal from "react-modal";
import LoopMeasurementChart from "./LoopMeasurementChart";
import Report from "../IsoMeasurementChart/Report";
import LoopChartActionBar from "./LoopChartActionBar";
import { useRef } from "react";
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 { setChartTitle as setLoopChartTitle } from "@/redux/slices/loopChartTypeSlice";
import { resetBrushRange } from "@/redux/slices/brushSlice";
import { useLoopChartLoader } from "./LoopChartActionBar";
import {
setVonDatum,
setBisDatum,
setSelectedMode,
setSelectedSlotType,
} from "@/redux/slices/kabelueberwachungChartSlice";
import { setChartTitle as setLoopChartTitle } from "@/redux/slices/loopChartTypeSlice";
import { resetBrushRange } from "@/redux/slices/brushSlice";
import { resetDateRange } from "@/redux/slices/dateRangePickerSlice";
interface LoopChartViewProps {
@@ -34,11 +27,7 @@ interface LoopChartViewProps {
slotIndex: number;
}
const LoopChartView: React.FC<LoopChartViewProps> = ({
isOpen,
onClose,
slotIndex,
}) => {
function LoopChartView({ isOpen, onClose, slotIndex }: LoopChartViewProps) {
const dispatch = useDispatch<AppDispatch>();
const chartTitle = useSelector(
(state: RootState) => state.loopChartType.chartTitle
@@ -48,9 +37,6 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
(state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
);
// useLoopChartLoader hook
const loadLoopChartData = useLoopChartLoader();
// slotNumber nicht direkt benötigt – wird intern über Redux genutzt
// **Modal schließen + Redux-Status zurücksetzen**
@@ -58,64 +44,35 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
const today = new Date();
const thirtyDaysAgo = new Date();
thirtyDaysAgo.setDate(today.getDate() - 30);
const toISO = (date: Date) => date.toLocaleDateString("sv-SE");
// Reset Datum
dispatch(setVonDatum(toISO(thirtyDaysAgo)));
dispatch(setBisDatum(toISO(today)));
// Reset DateRangePicker
dispatch(resetDateRange());
// Reset Dropdowns
dispatch(setSelectedMode("DIA0")); // Reset to Alle Messwerte
dispatch(setSelectedMode("DIA0"));
dispatch(setSelectedSlotType("schleifenwiderstand"));
// Sonstiges Reset
dispatch(setChartOpen(false));
dispatch(setFullScreen(false));
dispatch(resetBrushRange());
onClose();
};
// **Vollbildmodus umschalten**
const toggleFullScreen = () => {
dispatch(setFullScreen(!isFullScreen));
};
const toggleFullScreen = () => dispatch(setFullScreen(!isFullScreen));
// Modal öffnen - RSL spezifische Einstellungen
const actionBarRef = useRef<{ handleFetchData: () => void }>(null);
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 slot number first
dispatch(setSlotNumber(slotIndex));
// Set dates
dispatch(setVonDatum(toISO(thirtyDaysAgo)));
dispatch(setBisDatum(toISO(today)));
// Set RSL specific settings
dispatch(setSelectedSlotType("schleifenwiderstand"));
dispatch(setSelectedMode("DIA0")); // Set to Alle Messwerte on open
// Automatisch Daten laden wie Button-Klick
const timer = setTimeout(() => {
actionBarRef.current?.handleFetchData();
}, 120);
// Cleanup timer
return () => clearTimeout(timer);
dispatch(setSelectedMode("DIA0"));
const t = setTimeout(() => actionBarRef.current?.handleFetchData(), 120);
return () => clearTimeout(t);
}
//ESLint ignore
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isOpen, slotIndex, dispatch]);
return (
@@ -124,76 +81,55 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
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="Schleifenwiderstand"
>
{/* 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" ? "Schleifenwiderstand" : "Meldungen"}
</h3>
<header className="modal-header relative pr-56">
<h3 className="text-sm font-semibold tracking-wide">
Schleifenwiderstand
</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") =>
@@ -201,37 +137,21 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
}
>
<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,
}: {
selected: boolean;
active: boolean;
}) =>
`px-4 py-1 cursor-pointer ${
className={({ selected, active }) =>
`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"
: ""
}`
}
@@ -243,17 +163,19 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
</div>
</Listbox>
</div>
</header>
<div className="flex flex-col flex-1 p-3 gap-3">
<LoopChartActionBar ref={actionBarRef} />
<div style={{ flex: 1, height: "90%" }}>
<div className="flex-1 relative">
{chartTitle === "Messkurve" ? (
<LoopMeasurementChart />
) : (
<Report moduleType="RSL" autoLoad={false} />
<Report moduleType="RSL" autoLoad={chartTitle === "Meldungen"} />
)}
</div>
</div>
</ReactModal>
);
};
}
export default LoopChartView;

133
components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
View File

@@ -165,27 +165,32 @@ const TDRChartActionBar: React.FC = () => {
return (
<>
<div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-4">
{/* 🧩 Slot-Anzeige (1-basiert für Benutzer) */}
<div className="text-sm font-semibold">
{selectedSlot !== null ? `KÜ ${selectedSlot + 1}` : "Kein KÜ gewählt"}
<div className="toolbar w-full flex items-center gap-3 flex-wrap">
{/* Slot Badge */}
<div className="flex items-center gap-2 pr-4">
<span className="font-semibold uppercase tracking-wide text-muted">KÜ</span>
<span className="font-medium px-2 py-0.5 rounded bg-surface-alt border border-base min-w-[3rem] text-center">
{selectedSlot !== null ? selectedSlot + 1 : "-"}
</span>
</div>
{/* ✅ Referenz setzen */}
{/* Referenz speichern */}
{selectedId !== null && (
<button
onClick={handleSetReference}
className="border border-littwin-blue text-littwin-blue bg-white rounded px-3 py-1 text-sm hover:bg-gray-200"
type="button"
className="btn-primary h-8 px-3 font-medium"
>
TDR-Kurve als Referenz speichern
</button>
)}
{/* 🚀 TDR starten */}
{/* Start TDR */}
<button
onClick={handleStartTDR}
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap "
type="button"
disabled={selectedSlot === null || tdrRunning}
className={`btn-primary h-8 px-4 whitespace-nowrap ${
tdrRunning ? "opacity-90" : ""
}`}
>
{tdrRunning
? `TDR läuft... (${Math.min(
@@ -194,27 +199,22 @@ const TDRChartActionBar: React.FC = () => {
)}%)`
: "TDR-Messung starten"}
</button>
{/* 🔽 Dropdown für Messungen */}
<div className="flex items-center space-x-2">
{/* Messung Dropdown */}
<div className="ml-auto flex-1 min-w-[14rem] max-w-[30rem]">
<Listbox
value={selectedId}
onChange={(id) => {
setSelectedId(id);
if (id !== null) {
dispatch(getTDRChartDataByIdThunk(id));
}
if (id !== null) dispatch(getTDRChartDataByIdThunk(id));
}}
disabled={idsForSlot.length === 0}
>
<div className="relative w-96">
<Listbox.Button className="w-full border px-2 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
<span className="whitespace-nowrap overflow-hidden text-ellipsis">
<div className="relative w-full">
<Listbox.Button className="dropdown-surface w-full flex items-center justify-between h-8 disabled:opacity-50 disabled:cursor-not-allowed">
<span className="dropdown-text-fix whitespace-nowrap overflow-hidden text-ellipsis pr-2">
{selectedId
? (() => {
const selected = idsForSlot.find(
(e) => e.id === selectedId
);
const selected = idsForSlot.find((e) => e.id === selectedId);
return selected
? `${new Date(selected.t).toLocaleString("de-DE", {
day: "2-digit",
@@ -228,72 +228,59 @@ const TDRChartActionBar: React.FC = () => {
})()
: "Wähle Messung"}
</span>
<svg
className="w-5 h-5 text-gray-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<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>
<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">
{idsForSlot.map((entry) => (
<Listbox.Option
key={entry.id}
value={entry.id}
className={({ selected, active }) =>
`px-4 py-1 cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis ${
selected
? "bg-littwin-blue text-white"
: active
? "bg-gray-200"
: ""
}`
}
>
{new Date(entry.t).toLocaleString("de-DE", {
day: "2-digit",
month: "2-digit",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
})}{" "}
– Fehlerstelle: {entry.d} m
</Listbox.Option>
))}
<Listbox.Options className="dropdown-options absolute z-50 mt-1 w-full max-h-72 overflow-auto text-sm bg-[var(--color-surface)] border border-base rounded-md shadow-lg p-1">
{idsForSlot.map((entry) => {
const dateLabel = new Date(entry.t).toLocaleString("de-DE", {
day: "2-digit",
month: "2-digit",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
});
const fullText = `${dateLabel} – Fehlerstelle: ${entry.d} m`;
return (
<Listbox.Option
key={entry.id}
value={entry.id}
title={fullText}
className={({ selected, active }) => {
const base = "px-3 h-8 cursor-pointer rounded-sm m-0.5 flex items-center justify-start transition-colors text-[13px]";
if (selected)
return `${base} dropdown-option-active font-medium`;
if (active)
return `${base} dropdown-option-hover`;
return `${base}`; // neutral text color comes from parent/theme
}}
>
<span className="truncate w-full">{fullText}</span>
</Listbox.Option>
);
})}
</Listbox.Options>
</div>
</Listbox>
</div>
</div>
{tdrRunning && (
<div className="fixed inset-0 z-[1000] flex flex-col items-center justify-center bg-white/80 backdrop-blur-sm">
<div className="fixed inset-0 z-[1000] flex flex-col items-center justify-center bg-[rgba(0,0,0,0.55)] backdrop-blur-sm">
<div className="mb-4 text-center space-y-1">
<p className="text-lg font-semibold">
<p className="text-lg font-semibold text-white">
TDR Messung läuft... kann bis zu zwei Minuten dauern
</p>
<p className="text-sm text-gray-700">
Bitte warten…{" "}
{Math.min(
<p className="text-sm text-white/80">
Bitte warten… {Math.min(
100,
Math.round((tdrProgress / TDR_TOTAL_DURATION) * 100)
)}
%
)}%
</p>
</div>
<div className="w-2/3 max-w-xl h-4 bg-gray-200 rounded overflow-hidden shadow-inner">
<div className="w-2/3 max-w-xl h-3 bg-white/20 rounded overflow-hidden shadow-inner">
<div
className="h-full bg-littwin-blue transition-all ease-linear"
style={{
width: `${(tdrProgress / TDR_TOTAL_DURATION) * 100}%`,
}}
className="h-full bg-accent transition-all ease-linear"
style={{ width: `${(tdrProgress / TDR_TOTAL_DURATION) * 100}%` }}
/>
</div>
</div>

218
components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartView.tsx
View File

@@ -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} />
) : (