80 lines
3.1 KiB
TypeScript
80 lines
3.1 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 laptop:p-4 p-6 bg-white flex flex-col h-full">
|
|
<h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3>
|
|
<div className="overflow-auto flex-grow">
|
|
<table className="table-auto w-full h-full text-sm text-left border-collapse">
|
|
<thead className="bg-gray-100 text-gray-700">
|
|
<tr>
|
|
<th className="px-2 py-1 whitespace-nowrap">Eingang</th>
|
|
<th className="px-2 py-1 whitespace-nowrap">Wert</th>
|
|
<th className="px-2 py-1 whitespace-nowrap">Bezeichnung</th>
|
|
<th className="px-2 py-1 text-center whitespace-nowrap">uW</th>
|
|
<th className="px-2 py-1 text-center whitespace-nowrap">uG</th>
|
|
<th className="px-2 py-1 text-center whitespace-nowrap">oW</th>
|
|
<th className="px-2 py-1 text-center whitespace-nowrap">oG</th>
|
|
<th className="px-2 py-1 text-center whitespace-nowrap">
|
|
Aktion
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-xs text-gray-600">
|
|
{analogInputs.map((input) => (
|
|
<tr key={input.id} className="border-t ">
|
|
<td className="px-2 py-1">{input.id}</td>
|
|
<td className="px-2 py-1">{input.value}</td>
|
|
<td className="px-2 py-1">{input.name}</td>
|
|
<td className="px-2 py-1 text-center">
|
|
<span
|
|
className={input.uW ? "text-green-500" : "text-gray-400"}
|
|
>
|
|
●
|
|
</span>
|
|
</td>
|
|
<td className="px-2 py-1 text-center">
|
|
<span
|
|
className={input.uG ? "text-green-500" : "text-gray-400"}
|
|
>
|
|
●
|
|
</span>
|
|
</td>
|
|
<td className="px-2 py-1 text-center">
|
|
<span
|
|
className={input.oW ? "text-orange-500" : "text-gray-400"}
|
|
>
|
|
●
|
|
</span>
|
|
</td>
|
|
<td className="px-2 py-1 text-center">
|
|
<span
|
|
className={input.oG ? "text-green-500" : "text-gray-400"}
|
|
>
|
|
●
|
|
</span>
|
|
</td>
|
|
<td className="px-2 py-1 text-center">
|
|
<button
|
|
onClick={() => setActiveConfig(input.id)}
|
|
className="text-blue-500 hover:text-blue-700"
|
|
>
|
|
<Icon icon="mdi:cog-outline" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AnalogeEingaengeComponent;
|