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

style: Digitale Ausgänge Switch

Browse Source
This commit is contained in:
ISA
2025-09-10 11:45:36 +02:00
parent 9192111b12
commit f25063074d
7 changed files with 47 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/main/digitalInputs/digitalInputsModal.tsx
View File

@@ -184,7 +184,9 @@ export default function InputModal({
<div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
<div className="bg-[var(--color-surface)] border border-base rounded-xl shadow-xl w-[32rem] max-w-full p-0 flex flex-col">
<header className="modal-header flex items-center justify-between px-6 py-4 border-b border-base">
<h2 className="text-base font-bold text-fg">Einstellungen Meldungseingang {selectedInput.id}</h2>
<h2 className="text-base font-bold text-fg">
Einstellungen Meldungseingang {selectedInput.id}
</h2>
<button
onClick={handleClose}
className="icon-btn text-2xl"
@@ -197,7 +199,9 @@ export default function InputModal({
<div className="modal-body-scroll px-6 py-5 flex-1 text-fg">
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
<div>
<span className="font-normal text-fg-secondary">Bezeichnung:</span>
<span className="font-normal text-fg-secondary">
Bezeichnung:
</span>
</div>
<div>
<input
@@ -209,7 +213,9 @@ export default function InputModal({
/>
</div>
<div>
<span className="font-normal text-fg-secondary">Invertierung:</span>
<span className="font-normal text-fg-secondary">
Invertierung:
</span>
</div>
<div className="flex items-center gap-2">
<button
@@ -217,10 +223,14 @@ export default function InputModal({
role="switch"
aria-checked={invertiert}
onClick={() => setInvertiert(!invertiert)}
className={`relative inline-flex h-6 w-11 items-center rounded-full border border-base transition-colors duration-200 ${invertiert ? "bg-littwin-blue" : "bg-base-muted"}`}
className={`relative inline-flex h-6 w-11 items-center rounded-full border border-base transition-colors duration-200 ${
invertiert ? "bg-littwin-blue" : "bg-base-muted"
}`}
>
<span
className={`absolute left-1 top-1/2 -translate-y-1/2 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ${invertiert ? "translate-x-5" : "translate-x-0"}`}
className={`absolute left-1 top-1/2 -translate-y-1/2 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ${
invertiert ? "translate-x-5" : "translate-x-0"
}`}
/>
</button>
<span className="text-fg">{invertiert ? "Ein" : "Aus"}</span>
@@ -243,7 +253,9 @@ export default function InputModal({
className="border border-base rounded px-2 py-1 pr-10 w-full text-right bg-[var(--color-surface-alt)] text-fg"
title="Maximal 2000 ms erlaubt"
/>
<span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-muted text-sm">ms</span>
<span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-muted text-sm">
ms
</span>
</div>
<div>
<span className="font-normal text-fg-secondary">Gewichtung:</span>
@@ -265,7 +277,9 @@ export default function InputModal({
/>
</div>
<div className="relative group inline-block">
<span className="font-normal text-fg-secondary">Out of Service:</span>
<span className="font-normal text-fg-secondary">
Out of Service:
</span>
</div>
<div className="flex items-center gap-2">
<button
@@ -273,10 +287,14 @@ export default function InputModal({
role="switch"
aria-checked={!!eingangOffline}
onClick={() => setEingangOffline(eingangOffline ? 0 : 1)}
className={`relative inline-flex h-6 w-11 items-center rounded-full border border-base transition-colors duration-200 ${eingangOffline ? "bg-littwin-blue" : "bg-base-muted"}`}
className={`relative inline-flex h-6 w-11 items-center rounded-full border border-base transition-colors duration-200 ${
eingangOffline ? "bg-littwin-blue" : "bg-base-muted"
}`}
>
<span
className={`absolute left-1 top-1/2 -translate-y-1/2 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ${eingangOffline ? "translate-x-5" : "translate-x-0"}`}
className={`absolute left-1 top-1/2 -translate-y-1/2 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ${
eingangOffline ? "translate-x-5" : "translate-x-0"
}`}
/>
</button>
<span className="text-fg">{eingangOffline ? "Ein" : "Aus"}</span>

18
components/main/digitalOutputs/DigitalOutputsWidget.tsx
View File

@@ -108,15 +108,17 @@ export default function DigitalOutputsWidget({
{output.label}
</td>
<td className="px-1 py-1 bg-[var(--color-surface)] text-[var(--color-fg)]">
<Icon
icon={switchIcon}
className={`cursor-pointer text-base transition ${
output.status
? "text-accent"
: "text-[var(--color-muted)] scale-x-[-1]"
} hover:text-accent`}
<button
type="button"
role="switch"
aria-checked={output.status}
onClick={() => handleToggle(output.id)}
/>
className={`relative inline-flex h-4 w-7 items-center rounded-full border border-base transition-colors duration-200 ${output.status ? "bg-littwin-blue" : "bg-base-muted"}`}
>
<span
className={`absolute left-0.5 top-1/2 -translate-y-1/2 h-3 w-3 rounded-full bg-white shadow transition-transform duration-200 ${output.status ? "translate-x-3.5" : "translate-x-0"}`}
/>
</button>
</td>
<td className="px-1 py-1 bg-[var(--color-surface)] text-[var(--color-fg)]">
<Icon