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

WIP: dark mode Modale

Browse Source
This commit is contained in:
ISA
2025-09-08 15:33:26 +02:00
parent fefff9419d
commit af21b180f1
23 changed files with 209 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/main/analogInputs/AnalogInputsView.tsx
View File

@@ -36,7 +36,7 @@ function AnalogInputsView() {
}`}
>
<div className="grid grid-cols-1 gap-4 justify-items-start">
<div className="rounded-lg p-4 max-w-3xl text-[var(--color-fg)] bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-[var(--color-border)] shadow-sm">
<div className="rounded-lg p-4 max-w-3xl text-[var(--color-fg)] bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-[var(--color-border)] shadow-sm">
<h2 className="text-xl font-semibold mb-4 text-[var(--color-fg)] tracking-wide">
Messwerteingänge
</h2>

2
components/main/dashboard/DashboardView.tsx
View File

@@ -25,7 +25,7 @@ const DashboardView: React.FC = () => {
}, [dispatch]);
//-------------------------------------
return (
<div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0 bg-[var(--color-background)] text-[var(--color-fg)]">
<div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0 bg-[var(--color-background)] text-[var(--color-fg)]">
{/* Header */}
<div className="flex justify-between items-center w-full lg:w-2/3">
<div className="flex justify-between gap-1">

14
components/main/dashboard/NetworkInfo.tsx
View File

@@ -38,7 +38,7 @@ const NetworkInfo: React.FC = () => {
return (
<div className="w-full flex-direction: row flex">
<div className=" flex-grow flex justify-between items-center mt-1 p-2 rounded-lg shadow-sm bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-[var(--color-border)] laptop:m-0 laptop:scale-y-75 2xl:scale-y-75">
<div className=" flex-grow flex justify-between items-center mt-1 p-2 rounded-lg shadow-sm bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-[var(--color-border)] laptop:m-0 laptop:scale-y-75 2xl:scale-y-75">
<div className="flex items-center space-x-4">
<Image
src="/images/IP-icon.svg"
@@ -49,12 +49,8 @@ const NetworkInfo: React.FC = () => {
priority
/>
<div>
<p className="text-xs text-[var(--color-fg-muted)]">
IP-Adresse
</p>
<p className="text-sm font-medium text-[var(--color-fg)]">
{ip}
</p>
<p className="text-xs text-[var(--color-fg-muted)]">IP-Adresse</p>
<p className="text-sm font-medium text-[var(--color-fg)]">{ip}</p>
</div>
</div>
@@ -68,9 +64,7 @@ const NetworkInfo: React.FC = () => {
priority
/>
<div>
<p className="text-xs text-[var(--color-fg-muted)]">
Subnet-Maske
</p>
<p className="text-xs text-[var(--color-fg-muted)]">Subnet-Maske</p>
<p className="text-sm font-medium text-[var(--color-fg)]">
{subnet}
</p>

4
components/main/dashboard/VersionInfo.tsx
View File

@@ -23,14 +23,14 @@ const VersionInfo: React.FC<VersionInfoProps> = ({ className = "" }) => {
<li className="flex items-start gap-2">
<Icon icon="bx:code-block" className="text-xl text-accent" />
<p className="text-sm text-fg-muted">
Applikationsversion: {" "}
Applikationsversion:{" "}
<span className="text-[var(--color-fg)]">{appVersion}</span>
</p>
</li>
<li className="flex items-start gap-2">
<Icon icon="mdi:web" className="text-xl text-accent" />
<p className="text-sm text-fg-muted">
Webversion: {" "}
Webversion:{" "}
<span className="text-[var(--color-fg)]">{webVersion}</span>
</p>
</li>

2
components/main/digitalInputs/DigitalInputsWidget.tsx
View File

@@ -30,7 +30,7 @@ export default function DigitalInputsWidget({
//console.log("DigitalInputs", inputs);
return (
<div className="text-[var(--color-fg)] bg-[var(--color-surface)] dark:bg-[var(--color-surface)] shadow-sm border border-[var(--color-border)] p-3 rounded-lg w-full laptop:p-1 xl:p-1">
<div className="text-[var(--color-fg)] bg-[var(--color-surface)] dark:bg-[var(--color-surface)] shadow-sm border border-[var(--color-border)] p-3 rounded-lg w-full laptop:p-1 xl:p-1">
<h2 className="laptop:text-sm md:text-base 2xl:text-lg font-bold mb-3 flex items-center">
<Icon
icon={inputIcon}

32
components/main/reports/MeldungenTabelle.tsx
View File

@@ -17,11 +17,21 @@ export default function MeldungenTabelle({
<table className="min-w-full border border-base table-surface text-fg">
<thead className="text-left sticky top-0 z-10 bg-surface-alt/90 backdrop-blur supports-[backdrop-filter]:bg-surface-alt/70">
<tr>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Prio</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Zeitstempel</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Quelle</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Meldung</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">Status</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">
Prio
</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">
Zeitstempel
</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">
Quelle
</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">
Meldung
</th>
<th className="p-2 border border-base bg-surface-alt text-fg font-medium">
Status
</th>
</tr>
</thead>
<tbody>
@@ -46,9 +56,15 @@ export default function MeldungenTabelle({
second: "2-digit",
})}
</td>
<td className="border border-base p-2 bg-surface text-fg">{msg.i}</td>
<td className="border border-base p-2 bg-surface text-fg">{msg.m}</td>
<td className="border border-base p-2 bg-surface text-fg">{msg.v}</td>
<td className="border border-base p-2 bg-surface text-fg">
{msg.i}
</td>
<td className="border border-base p-2 bg-surface text-fg">
{msg.m}
</td>
<td className="border border-base p-2 bg-surface text-fg">
{msg.v}
</td>
</tr>
))}
</tbody>

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

@@ -10,7 +10,7 @@ import { useAdminAuth } from "./hooks/useAdminAuth";
const DatabaseSettings: React.FC = () => {
const { isAdminLoggedIn } = useAdminAuth(true);
return (
<div className="p-6 bg-[var(--color-surface-alt)] max-w-5xl mr-auto rounded shadow text-[var(--color-fg)]">
<div className="p-6 bg-[var(--color-surface-alt)] max-w-5xl mr-auto rounded shadow text-[var(--color-fg)]">
<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">

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

@@ -63,10 +63,11 @@ const GeneralSettings: React.FC = () => {
setMac1(systemSettings.mac1 || "");
}, [systemSettings]);
const inputCls = "border border-base focus:border-accent rounded h-8 p-1 w-full text-xs bg-[var(--color-surface)] text-[var(--color-fg)] placeholder-[var(--color-muted)] transition-colors duration-150 focus:outline-none";
const inputCls =
"border border-base focus:border-accent rounded h-8 p-1 w-full text-xs bg-[var(--color-surface)] text-[var(--color-fg)] placeholder-[var(--color-muted)] transition-colors duration-150 focus:outline-none";
return (
<div className="p-6 md:p-3 bg-[var(--color-surface-alt)] max-w-5xl mr-auto overflow-y-auto max-h-[calc(100vh-200px)] text-[var(--color-fg)]">
<div className="p-6 md:p-3 bg-[var(--color-surface-alt)] max-w-5xl mr-auto overflow-y-auto max-h-[calc(100vh-200px)] text-[var(--color-fg)]">
<h2 className="text-sm md:text-md font-bold mb-2">
Allgemeine Einstellungen
</h2>
@@ -86,12 +87,7 @@ const GeneralSettings: React.FC = () => {
<label className="block text-xs md:text-sm font-medium">
MAC Adresse 1:
</label>
<input
type="text"
className={inputCls}
value={mac1}
disabled
/>
<input type="text" className={inputCls} value={mac1} disabled />
</div>
{/* Systemzeit */}
<div className="col-span-2">

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

@@ -27,7 +27,7 @@ const NTPSettings: React.FC = () => {
}
return (
<div className="p-6 md:p-3 bg-[var(--color-surface-alt)] max-w-5xl mr-auto text-[var(--color-fg)]">
<div className="p-6 md:p-3 bg-[var(--color-surface-alt)] max-w-5xl mr-auto text-[var(--color-fg)]">
<h2 className="text-sm md:text-md font-bold mb-4">NTP Einstellungen</h2>
<div className="grid md:grid-cols-2 gap-3">

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

@@ -76,7 +76,7 @@ export default function OPCUAInterfaceSettings() {
{/* ✅ OPCUA Zustand */}
<div className="mb-3">
<label className="block font-medium text-sm mb-1">OPCUA Zustand</label>
<div className="p-1 border border-base rounded-md bg-[var(--color-surface)] text-sm text-[var(--color-fg)]">
<div className="p-1 border border-base rounded-md bg-[var(--color-surface)] text-sm text-[var(--color-fg)]">
{opcuaSettings.opcUaZustand}
</div>
</div>
@@ -108,7 +108,7 @@ export default function OPCUAInterfaceSettings() {
<label className="block font-medium text-sm mb-1">
Aktuelle OPC-Clients
</label>
<div className="p-1 border border-base rounded-md bg-[var(--color-surface)] text-sm text-[var(--color-fg)]">
<div className="p-1 border border-base rounded-md bg-[var(--color-surface)] text-sm text-[var(--color-fg)]">
{opcUaActiveClientCount}
</div>
</div>

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

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

2
components/main/system/DetailModal.tsx
View File

@@ -481,7 +481,7 @@ export const DetailModal = ({
isLoading={isLoading}
/>
<div className="h-[85%] rounded shadow border p-2 bg-[var(--color-surface)] border-[var(--color-border)]">
<div className="h-[85%] rounded shadow border p-2 bg-[var(--color-surface)] border-[var(--color-border)]">
<Line ref={chartRef} data={chartData} options={chartOptions} />
</div>
</div>

4
components/main/system/SystemView.tsx
View File

@@ -71,8 +71,8 @@ const SystemPage = () => {
};
return (
<div className="p-4 bg-[var(--color-background)] text-[var(--color-fg)]">
<h1 className="text-xl font-bold mb-4 tracking-wide">
<div className="p-4 bg-[var(--color-background)] text-[var(--color-fg)]">
<h1 className="text-xl font-bold mb-4 tracking-wide">
System Spannungen & Temperaturen
</h1>