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

feat: TdrEinstellung optisch an KueEinstellung angepasst

Browse Source 
- Layout auf 2-Spalten-Gitterstruktur umgestellt (grid-cols-3, gap-2)
- Eingabefelder rechtsbündig mit Einheitenbeschriftung angepasst
- Button "Einstellungen senden" im Stil von KueEinstellung positioniert (flex justify-end, padding korrigiert)
- übermäßige margin entfernt (z. B. mt-32 → mt-4)
- einheitlicher Stil für Switch-Komponente (TDR-Funktion)
This commit is contained in:
ISA
2025-05-06 12:17:26 +02:00
parent 17ba04b5f4
commit a9552dbbc2
2 changed files with 41 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
components/main/kabelueberwachung/kue705FO/modals/TdrEinstellung.tsx
View File

@@ -160,42 +160,39 @@ export default function TdrEinstellung({ slot, onClose }: Props) {
};
return (
<div className="space-y-4 text-sm laptop:text-base">
<h2 className="text-base laptop:text-lg font-semibold">
TDR-Einstellung – Steckplatz {slot + 1}
</h2>
<div className="flex items-center gap-3">
<div className="p-4 text-sm">
{/* TDR-Funktion */}
<div className="mb-4 mt-4 grid grid-cols-3 items-center gap-2 w-full">
<span className="text-sm font-medium">TDR-Funktion:</span>
<button
type="button"
role="switch"
aria-checked={tdrActive}
onClick={handleTdrToggle}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
tdrActive ? "bg-littwin-blue" : "bg-gray-300"
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
tdrActive ? "translate-x-6" : "translate-x-1"
<div className="col-span-2 flex items-center gap-4">
<button
type="button"
role="switch"
aria-checked={tdrActive}
onClick={handleTdrToggle}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
tdrActive ? "bg-littwin-blue" : "bg-gray-300"
}`}
/>
</button>
<span className="text-sm text-gray-600">
{tdrActive ? "aktiviert" : "deaktiviert"}
</span>
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
tdrActive ? "translate-x-6" : "translate-x-1"
}`}
/>
</button>
<span className="text-sm text-gray-600">
{tdrActive ? "aktiviert" : "deaktiviert"}
</span>
</div>
</div>
<div className="mt-6 mb-4">
<h3 className="font-bold mb-2">TDR Einstellungen</h3>
<div className="mb-4 grid grid-cols-2 items-center gap-2 w-full">
<label className="font-semibold">TDR Dämpfung</label>
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
<label className="">TDR Dämpfung</label>
<div className="flex items-center gap-2">
<input
type="number"
className="w-24 border rounded p-1"
className="w-24 border rounded p-1 mr-2 text-right"
value={tdrData.daempfung}
onChange={(e) => {
const updated = { ...tdrData, daempfung: e.target.value };
@@ -206,13 +203,12 @@ export default function TdrEinstellung({ slot, onClose }: Props) {
<span>dB</span>
</div>
</div>
<div className="mb-4 grid grid-cols-2 items-center gap-2 w-full">
<label className="font-semibold">Geschwindigkeit</label>
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
<label className="">Geschwindigkeit</label>
<div className="flex items-center gap-2">
<input
type="number"
className="w-24 border rounded p-1"
className="w-24 border rounded p-1 mr-2 text-right"
value={tdrData.geschwindigkeit}
onChange={(e) => {
const updated = { ...tdrData, geschwindigkeit: e.target.value };
@@ -224,11 +220,11 @@ export default function TdrEinstellung({ slot, onClose }: Props) {
</div>
</div>
<div className="mb-4 grid grid-cols-2 items-center gap-2 w-full">
<label className="font-semibold">Trigger</label>
<div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
<label className="">Trigger</label>
<input
type="number"
className="w-full border rounded p-1"
className="w-24 border rounded p-1 mr-2 text-right"
value={tdrData.trigger}
onChange={(e) => {
const updated = { ...tdrData, trigger: e.target.value };
@@ -238,14 +234,15 @@ export default function TdrEinstellung({ slot, onClose }: Props) {
/>
</div>
</div>
<div className="qhd:pt-48 2xl:pt-16 xl:pt-8 laptop:pt-2 flex justify-end">
<button
onClick={handleSave}
className="bg-littwin-blue text-white px-4 py-2 rounded shadow hover:bg-blue-500"
>
Einstellungen senden
</button>
<div className="mt-36">
<div className="flex justify-end gap-2 p-3 rounded ">
<button
onClick={handleSave}
className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
>
Einstellungen senden
</button>
</div>
</div>
</div>
);