feat: ISO, RSL und TDR separate Charts ohne den Switcher
This commit is contained in:
ISA
@@ -1,25 +1,25 @@
|
||||
"use client";
|
||||
// /components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
|
||||
// /components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartActionBar.tsx
|
||||
import React from "react";
|
||||
import DateRangePicker from "@/components/common/DateRangePicker";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { RootState } from "@/redux/store";
|
||||
import {
|
||||
setLoopMeasurementCurveChartData,
|
||||
setIsoMeasurementCurveChartData,
|
||||
setSelectedMode,
|
||||
setSelectedSlotType,
|
||||
setChartOpen,
|
||||
setLoading,
|
||||
} from "@/redux/slices/kabelueberwachungChartSlice";
|
||||
import { setBrushRange } from "@/redux/slices/brushSlice";
|
||||
import { setChartTitle } from "@/redux/slices/loopChartTypeSlice";
|
||||
import { setChartTitle } from "@/redux/slices/isoChartTypeSlice";
|
||||
import { Listbox } from "@headlessui/react";
|
||||
|
||||
//-----------------------------------------------------------------------------------useLoopChartLoader
|
||||
export const useLoopChartLoader = () => {
|
||||
//-----------------------------------------------------------------------------------useIsoChartLoader
|
||||
export const useIsoChartLoader = () => {
|
||||
const dispatch = useDispatch();
|
||||
const { vonDatum, bisDatum, selectedMode, selectedSlotType, slotNumber } =
|
||||
useSelector((state: RootState) => state.kabelueberwachungChartSlice);
|
||||
const { vonDatum, bisDatum, selectedMode, slotNumber } = useSelector(
|
||||
(state: RootState) => state.kabelueberwachungChartSlice
|
||||
);
|
||||
const hasShownNoDataAlert = React.useRef(false);
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
@@ -27,13 +27,9 @@ export const useLoopChartLoader = () => {
|
||||
return `${year};${month};${day}`;
|
||||
};
|
||||
|
||||
const getApiUrl = (
|
||||
mode: "DIA0" | "DIA1" | "DIA2",
|
||||
type: number,
|
||||
slotNumber: number
|
||||
) => {
|
||||
const typeFolder =
|
||||
type === 3 ? "isolationswiderstand" : "schleifenwiderstand";
|
||||
const getApiUrl = (mode: "DIA0" | "DIA1" | "DIA2", slotNumber: number) => {
|
||||
const type = 3; // Fest auf Isolationswiderstand gesetzt
|
||||
const typeFolder = "isolationswiderstand";
|
||||
|
||||
let url: string;
|
||||
|
||||
@@ -45,23 +41,22 @@ export const useLoopChartLoader = () => {
|
||||
)};${formatDate(bisDatum)};${slotNumber};${type};`;
|
||||
}
|
||||
|
||||
console.log("API URL:", url); // Hier wird die URL in der Konsole ausgegeben
|
||||
console.log("API URL:", url);
|
||||
return url;
|
||||
};
|
||||
|
||||
const loadLoopChartData = async () => {
|
||||
const type = selectedSlotType === "schleifenwiderstand" ? 4 : 3;
|
||||
const loadIsoChartData = async () => {
|
||||
if (slotNumber === null) return;
|
||||
|
||||
dispatch(setLoading(true));
|
||||
dispatch(setChartOpen(false));
|
||||
dispatch(setLoopMeasurementCurveChartData([]));
|
||||
dispatch(setIsoMeasurementCurveChartData([]));
|
||||
|
||||
const startTime = Date.now();
|
||||
const MIN_LOADING_TIME_MS = 1000;
|
||||
|
||||
try {
|
||||
const apiUrl = getApiUrl(selectedMode, type, slotNumber);
|
||||
const apiUrl = getApiUrl(selectedMode, slotNumber);
|
||||
const response = await fetch(apiUrl);
|
||||
const data = await response.json();
|
||||
|
||||
@@ -72,14 +67,14 @@ export const useLoopChartLoader = () => {
|
||||
await new Promise((res) => setTimeout(res, waitTime));
|
||||
|
||||
if (Array.isArray(data) && data.length > 0) {
|
||||
dispatch(setLoopMeasurementCurveChartData(data));
|
||||
dispatch(setIsoMeasurementCurveChartData(data));
|
||||
dispatch(setChartOpen(true));
|
||||
} else {
|
||||
dispatch(setLoopMeasurementCurveChartData([]));
|
||||
dispatch(setIsoMeasurementCurveChartData([]));
|
||||
dispatch(setChartOpen(false));
|
||||
if (!hasShownNoDataAlert.current) {
|
||||
alert("⚠️ Keine Messdaten im gewählten Zeitraum gefunden");
|
||||
hasShownNoDataAlert.current = true; // ⬅️ Nur einmal zeigen
|
||||
hasShownNoDataAlert.current = true;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
@@ -90,31 +85,24 @@ export const useLoopChartLoader = () => {
|
||||
}
|
||||
};
|
||||
|
||||
return { loadLoopChartData };
|
||||
return { loadIsoChartData };
|
||||
};
|
||||
|
||||
//-----------------------------------------------------------------------------------LoopChartActionBar
|
||||
const LoopChartActionBar: React.FC = () => {
|
||||
//-----------------------------------------------------------------------------------IsoChartActionBar
|
||||
const IsoChartActionBar: React.FC = () => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const {
|
||||
vonDatum,
|
||||
bisDatum,
|
||||
selectedMode,
|
||||
selectedSlotType,
|
||||
const { vonDatum, bisDatum, selectedMode, slotNumber, isLoading } =
|
||||
useSelector((state: RootState) => state.kabelueberwachungChartSlice);
|
||||
|
||||
slotNumber,
|
||||
const formatDate = (dateString: string) => {
|
||||
const [year, month, day] = dateString.split("-");
|
||||
return `${year};${month};${day}`;
|
||||
};
|
||||
|
||||
isLoading,
|
||||
} = useSelector((state: RootState) => state.kabelueberwachungChartSlice);
|
||||
|
||||
const getApiUrl = (
|
||||
mode: "DIA0" | "DIA1" | "DIA2",
|
||||
type: number,
|
||||
slotNumber: number
|
||||
) => {
|
||||
const typeFolder =
|
||||
type === 3 ? "isolationswiderstand" : "schleifenwiderstand";
|
||||
const getApiUrl = (mode: "DIA0" | "DIA1" | "DIA2", slotNumber: number) => {
|
||||
const type = 3; // Fest auf Isolationswiderstand gesetzt
|
||||
const typeFolder = "isolationswiderstand";
|
||||
|
||||
const baseUrl =
|
||||
process.env.NODE_ENV === "development"
|
||||
@@ -122,30 +110,23 @@ const LoopChartActionBar: React.FC = () => {
|
||||
: `${window.location.origin}/CPL?seite.ACP&${mode}=${formatDate(
|
||||
vonDatum
|
||||
)};${formatDate(bisDatum)};${slotNumber};${type};`;
|
||||
console.log("baseUrl", baseUrl);
|
||||
|
||||
console.log("baseUrl", baseUrl);
|
||||
return baseUrl;
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const [year, month, day] = dateString.split("-");
|
||||
return `${year};${month};${day}`;
|
||||
};
|
||||
|
||||
const handleFetchData = async () => {
|
||||
const type = selectedSlotType === "schleifenwiderstand" ? 4 : 3;
|
||||
|
||||
if (slotNumber === null) {
|
||||
alert("⚠️ Bitte zuerst einen KÜ auswählen!");
|
||||
return;
|
||||
}
|
||||
|
||||
const apiUrl = getApiUrl(selectedMode, type, slotNumber);
|
||||
const apiUrl = getApiUrl(selectedMode, slotNumber);
|
||||
if (!apiUrl) return;
|
||||
|
||||
dispatch(setLoading(true));
|
||||
dispatch(setChartOpen(false));
|
||||
dispatch(setLoopMeasurementCurveChartData([]));
|
||||
dispatch(setIsoMeasurementCurveChartData([]));
|
||||
|
||||
const MIN_LOADING_TIME_MS = 1000;
|
||||
const startTime = Date.now();
|
||||
@@ -162,24 +143,21 @@ const LoopChartActionBar: React.FC = () => {
|
||||
const elapsedTime = Date.now() - startTime;
|
||||
const waitTime = Math.max(0, MIN_LOADING_TIME_MS - elapsedTime);
|
||||
await new Promise((resolve) => setTimeout(resolve, waitTime));
|
||||
//------------------------
|
||||
console.log("▶️ Lade Daten für:");
|
||||
|
||||
console.log("▶️ Lade Isolationswiderstand-Daten für:");
|
||||
console.log(" Slot:", slotNumber);
|
||||
console.log(" Typ:", selectedSlotType, "→", type);
|
||||
console.log(" Modus:", selectedMode);
|
||||
console.log(" Von:", vonDatum);
|
||||
console.log(" Bis:", bisDatum);
|
||||
console.log(" URL:", apiUrl);
|
||||
console.log(" Daten:", jsonData);
|
||||
|
||||
//-----------------------
|
||||
|
||||
if (Array.isArray(jsonData) && jsonData.length > 0) {
|
||||
dispatch(setLoopMeasurementCurveChartData(jsonData));
|
||||
dispatch(setIsoMeasurementCurveChartData(jsonData));
|
||||
dispatch(setChartOpen(true));
|
||||
} else {
|
||||
alert("⚠️ Keine Messdaten im gewählten Zeitraum gefunden.");
|
||||
dispatch(setLoopMeasurementCurveChartData([]));
|
||||
dispatch(setIsoMeasurementCurveChartData([]));
|
||||
dispatch(setChartOpen(false));
|
||||
}
|
||||
} catch (err) {
|
||||
@@ -193,7 +171,9 @@ const LoopChartActionBar: React.FC = () => {
|
||||
return (
|
||||
<div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-2">
|
||||
<div className="flex items-center">
|
||||
<label className="text-sm font-semibold">KÜ {slotNumber ?? "-"}</label>
|
||||
<label className="text-sm font-semibold">
|
||||
KÜ {slotNumber !== null ? slotNumber + 1 : "-"}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
@@ -257,67 +237,10 @@ const LoopChartActionBar: React.FC = () => {
|
||||
</div>
|
||||
</Listbox>
|
||||
|
||||
<Listbox
|
||||
value={selectedSlotType}
|
||||
onChange={(value) => {
|
||||
dispatch(setSelectedSlotType(value));
|
||||
dispatch(
|
||||
setChartTitle(
|
||||
value === "isolationswiderstand"
|
||||
? "Isolationsmessung"
|
||||
: "Schleifenmessung"
|
||||
)
|
||||
);
|
||||
}}
|
||||
>
|
||||
<div className="relative w-56">
|
||||
<Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
|
||||
<span>
|
||||
{
|
||||
{
|
||||
isolationswiderstand: "Isolationswiderstand",
|
||||
schleifenwiderstand: "Schleifenwiderstand",
|
||||
}[selectedSlotType]
|
||||
}
|
||||
</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>
|
||||
<Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
|
||||
{["isolationswiderstand", "schleifenwiderstand"].map((type) => (
|
||||
<Listbox.Option
|
||||
key={type}
|
||||
value={type}
|
||||
className={({ selected, active }) =>
|
||||
`px-4 py-1 cursor-pointer ${
|
||||
selected
|
||||
? "bg-littwin-blue text-white"
|
||||
: active
|
||||
? "bg-gray-200"
|
||||
: ""
|
||||
}`
|
||||
}
|
||||
>
|
||||
{
|
||||
{
|
||||
isolationswiderstand: "Isolationswiderstand",
|
||||
schleifenwiderstand: "Schleifenwiderstand",
|
||||
}[type]
|
||||
}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</div>
|
||||
</Listbox>
|
||||
{/* Label für Isolationswiderstand - kein Dropdown mehr nötig */}
|
||||
<div className="px-3 py-1 bg-gray-50 border rounded text-sm text-gray-700">
|
||||
Isolationswiderstand
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleFetchData}
|
||||
@@ -337,4 +260,4 @@ const LoopChartActionBar: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default LoopChartActionBar;
|
||||
export default IsoChartActionBar;
|
||||
|
||||
Reference in New Issue
Block a user