109 lines
4.0 KiB
TypeScript
109 lines
4.0 KiB
TypeScript
"use client"; // components/modules/AnalogeEingaengeComponent.tsx
|
|
import React, { useState } from "react";
|
|
import { Icon } from "@iconify/react";
|
|
import { analogInputs } from "../../../data/mockdata/analogInputs";
|
|
|
|
const AnalogeEingaengeComponent = () => {
|
|
const [activeConfig, setActiveConfig] = useState<number | null>(null);
|
|
|
|
return (
|
|
<div className="border rounded-lg shadow-md bg-white flex flex-col h-full p-4 lg:p-6 xl:p-8">
|
|
<h3 className="text-sm lg:text-base xl:text-lg font-semibold mb-2">
|
|
Analoge Eingänge
|
|
</h3>
|
|
|
|
<div className="overflow-auto flex-grow">
|
|
<table className="table-auto w-full text-xs lg:text-sm xl:text-md text-left border-collapse">
|
|
<thead className="bg-gray-100 text-gray-700">
|
|
<tr>
|
|
<th className="px-2 lg:px-3 py-1 lg:py-2 whitespace-nowrap">
|
|
Eingang
|
|
</th>
|
|
<th className="px-2 lg:px-3 py-1 lg:py-2 whitespace-nowrap">
|
|
Wert
|
|
</th>
|
|
<th className="px-2 lg:px-3 py-1 lg:py-2 whitespace-nowrap">
|
|
Bezeichnung
|
|
</th>
|
|
<th className="px-2 lg:px-3 py-1 lg:py-2 text-center">uW</th>
|
|
<th className="px-2 lg:px-3 py-1 lg:py-2 text-center">uG</th>
|
|
<th className="px-2 lg:px-3 py-1 lg:py-2 text-center">oW</th>
|
|
<th className="px-2 lg:px-3 py-1 lg:py-2 text-center">oG</th>
|
|
<th className="px-2 lg:px-3 py-1 lg:py-2 text-center">Aktion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-gray-600">
|
|
{analogInputs.map((input) => (
|
|
<tr
|
|
key={input.id}
|
|
className="border-t hover:bg-gray-50 transition"
|
|
>
|
|
<td className="px-2 lg:px-3 py-1 lg:py-2">{input.id}</td>
|
|
<td className="px-2 lg:px-3 py-1 lg:py-2">{input.value}</td>
|
|
<td className="px-2 lg:px-3 py-1 lg:py-2">{input.name}</td>
|
|
<td className="px-2 lg:px-3 py-1 lg:py-2 text-center">
|
|
<span
|
|
className={
|
|
input.uW
|
|
? "text-green-500 text-lg lg:text-xl"
|
|
: "text-gray-400"
|
|
}
|
|
>
|
|
●
|
|
</span>
|
|
</td>
|
|
<td className="px-2 lg:px-3 py-1 lg:py-2 text-center">
|
|
<span
|
|
className={
|
|
input.uG
|
|
? "text-green-500 text-lg lg:text-xl"
|
|
: "text-gray-400"
|
|
}
|
|
>
|
|
●
|
|
</span>
|
|
</td>
|
|
<td className="px-2 lg:px-3 py-1 lg:py-2 text-center">
|
|
<span
|
|
className={
|
|
input.oW
|
|
? "text-orange-500 text-lg lg:text-xl"
|
|
: "text-gray-400"
|
|
}
|
|
>
|
|
●
|
|
</span>
|
|
</td>
|
|
<td className="px-2 lg:px-3 py-1 lg:py-2 text-center">
|
|
<span
|
|
className={
|
|
input.oG
|
|
? "text-green-500 text-lg lg:text-xl"
|
|
: "text-gray-400"
|
|
}
|
|
>
|
|
●
|
|
</span>
|
|
</td>
|
|
<td className="px-2 lg:px-3 py-1 lg:py-2 text-center">
|
|
<button
|
|
onClick={() => setActiveConfig(input.id)}
|
|
className="text-littwin-blue hover:text-littwin-dark transition"
|
|
>
|
|
<Icon
|
|
icon="mdi:cog-outline"
|
|
className="w-4 lg:w-5 xl:w-6"
|
|
/>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AnalogeEingaengeComponent;
|