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

feat: Messwerteingänge light und dark mode

Browse Source
This commit is contained in:
ISA
2025-08-18 16:09:14 +02:00
parent 7e41e5131f
commit 6036c48332
6 changed files with 41 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/main/analogInputs/AnalogInputsTable.tsx
View File

@@ -37,7 +37,7 @@ export default function AnalogInputsTable({ loading }: { loading: boolean }) {
return (
<div
className={`bg-white shadow-md border border-gray-200 p-3 rounded-lg laptop:p-1 xl:p-1 ${
className={`bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 shadow-md border border-gray-200 dark:border-gray-700 p-3 rounded-lg laptop:p-1 xl:p-1 ${
loading ? "cursor-wait" : ""
}`}
>
@@ -50,18 +50,30 @@ export default function AnalogInputsTable({ loading }: { loading: boolean }) {
</h2>
<div className="overflow-x-auto">
<table
className={` text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse ${
className={`text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse w-full ${
loading ? "cursor-wait" : ""
}`}
>
<thead className="bg-gray-100 border-b items-center ">
<thead className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-b items-center">
<tr>
<th className="border p-1 text-left">Eingang</th>
<th className="border p-1 text-left">Messwert</th>
<th className="border p-1 text-left">Einheit</th>
<th className="border p-1 text-left">Bezeichnung</th>
<th className="border p-1 text-left">Einstellungen</th>
<th className="border p-1 text-left">Messkurve</th>
<th className="border p-1 text-left bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Eingang
</th>
<th className="border p-1 text-left bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Messwert
</th>
<th className="border p-1 text-left bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Einheit
</th>
<th className="border p-1 text-left bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Bezeichnung
</th>
<th className="border p-1 text-left bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Einstellungen
</th>
<th className="border p-1 text-left bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Messkurve
</th>
</tr>
</thead>
<tbody>
@@ -80,12 +92,12 @@ export default function AnalogInputsTable({ loading }: { loading: boolean }) {
loading
? "cursor-wait"
: analogInput.id === activeId
? "bg-blue-100"
: "hover:bg-gray-100"
? "bg-blue-100 dark:bg-gray-700 dark:text-white"
: "hover:bg-gray-100 dark:hover:bg-gray-800"
}`}
>
<td
className="border p-2"
className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100"
onClick={() => handleSelect(analogInput.id!, analogInput)}
>
<div className="flex items-center gap-1 ">
@@ -97,7 +109,7 @@ export default function AnalogInputsTable({ loading }: { loading: boolean }) {
</div>
</td>
<td
className="border p-2 text-right"
className="border p-2 text-right bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100"
onClick={() => handleSelect(analogInput.id!, analogInput)}
>
{typeof analogInput.value === "number"
@@ -106,36 +118,36 @@ export default function AnalogInputsTable({ loading }: { loading: boolean }) {
</td>
<td
className="border p-2"
className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100"
onClick={() => handleSelect(analogInput.id!, analogInput)}
>
{analogInput.unit || "-"}
</td>
<td
className="border p-2"
className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100"
onClick={() => handleSelect(analogInput.id!, analogInput)}
>
{analogInput.label || "----"}
</td>
<td className="border p-2 text-center">
<td className="border p-2 text-center bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<button
onClick={() => {
handleSelect(analogInput.id!, analogInput);
dispatch(setIsSettingsModalOpen(true));
}}
className="text-gray-400 hover:text-gray-500"
className="text-gray-400 hover:text-gray-500 dark:text-gray-300 dark:hover:text-white"
>
<Icon icon={settingsIcon} className="text-xl" />
</button>
</td>
<td className="border p-2 text-center">
<td className="border p-2 text-center bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<button
onClick={() => {
handleSelect(analogInput.id!, analogInput);
dispatch(setIsChartModalOpen(true));
}}
className="text-gray-500 hover:text-gray-700"
className="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white"
title="Messkurve anzeigen"
aria-label="Messkurve anzeigen"
>