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

feat: ersetzt Einheit-Select durch Listbox mit littwin-blue Design in AnalogInputsSettingsModal

Browse Source
This commit is contained in:
ISA
2025-07-08 08:30:09 +02:00
parent 44cfd2ab81
commit fb680a4c66
10 changed files with 112 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
components/main/analogInputs/AnalogInputsSettingsModal.tsx
View File

@@ -1,6 +1,6 @@
"use client"; // /components/main/analogeEingaenge/AnalogInputsSettingsModal.tsx
import React, { useEffect, useState } from "react";
import { Listbox } from "@headlessui/react";
interface AnalogInput {
id: number;
label?: string;
@@ -27,6 +27,7 @@ export default function AnalogInputSettingsModal({
const [loggerInterval, setLoggerInterval] = useState("9");
const [unit, setUnit] = useState("V");
const [isSaving, setIsSaving] = useState(false);
const unitOptions = ["V", "mA", "°C", "bar", "%"];
useEffect(() => {
if (selectedInput && isOpen) {
@@ -175,17 +176,45 @@ export default function AnalogInputSettingsModal({
<span className="font-normal">Einheit:</span>
</div>
<div>
<select
className="w-full border rounded px-3 py-1 mb-4"
value={unit}
onChange={(e) => setUnit(e.target.value)}
>
<option value="V">V</option>
<option value="mA">mA</option>
<option value="°C">°C</option>
<option value="bar">bar</option>
<option value="%">%</option>
</select>
<Listbox value={unit} onChange={setUnit}>
<div className="relative w-full">
<Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm text-gray-900 font-sans">
<span>{unit}</span>
<svg
className="w-5 h-5 text-gray-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<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 text-gray-900 font-sans">
{unitOptions.map((opt) => (
<Listbox.Option
key={opt}
value={opt}
className={({ selected, active }) =>
`px-4 py-1 cursor-pointer ${
selected
? "bg-littwin-blue text-white font-medium"
: active
? "bg-gray-200"
: "text-gray-900"
}`
}
>
{opt}
</Listbox.Option>
))}
</Listbox.Options>
</div>
</Listbox>
</div>
</div>
{/* Loggerintervall/Speicherintervall */}

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

@@ -241,7 +241,7 @@ const LoopChartActionBar: React.FC = () => {
selected
? "bg-littwin-blue text-white"
: active
? "bg-blue-100"
? "bg-gray-200"
: ""
}`
}
@@ -304,7 +304,7 @@ const LoopChartActionBar: React.FC = () => {
selected
? "bg-littwin-blue text-white"
: active
? "bg-blue-100"
? "bg-gray-200"
: ""
}`
}

53
components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx
View File

@@ -14,6 +14,7 @@ import {
closeConfirmModal,
} from "@/redux/slices/confirmModalSlice";
import { startFirmwareUpdateThunk } from "@/redux/thunks/startFirmwareUpdateThunk";
import { Listbox } from "@headlessui/react";
interface Props {
slot: number;
@@ -175,18 +176,52 @@ export default function KueEinstellung({
{/* Speicherintervall */}
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
<label className="">Speicherintervall:</label>
<select
className="w-full border rounded p-1"
<Listbox
value={formData.memoryInterval}
onChange={(e) => handleChange("memoryInterval", e.target.value)}
onChange={(value) => handleChange("memoryInterval", value)}
>
{memoryIntervalOptions.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
<div className="relative w-full">
<Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
<span>
{memoryIntervalOptions.find(
(opt) => String(opt.value) === formData.memoryInterval
)?.label ?? "Speicherintervall wählen"}
</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">
{memoryIntervalOptions.map((opt) => (
<Listbox.Option
key={opt.value}
value={String(opt.value)}
className={({ selected, active }) =>
`px-4 py-1 cursor-pointer ${
selected
? "bg-littwin-blue text-white font-medium"
: active
? "bg-gray-200"
: "text-gray-900"
}`
}
>
{opt.label}
</Listbox.Option>
))}
</Listbox.Options>
</div>
</Listbox>
</div>
{/* Isolationsmessung */}
<div className="mb-4 w-full">
<h3 className="font-bold mb-2">Isolationsmessung</h3>

2
components/main/system/DetailModal.tsx
View File

@@ -115,7 +115,7 @@ export const DetailModal = ({
selected
? "bg-littwin-blue text-white"
: active
? "bg-blue-100"
? "bg-gray-200"
: ""
}`
}