style: AnalogInputsSettingsModal dark mode
This commit is contained in:
ISA
@@ -108,125 +108,118 @@ export default function AnalogInputsSettingsModal() {
|
||||
|
||||
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 Messwerteingang {selectedInput.id}
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => dispatch(setIsSettingsModalOpen(false))}
|
||||
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>
|
||||
|
||||
{/* Bezeichnung */}
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
||||
<span className="font-normal">Bezeichnung:</span>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full border rounded px-3 py-1 mb-4"
|
||||
value={label}
|
||||
onChange={(e) => setLabel(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Offset */}
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
|
||||
<span className="font-normal">Offset:</span>
|
||||
<input
|
||||
type="number"
|
||||
step="0.001"
|
||||
className="border border-gray-300 rounded px-2 py-1 w-full text-right"
|
||||
value={offset}
|
||||
onChange={(e) => setOffset(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Faktor */}
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
|
||||
<span className="font-normal">Faktor:</span>
|
||||
<input
|
||||
type="number"
|
||||
step="0.001"
|
||||
className="border border-gray-300 rounded px-2 py-1 w-full text-right"
|
||||
value={factor}
|
||||
onChange={(e) => setFactor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Einheit */}
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
|
||||
<span className="font-normal">Einheit:</span>
|
||||
<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>
|
||||
|
||||
{/* Speicherintervall */}
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
||||
<span className="font-normal">Speicherintervall:</span>
|
||||
<div className="relative w-full">
|
||||
</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">
|
||||
<span className="font-normal text-fg-secondary">Bezeichnung:</span>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-base rounded px-2 py-1 w-full bg-[var(--color-surface-alt)] text-fg"
|
||||
value={label}
|
||||
onChange={(e) => setLabel(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
|
||||
<span className="font-normal text-fg-secondary">Offset:</span>
|
||||
<input
|
||||
type="number"
|
||||
className="border rounded px-2 py-1 pr-20 w-full text-right"
|
||||
value={loggerInterval}
|
||||
onChange={(e) => setLoggerInterval(e.target.value)}
|
||||
step="0.001"
|
||||
className="border border-base rounded px-2 py-1 w-full text-right bg-[var(--color-surface-alt)] text-fg"
|
||||
value={offset}
|
||||
onChange={(e) => setOffset(e.target.value)}
|
||||
/>
|
||||
<span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
|
||||
Minuten
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
|
||||
<span className="font-normal text-fg-secondary">Faktor:</span>
|
||||
<input
|
||||
type="number"
|
||||
step="0.001"
|
||||
className="border border-base rounded px-2 py-1 w-full text-right bg-[var(--color-surface-alt)] text-fg"
|
||||
value={factor}
|
||||
onChange={(e) => setFactor(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
|
||||
<span className="font-normal text-fg-secondary">Einheit:</span>
|
||||
<Listbox value={unit} onChange={setUnit}>
|
||||
<div className="relative w-full">
|
||||
<Listbox.Button className="w-full border border-base px-2 py-1 rounded text-left bg-[var(--color-surface-alt)] text-fg flex justify-between items-center text-sm font-sans">
|
||||
<span>{unit}</span>
|
||||
<svg
|
||||
className="w-5 h-5 text-muted"
|
||||
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 border-base rounded bg-[var(--color-surface-alt)] shadow max-h-60 overflow-auto text-sm text-fg 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-base-muted"
|
||||
: "text-fg"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{opt}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
||||
<span className="font-normal text-fg-secondary">
|
||||
Speicherintervall:
|
||||
</span>
|
||||
<div className="relative w-full">
|
||||
<input
|
||||
type="number"
|
||||
className="border border-base rounded px-2 py-1 pr-20 w-full text-right bg-[var(--color-surface-alt)] text-fg"
|
||||
value={loggerInterval}
|
||||
onChange={(e) => setLoggerInterval(e.target.value)}
|
||||
/>
|
||||
<span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-muted text-sm">
|
||||
Minuten
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Speichern-Button */}
|
||||
<div className="flex justify-end gap-2 mt-6">
|
||||
<footer className="px-6 py-4 border-t border-base flex justify-end">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isSaving}
|
||||
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"
|
||||
>
|
||||
{isSaving ? "Speichern..." : "Speichern"}
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user