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

feat: Einstellungen in dark und light mode

Browse Source
This commit is contained in:
ISA
2025-08-18 14:59:22 +02:00
parent c496939004
commit a955564ee3
12 changed files with 33 additions and 28 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.740 NEXT_PUBLIC_APP_VERSION=1.6.741
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.740 NEXT_PUBLIC_APP_VERSION=1.6.741
NEXT_PUBLIC_CPL_MODE=production NEXT_PUBLIC_CPL_MODE=production

5
CHANGELOG.md
View File

@@ -1,3 +1,8 @@
## [1.6.741] – 2025-08-18
- feat: System light and dark mode
---
## [1.6.740] – 2025-08-18 ## [1.6.740] – 2025-08-18
- feat: system dark and light mode - feat: system dark and light mode

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

@@ -10,7 +10,7 @@ import { useAdminAuth } from "./hooks/useAdminAuth";
const DatabaseSettings: React.FC = () => { const DatabaseSettings: React.FC = () => {
const { isAdminLoggedIn } = useAdminAuth(true); const { isAdminLoggedIn } = useAdminAuth(true);
return ( return (
<div className="p-6 bg-gray-100 max-w-5xl mr-auto rounded shadow"> <div className="p-6 bg-gray-100 dark:bg-gray-800 max-w-5xl mr-auto rounded shadow text-gray-900 dark:text-gray-100">
<h2 className="text-lg font-bold mb-6">Datenbank Einstellungen</h2> <h2 className="text-lg font-bold mb-6">Datenbank Einstellungen</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">

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 max-w-5xl mr-auto overflow-y-auto max-h-[calc(100vh-200px)] "> <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 ">
<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 rounded h-8 p-1 w-full text-xs" 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"
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 rounded h-8 p-1 w-full text-xs" 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"
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 rounded h-8 p-1 w-full text-xs" 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"
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 rounded h-8 p-1 w-full text-xs" 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"
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 rounded h-8 p-1 w-full text-xs" 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"
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 rounded h-8 p-1 w-full text-xs" 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"
value={gateway} value={gateway}
onChange={(e) => setGateway(e.target.value)} onChange={(e) => setGateway(e.target.value)}
/> />

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

@@ -27,7 +27,7 @@ const NTPSettings: React.FC = () => {
} }
return ( return (
<div className="p-6 md:p-3 bg-gray-100 max-w-5xl mr-auto"> <div className="p-6 md:p-3 bg-gray-100 dark:bg-gray-800 max-w-5xl mr-auto text-gray-900 dark:text-gray-100">
<h2 className="text-sm md:text-md font-bold mb-4">NTP Einstellungen</h2> <h2 className="text-sm md:text-md font-bold mb-4">NTP Einstellungen</h2>
<div className="grid md:grid-cols-2 gap-3"> <div className="grid md:grid-cols-2 gap-3">
@@ -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 rounded h-8 p-1 w-full text-xs" 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"
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 rounded h-8 p-1 w-full text-xs" 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"
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 rounded h-8 p-1 w-full text-xs" 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"
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 rounded h-8 p-1 w-full text-xs" 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"
value={ntpTimezone} value={ntpTimezone}
onChange={(e) => setNtpTimezone(e.target.value)} onChange={(e) => setNtpTimezone(e.target.value)}
/> />

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

@@ -21,7 +21,7 @@ export default function OPCUAInterfaceSettings() {
); );
return ( return (
<div className="p-6 md:p-3 bg-gray-100 max-w-5xl mr-auto "> <div className="p-6 md:p-3 bg-gray-100 dark:bg-gray-800 max-w-5xl mr-auto text-gray-900 dark:text-gray-100 ">
<div className="flex justify-between items-center mb-3"> <div className="flex justify-between items-center mb-3">
<Image <Image
src="/images/OPCUA.jpg" src="/images/OPCUA.jpg"
@@ -74,7 +74,7 @@ export default function OPCUAInterfaceSettings() {
{/* ✅ OPCUA Zustand */} {/* ✅ OPCUA Zustand */}
<div className="mb-3"> <div className="mb-3">
<label className="block font-medium text-sm mb-1">OPCUA Zustand</label> <label className="block font-medium text-sm mb-1">OPCUA Zustand</label>
<div className="p-1 border border-gray-300 rounded-md bg-white text-sm"> <div className="p-1 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-sm text-gray-900 dark:text-gray-100">
{opcuaSettings.opcUaZustand} {opcuaSettings.opcUaZustand}
</div> </div>
</div> </div>
@@ -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 rounded-l-md text-sm" 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"
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
@@ -106,7 +106,7 @@ export default function OPCUAInterfaceSettings() {
<label className="block font-medium text-sm mb-1"> <label className="block font-medium text-sm mb-1">
Aktuelle OPC-Clients Aktuelle OPC-Clients
</label> </label>
<div className="p-1 border border-gray-300 rounded-md bg-white text-sm"> <div className="p-1 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-sm text-gray-900 dark:text-gray-100">
{opcUaActiveClientCount} {opcUaActiveClientCount}
</div> </div>
</div> </div>

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

@@ -38,7 +38,7 @@ const UserManagementSettings: React.FC = () => {
}; };
return ( return (
<div className="p-6 md:p-3 bg-gray-100 max-w-5xl mr-auto"> <div className="p-6 md:p-3 bg-gray-100 dark:bg-gray-800 max-w-5xl mr-auto text-gray-900 dark:text-gray-100">
<h2 className="text-sm md:text-md font-bold mb-4">Login Admin-Bereich</h2> <h2 className="text-sm md:text-md font-bold mb-4">Login Admin-Bereich</h2>
{/* Admin Login/Logout */} {/* Admin Login/Logout */}
@@ -57,7 +57,7 @@ const UserManagementSettings: React.FC = () => {
<input <input
type="text" type="text"
placeholder="Benutzername" placeholder="Benutzername"
className="border border-gray-300 rounded h-8 p-1 w-full text-xs" 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"
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 rounded h-8 p-1 w-full text-xs" 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"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}

2
components/main/settingsPageComponents/modals/ProgressModal.tsx
View File

@@ -13,7 +13,7 @@ const ProgressModal: React.FC<Props> = ({ visible, progress, slot }) => {
return ( return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 "> <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 ">
<div className="bg-white p-6 rounded shadow-md text-center w-80"> <div className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-6 rounded shadow-md text-center w-80">
{/* {/*
<h2 className="text-lg font-bold mb-4"> <h2 className="text-lg font-bold mb-4">
Firmwareupdate Firmwareupdate

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.740", "version": "1.6.741",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cpl-v4", "name": "cpl-v4",
"version": "1.6.740", "version": "1.6.741",
"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.740", "version": "1.6.741",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",

4
pages/_app.tsx
View File

@@ -149,11 +149,11 @@ function AppContent({
}, [pathname, dispatch]); }, [pathname, dispatch]);
return ( return (
<div className="flex flex-col h-screen overflow-hidden"> <div className="flex flex-col h-screen overflow-hidden bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<Header /> <Header />
<div className="flex flex-grow w-full"> <div className="flex flex-grow w-full">
<Navigation className="w-56" /> <Navigation className="w-56" />
<main className="w-full flex-grow"> <main className="w-full flex-grow bg-white dark:bg-gray-900">
{sessionExpired && ( {sessionExpired && (
<div className="bg-red-500 text-white p-4 text-center"> <div className="bg-red-500 text-white p-4 text-center">
❌ Ihre Sitzung ist abgelaufen oder die Verbindung ist ❌ Ihre Sitzung ist abgelaufen oder die Verbindung ist