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

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.556
NEXT_PUBLIC_APP_VERSION=1.6.557
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.556
NEXT_PUBLIC_APP_VERSION=1.6.557
NEXT_PUBLIC_CPL_MODE=production

9
CHANGELOG.md
View File

@@ -1,3 +1,12 @@
## [1.6.557] – 2025-07-08
- refactor: Zeitraum-Dropdown in DetailModal auf Listbox mit Littwin-Design umgestellt
- <select> durch Headless UI Listbox ersetzt
- Optionen DIA0, DIA1, DIA2 mit deutschem Label dargestellt
- Einheitliches Styling mit littwin-blue wie in anderen Komponenten
---
## [1.6.556] – 2025-07-08
- refactor: LoopChartActionBar Dropdowns auf Listbox mit Littwin-Design umgestellt

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"
: ""
}`
}

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "cpl-v4",
"version": "1.6.556",
"version": "1.6.557",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "cpl-v4",
"version": "1.6.556",
"version": "1.6.557",
"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.556",
"version": "1.6.557",
"private": true,
"scripts": {
"dev": "next dev",

10
styles/globals.css
View File

@@ -60,3 +60,13 @@ body {
.custom-datepicker-popper {
z-index: 9999 !important; /* Maximale Priorität */
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.dropdown-text-fix {
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
transform: translateZ(0); /* For some Chromium bugs */
}