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

refactor: LoopChartActionBar Dropdowns auf Listbox mit Littwin-Design umgestellt

Browse Source 
- selectedMode (DIA0/DIA1/DIA2) ersetzt durch Headless UI Listbox
- selectedSlotType (Schleifen-/Isolationswiderstand) ebenfalls als Listbox
- Einheitliches Dropdown-Design mit MeldungenView und TDRChartActionBar
- Littwin-blue Stil für ausgewählte Optionen integriert
This commit is contained in:
ISA
2025-07-08 07:02:27 +02:00
parent 3d37388173
commit 3af16b4c29
7 changed files with 121 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,6 +13,8 @@ import {
} from "@/redux/slices/kabelueberwachungChartSlice";
import { setBrushRange } from "@/redux/slices/brushSlice";
import { setChartTitle } from "@/redux/slices/loopChartTypeSlice";
import { Listbox } from "@headlessui/react";
//-----------------------------------------------------------------------------------useLoopChartLoader
export const useLoopChartLoader = () => {
const dispatch = useDispatch();
@@ -199,27 +201,67 @@ const LoopChartActionBar: React.FC = () => {
<div className="flex items-center space-x-2">
<DateRangePicker />
<select
<Listbox
value={selectedMode}
onChange={(e) => {
dispatch(
setSelectedMode(e.target.value as "DIA0" | "DIA1" | "DIA2")
);
onChange={(value) => {
dispatch(setSelectedMode(value));
dispatch(setBrushRange({ startIndex: 0, endIndex: 0 }));
}}
className="px-3 py-1 bg-white border rounded text-sm"
>
<option value="DIA0">Alle Messwerte</option>
<option value="DIA1">Stündliche Werte</option>
<option value="DIA2">Tägliche Werte</option>
</select>
<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>
{
{
DIA0: "Alle Messwerte",
DIA1: "Stündliche Werte",
DIA2: "Tägliche Werte",
}[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>
</Listbox.Button>
<Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
{["DIA0", "DIA1", "DIA2"].map((mode) => (
<Listbox.Option
key={mode}
value={mode}
className={({ selected, active }) =>
`px-4 py-1 cursor-pointer ${
selected
? "bg-littwin-blue text-white"
: active
? "bg-blue-100"
: ""
}`
}
>
{
{
DIA0: "Alle Messwerte",
DIA1: "Stündliche Werte",
DIA2: "Tägliche Werte",
}[mode]
}
</Listbox.Option>
))}
</Listbox.Options>
</div>
</Listbox>
<select
<Listbox
value={selectedSlotType}
onChange={(e) => {
const value = e.target.value as
| "isolationswiderstand"
| "schleifenwiderstand";
onChange={(value) => {
dispatch(setSelectedSlotType(value));
dispatch(
setChartTitle(
@@ -229,11 +271,55 @@ const LoopChartActionBar: React.FC = () => {
)
);
}}
className="px-3 py-1 bg-white border rounded text-sm"
>
<option value="isolationswiderstand">Isolationswiderstand</option>
<option value="schleifenwiderstand">Schleifenwiderstand</option>
</select>
<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-blue-100"
: ""
}`
}
>
{
{
isolationswiderstand: "Isolationswiderstand",
schleifenwiderstand: "Schleifenwiderstand",
}[type]
}
</Listbox.Option>
))}
</Listbox.Options>
</div>
</Listbox>
<button
onClick={handleFetchData}