260 lines
7.9 KiB
JavaScript
260 lines
7.9 KiB
JavaScript
"use client";
|
|
import React, { useState } from "react";
|
|
|
|
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 = [
|
|
{
|
|
id: 1,
|
|
value: 1.34,
|
|
name: "Test1",
|
|
uW: true,
|
|
uG: true,
|
|
oW: false,
|
|
oG: true,
|
|
},
|
|
{
|
|
id: 2,
|
|
value: 7.94,
|
|
name: "----",
|
|
uW: true,
|
|
uG: true,
|
|
oW: true,
|
|
oG: true,
|
|
},
|
|
{
|
|
id: 3,
|
|
value: 7.94,
|
|
name: "----",
|
|
uW: false,
|
|
uG: true,
|
|
oW: true,
|
|
oG: true,
|
|
},
|
|
{
|
|
id: 4,
|
|
value: 7.94,
|
|
name: "----",
|
|
uW: true,
|
|
uG: true,
|
|
oW: true,
|
|
oG: true,
|
|
},
|
|
{
|
|
id: 5,
|
|
value: 6.13,
|
|
name: "----",
|
|
uW: true,
|
|
uG: true,
|
|
oW: true,
|
|
oG: true,
|
|
},
|
|
{
|
|
id: 6,
|
|
value: 8.77,
|
|
name: "----",
|
|
uW: true,
|
|
uG: true,
|
|
oW: false,
|
|
oG: true,
|
|
},
|
|
{
|
|
id: 7,
|
|
value: 10.59,
|
|
name: "----",
|
|
uW: true,
|
|
uG: true,
|
|
oW: true,
|
|
oG: true,
|
|
},
|
|
{
|
|
id: 8,
|
|
value: 15.11,
|
|
name: "----",
|
|
uW: true,
|
|
uG: true,
|
|
oW: false,
|
|
oG: true,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<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>
|
|
|
|
{/* Zweite Box */}
|
|
<div className="border rounded-lg shadow-md p-2 bg-white">
|
|
<h3 className="text-sm font-semibold mb-1">Diagramm</h3>
|
|
<p>Diagramm wird hier eingefügt</p>
|
|
</div>
|
|
|
|
{/* Dritte Box */}
|
|
<div className="border rounded-lg shadow-md p-2 bg-white">
|
|
<h3 className="text-sm font-semibold mb-1">XIO-PM 1</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>
|
|
{xioPmInputs.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>
|
|
|
|
{/* Vierte Box */}
|
|
<div className="border rounded-lg shadow-md p-2 bg-white">
|
|
<h3 className="text-sm font-semibold mb-1">XIO-PM 2</h3>
|
|
<p>Inhalt für XIO-PM 2 wird hier eingefügt</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AnalogeEingaenge;
|