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

2
config/webVersion.ts
View File

@@ -6,5 +6,5 @@
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
*/ */
const webVersion = "1.6.367"; const webVersion = "1.6.368";
export default webVersion; export default webVersion;