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

Daten von 118. in mocks geholt

Browse Source
This commit is contained in:
ISA
2025-08-11 12:07:47 +02:00
parent c107738625
commit 806eaaeff7
53 changed files with 158942 additions and 158805 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartActionBar.tsx
View File

@@ -393,14 +393,6 @@ const IsoChartActionBar: React.FC = () => {
Daten laden
</button>
</div>
{/* Loading Indicator - nur bei Messkurve anzeigen */}
{chartTitle === "Messkurve" && isLoading && (
<div className="flex items-center space-x-2 text-sm text-gray-500">
<div className="w-4 h-4 border-2 border-t-2 border-blue-500 rounded-full animate-spin" />
<span>Lade Daten...</span>
</div>
)}
</div>
</div>
);

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

@@ -12,6 +12,7 @@ import {
} from "@/redux/slices/kabelueberwachungChartSlice";
import { setBrushRange } from "@/redux/slices/brushSlice";
import { Listbox } from "@headlessui/react";
import { setChartTitle as setLoopChartTitle } from "@/redux/slices/loopChartTypeSlice";
//-----------------------------------------------------------------------------------useLoopChartLoader
export const useLoopChartLoader = () => {
@@ -99,12 +100,12 @@ const LoopChartActionBar: React.FC = () => {
bisDatum,
selectedMode,
selectedSlotType,
slotNumber,
isLoading,
} = useSelector((state: RootState) => state.kabelueberwachungChartSlice);
const { chartTitle } = useSelector((state: RootState) => state.loopChartType);
const getApiUrl = (
mode: "DIA0" | "DIA1" | "DIA2",
type: number,
@@ -280,29 +281,67 @@ const LoopChartActionBar: React.FC = () => {
</Listbox.Options>
</div>
</Listbox>
<div className="relative w-16"> </div>
{/* Schleife starten button*/}
<button
onClick={handleStartRSL}
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
disabled={isLoading}
{/* Dropdown für Messkurve / Meldungen (wie ISO) */}
<Listbox
value={chartTitle}
onChange={(value: "Messkurve" | "Meldungen") =>
dispatch(setLoopChartTitle(value))
}
>
RSL starten
</button>
<button
onClick={handleFetchData}
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
>
Daten laden
</button>
{isLoading && (
<div className="flex items-center space-x-2 text-sm text-gray-500">
<div className="w-4 h-4 border-2 border-t-2 border-blue-500 rounded-full animate-spin" />
<span>Lade Daten...</span>
<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>
<Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow 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 ${
selected
? "bg-littwin-blue text-white"
: active
? "bg-gray-200"
: ""
}`
}
>
{option}
</Listbox.Option>
))}
</Listbox.Options>
</div>
</Listbox>
{/* Buttons nur bei Messkurve sichtbar */}
{chartTitle === "Messkurve" && (
<>
<button
onClick={handleStartRSL}
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
disabled={isLoading}
>
RSL starten
</button>
<button
onClick={handleFetchData}
className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
>
Daten laden
</button>
</>
)}
</div>
</div>

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

@@ -3,6 +3,7 @@
import React, { useEffect } from "react";
import ReactModal from "react-modal";
import LoopMeasurementChart from "./LoopMeasurementChart";
import Report from "../IsoMeasurementChart/Report";
import LoopChartActionBar from "./LoopChartActionBar";
import { useSelector, useDispatch } from "react-redux";
import { AppDispatch } from "@/redux/store";
@@ -46,10 +47,7 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
// useLoopChartLoader hook
const loadLoopChartData = useLoopChartLoader();
// Slot number from Redux
const slotNumber = useSelector(
(state: RootState) => state.kabelueberwachungChartSlice.slotNumber
);
// slotNumber nicht direkt benötigt – wird intern über Redux genutzt
// **Modal schließen + Redux-Status zurücksetzen**
const handleClose = () => {
@@ -180,10 +178,12 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
height: "100%",
}}
>
<h3 className="text-lg font-semibold">{chartTitle}</h3>
<h3 className="text-lg font-semibold">
{chartTitle === "Messkurve" ? "Schleifenwiderstand" : "Meldungen"}
</h3>
<LoopChartActionBar />
<div style={{ flex: 1, height: "90%" }}>
<LoopMeasurementChart />
{chartTitle === "Messkurve" ? <LoopMeasurementChart /> : <Report />}
</div>
</div>
</ReactModal>