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

feat: einstellungen dark und light mode

Browse Source
This commit is contained in:
ISA
2025-08-18 15:35:32 +02:00
parent a955564ee3
commit 6756bbf0f8
9 changed files with 24 additions and 19 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.741 NEXT_PUBLIC_APP_VERSION=1.6.742
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.741 NEXT_PUBLIC_APP_VERSION=1.6.742
NEXT_PUBLIC_CPL_MODE=production NEXT_PUBLIC_CPL_MODE=production

5
CHANGELOG.md
View File

@@ -1,3 +1,8 @@
## [1.6.742] – 2025-08-18
- feat: Einstellungen in dark und light mode
---
## [1.6.741] – 2025-08-18 ## [1.6.741] – 2025-08-18
- feat: System light and dark mode - feat: System light and dark mode

14
components/main/settingsPageComponents/GeneralSettings.tsx
View File

@@ -64,7 +64,7 @@ const GeneralSettings: React.FC = () => {
}, [systemSettings]); }, [systemSettings]);
return ( return (
<div className="p-6 md:p-3 bg-gray-100 dark:bg-gray-800 max-w-5xl mr-auto overflow-y-auto max-h-[calc(100vh-200px)] text-gray-900 dark:text-gray-100 "> <div className="p-6 md:p-3 bg-gray-100 dark:bg-gray-800 max-w-5xl mr-auto overflow-y-auto max-h-[calc(100vh-200px)] dark:text-gray-100 ">
<h2 className="text-sm md:text-md font-bold mb-2"> <h2 className="text-sm md:text-md font-bold mb-2">
Allgemeine Einstellungen Allgemeine Einstellungen
</h2> </h2>
@@ -74,7 +74,7 @@ const GeneralSettings: React.FC = () => {
<label className="block text-xs md:text-sm font-medium">Name:</label> <label className="block text-xs md:text-sm font-medium">Name:</label>
<input <input
type="text" type="text"
className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" className="border border-gray-300 dark:border-gray-600 focus:border-littwin-blue dark:focus:border-littwin-blue rounded h-8 p-1 w-full text-xs !bg-white !text-black placeholder-gray-400 transition-colors duration-150 focus:outline-none dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
/> />
@@ -87,7 +87,7 @@ const GeneralSettings: React.FC = () => {
</label> </label>
<input <input
type="text" type="text"
className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" className="border border-gray-300 dark:border-gray-600 focus:border-littwin-blue dark:focus:border-littwin-blue rounded h-8 p-1 w-full text-xs !bg-white !text-black placeholder-gray-400 transition-colors duration-150 focus:outline-none dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
value={mac1} value={mac1}
disabled disabled
/> />
@@ -101,7 +101,7 @@ const GeneralSettings: React.FC = () => {
<div className="flex flex-row gap-2"> <div className="flex flex-row gap-2">
<input <input
type="text" type="text"
className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" className="border border-gray-300 dark:border-gray-600 focus:border-littwin-blue dark:focus:border-littwin-blue rounded h-8 p-1 w-full text-xs !bg-white !text-black placeholder-gray-400 transition-colors duration-150 focus:outline-none dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
value={systemUhr.replace(/\s*Uhr$/, "")} value={systemUhr.replace(/\s*Uhr$/, "")}
disabled disabled
/> />
@@ -120,7 +120,7 @@ const GeneralSettings: React.FC = () => {
<label className="block text-xs md:text-sm font-medium">IP:</label> <label className="block text-xs md:text-sm font-medium">IP:</label>
<input <input
type="text" type="text"
className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" className="border border-gray-300 dark:border-gray-600 focus:border-littwin-blue dark:focus:border-littwin-blue rounded h-8 p-1 w-full text-xs !bg-white !text-black placeholder-gray-400 transition-colors duration-150 focus:outline-none dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
value={ip} value={ip}
onChange={(e) => setIp(e.target.value)} onChange={(e) => setIp(e.target.value)}
/> />
@@ -131,7 +131,7 @@ const GeneralSettings: React.FC = () => {
</label> </label>
<input <input
type="text" type="text"
className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" className="border border-gray-300 dark:border-gray-600 focus:border-littwin-blue dark:focus:border-littwin-blue rounded h-8 p-1 w-full text-xs !bg-white !text-black placeholder-gray-400 transition-colors duration-150 focus:outline-none dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
value={subnet} value={subnet}
onChange={(e) => setSubnet(e.target.value)} onChange={(e) => setSubnet(e.target.value)}
/> />
@@ -142,7 +142,7 @@ const GeneralSettings: React.FC = () => {
</label> </label>
<input <input
type="text" type="text"
className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" className="border border-gray-300 dark:border-gray-600 focus:border-littwin-blue dark:focus:border-littwin-blue rounded h-8 p-1 w-full text-xs !bg-white !text-black placeholder-gray-400 transition-colors duration-150 focus:outline-none dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
value={gateway} value={gateway}
onChange={(e) => setGateway(e.target.value)} onChange={(e) => setGateway(e.target.value)}
/> />

8
components/main/settingsPageComponents/NTPSettings.tsx
View File

@@ -35,7 +35,7 @@ const NTPSettings: React.FC = () => {
<label className="block text-xs font-medium">NTP Server 1</label> <label className="block text-xs font-medium">NTP Server 1</label>
<input <input
type="text" type="text"
className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs !bg-white !text-black placeholder-gray-400 transition-colors duration-150 focus:outline-none dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
value={ntp1} value={ntp1}
onChange={(e) => setNtp1(e.target.value)} onChange={(e) => setNtp1(e.target.value)}
/> />
@@ -45,7 +45,7 @@ const NTPSettings: React.FC = () => {
<label className="block text-xs font-medium">NTP Server 2</label> <label className="block text-xs font-medium">NTP Server 2</label>
<input <input
type="text" type="text"
className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs !bg-white !text-black placeholder-gray-400 transition-colors duration-150 focus:outline-none dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
value={ntp2} value={ntp2}
onChange={(e) => setNtp2(e.target.value)} onChange={(e) => setNtp2(e.target.value)}
/> />
@@ -55,7 +55,7 @@ const NTPSettings: React.FC = () => {
<label className="block text-xs font-medium">NTP Server 3</label> <label className="block text-xs font-medium">NTP Server 3</label>
<input <input
type="text" type="text"
className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs !bg-white !text-black placeholder-gray-400 transition-colors duration-150 focus:outline-none dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
value={ntp3} value={ntp3}
onChange={(e) => setNtp3(e.target.value)} onChange={(e) => setNtp3(e.target.value)}
/> />
@@ -65,7 +65,7 @@ const NTPSettings: React.FC = () => {
<label className="block text-xs font-medium">Zeitzone</label> <label className="block text-xs font-medium">Zeitzone</label>
<input <input
type="text" type="text"
className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs !bg-white !text-black placeholder-gray-400 transition-colors duration-150 focus:outline-none dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
value={ntpTimezone} value={ntpTimezone}
onChange={(e) => setNtpTimezone(e.target.value)} onChange={(e) => setNtpTimezone(e.target.value)}
/> />

2
components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx
View File

@@ -85,7 +85,7 @@ export default function OPCUAInterfaceSettings() {
<div className="flex"> <div className="flex">
<input <input
type="text" type="text"
className="flex-grow p-1 border border-gray-300 dark:border-gray-700 rounded-l-md text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" className="flex-grow p-1 border border-gray-300 dark:border-gray-700 rounded-l-md text-sm !bg-white !text-black placeholder-gray-400 transition-colors duration-150 focus:outline-none dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
value={nodesetName} value={nodesetName}
onChange={(e) => setNodesetName(e.target.value)} onChange={(e) => setNodesetName(e.target.value)}
disabled={opcuaSettings.isEnabled} // Disable input when server is enabled disabled={opcuaSettings.isEnabled} // Disable input when server is enabled

4
components/main/settingsPageComponents/UserManagementSettings.tsx
View File

@@ -57,7 +57,7 @@ const UserManagementSettings: React.FC = () => {
<input <input
type="text" type="text"
placeholder="Benutzername" placeholder="Benutzername"
className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs !bg-white !text-black placeholder-gray-400 transition-colors duration-150 focus:outline-none dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
@@ -65,7 +65,7 @@ const UserManagementSettings: React.FC = () => {
<input <input
type="password" type="password"
placeholder="Passwort" placeholder="Passwort"
className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" className="border border-gray-300 dark:border-gray-700 rounded h-8 p-1 w-full text-xs !bg-white !text-black placeholder-gray-400 transition-colors duration-150 focus:outline-none dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.741", "version": "1.6.742",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.741", "version": "1.6.742",
"dependencies": { "dependencies": {
"@fontsource/roboto": "^5.1.0", "@fontsource/roboto": "^5.1.0",
"@headlessui/react": "^2.2.4", "@headlessui/react": "^2.2.4",

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.741", "version": "1.6.742",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",