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

style: DigitalInputsModal dark mode

Browse Source
This commit is contained in:
ISA
2025-09-10 11:20:22 +02:00
parent 4c45c3b9ca
commit 6f88a11771
6 changed files with 120 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
NEXT_PUBLIC_EXPORT_STATIC=false NEXT_PUBLIC_EXPORT_STATIC=false
NEXT_PUBLIC_USE_CGI=false NEXT_PUBLIC_USE_CGI=false
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.892 NEXT_PUBLIC_APP_VERSION=1.6.893
NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter) NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

2
.env.production
View File

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
NEXT_PUBLIC_EXPORT_STATIC=true NEXT_PUBLIC_EXPORT_STATIC=true
NEXT_PUBLIC_USE_CGI=true NEXT_PUBLIC_USE_CGI=true
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.892 NEXT_PUBLIC_APP_VERSION=1.6.893
NEXT_PUBLIC_CPL_MODE=production NEXT_PUBLIC_CPL_MODE=production

5
CHANGELOG.md
View File

@@ -1,3 +1,8 @@
## [1.6.893] – 2025-09-10
- chore: Modale mit bi bi-x-circle-fill Icon schließen
---
## [1.6.892] – 2025-09-10 ## [1.6.892] – 2025-09-10
- style: KVZ Modal optisch an die anderen angepasst - style: KVZ Modal optisch an die anderen angepasst

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

@@ -182,132 +182,133 @@ export default function InputModal({
return ( 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="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="bg-[var(--color-surface)] border border-base rounded-xl shadow-xl w-[32rem] max-w-full p-0 flex flex-col">
<div className="mb-4 border-b pb-2 flex justify-between items-center"> <header className="modal-header flex items-center justify-between px-6 py-4 border-b border-base">
<h2 className="text-base font-bold"> <h2 className="text-base font-bold text-fg">
Einstellungen Meldungseingang {selectedInput.id} Einstellungen Meldungseingang {selectedInput.id}
</h2> </h2>
<button <button
onClick={handleClose} onClick={handleClose}
className="text-2xl hover:text-gray-400" className="icon-btn text-2xl"
aria-label="Modal schließen" aria-label="Modal schließen"
type="button"
> >
<i className="bi bi-x-circle-fill"></i> <i className="bi bi-x-circle-fill" />
</button> </button>
</div> </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 className="grid grid-cols-2 gap-x-4 gap-y-3">
<div> <div>
<span className="font-normal">Bezeichnung:</span> <span className="font-normal text-fg-secondary">
</div> Bezeichnung:
<div> </span>
<input </div>
type="text" <div>
value={label} <input
onChange={(e) => setLabel(e.target.value)} type="text"
className="border border-gray-300 rounded px-2 py-1 w-full" value={label}
maxLength={32} onChange={(e) => setLabel(e.target.value)}
/> className="border border-base rounded px-2 py-1 w-full bg-[var(--color-surface-alt)] text-fg"
</div> maxLength={32}
<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"
}`}
/> />
</button> </div>
<span>{invertiert ? "Ein" : "Aus"}</span> <div>
</div> <span className="font-normal text-fg-secondary">
Invertierung:
<div> </span>
<span className="font-normal">Filterzeit:</span> </div>
</div> <div className="flex items-center gap-2">
<div className="relative"> <button
<input type="button"
type="number" role="switch"
min={0} aria-checked={invertiert}
max={2000} onClick={() => setInvertiert(!invertiert)}
value={timeFilter} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
onChange={(e) => { invertiert ? "bg-littwin-blue" : "bg-base-muted"
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"
}`} }`}
>
<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 className="absolute right-2 top-1/2 transform -translate-y-1/2 text-muted text-sm">
<span>{eingangOffline ? "Ein" : "Aus"}</span> 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> </div>
<footer className="px-6 py-4 border-t border-base flex justify-end">
<div className="mt-6 flex justify-end gap-2">
<button <button
onClick={handleSpeichern} 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 Speichern
</button> </button>
</div> </footer>
</div> </div>
</div> </div>
); );

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.892", "version": "1.6.893",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.892", "version": "1.6.893",
"dependencies": { "dependencies": {
"@emotion/react": "^11.13.0", "@emotion/react": "^11.13.0",
"@emotion/styled": "^11.13.0", "@emotion/styled": "^11.13.0",

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.892", "version": "1.6.893",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev -p 3000", "dev": "next dev -p 3000",