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

ISO & RSL dropdowns moved to headers like TDR; removed old dropdowns from action bars, cleaned imports, fixed TypeScript issues

Browse Source
This commit is contained in:
ISA
2025-08-11 13:35:14 +02:00
parent 8d1b5ceddc
commit 06aa3c8f3e
10 changed files with 184 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
NEXT_PUBLIC_EXPORT_STATIC=false
NEXT_PUBLIC_USE_CGI=false
# App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.685
NEXT_PUBLIC_APP_VERSION=1.6.686
NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

2
.env.production
View File

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
NEXT_PUBLIC_EXPORT_STATIC=true
NEXT_PUBLIC_USE_CGI=true
# App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.685
NEXT_PUBLIC_APP_VERSION=1.6.686
NEXT_PUBLIC_CPL_MODE=production

5
CHANGELOG.md
View File

@@ -1,3 +1,8 @@
## [1.6.686] – 2025-08-11
- LoopChartActionBar verhält sich jetzt wie im ISO-Modal: Bei Auswahl „Meldungen“
---
## [1.6.685] – 2025-08-11
- Daten von 118. in mocks geholt

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

@@ -9,7 +9,6 @@ import {
setSelectedMode,
setChartOpen,
setLoading,
setChartTitle,
} from "@/redux/slices/kabelueberwachungChartSlice";
import { setBrushRange } from "@/redux/slices/brushSlice";
import { Listbox } from "@headlessui/react";
@@ -173,14 +172,8 @@ export const useIsoDataLoader = () => {
const IsoChartActionBar: React.FC = () => {
const dispatch = useDispatch();
const {
vonDatum,
bisDatum,
selectedMode,
slotNumber,
isLoading,
chartTitle,
} = useSelector((state: RootState) => state.kabelueberwachungChartSlice);
const { vonDatum, bisDatum, selectedMode, slotNumber, chartTitle } =
useSelector((state: RootState) => state.kabelueberwachungChartSlice);
const formatDate = (dateString: string) => {
const [year, month, day] = dateString.split("-");
@@ -339,46 +332,7 @@ const IsoChartActionBar: React.FC = () => {
</div>
{/* Dropdown für Auswahl zwischen "Messkurve" und "Meldungen" - immer anzeigen */}
<Listbox
value={chartTitle}
onChange={(value) => dispatch(setChartTitle(value))}
>
<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"].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>
{/* Dropdown für Auswahl zwischen "Messkurve" und "Meldungen" entfernt */}
{/* Daten laden Button - Platz reservieren, aber ausblenden wenn Meldungen */}
<div

51
components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartView.tsx
View File

@@ -1,6 +1,7 @@
"use client"; // IsoChartView.tsx
import React, { useEffect } from "react";
import { Listbox } from "@headlessui/react";
import ReactModal from "react-modal";
import IsoMeasurementChart from "./IsoMeasurementChart";
import IsoChartActionBar, { useIsoDataLoader } from "./IsoChartActionBar";
@@ -178,9 +179,59 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
height: "100%",
}}
>
<div className="flex justify-between items-center mb-2 pr-24">
<h3 className="text-lg font-semibold">
{chartTitle === "Messkurve" ? "Isolationswiderstand" : "Meldungen"}
</h3>
<Listbox
value={chartTitle}
onChange={(value: "Messkurve" | "Meldungen") =>
dispatch(setChartTitle(value))
}
>
<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,
}: {
selected: boolean;
active: boolean;
}) =>
`px-4 py-1 cursor-pointer ${
selected
? "bg-littwin-blue text-white"
: active
? "bg-gray-200"
: ""
}`
}
>
{option}
</Listbox.Option>
))}
</Listbox.Options>
</div>
</Listbox>
</div>
<IsoChartActionBar />
<div style={{ flex: 1, height: "90%" }}>
{chartTitle === "Messkurve" ? <IsoMeasurementChart /> : <Report />}

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

@@ -12,7 +12,6 @@ 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 = () => {
@@ -295,49 +294,7 @@ const LoopChartActionBar: React.FC = () => {
</div>
</Listbox>
</div>
{/* Dropdown für Messkurve / Meldungen (wie ISO) */}
<Listbox
value={chartTitle}
onChange={(value: "Messkurve" | "Meldungen") =>
dispatch(setLoopChartTitle(value))
}
>
<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>
{/* Dropdown für Messkurve / Meldungen in View-Header umgezogen */}
{/* Buttons – nur sichtbar bei Messkurve, Platz bleibt erhalten */}
<div

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

@@ -1,6 +1,7 @@
"use client"; // LoopChartView.tsx
import React, { useEffect } from "react";
import { Listbox } from "@headlessui/react";
import ReactModal from "react-modal";
import LoopMeasurementChart from "./LoopMeasurementChart";
import Report from "../IsoMeasurementChart/Report";
@@ -13,6 +14,7 @@ import {
setFullScreen,
setSlotNumber,
} from "@/redux/slices/kabelueberwachungChartSlice";
import { setChartTitle as setLoopChartTitle } from "@/redux/slices/loopChartTypeSlice";
import { resetBrushRange } from "@/redux/slices/brushSlice";
import { useLoopChartLoader } from "./LoopChartActionBar";
@@ -178,9 +180,59 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
height: "100%",
}}
>
<div className="flex justify-between items-center mb-2 pr-24">
<h3 className="text-lg font-semibold">
{chartTitle === "Messkurve" ? "Schleifenwiderstand" : "Meldungen"}
</h3>
<Listbox
value={chartTitle}
onChange={(value: "Messkurve" | "Meldungen") =>
dispatch(setLoopChartTitle(value))
}
>
<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,
}: {
selected: boolean;
active: boolean;
}) =>
`px-4 py-1 cursor-pointer ${
selected
? "bg-littwin-blue text-white"
: active
? "bg-gray-200"
: ""
}`
}
>
{option}
</Listbox.Option>
))}
</Listbox.Options>
</div>
</Listbox>
</div>
<LoopChartActionBar />
<div style={{ flex: 1, height: "90%" }}>
{chartTitle === "Messkurve" ? <LoopMeasurementChart /> : <Report />}

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

@@ -25,6 +25,9 @@ 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 {
isOpen: boolean;
@@ -39,8 +42,8 @@ const TDRChartView: React.FC<TDRChartViewProps> = ({
}) => {
const dispatch = useDispatch<AppDispatch>();
const isFullScreen = useSelector(
(state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
const { isFullScreen, chartTitle } = useSelector(
(state: RootState) => state.kabelueberwachungChartSlice
);
// **Modal öffnen - TDR spezifische Einstellungen**
@@ -169,8 +172,62 @@ const TDRChartView: React.FC<TDRChartViewProps> = ({
height: "100%",
}}
>
<h3 className="text-lg font-semibold">TDR-Messung</h3>
<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 */}
<Listbox
value={chartTitle}
onChange={(value: "Messkurve" | "Meldungen") =>
dispatch(setChartTitle(value))
}
>
<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>
</div>
{/* Chart oder Meldungen */}
<div style={{ flex: 1, height: "90%" }}>
{chartTitle === "Messkurve" ? (
<TDRChart isFullScreen={isFullScreen} />
) : (
<Report />
)}
</div>
</div>
</ReactModal>
);

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "cpl-v4",
"version": "1.6.685",
"version": "1.6.686",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "cpl-v4",
"version": "1.6.685",
"version": "1.6.686",
"dependencies": {
"@fontsource/roboto": "^5.1.0",
"@headlessui/react": "^2.2.4",

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "cpl-v4",
"version": "1.6.685",
"version": "1.6.686",
"private": true,
"scripts": {
"dev": "next dev",