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

fix: Spaltenhöhe Titelzeile unterschiedlich in digitale Eingänge/Meldungseingänge , Digitale Ausgänge/Schaltausgänge und Analoge Eingänge/Messwerteingänge

Browse Source
This commit is contained in:
ISA
2025-05-07 14:12:56 +02:00
parent 40953b9feb
commit 300318cae7
4 changed files with 67 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
View File

@@ -33,81 +33,78 @@ export default function AnalogeEingaengeTable({
};
return (
<div className="w-full">
<h2 className="text-sm laptop:text-xs font-bold mb-3 flex items-center">
<div className="bg-white shadow-md border border-gray-200 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={waveformIcon}
className="text-littwin-blue mr-2 text-xl laptop:text-lg xl:text-xl 2xl:text-2xl border border-littwin-blue"
className="text-littwin-blue mr-2 text-2xl laptop:text-lg xl:text-xl 2xl:text-2xl border-2 border-littwin-blue rounded-md"
/>
Messwerteingänge
</h2>
<div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
<div className="overflow-x-auto">
<table className="w-full border-collapse border border-gray-300 text-sm md:text-base">
<thead>
<tr className="bg-gray-100 text-gray-700">
<th className="border p-1 text-left">Eingang</th>
<th className="border p-3 text-left">Messwert</th>
<th className="border p-3 text-left">Einheit</th>
<th className="border p-3 text-left">Bezeichnung</th>
<th className="border p-3 text-left">Aktion</th>
</tr>
</thead>
<tbody>
{Object.values(analogeEingaenge)
.filter((e) => e?.id !== null && e?.id !== undefined)
.map((e, index) => (
<tr
key={index}
className={`transition cursor-pointer ${
e.id === activeId ? "bg-blue-100" : "hover:bg-gray-100"
}`}
<div className="overflow-x-auto">
<table className="w-full text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse">
<thead className="bg-gray-100 border-b">
<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">Aktion</th>
</tr>
</thead>
<tbody>
{Object.values(analogeEingaenge)
.filter((e) => e?.id !== null && e?.id !== undefined)
.map((e, index) => (
<tr
key={index}
className={`transition cursor-pointer ${
e.id === activeId ? "bg-blue-100" : "hover:bg-gray-100"
}`}
>
<td
className="border p-2"
onClick={() => handleSelect(e.id!)}
>
<td
className="border p-3"
onClick={() => handleSelect(e.id!)}
>
<div className="flex items-center gap-1 ">
<Icon
icon={waveformIcon}
className="text-gray-600 text-base laptop:text-sm xl:text-sm 2xl:text-lg"
/>
{e.id ?? "-"}
</div>
</td>
<td
className="border p-3 text-right"
onClick={() => handleSelect(e.id!)}
>
{typeof e.value === "number" ? e.value.toFixed(2) : "-"}
</td>
<div className="flex items-center gap-1 ">
<Icon
icon={waveformIcon}
className="text-gray-600 text-base laptop:text-sm xl:text-sm 2xl:text-lg"
/>
{e.id ?? "-"}
</div>
</td>
<td
className="border p-2 text-right"
onClick={() => handleSelect(e.id!)}
>
{typeof e.value === "number" ? e.value.toFixed(2) : "-"}
</td>
<td className="border p-3">{e.unit || "-"}</td>
<td
className="border p-3"
onClick={() => handleSelect(e.id!)}
>
{e.name || "----"}
</td>
<td className="border p-2">{e.unit || "-"}</td>
<td
className="border p-2"
onClick={() => handleSelect(e.id!)}
>
{e.name || "----"}
</td>
<td className="border p-3 text-center">
<button
onClick={() => {
handleSelect(e.id!);
setSelectedInput(e);
setIsSettingsModalOpen(true);
}}
className="text-gray-400 hover:text-gray-500"
>
<Icon icon={settingsIcon} className="text-xl" />
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
<td className="border p-2 text-center">
<button
onClick={() => {
handleSelect(e.id!);
setSelectedInput(e);
setIsSettingsModalOpen(true);
}}
className="text-gray-400 hover:text-gray-500"
>
<Icon icon={settingsIcon} className="text-xl" />
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);

2
components/main/einausgaenge/DigitalInputs.tsx
View File

@@ -22,7 +22,7 @@ export default function DigitalInputs({ openInputModal, inputRange }: Props) {
return (
<div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full laptop:p-1 xl:p-1">
<h2 className="text-sm laptop:text-xs font-bold mb-3 flex items-center">
<h2 className="laptop:text-sm md:text-base 2xl:text-lg font-bold mb-3 flex items-center">
<Icon
icon={inputIcon}
className="text-littwin-blue mr-2 text-xl laptop:text-lg xl:text-xl 2xl:text-2xl"

2
components/main/einausgaenge/DigitalOutputsWidget.tsx
View File

@@ -36,7 +36,7 @@ export default function DigitalOutputsWidget({ openOutputModal }) {
return (
<div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full h-fit max-h-[400px] overflow-auto">
<h2 className="text-sm laptop:text-xs font-bold mb-3 flex items-center">
<h2 className="laptop:text-sm md:text-base 2xl:text-lg font-bold mb-3 flex items-center">
<Icon
icon={outputIcon}
className="text-littwin-blue mr-2 text-xl laptop:text-lg xl:text-xl 2xl:text-2xl"