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

feat: Optimierung der Tabelle für analoge Eingänge

Browse Source 
- Hinzugefügt: Flexibles Layout der Tabelle mit `w-full` und `h-full`, um sich an den verfügbaren Platz anzupassen.
- Verbesserungen: Overflow-Handling für den Tabelleninhalt mit `overflow-auto` und flexibler Größenanpassung durch `flex-grow`.
- Refaktorierung: Layout- und Styling-Optimierungen für eine bessere Darstellung und Benutzerfreundlichkeit.
This commit is contained in:
ISA
2025-01-24 08:23:35 +01:00
parent c284b29372
commit 090ddbc385
7 changed files with 398 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
pages/analogeEingaenge.js
View File

@@ -1,37 +1,10 @@
"use client";
"use client"; // pages/analogeEingaenge.js
import React, { useState } from "react";
import AnalogeEingaengeComponent from "../components/modules/AnalogeEingaengeComponent";
function AnalogeEingaenge() {
const [activeConfig, setActiveConfig] = useState(null);
// Mock-Daten für die analogen Eingänge
const inputs = [
{ id: 1, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
{
id: 2,
value: 22.91,
name: "Feuchtigkeit",
uW: true,
uG: true,
oW: true,
oG: false,
},
{ id: 3, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
{ id: 4, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
{ id: 5, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
{
id: 6,
value: 21.0,
name: "Temperatur",
uW: true,
uG: true,
oW: false,
oG: false,
},
{ id: 7, value: 0, name: "----", uW: true, uG: true, oW: true, oG: true },
{ id: 8, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
];
// Mock-Daten für XIO-PM 1
const xioPmInputs = [
{
@@ -112,69 +85,8 @@ function AnalogeEingaenge() {
<div className="flex flex-col h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-6vh)] xl:h-[calc(100vh-10vh-6vh)] bg-gray-100">
{/* Main Content */}
<div className="flex-grow grid grid-cols-2 gap-4 p-4">
{/* Erste Box */}
<div className="border rounded-lg shadow-md p-2 bg-white">
<h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3>
<table className="w-full text-xs text-left ">
<thead className="bg-gray-100 text-gray-700">
<tr>
<th className="px-1 py-1">Eingang</th>
<th className="px-1 py-1">Wert</th>
<th className="px-1 py-1">Bezeichnung</th>
<th className="px-1 py-1 text-center">uW</th>
<th className="px-1 py-1 text-center">uG</th>
<th className="px-1 py-1 text-center">oW</th>
<th className="px-1 py-1 text-center">oG</th>
<th className="px-1 py-1 text-center">Aktion</th>
</tr>
</thead>
<tbody>
{inputs.map((input) => (
<tr key={input.id} className="border-t">
<td className="px-1 py-1">{input.id}</td>
<td className="px-1 py-1">{input.value}</td>
<td className="px-1 py-1">{input.name}</td>
<td className="px-1 py-1 text-center">
<span
className={input.uW ? "text-green-500" : "text-gray-400"}
>
●
</span>
</td>
<td className="px-1 py-1 text-center">
<span
className={input.uG ? "text-green-500" : "text-gray-400"}
>
●
</span>
</td>
<td className="px-1 py-1 text-center">
<span
className={input.oW ? "text-orange-500" : "text-gray-400"}
>
●
</span>
</td>
<td className="px-1 py-1 text-center">
<span
className={input.oG ? "text-green-500" : "text-gray-400"}
>
●
</span>
</td>
<td className="px-1 py-1 text-center">
<button
onClick={() => setActiveConfig(input.id)}
className="text-blue-500 hover:text-blue-700"
>
<iconify-icon icon="mdi:cog-outline"></iconify-icon>
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
{/*Erste Box -> Analoge Eingänge */}
<AnalogeEingaengeComponent />
{/* Zweite Box */}
<div className="border rounded-lg shadow-md p-2 bg-white">