style: dark mode ISO, RSL und TDR
This commit is contained in:
ISA
@@ -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}%` }}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user