style: DigitalInputsModal dark mode
This commit is contained in:
ISA
@@ -182,132 +182,133 @@ export default function InputModal({
|
||||
|
||||
return (
|
||||
<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-white rounded-lg shadow-lg p-6 w-1/2 max-w-lg">
|
||||
<div className="mb-4 border-b pb-2 flex justify-between items-center">
|
||||
<h2 className="text-base font-bold">
|
||||
<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>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="text-2xl hover:text-gray-400"
|
||||
className="icon-btn text-2xl"
|
||||
aria-label="Modal schließen"
|
||||
type="button"
|
||||
>
|
||||
<i className="bi bi-x-circle-fill"></i>
|
||||
<i className="bi bi-x-circle-fill" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
||||
<div>
|
||||
<span className="font-normal">Bezeichnung:</span>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={label}
|
||||
onChange={(e) => setLabel(e.target.value)}
|
||||
className="border border-gray-300 rounded px-2 py-1 w-full"
|
||||
maxLength={32}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span className="font-normal">Invertierung:</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={invertiert}
|
||||
onClick={() => setInvertiert(!invertiert)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
|
||||
invertiert ? "bg-littwin-blue" : "bg-gray-300"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
|
||||
invertiert ? "translate-x-6" : "translate-x-1"
|
||||
}`}
|
||||
</header>
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={label}
|
||||
onChange={(e) => setLabel(e.target.value)}
|
||||
className="border border-base rounded px-2 py-1 w-full bg-[var(--color-surface-alt)] text-fg"
|
||||
maxLength={32}
|
||||
/>
|
||||
</button>
|
||||
<span>{invertiert ? "Ein" : "Aus"}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span className="font-normal">Filterzeit:</span>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
max={2000}
|
||||
value={timeFilter}
|
||||
onChange={(e) => {
|
||||
const val = Number(e.target.value);
|
||||
if (val <= 2000) {
|
||||
setTimeFilter(val);
|
||||
}
|
||||
}}
|
||||
className="border border-gray-300 rounded px-2 py-1 pr-10 w-full text-right"
|
||||
title="Maximal 2000 ms erlaubt"
|
||||
/>
|
||||
|
||||
<span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
|
||||
ms
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span className="font-normal">Gewichtung:</span>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
max={1000}
|
||||
value={weighting}
|
||||
onChange={(e) => {
|
||||
const val = Number(e.target.value);
|
||||
if (val <= 1000) {
|
||||
setWeighting(val);
|
||||
}
|
||||
}}
|
||||
className="border border-gray-300 rounded px-2 py-1 w-full text-right"
|
||||
title="Maximal 1000 erlaubt"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative group inline-block">
|
||||
<span className="font-normal">Out of Service:</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={!!eingangOffline}
|
||||
onClick={() => setEingangOffline(eingangOffline ? 0 : 1)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
|
||||
eingangOffline ? "bg-littwin-blue" : "bg-gray-300"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
|
||||
eingangOffline ? "translate-x-6" : "translate-x-1"
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-normal text-fg-secondary">
|
||||
Invertierung:
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={invertiert}
|
||||
onClick={() => setInvertiert(!invertiert)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
|
||||
invertiert ? "bg-littwin-blue" : "bg-base-muted"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
|
||||
invertiert ? "translate-x-6" : "translate-x-1"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<span className="text-fg">{invertiert ? "Ein" : "Aus"}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-normal text-fg-secondary">Filterzeit:</span>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
max={2000}
|
||||
value={timeFilter}
|
||||
onChange={(e) => {
|
||||
const val = Number(e.target.value);
|
||||
if (val <= 2000) {
|
||||
setTimeFilter(val);
|
||||
}
|
||||
}}
|
||||
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"
|
||||
/>
|
||||
</button>
|
||||
<span>{eingangOffline ? "Ein" : "Aus"}</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>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
max={1000}
|
||||
value={weighting}
|
||||
onChange={(e) => {
|
||||
const val = Number(e.target.value);
|
||||
if (val <= 1000) {
|
||||
setWeighting(val);
|
||||
}
|
||||
}}
|
||||
className="border border-base rounded px-2 py-1 w-full text-right bg-[var(--color-surface-alt)] text-fg"
|
||||
title="Maximal 1000 erlaubt"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative group inline-block">
|
||||
<span className="font-normal text-fg-secondary">
|
||||
Out of Service:
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={!!eingangOffline}
|
||||
onClick={() => setEingangOffline(eingangOffline ? 0 : 1)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
|
||||
eingangOffline ? "bg-littwin-blue" : "bg-base-muted"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
|
||||
eingangOffline ? "translate-x-6" : "translate-x-1"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<span className="text-fg">{eingangOffline ? "Ein" : "Aus"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-end gap-2">
|
||||
<footer className="px-6 py-4 border-t border-base flex justify-end">
|
||||
<button
|
||||
onClick={handleSpeichern}
|
||||
className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
|
||||
className="btn-primary px-4 py-2 rounded flex items-center"
|
||||
>
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user